add graph legends

frontend/src/components/SvgGraph.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, provide, ref } from 'vue';
 import { useNow } from '@/composables/ticker';
-import { GRAPH_DATA, type GraphData } from '@/graph/graph';
+import { GRAPH_DATA, type GraphData, GraphSide } from '@/graph/graph';
 import TimeText from '@/components/TimeText.vue';
 
 const props = defineProps<{
@@ -13,6 +13,7 @@ const props = defineProps<{
     right_axis?: boolean;
     hide_time_labels?: boolean;
     hide_time_ticks?: boolean;
+    legend?: GraphSide;
 }>();
 
 const width = computed(() => {
@@ -62,8 +63,9 @@ const time_lines = [
 time_lines.reverse();
 const text_offset = computed(() => 5);
 
-const border_left = computed(() => props.left_axis ? 96 : 0);
-const border_right = computed(() => props.right_axis ? 80 : 0);
+const legend_width = 160;
+const border_left = computed(() => (props.left_axis ? 96 : 0) + (props.legend == GraphSide.Left ? legend_width : 0));
+const border_right = computed(() => (props.right_axis ? 80 : 0) + (props.legend == GraphSide.Right ? legend_width : 0));
 const border_top = computed(() => 6);
 const border_bottom = computed(() => props.hide_time_labels ? 6 : 24);
 
@@ -81,6 +83,13 @@ const x_map = (x: number) => {
 
 const telemetry_lines = ref([]);
 
+const legend_enabled = computed(() => props.legend === GraphSide.Left || props.legend === GraphSide.Right);
+const legend_x = computed(() => (props.legend === GraphSide.Left) ? (8) : (width.value - legend_width + 8));
+const legend_y = computed(() => border_top.value);
+const legend_x_stride = computed(() => 0);
+const legend_y_stride = computed(() => 16);
+const legend_width_output = computed(() => legend_width - 8);
+
 provide<GraphData>(GRAPH_DATA, {
     border_top: border_top,
     min_x: min_x,
@@ -90,6 +99,12 @@ provide<GraphData>(GRAPH_DATA, {
     x_map: x_map,
     lines: telemetry_lines,
     max_update_rate: 1000 / 10,
+    legend_enabled: legend_enabled,
+    legend_x: legend_x,
+    legend_y: legend_y,
+    legend_x_stride: legend_x_stride,
+    legend_y_stride: legend_y_stride,
+    legend_width: legend_width_output,
 });
 
 const line_duration = computed(() => {