improves performance

frontend/src/components/ValueLabel.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { computed, ref, useTemplateRef, watch, watchPostEffect } from 'vue';
+import { useNow } from '@/composables/ticker';
+
+const props = defineProps<{
+    x: number;
+    y: number;
+    value: number;
+}>();
+
+const background_offset = computed(() => 5);
+const y_offset = computed(() => 9);
+
+const labelRef = useTemplateRef<SVGTextElement>('label-ref');
+
+const value_text = computed(() => {
+    return props.value.toFixed(2);
+});
+
+const label_width = ref(0);
+
+watch([value_text, labelRef], ([_, label]) => {
+    label_width.value = label?.getBBox().width || 0;
+}, {
+    flush: 'post',
+});
+
+</script>
+
+<template>
+    <rect
+        :x="x - background_offset"
+        :y="y - y_offset - background_offset"
+        :width="label_width + background_offset * 2"
+        :height="16 + background_offset * 2"
+    ></rect>
+    <text
+        ref="label-ref"
+        :x="x"
+        :y="y"
+    >
+        {{ value_text }}
+    </text>
+</template>
+
+<style scoped lang="scss">
+@use '@/assets/variables';
+
+rect {
+    fill: variables.$background-color;
+    stroke-width: 1px;
+    stroke: var(--indexed-color);
+}
+
+text {
+    font-family: variables.$text-font;
+    text-anchor: start;
+    stroke: var(--indexed-color);
+    fill: var(--indexed-color);
+    dominant-baseline: middle;
+}
+</style>