improved css

frontend/src/components/TelemetryLine.vue

@@ -7,6 +7,7 @@ import {
     shallowRef,
     type ShallowRef,
     toValue,
+    useTemplateRef,
     watch,
 } from 'vue';
 import {
@@ -24,6 +25,9 @@ const props = defineProps<{
 
 const smoothing_distance = 0.15 * 1000;
 
+const text_offset = computed(() => 10);
+const background_offset = computed(() => 5);
+
 const { data } = useTelemetry(() => props.data);
 const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
 const value = websocket.value.listen_to_telemetry(data);
@@ -106,6 +110,27 @@ const points = computed(() => {
     }
     return points;
 });
+
+const labelRef = useTemplateRef<SVGTextElement>('label-ref');
+const current_value = computed(() => {
+    const val = value.value;
+    if (val) {
+        return val.value[data.value!.data_type] as number;
+    }
+    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>
@@ -116,6 +141,42 @@ const points = computed(() => {
         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>
 </template>
 
-<style></style>
+<style scoped lang="scss">
+@use '@/assets/variables';
+
+text {
+    alignment-baseline: middle;
+    font-family: variables.$text-font;
+    text-anchor: start;
+}
+
+rect {
+    fill: variables.$background-color;
+    stroke-width: 1px;
+}
+</style>