logarithmic graph

frontend/src/components/TelemetryLine.vue

@@ -0,0 +1,120 @@
+<script setup lang="ts">
+import { useTelemetry } from '@/composables/telemetry'
+import {
+  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'
+
+const props = defineProps<{
+  data: string
+  color: string
+}>()
+
+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 graph_data = inject<GraphData>(GRAPH_DATA)!
+const axis_data = inject<AxisData>(AXIS_DATA)!
+
+const min = ref(Infinity)
+const max = ref(-Infinity)
+
+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()
+    }
+    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,
+  },
+)
+
+watch(
+  [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}`
+    }
+    last_x = x
+    last_t = t
+    if (last_x <= 0.0) {
+      break
+    }
+  }
+  return points
+})
+</script>
+
+<template>
+  <polyline
+    fill="none"
+    :stroke="color"
+    stroke-width="1"
+    :points="points"
+  ></polyline>
+</template>
+
+<style></style>