sergeysav/telemetry_visualization
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improved graphing

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-03 21:00:31 -08:00
parent 3eafc20e9d
commit 1fb3ef02db
9 changed files with 279 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
frontend/src/components/Axis.vue
View File

@@ -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,
max_y: 1.05,
min_y: min_y_value,
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>

83
frontend/src/components/Graph.vue
View File

@@ -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
// max_t?: number
border?: 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,
height: () => props.height,
width: () => props.width - 2 * border.value,
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>

47
frontend/src/components/Line.vue
View File

@@ -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,35 +31,45 @@ 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(() => {
let points = "";
if (memo.value.length == 0 || data.value == null) {
return "";
}
const max_x = toValue(graph_data.max_x);
const min_x = toValue(graph_data.min_x);
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());
let last_x = graph_data.x_map(toValue(graph_data.max_x));
let last_t = toValue(graph_data.max_x) + smoothing_distance;
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>