improve numeric labeling

frontend/src/components/ValueLabel.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, useTemplateRef, watch } from 'vue';
+import NumericText from '@/components/NumericText.vue';
 
 const props = defineProps<{
     x: number;
@@ -12,10 +13,7 @@ const y_offset = computed(() => 9);
 
 const labelRef = useTemplateRef<SVGTextElement>('label-ref');
 
-const value_text = computed(() => {
-    return props.value.toFixed(2);
-});
-
+const value_text = ref("");
 const label_width = ref(0);
 
 watch(
@@ -27,6 +25,10 @@ watch(
         flush: 'post',
     },
 );
+
+function update_value_text(text: string) {
+    value_text.value = text;
+}
 </script>
 
 <template>
@@ -37,7 +39,7 @@ watch(
         :height="16 + background_offset * 2"
     ></rect>
     <text ref="label-ref" :x="x" :y="y">
-        {{ value_text }}
+        <NumericText :value="value" :max_width="6" @update="update_value_text"></NumericText>
     </text>
 </template>