improves performance

frontend/src/components/SvgGraph.vue

@@ -2,6 +2,7 @@
 import { computed, provide, ref } from 'vue';
 import { useNow } from '@/composables/ticker';
 import { GRAPH_DATA, type GraphData } from '@/graph/graph';
+import TimeText from '@/components/TimeText.vue';
 
 const props = defineProps<{
     width: number;
@@ -82,7 +83,7 @@ provide<GraphData>(GRAPH_DATA, {
 
 const duration = computed(() => {
     const diff_x = max_x.value - min_x.value;
-    return time_lines.find((duration) => diff_x / duration >= 3)!;
+    return time_lines.find((duration) => diff_x / duration >= 2)!;
 });
 
 const lines = computed(() => {
@@ -97,54 +98,6 @@ const lines = computed(() => {
     }
     return result;
 });
-
-function getDateString(date: Date) {
-    const year = props.utc ? date.getUTCFullYear() : date.getFullYear();
-    const month = (
-        (props.utc ? date.getMonth() : date.getMonth()) + 1
-    ).toLocaleString('en-US', {
-        minimumIntegerDigits: 2,
-        useGrouping: false,
-        maximumFractionDigits: 0,
-    });
-    const day = (props.utc ? date.getUTCDate() : date.getDate()).toLocaleString(
-        'en-US',
-        {
-            minimumIntegerDigits: 2,
-            useGrouping: false,
-            maximumFractionDigits: 0,
-        },
-    );
-    const hour = (
-        props.utc ? date.getUTCHours() : date.getHours()
-    ).toLocaleString('en-US', {
-        minimumIntegerDigits: 2,
-        useGrouping: false,
-        maximumFractionDigits: 0,
-    });
-    const minute = (
-        props.utc ? date.getUTCMinutes() : date.getMinutes()
-    ).toLocaleString('en-US', {
-        minimumIntegerDigits: 2,
-        useGrouping: false,
-        maximumFractionDigits: 0,
-    });
-    const second = (
-        props.utc ? date.getUTCSeconds() : date.getSeconds()
-    ).toLocaleString('en-US', {
-        minimumIntegerDigits: 2,
-        useGrouping: false,
-        maximumFractionDigits: 0,
-    });
-    const milliseconds = (
-        props.utc ? date.getUTCMilliseconds() : date.getMilliseconds()
-    ).toLocaleString('en-US', {
-        minimumIntegerDigits: 3,
-        useGrouping: false,
-        maximumFractionDigits: 0,
-    });
-    return `${year}/${month}/${day} ${hour}:${minute}:${second}${duration.value < 1000 ? `.${milliseconds}` : ''}${props.utc ? 'Z' : ''}`;
-}
 </script>
 
 <template>
@@ -180,13 +133,15 @@ function getDateString(date: Date) {
                 <polyline
                     :points="`${x_map(tick)},${border_top_bottom} ${x_map(tick)},${height - border_top_bottom}`"
                 ></polyline>
-                <text
+                <TimeText
                     class="bottom_edge"
                     :x="x_map(tick)"
                     :y="height - border_top_bottom + text_offset"
+                    :timestamp="tick"
+                    :utc="props.utc"
+                    :show_millis="duration < 1000"
                 >
-                    {{ getDateString(new Date(tick)) }}
-                </text>
+                </TimeText>
             </template>
         </g>
         <slot></slot>
@@ -198,7 +153,7 @@ function getDateString(date: Date) {
 
 .bottom_edge {
     text-anchor: middle;
-    alignment-baseline: text-before-edge;
+    dominant-baseline: hanging;
     font-family: variables.$text-font;
 }