improves performance

frontend/src/components/TelemetryLine.vue

@@ -9,7 +9,6 @@ import {
     shallowRef,
     type ShallowRef,
     toValue,
-    useTemplateRef,
     watch,
 } from 'vue';
 import {
@@ -19,6 +18,7 @@ import {
 } from '@/composables/websocket';
 import { GRAPH_DATA, type GraphData } from '@/graph/graph';
 import { AXIS_DATA, type AxisData } from '@/graph/axis';
+import ValueLabel from '@/components/ValueLabel.vue';
 
 const props = defineProps<{
     data: string;
@@ -28,7 +28,6 @@ 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)!;
@@ -127,6 +126,7 @@ watch(
     },
 );
 
+// This function is somewhat slow
 const points = computed(() => {
     let points = '';
     if (memo.value.length == 0 || data.value == null) {
@@ -156,7 +156,6 @@ const points = computed(() => {
     return points;
 });
 
-const labelRef = useTemplateRef<SVGTextElement>('label-ref');
 const current_value = computed(() => {
     const val = value.value;
     if (val) {
@@ -173,27 +172,13 @@ const current_value = computed(() => {
             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)"
-            >
-                {{ max.toFixed(2) }}
-                {{ min.toFixed(2) }}
-            </text>
-        </template>
+        <ValueLabel
+            v-if="current_value"
+            :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
+            :y="axis_data.y_map(current_value)"
+            :value="current_value"
+        >
+        </ValueLabel>
     </g>
 </template>
 
@@ -204,18 +189,4 @@ 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>