more lines

frontend/src/components/SvgGraph.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue';
+import { computed, provide, ref } from 'vue';
 import { useNow } from '@/composables/ticker';
 import { GRAPH_DATA, type GraphData } from '@/graph/graph';
 
@@ -8,8 +8,7 @@ const props = defineProps<{
     height: number;
     border_left_right?: number;
     border_top_bottom?: number;
-    // min_x?: number
-    // max_x?: number
+    utc?: boolean;
 }>();
 
 const width = computed(() => {
@@ -20,9 +19,6 @@ const height = computed(() => {
     return props.height;
 });
 
-// const svg_viewbox = computed(() => {
-//     return `0 0 ${props.width} ${props.height}`;
-// });
 const now = useNow(33);
 const window_duration = 10 * 1000; // 10 seconds
 
@@ -72,6 +68,8 @@ const x_map = (x: number) => {
     );
 };
 
+const telemetry_lines = ref([]);
+
 provide<GraphData>(GRAPH_DATA, {
     border_top_bottom: border_top_bottom,
     min_x: min_x,
@@ -79,26 +77,78 @@ provide<GraphData>(GRAPH_DATA, {
     width: () => width.value - 2 * border_left_right.value,
     height: () => height.value - 2 * border_top_bottom.value,
     x_map: x_map,
+    lines: telemetry_lines,
+});
+
+const duration = computed(() => {
+    const diff_x = max_x.value - min_x.value;
+    return time_lines.find((duration) => diff_x / duration >= 3)!;
 });
 
 const lines = computed(() => {
-    const diff_x = max_x.value - min_x.value;
-    const duration = time_lines.find((duration) => diff_x / duration >= 3)!;
     const result = [];
     for (
-        let i = Math.ceil(max_x.value / duration);
-        i >= Math.ceil(min_x.value / duration) - 5;
+        let i = Math.ceil(max_x.value / duration.value);
+        i >= Math.ceil(min_x.value / duration.value) - 5;
         i--
     ) {
-        const x = i * duration;
+        const x = i * duration.value;
         result.push(x);
     }
     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>
-    <svg ref="svg_graph" :width="width" :height="height">
+    <svg ref="svg_graph" class="graph" :width="width" :height="height">
         <defs>
             <clipPath id="content">
                 <rect
@@ -135,7 +185,7 @@ const lines = computed(() => {
                     :x="x_map(tick)"
                     :y="height - border_top_bottom + text_offset"
                 >
-                    {{ new Date(tick).toLocaleString() }}
+                    {{ getDateString(new Date(tick)) }}
                 </text>
             </template>
         </g>