add graph legends

frontend/src/components/TelemetryLine.vue

@@ -31,6 +31,8 @@ const props = defineProps<{
 
 const smoothing_distance_x = 5;
 const maximum_minimum_separation_live = 100; // ms
+const legend_line_length = 8;
+const legend_text_offset = 4;
 
 const text_offset = computed(() => 10);
 const min_sep = computed(() => Math.min(props.minimum_separation || 0, maximum_minimum_separation_live));
@@ -247,6 +249,30 @@ const current_value = computed(() => {
     }
     return undefined;
 });
+
+const legend_x = computed(() => {
+    return toValue(graph_data.legend_x) + toValue(graph_data.legend_x_stride) * index.value;
+});
+
+const legend_y = computed(() => {
+    return toValue(graph_data.legend_y) + toValue(graph_data.legend_y_stride) * index.value;
+});
+
+const legend_text = computed(() => {
+    const max_chars = (toValue(graph_data.legend_width) - legend_line_length - legend_text_offset * 2) / 7;
+    const start_text = props.data;
+    if (start_text.length > max_chars) {
+        return start_text.substring(0, 3) + "..." + start_text.substring(start_text.length - max_chars + 6);
+    }
+    return start_text;
+});
+
+const legend_line = computed(() => {
+    let x = legend_x.value;
+    let y = legend_y.value;
+    return `${x},${y} ${x + legend_line_length},${y}`;
+});
+
 </script>
 
 <template>
@@ -265,6 +291,17 @@ const current_value = computed(() => {
             :value="current_value"
         >
         </ValueLabel>
+        <template v-if="toValue(graph_data.legend_enabled)">
+            <polyline
+                fill="none"
+                :points="legend_line"
+            ></polyline>
+            <text
+                :x="legend_x + legend_line_length + legend_text_offset"
+                :y="legend_y">
+                {{ legend_text }}
+            </text>
+        </template>
     </g>
 </template>
 
@@ -275,4 +312,14 @@ polyline {
     stroke-width: 1px;
     stroke: var(--indexed-color);
 }
+
+text {
+    font-family: variables.$monospace-text-font;
+    text-anchor: start;
+    stroke: variables.$text-color;
+    fill: variables.$text-color;
+    dominant-baseline: middle;
+    font-size: variables.$small-monospace-text-size;
+}
+
 </style>