more lines

frontend/src/components/TelemetryLine.vue

@@ -3,6 +3,8 @@ import { useTelemetry } from '@/composables/telemetry';
 import {
     computed,
     inject,
+    onMounted,
+    onUnmounted,
     ref,
     shallowRef,
     type ShallowRef,
@@ -20,7 +22,7 @@ import { AXIS_DATA, type AxisData } from '@/graph/axis';
 
 const props = defineProps<{
     data: string;
-    color: string;
+    class?: string;
 }>();
 
 const smoothing_distance = 0.15 * 1000;
@@ -38,6 +40,19 @@ const axis_data = inject<AxisData>(AXIS_DATA)!;
 const min = ref(Infinity);
 const max = ref(-Infinity);
 
+const line = ref(Symbol());
+const index = computed(() => {
+    return graph_data.lines.value.indexOf(line.value);
+});
+onMounted(() => {
+    graph_data.lines.value.push(line.value);
+});
+onUnmounted(() => {
+    graph_data.lines.value = graph_data.lines.value.filter(
+        (x) => x != line.value,
+    );
+});
+
 const memo = shallowRef<TelemetryDataItem[]>([]);
 watch([value], ([val]) => {
     const min_x = toValue(graph_data.min_x);
@@ -119,64 +134,57 @@ const current_value = computed(() => {
     }
     return undefined;
 });
-
-const test = computed(() => {
-    if (labelRef.value) {
-        const boundingBox = labelRef.value.getBBox();
-        return boundingBox.top;
-    }
-    return undefined;
-});
-
-watch([test], (x) => {
-    console.log(x);
-});
 </script>
 
 <template>
-    <polyline
-        fill="none"
-        clip-path="url(#content)"
-        :stroke="color"
-        stroke-width="1"
-        :points="points"
-    ></polyline>
-    <template v-if="current_value">
-        <rect
-            v-if="labelRef"
-            :x="
-                graph_data.x_map(toValue(graph_data.max_x)) +
-                text_offset -
-                background_offset
-            "
-            :y="axis_data.y_map(current_value) - 9 - background_offset"
-            :width="labelRef.getBBox().width + background_offset * 2"
-            :height="16 + background_offset * 2"
-            :stroke="color"
-        ></rect>
-        <text
-            ref="label-ref"
-            :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
-            :y="axis_data.y_map(current_value)"
-            :fill="color"
-            :stroke="color"
-        >
-            {{ current_value.toFixed(2) }}
-        </text>
-    </template>
+    <g :class="`indexed-color color-${index}`">
+        <polyline
+            fill="none"
+            clip-path="url(#content)"
+            :points="points"
+        ></polyline>
+        <template v-if="current_value">
+            <rect
+                v-if="labelRef"
+                :x="
+                    graph_data.x_map(toValue(graph_data.max_x)) +
+                    text_offset -
+                    background_offset
+                "
+                :y="axis_data.y_map(current_value) - 9 - background_offset"
+                :width="labelRef.getBBox().width + background_offset * 2"
+                :height="16 + background_offset * 2"
+            ></rect>
+            <text
+                ref="label-ref"
+                :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
+                :y="axis_data.y_map(current_value)"
+            >
+                {{ current_value.toFixed(2) }}
+            </text>
+        </template>
+    </g>
 </template>
 
 <style scoped lang="scss">
 @use '@/assets/variables';
 
-text {
-    alignment-baseline: middle;
-    font-family: variables.$text-font;
-    text-anchor: start;
+polyline {
+    stroke-width: 1px;
+    stroke: var(--indexed-color);
 }
 
 rect {
     fill: variables.$background-color;
     stroke-width: 1px;
+    stroke: var(--indexed-color);
+}
+
+text {
+    alignment-baseline: middle;
+    font-family: variables.$text-font;
+    text-anchor: start;
+    stroke: var(--indexed-color);
+    fill: var(--indexed-color);
 }
 </style>