diff --git a/frontend/src/components/SvgGraph.vue b/frontend/src/components/SvgGraph.vue index c5dac83..01421cd 100644 --- a/frontend/src/components/SvgGraph.vue +++ b/frontend/src/components/SvgGraph.vue @@ -198,6 +198,8 @@ const show_data_at_time = computed(() => { } }); +const should_fade = ref(false); + provide(GRAPH_DATA, { border_top: border_top, min_x: min_x, @@ -216,6 +218,7 @@ provide(GRAPH_DATA, { legend_y_stride: legend_y_stride, legend_width: legend_width_output, cursor_time: show_data_at_time, + should_fade: (value) => (should_fade.value = value), }); @@ -286,7 +289,9 @@ provide(GRAPH_DATA, { > - + + + 10); const min_sep = computed(() => @@ -152,8 +153,8 @@ watch([graph_data.min_x, graph_data.max_x], ([min_x, max_x]) => { if (min_x) { while ( - memo.value.data.length > 1 && - memo.value.data[0].x < toValue(min_x) + memo.value.data.length > 2 && + memo.value.data[1].x < toValue(min_x) ) { memo.value.data.shift(); memo_changed = true; @@ -161,8 +162,8 @@ watch([graph_data.min_x, graph_data.max_x], ([min_x, max_x]) => { } if (max_x) { while ( - memo.value.data.length > 1 && - memo.value.data[memo.value.data.length - 1].x > toValue(max_x) + memo.value.data.length > 2 && + memo.value.data[memo.value.data.length - 2].x > toValue(max_x) ) { memo.value.data.pop(); memo_changed = true; @@ -171,8 +172,8 @@ watch([graph_data.min_x, graph_data.max_x], ([min_x, max_x]) => { if (memo_changed) { let min_val = Infinity; let max_val = -Infinity; - for (const item of memo.value.data) { - const item_val = item.y; + for (let i = 1; i < memo.value.data.length; i++) { + const item_val = memo.value.data[i].y; min_val = Math.min(min_val, item_val); max_val = Math.max(max_val, item_val); } @@ -318,50 +319,95 @@ function onCloseLegend() { }, 1); } } + +const legend_moused_over = ref(false); + +function onMouseEnter(event: MouseEvent) { + if (event.target == event.currentTarget) { + legend_moused_over.value = true; + graph_data.should_fade(true); + } +} + +function onMouseExit(event: MouseEvent) { + if (event.target == event.currentTarget) { + legend_moused_over.value = false; + graph_data.should_fade(false); + } +}