From 147d1abaf870243f2a7d77164640d28b22674e19 Mon Sep 17 00:00:00 2001
From: Sergey Savelyev <sergeysav.nn@gmail.com>
Date: Wed, 25 Dec 2024 12:32:36 -0500
Subject: [PATCH] improves performance

---
 frontend/src/components/GraphAxis.vue     |  2 +-
 frontend/src/components/SvgGraph.vue      | 61 +++---------------
 frontend/src/components/TelemetryLine.vue | 47 +++-----------
 frontend/src/components/TimeText.vue      | 78 +++++++++++++++++++++++
 frontend/src/components/ValueLabel.vue    | 62 ++++++++++++++++++
 frontend/src/views/HomeView.vue           | 47 ++++++++++----
 6 files changed, 193 insertions(+), 104 deletions(-)
 create mode 100644 frontend/src/components/TimeText.vue
 create mode 100644 frontend/src/components/ValueLabel.vue

diff --git a/frontend/src/components/GraphAxis.vue b/frontend/src/components/GraphAxis.vue
index 9b588cb..66cde27 100644
--- a/frontend/src/components/GraphAxis.vue
+++ b/frontend/src/components/GraphAxis.vue
@@ -282,7 +282,7 @@ const lines = computed(() => {
 }
 
 .middle_text {
-    alignment-baseline: middle;
+    dominant-baseline: middle;
     font-family: variables.$text-font;
 }
 
diff --git a/frontend/src/components/SvgGraph.vue b/frontend/src/components/SvgGraph.vue
index 8872e12..5e2aef3 100644
--- a/frontend/src/components/SvgGraph.vue
+++ b/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;
 }
 
diff --git a/frontend/src/components/TelemetryLine.vue b/frontend/src/components/TelemetryLine.vue
index e70ecb8..81895e7 100644
--- a/frontend/src/components/TelemetryLine.vue
+++ b/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>
diff --git a/frontend/src/components/TimeText.vue b/frontend/src/components/TimeText.vue
new file mode 100644
index 0000000..de86ceb
--- /dev/null
+++ b/frontend/src/components/TimeText.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+    x: number;
+    y: number;
+    timestamp: number;
+    utc?: boolean
+    show_millis?: boolean
+}>();
+
+// This function is slow
+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}${props.show_millis ? `.${milliseconds}` : ''}${props.utc ? 'Z' : ''}`;
+}
+
+const timetext = computed(() => {
+    return getDateString(new Date(props.timestamp));
+});
+
+</script>
+
+<template>
+    <text
+        :x="props.x"
+        :y="props.y"
+    >
+        {{ timetext }}
+    </text>
+</template>
+
+<style scoped lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/ValueLabel.vue b/frontend/src/components/ValueLabel.vue
new file mode 100644
index 0000000..63780b3
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 6af2e12..9e26264 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -12,24 +12,47 @@ provide(WEBSOCKET_SYMBOL, websocket);
 <template>
     <main>
         <Graph
-            :width="1500"
-            :height="800"
+            :width="800"
+            :height="400"
             :border_top_bottom="24"
             :border_left_right="128"
         >
             <Axis>
                 <Line data="simple_producer/sin"></Line>
+                <Line data="simple_producer/cos4"></Line>
+            </Axis>
+        </Graph>
+        <Graph
+            :width="800"
+            :height="400"
+            :border_top_bottom="24"
+            :border_left_right="128"
+        >
+            <Axis>
+                <Line data="simple_producer/sin2"></Line>
                 <Line data="simple_producer/cos"></Line>
-                <!--                <Line data="simple_producer/sin2"></Line>-->
-                <!--                <Line data="simple_producer/cos2"></Line>-->
-                <!--                <Line data="simple_producer/sin3"></Line>-->
-                <!--                <Line data="simple_producer/cos3"></Line>-->
-                <!--                <Line data="simple_producer/sin4"></Line>-->
-                <!--                <Line data="simple_producer/cos4"></Line>-->
-                <!--                <Line data="simple_producer/sin5"></Line>-->
-                <!--                <Line data="simple_producer/cos5"></Line>-->
-                <!--                <Line data="simple_producer/sin6"></Line>-->
-                <!--                <Line data="simple_producer/cos6"></Line>-->
+            </Axis>
+        </Graph>
+        <Graph
+            :width="800"
+            :height="400"
+            :border_top_bottom="24"
+            :border_left_right="128"
+        >
+            <Axis>
+                <Line data="simple_producer/sin3"></Line>
+                <Line data="simple_producer/cos2"></Line>
+            </Axis>
+        </Graph>
+        <Graph
+            :width="800"
+            :height="400"
+            :border_top_bottom="24"
+            :border_left_right="128"
+        >
+            <Axis>
+                <Line data="simple_producer/sin4"></Line>
+                <Line data="simple_producer/cos3"></Line>
             </Axis>
         </Graph>
     </main>