improved graphing

examples/simple_producer/src/main.rs

@@ -140,13 +140,13 @@ async fn main() -> Result<(), Box<dyn Error>> {
         tokio::time::sleep_until(next_time).await;
         sin_tlm_handle.publish(
             Value::Float32(
-                (f32::TAU() * (index as f32) / (1000.0_f32)).sin()
+                (f32::TAU() * (index as f32) / (1000.0_f32)).sin() + (index as f32) / (1000.0_f32)
             ),
             chrono::Utc::now(),
         ).await?;
         cos_tlm_handle.publish(
             Value::Float64(
-                (f64::TAU() * (index as f64) / (1000.0_f64)).cos()
+                (f64::TAU() * (index as f64) / (1000.0_f64)).cos() + (index as f64) / (1000.0_f64)
             ),
             chrono::Utc::now(),
         ).await?;

frontend/src/components/Axis.vue

@@ -1,24 +1,183 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { computed, inject, provide, ref, toValue, watch } from 'vue'
 import { AXIS_DATA, type AxisData } from '@/graph/axis'
+import { useNow } from '@/composables/ticker'
+import { GRAPH_DATA, type GraphData } from '@/graph/graph'
 
 const props = defineProps<{
     y_limits?: [number, number]
+    disable_x_axis_line?: boolean
 }>();
 
+const minor_tick_length = computed(() => 4);
+const major_tick_length = computed(() => 8);
+const text_offset = computed(() => 5);
+
+const ticker = useNow(33);
+
+const min_y = ref(Infinity);
+const max_y = ref(-Infinity);
+const raw_min_y = ref(Infinity);
+const raw_max_y = ref(-Infinity);
+
+const axis_update_watch = ref(0);
+
+watch([ticker], () => {
+    axis_update_watch.value++;
+    min_y.value = raw_min_y.value;
+    max_y.value = raw_max_y.value;
+    raw_min_y.value = Infinity;
+    raw_max_y.value = -Infinity;
+});
+
+function update_min_y(y: number) {
+    if (y < min_y.value) {
+        min_y.value = y;
+    }
+    if (y < raw_min_y.value) {
+        raw_min_y.value = y;
+    }
+}
+function update_max_y(y: number) {
+    if (y > max_y.value) {
+        max_y.value = y;
+    }
+    if (y > raw_max_y.value) {
+        raw_max_y.value = y;
+    }
+}
+
+const half_diff_y_value = computed(() => (max_y.value - min_y.value) / 2.0);
+const average_y_value = computed(() => min_y.value + half_diff_y_value.value);
+
+const min_y_value = computed(() => {
+    if (props.y_limits) {
+        return props.y_limits[0];
+    }
+    if (max_y.value > min_y.value) {
+        return average_y_value.value - half_diff_y_value.value * 1.05;
+    } else {
+        return -1.0;
+    }
+});
+const max_y_value = computed(() => {
+    if (props.y_limits) {
+        return props.y_limits[1];
+    }
+    if (max_y.value > min_y.value) {
+        return average_y_value.value + half_diff_y_value.value * 1.05;
+    } else {
+        return 1.0;
+    }
+});
+
+const graph_data = inject<GraphData>(GRAPH_DATA)!;
+
+const y_map = (y: number) => {
+    const height = toValue(graph_data.height);
+    const border = toValue(graph_data.border);
+    const diff_y = toValue(max_y_value) - toValue(min_y_value);
+    return height * (1 - (y - toValue(min_y_value)) / diff_y) + border;
+};
+
 provide<AxisData>(AXIS_DATA, {
-    min_y: -1.05,
+    min_y: min_y_value,
-    max_y: 1.05,
+    max_y: max_y_value,
+    axis_update_watch: axis_update_watch,
+    min_y_callback: update_min_y,
+    max_y_callback: update_max_y,
+    y_map: y_map
+});
+
+const lines = computed(() => {
+    const diff_y_val = max_y_value.value - min_y_value.value;
+    const grid_spread = Math.pow(10, Math.floor(Math.log10(diff_y_val)));
+    const major_spread = grid_spread / 2;
+    const minor_spread = major_spread / 2;
+    const minor_ticks = [];
+    const major_ticks = [];
+    const grid_lines = [];
+    for (let i = Math.floor(min_y_value.value / grid_spread); i <= Math.ceil(max_y_value.value / grid_spread); i++) {
+        const y = i * grid_spread;
+        grid_lines.push(y);
+    }
+    for (let i = Math.floor(min_y_value.value / major_spread); i <= Math.ceil(max_y_value.value / major_spread); i++) {
+        const y = i * major_spread;
+        if (grid_lines.indexOf(y) < 0) {
+            major_ticks.push(y);
+        }
+    }
+    for (let i = Math.floor(min_y_value.value / minor_spread); i <= Math.ceil(max_y_value.value / minor_spread); i++) {
+        const y = i * minor_spread;
+        if (grid_lines.indexOf(y) < 0 && major_ticks.indexOf(y) < 0) {
+            minor_ticks.push(y);
+        }
+    }
+    return [minor_ticks, major_ticks, grid_lines];
 });
 
 </script>
 
 <template>
-    <g>
+    <g class="minor_tick">
+        <template v-for="tick of lines[0]" :key="tick">
+            <polyline :points="`${graph_data.x_map(toValue(graph_data.max_x)) - minor_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"></polyline>
+            <text class="right_edge middle_text" :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset" :y="y_map(tick)">{{ tick.toFixed(2) }}</text>
+        </template>
+    </g>
+    <g class="major_tick">
+        <template v-for="tick of lines[1]" :key="tick">
+            <polyline :points="`${graph_data.x_map(toValue(graph_data.max_x)) - major_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"></polyline>
+            <text class="right_edge middle_text" :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset" :y="y_map(tick)">{{ tick.toFixed(1) }}</text>
+        </template>
+    </g>
+    <g class="grid_tick">
+        <template v-for="tick of lines[2]" :key="tick">
+            <polyline :points="`${graph_data.x_map(toValue(graph_data.min_x))},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.max_x))},${y_map(tick)}`"></polyline>
+            <text class="right_edge middle_text" :x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset" :y="y_map(tick)">{{ tick.toFixed(0) }}</text>
+        </template>
+    </g>
+    <g clip-path="url(#content)">
         <slot></slot>
     </g>
 </template>
 
 <style scoped lang="scss">
 
+.x_axis {
+    fill: #FFFFFF;
+    stroke: #FFFFFF;
+    color: #FFFFFF;
+}
+
+.right_edge {
+    text-anchor: start;
+}
+
+.middle_text {
+    alignment-baseline: middle;
+    font-family: Helvetica, sans-serif;
+}
+
+.minor_tick {
+    stroke: #666666;
+    stroke-width: 1px;
+    fill: #666666;
+    color: #666666;
+}
+
+.major_tick {
+    stroke: #AAAAAA;
+    stroke-width: 1px;
+    fill: #AAAAAA;
+    color: #AAAAAA;
+}
+
+.grid_tick {
+    stroke: #FFFFFF;
+    stroke-width: 1px;
+    fill: #FFFFFF;
+    color: #FFFFFF;
+}
+
 </style>

frontend/src/components/Graph.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
-import { computed, provide } from 'vue'
+import { computed, provide, toValue } from 'vue'
 import { useNow } from '@/composables/ticker'
 import { GRAPH_DATA, type GraphData } from '@/graph/graph'
 
 const props = defineProps<{
     width: number
     height: number
-    // min_t?: number
+    border?: number
-    // max_t?: number
+    // min_x?: number
+    // max_x?: number
 }>();
 
 const svg_viewbox = computed(() => {
@@ -16,25 +17,91 @@ const svg_viewbox = computed(() => {
 const now = useNow(33);
 const window_duration = 30 * 1000; // 30 seconds
 
-const min_x = computed(() => now.value - window_duration);
+const time_lines = [
+    1, // 1ms
+    10, // 10ms
+    100, // 100ms
+    1000, // 1s
+    5000, // 5s
+    10000, // 10s
+    30000, // 30s
+    60000, // 1m
+    300000, // 5m
+    6000000, // 10m
+    18000000, // 30m
+    36000000, // 1h
+    144000000, // 4h
+    216000000, // 6h
+    432000000, // 12h
+    864000000, // 1d
+    6048000000, // 1w
+];
+time_lines.reverse();
+const text_offset = computed(() => 5);
+
+const border = computed(() => props.border || 0);
+
+const max_x = now;
+const min_x = computed(() => max_x.value - window_duration);
+
+const x_map = (x: number) => {
+    const diff_x = max_x.value - min_x.value;
+    return (props.width - border.value) * (x - min_x.value) / diff_x;
+};
 
 provide<GraphData>(GRAPH_DATA, {
+    border: border,
     min_x: min_x,
     max_x: now,
-    width: () => props.width,
+    width: () => props.width - 2 * border.value,
-    height: () => props.height,
+    height: () => props.height - 2 * border.value,
+    x_map: x_map
+});
+
+const lines = computed(() => {
+    const diff_x = max_x.value - min_x.value;
+    let duration = time_lines.find((duration) => diff_x / duration >= 3)!;
+    const result = [];
+    for (let i = Math.floor(max_x.value / duration); i >= Math.ceil(min_x.value / duration) - 5; i--) {
+        const x = i * duration;
+        result.push(x);
+    }
+    return result;
 });
 
 </script>
 
 <template>
     <svg :viewBox="svg_viewbox" :width="props.width" :height="props.height">
+        <defs>
+            <clipPath id="content">
+                <rect :x="0" :y="border" :width="width - border" :height="height - border * 2"></rect>
+            </clipPath>
+        </defs>
+        <g class="time_tick">
+            <template v-for="tick of lines" :key="tick">
+                <polyline :points="`${x_map(tick)},${border} ${x_map(tick)},${height - border}`"></polyline>
+                <text class="bottom_edge" :transform="`translate(${x_map(tick)},${height - border + text_offset}) rotate(0)`">{{ new Date(tick).toLocaleString() }}</text>
+            </template>
+        </g>
         <slot></slot>
     </svg>
 </template>
 
 <style scoped lang="scss">
-svg {
+
-    border: white 1px solid;
+.bottom_edge {
+    text-anchor: middle;
+    alignment-baseline: text-before-edge;
+    font-family: Helvetica, sans-serif;
 }
+
+.time_tick {
+    stroke: #FFFFFF;
+    stroke-width: 1px;
+    fill: #FFFFFF;
+    color: #FFFFFF;
+    font-size: 16px;
+}
+
 </style>

frontend/src/components/Line.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useTelemetry } from '@/composables/telemetry'
-import { computed, inject, shallowRef, type ShallowRef, toValue, useId, watch } from 'vue'
+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'
@@ -19,6 +19,9 @@ let 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);
+
 let memo = shallowRef<TelemetryDataItem[]>([]);
 watch([value], ([val]) => {
     const min_x = toValue(graph_data.min_x);
@@ -28,7 +31,28 @@ watch([value], ([val]) => {
             new_memo.pop();
         }
         memo.value = new_memo;
+        let min_val = Infinity;
+        let max_val = -Infinity;
+        for (let 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
 });
 
 let points = computed(() => {
@@ -37,26 +61,15 @@ let points = computed(() => {
         return "";
     }
 
-    const max_x = toValue(graph_data.max_x);
+    let last_x = graph_data.x_map(toValue(graph_data.max_x));
-    const min_x = toValue(graph_data.min_x);
+    let last_t = toValue(graph_data.max_x) + smoothing_distance;
-    const diff_x = max_x - min_x;
-
-    const max_y = toValue(axis_data.max_y);
-    const min_y = toValue(axis_data.min_y);
-    const diff_y = max_y - min_y;
-
-    const width = toValue(graph_data.width);
-    const height = toValue(graph_data.height);
-
-    let last_x = width;
-    let last_t = Math.max(max_x, Date.now());
 
     for (let data_item of memo.value) {
         const t = Date.parse(data_item.timestamp);
         const v = data_item.value[data.value.data_type];
-        const x = width * (t - min_x) / diff_x;
+        const x = graph_data.x_map(t);
+        const y = axis_data.y_map(v);
 
-        const y = height * (1 - (v - min_y) / diff_y);
         if (last_t - t < smoothing_distance) {
             points += ` ${x},${y}`;
         } else {
@@ -71,8 +84,6 @@ let points = computed(() => {
     return points;
 });
 
-console.log(useId());
-
 </script>
 
 <template>

frontend/src/graph/axis.ts

@@ -1,7 +1,12 @@
 import type { MaybeRefOrGetter } from '@vue/reactivity'
+import type { Ref } from 'vue'
 
 export const AXIS_DATA = Symbol()
 export interface AxisData {
     min_y: MaybeRefOrGetter<number>;
     max_y: MaybeRefOrGetter<number>;
+    axis_update_watch: Ref<number>;
+    max_y_callback: (y: number) => void;
+    min_y_callback: (y: number) => void;
+    y_map: (y: number) => number;
 }

frontend/src/graph/graph.ts

@@ -3,8 +3,10 @@ import type { MaybeRefOrGetter } from '@vue/reactivity'
 export const GRAPH_DATA = Symbol()
 
 export interface GraphData {
+    border: MaybeRefOrGetter<number>;
     min_x: MaybeRefOrGetter<number>;
     max_x: MaybeRefOrGetter<number>;
     width: MaybeRefOrGetter<number>;
     height: MaybeRefOrGetter<number>;
+    x_map: (x: number) => number;
 }

frontend/src/views/HomeView.vue

@@ -12,7 +12,7 @@ provide(WEBSOCKET_SYMBOL, websocket);
 
 <template>
     <main>
-        <Graph :width=1500 :height=800>
+        <Graph :width=1500 :height=800 :border="48">
             <Axis>
                 <Line data="simple_producer/sin" color="#FF0000"></Line>
                 <Line data="simple_producer/cos" color="#00FF00"></Line>

server/src/http.rs

@@ -9,7 +9,7 @@ use serde::{Deserialize, Serialize};
 use tokio::select;
 use tokio_util::sync::CancellationToken;
 use tonic::codegen::tokio_stream::StreamExt;
-use crate::telemetry::{TelemetryDataItem, TelemetryDataValue, TelemetryManagementService};
+use crate::telemetry::{TelemetryDataItem, TelemetryManagementService};
 
 #[derive(Debug, Display, Error)]
 enum UserError {

server/src/telemetry.rs

@@ -2,12 +2,11 @@ use std::collections::HashMap;
 use std::error::Error;
 use std::fmt::Formatter;
 use std::sync::Arc;
-use chrono::{DateTime, Utc};
 use log::trace;
 use serde::de::Visitor;
 use serde::{Deserialize, Deserializer, Serialize, Serializer};
 use tokio::sync::Mutex;
-use crate::core::{TelemetryDataType, TelemetryDefinitionRequest, TelemetryItem, Timestamp, Uuid};
+use crate::core::{TelemetryDataType, TelemetryDefinitionRequest, Uuid};
 
 fn tlm_data_type_serialzier<S>(tlm_data_type: &TelemetryDataType, serializer: S) -> Result<S::Ok, S::Error> where S: Serializer {
     serializer.serialize_str(tlm_data_type.as_str_name())