change format settings

frontend/src/components/TelemetryLine.vue

@@ -1,120 +1,121 @@
 <script setup lang="ts">
-import { useTelemetry } from '@/composables/telemetry'
+import { useTelemetry } from '@/composables/telemetry';
 import {
-  computed,
-  inject,
-  ref,
-  shallowRef,
-  type ShallowRef,
-  toValue,
-  watch,
-} from 'vue'
+    computed,
+    inject,
+    ref,
+    shallowRef,
+    type ShallowRef,
+    toValue,
+    watch,
+} from 'vue';
 import {
-  type TelemetryDataItem,
-  WEBSOCKET_SYMBOL,
-  type WebsocketHandle,
-} from '@/composables/websocket'
-import { GRAPH_DATA, type GraphData } from '@/graph/graph'
-import { AXIS_DATA, type AxisData } from '@/graph/axis'
+    type TelemetryDataItem,
+    WEBSOCKET_SYMBOL,
+    type WebsocketHandle,
+} from '@/composables/websocket';
+import { GRAPH_DATA, type GraphData } from '@/graph/graph';
+import { AXIS_DATA, type AxisData } from '@/graph/axis';
 
 const props = defineProps<{
-  data: string
-  color: string
-}>()
+    data: string;
+    color: string;
+}>();
 
-const smoothing_distance = 0.15 * 1000
+const smoothing_distance = 0.15 * 1000;
 
-const { data } = useTelemetry(() => props.data)
-const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!
-const value = websocket.value.listen_to_telemetry(data)
+const { data } = useTelemetry(() => props.data);
+const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
+const value = websocket.value.listen_to_telemetry(data);
 
-const graph_data = inject<GraphData>(GRAPH_DATA)!
-const axis_data = inject<AxisData>(AXIS_DATA)!
+const graph_data = inject<GraphData>(GRAPH_DATA)!;
+const axis_data = inject<AxisData>(AXIS_DATA)!;
 
-const min = ref(Infinity)
-const max = ref(-Infinity)
+const min = ref(Infinity);
+const max = ref(-Infinity);
 
-const memo = shallowRef<TelemetryDataItem[]>([])
+const memo = shallowRef<TelemetryDataItem[]>([]);
 watch([value], ([val]) => {
-  const min_x = toValue(graph_data.min_x)
-  if (val) {
-    const new_memo = [val].concat(memo.value)
-    while (
-      new_memo.length > 2 &&
-      Date.parse(new_memo[new_memo.length - 2].timestamp) < min_x
-    ) {
-      new_memo.pop()
+    const min_x = toValue(graph_data.min_x);
+    if (val) {
+        const new_memo = [val].concat(memo.value);
+        while (
+            new_memo.length > 2 &&
+            Date.parse(new_memo[new_memo.length - 2].timestamp) < min_x
+        ) {
+            new_memo.pop();
+        }
+        memo.value = new_memo;
+        let min_val = Infinity;
+        let max_val = -Infinity;
+        for (const item of new_memo) {
+            const item_val = item.value[data.value!.data_type] as number;
+            min_val = Math.min(min_val, item_val);
+            max_val = Math.max(max_val, item_val);
+        }
+        max.value = max_val;
+        min.value = min_val;
     }
-    memo.value = new_memo
-    let min_val = Infinity
-    let max_val = -Infinity
-    for (const item of new_memo) {
-      const item_val = item.value[data.value!.data_type] as number
-      min_val = Math.min(min_val, item_val)
-      max_val = Math.max(max_val, item_val)
-    }
-    max.value = max_val
-    min.value = min_val
-  }
-})
+});
 
 watch(
-  [min, axis_data.axis_update_watch],
-  ([min_val]) => {
-    axis_data.min_y_callback(min_val)
-  },
-  {
-    immediate: true,
-  },
-)
+    [min, axis_data.axis_update_watch],
+    ([min_val]) => {
+        axis_data.min_y_callback(min_val);
+    },
+    {
+        immediate: true,
+    },
+);
 
 watch(
-  [max, axis_data.axis_update_watch],
-  ([max_val]) => {
-    axis_data.max_y_callback(max_val)
-  },
-  {
-    immediate: true,
-  },
-)
+    [max, axis_data.axis_update_watch],
+    ([max_val]) => {
+        axis_data.max_y_callback(max_val);
+    },
+    {
+        immediate: true,
+    },
+);
 
 const points = computed(() => {
-  let points = ''
-  if (memo.value.length == 0 || data.value == null) {
-    return ''
-  }
-
-  let last_x = graph_data.x_map(toValue(graph_data.max_x))
-  let last_t = toValue(graph_data.max_x) + smoothing_distance
-
-  for (const data_item of memo.value) {
-    const t = Date.parse(data_item.timestamp)
-    const v = data_item.value[data.value.data_type]
-    const x = graph_data.x_map(t)
-    const y = axis_data.y_map(v)
-
-    if (last_t - t < smoothing_distance) {
-      points += ` ${x},${y}`
-    } else {
-      points += ` ${last_x},${y} ${x},${y}`
+    let points = '';
+    if (memo.value.length == 0 || data.value == null) {
+        return '';
     }
-    last_x = x
-    last_t = t
-    if (last_x <= 0.0) {
-      break
+
+    let last_x = graph_data.x_map(toValue(graph_data.max_x));
+    let last_t = toValue(graph_data.max_x) + smoothing_distance;
+
+    for (const data_item of memo.value) {
+        const t = Date.parse(data_item.timestamp);
+        const v = data_item.value[data.value.data_type];
+        const x = graph_data.x_map(t);
+        const y = axis_data.y_map(v);
+
+        if (last_t - t < smoothing_distance) {
+            points += ` ${x},${y}`;
+        } else {
+            points += ` ${last_x},${y} ${x},${y}`;
+        }
+        last_x = x;
+        last_t = t;
+        if (last_x <= 0.0) {
+            break;
+        }
     }
-  }
-  return points
-})
+    return points;
+});
 </script>
 
 <template>
-  <polyline
-    fill="none"
-    :stroke="color"
-    stroke-width="1"
-    :points="points"
-  ></polyline>
+    <polyline
+        fill="none"
+        clip-path="url(#content)"
+        :stroke="color"
+        stroke-width="1"
+        :points="points"
+    ></polyline>
 </template>
 
 <style></style>