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

change format settings

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-04 20:00:18 -08:00
parent 07b585f956
commit 4c2b0f454b
14 changed files with 691 additions and 665 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/.prettierrc.json
View File

@@ -1,7 +1,8 @@
{ {
"$schema": "https://json.schemastore.org/prettierrc", "$schema": "https://json.schemastore.org/prettierrc",
"semi": false, "semi": true,
"singleQuote": true, "singleQuote": true,
"arrowParens": "avoid" "arrowParens": "always",
"tabWidth": 4
} }

4
frontend/src/App.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterView } from 'vue-router' import { RouterView } from 'vue-router';
</script> </script>
<template> <template>
<RouterView /> <RouterView />
</template> </template>

16
frontend/src/assets/main.scss
View File

@@ -5,12 +5,12 @@ $text-color: $light-gray;
$background-color: $dark-gray; $background-color: $dark-gray;
body { body {
color: $text-color; color: $text-color;
background-color: $background-color; background-color: $background-color;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-content: center; align-content: center;
min-height: 100vh; min-height: 100vh;
} }

496
frontend/src/components/GraphAxis.vue
View File

@@ -1,303 +1,321 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, inject, provide, ref, toValue, watch } from 'vue' import { computed, inject, provide, ref, toValue, watch } from 'vue';
import { AXIS_DATA, type AxisData, AxisSide, AxisType } from '@/graph/axis' import { AXIS_DATA, type AxisData, AxisSide, AxisType } from '@/graph/axis';
import { useNow } from '@/composables/ticker' import { useNow } from '@/composables/ticker';
import { GRAPH_DATA, type GraphData } from '@/graph/graph' import { GRAPH_DATA, type GraphData } from '@/graph/graph';
const props = defineProps<{ const props = defineProps<{
y_limits?: [number, number] y_limits?: [number, number];
side?: AxisSide side?: AxisSide;
type?: AxisType type?: AxisType;
}>() }>();
const minor_tick_length = computed(() => 4) const minor_tick_length = computed(() => 4);
const major_tick_length = computed(() => 8) const major_tick_length = computed(() => 8);
const text_offset = computed(() => 5) const text_offset = computed(() => 5);
const side = computed(() => props.side || AxisSide.Right) const side = computed(() => props.side || AxisSide.Right);
const type = computed(() => props.type || AxisType.Linear) const type = computed(() => props.type || AxisType.Linear);
const ticker_locations = [Math.log10(1), Math.log10(2), Math.log10(5)] const ticker_locations = [Math.log10(1), Math.log10(2), Math.log10(5)];
ticker_locations.reverse() ticker_locations.reverse();
const ticker = useNow(33) const ticker = useNow(33);
const min_y = ref(Infinity) const min_y = ref(Infinity);
const max_y = ref(-Infinity) const max_y = ref(-Infinity);
const raw_min_y = ref(Infinity) const raw_min_y = ref(Infinity);
const raw_max_y = ref(-Infinity) const raw_max_y = ref(-Infinity);
const axis_update_watch = ref(0) const axis_update_watch = ref(0);
watch([ticker], () => { watch([ticker], () => {
axis_update_watch.value++ axis_update_watch.value++;
min_y.value = raw_min_y.value min_y.value = raw_min_y.value;
max_y.value = raw_max_y.value max_y.value = raw_max_y.value;
raw_min_y.value = Infinity raw_min_y.value = Infinity;
raw_max_y.value = -Infinity raw_max_y.value = -Infinity;
}) });
function update_min_y(y: number) { function update_min_y(y: number) {
if (y < min_y.value) { if (y < min_y.value) {
min_y.value = y min_y.value = y;
} }
if (y < raw_min_y.value) { if (y < raw_min_y.value) {
raw_min_y.value = y raw_min_y.value = y;
} }
} }
function update_max_y(y: number) { function update_max_y(y: number) {
if (y > max_y.value) { if (y > max_y.value) {
max_y.value = y max_y.value = y;
} }
if (y > raw_max_y.value) { if (y > raw_max_y.value) {
raw_max_y.value = y raw_max_y.value = y;
} }
} }
// const half_diff_y_value = computed(() => (max_y.value - min_y.value) / 2.0); // 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 average_y_value = computed(() => min_y.value + half_diff_y_value.value);
const min_y_value = computed(() => { const min_y_value = computed(() => {
if (props.y_limits) { if (props.y_limits) {
return props.y_limits[0] return props.y_limits[0];
}
if (type.value == AxisType.Linear) {
if (max_y.value > min_y.value) {
const half_diff_y_value = (max_y.value - min_y.value) / 2.0
const average_y_value = min_y.value + half_diff_y_value
return average_y_value - half_diff_y_value * 1.05
} else {
return -1.0
} }
} else { if (type.value == AxisType.Linear) {
if (max_y.value > min_y.value) { if (max_y.value > min_y.value) {
const half_diff_y_value = const half_diff_y_value = (max_y.value - min_y.value) / 2.0;
(Math.log(max_y.value) - Math.log(min_y.value)) / 2.0 const average_y_value = min_y.value + half_diff_y_value;
const average_y_value = Math.log(min_y.value) + half_diff_y_value return average_y_value - half_diff_y_value * 1.05;
return Math.exp(average_y_value - half_diff_y_value * 1.05) } else {
return -1.0;
}
} else { } else {
return 0.0 if (max_y.value > min_y.value) {
const half_diff_y_value =
(Math.log(max_y.value) - Math.log(min_y.value)) / 2.0;
const average_y_value = Math.log(min_y.value) + half_diff_y_value;
return Math.exp(average_y_value - half_diff_y_value * 1.05);
} else {
return 0.0;
}
} }
} });
})
const max_y_value = computed(() => { const max_y_value = computed(() => {
if (props.y_limits) { if (props.y_limits) {
return props.y_limits[1] return props.y_limits[1];
}
if (type.value == AxisType.Linear) {
if (max_y.value > min_y.value) {
const half_diff_y_value = (max_y.value - min_y.value) / 2.0
const average_y_value = min_y.value + half_diff_y_value
return average_y_value + half_diff_y_value * 1.05
} else {
return 1.0
} }
} else { if (type.value == AxisType.Linear) {
if (max_y.value > min_y.value) { if (max_y.value > min_y.value) {
const half_diff_y_value = const half_diff_y_value = (max_y.value - min_y.value) / 2.0;
(Math.log(max_y.value) - Math.log(min_y.value)) / 2.0 const average_y_value = min_y.value + half_diff_y_value;
const average_y_value = Math.log(min_y.value) + half_diff_y_value return average_y_value + half_diff_y_value * 1.05;
return Math.exp(average_y_value + half_diff_y_value * 1.05) } else {
return 1.0;
}
} else { } else {
return 1.0 if (max_y.value > min_y.value) {
const half_diff_y_value =
(Math.log(max_y.value) - Math.log(min_y.value)) / 2.0;
const average_y_value = Math.log(min_y.value) + half_diff_y_value;
return Math.exp(average_y_value + half_diff_y_value * 1.05);
} else {
return 1.0;
}
} }
} });
})
const graph_data = inject<GraphData>(GRAPH_DATA)! const graph_data = inject<GraphData>(GRAPH_DATA)!;
const y_map = (y: number) => { const y_map = (y: number) => {
const height = toValue(graph_data.height) const height = toValue(graph_data.height);
const border_top_bottom = toValue(graph_data.border_top_bottom) const border_top_bottom = toValue(graph_data.border_top_bottom);
let max_value = toValue(max_y_value) let max_value = toValue(max_y_value);
let min_value = toValue(min_y_value) let min_value = toValue(min_y_value);
let y_value = y let y_value = y;
if (type.value == AxisType.Logarithmic) { if (type.value == AxisType.Logarithmic) {
max_value = Math.log(max_value) max_value = Math.log(max_value);
min_value = Math.log(min_value) min_value = Math.log(min_value);
y_value = Math.log(y_value) y_value = Math.log(y_value);
} }
const diff_y = max_value - min_value const diff_y = max_value - min_value;
return height * (1 - (y_value - min_value) / diff_y) + border_top_bottom return height * (1 - (y_value - min_value) / diff_y) + border_top_bottom;
} };
provide<AxisData>(AXIS_DATA, { provide<AxisData>(AXIS_DATA, {
axis_update_watch: axis_update_watch, axis_update_watch: axis_update_watch,
min_y_callback: update_min_y, min_y_callback: update_min_y,
max_y_callback: update_max_y, max_y_callback: update_max_y,
y_map: y_map, y_map: y_map,
}) });
const lines = computed(() => { const lines = computed(() => {
const diff_y_val = (max_y_value.value - min_y_value.value) / 2 const diff_y_val = (max_y_value.value - min_y_value.value) / 2;
const diff_log10 = Math.log10(diff_y_val) const diff_log10 = Math.log10(diff_y_val);
const diff_log10_fraction = diff_log10 - Math.floor(diff_log10) const diff_log10_fraction = diff_log10 - Math.floor(diff_log10);
const ticker_location = ticker_locations.find( const ticker_location = ticker_locations.find(
location => location < diff_log10_fraction, (location) => location < diff_log10_fraction,
)! )!;
const grid_spread = Math.pow(10, Math.floor(diff_log10) + ticker_location) const grid_spread = Math.pow(10, Math.floor(diff_log10) + ticker_location);
const major_spread = grid_spread / 2 const major_spread = grid_spread / 2;
const minor_spread = major_spread / 2 const minor_spread = major_spread / 2;
const minor_ticks = [] const minor_ticks = [];
const major_ticks = [] const major_ticks = [];
const grid_lines = [] const grid_lines = [];
for ( for (
let i = Math.floor(min_y_value.value / grid_spread); let i = Math.floor(min_y_value.value / grid_spread);
i <= Math.ceil(max_y_value.value / grid_spread); i <= Math.ceil(max_y_value.value / grid_spread);
i++ i++
) { ) {
const y = i * grid_spread const y = i * grid_spread;
grid_lines.push(y) 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 (
for ( let i = Math.floor(min_y_value.value / major_spread);
let i = Math.floor(min_y_value.value / minor_spread); i <= Math.ceil(max_y_value.value / major_spread);
i <= Math.ceil(max_y_value.value / minor_spread); i++
i++ ) {
) { const y = i * major_spread;
const y = i * minor_spread if (grid_lines.indexOf(y) < 0) {
if (grid_lines.indexOf(y) < 0 && major_ticks.indexOf(y) < 0) { major_ticks.push(y);
minor_ticks.push(y) }
} }
} for (
return [minor_ticks, major_ticks, grid_lines] 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> </script>
<template> <template>
<template v-if="side == AxisSide.Right"> <template v-if="side == AxisSide.Right">
<g class="minor_tick" clip-path="url(#y_ticker)"> <g class="minor_tick" clip-path="url(#y_ticker)">
<template v-for="tick of lines[0]" :key="tick"> <template v-for="tick of lines[0]" :key="tick">
<polyline <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)}`" :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> ></polyline>
<text <text
class="right_edge middle_text" class="right_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset" :x="
:y="y_map(tick)" graph_data.x_map(toValue(graph_data.max_x)) +
>{{ tick.toFixed(2) }}</text text_offset
> "
</template> :y="y_map(tick)"
>{{ tick.toFixed(2) }}</text
>
</template>
</g>
<g class="major_tick" clip-path="url(#y_ticker)">
<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" clip-path="url(#y_ticker)">
<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>
</template>
<template v-if="side == AxisSide.Left">
<g class="minor_tick" clip-path="url(#y_ticker)">
<template v-for="tick of lines[0]" :key="tick">
<polyline
:points="`${graph_data.x_map(toValue(graph_data.min_x)) + minor_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.min_x))},${y_map(tick)}`"
></polyline>
<text
class="left_edge middle_text"
:x="
graph_data.x_map(toValue(graph_data.min_x)) -
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(2) }}</text
>
</template>
</g>
<g class="major_tick" clip-path="url(#y_ticker)">
<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="left_edge middle_text"
:x="
graph_data.x_map(toValue(graph_data.min_x)) -
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(1) }}</text
>
</template>
</g>
<g class="grid_tick" clip-path="url(#y_ticker)">
<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="left_edge middle_text"
:x="
graph_data.x_map(toValue(graph_data.min_x)) -
text_offset
"
:y="y_map(tick)"
>{{ tick.toFixed(0) }}</text
>
</template>
</g>
</template>
<g>
<slot></slot>
</g> </g>
<g class="major_tick" clip-path="url(#y_ticker)">
<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" clip-path="url(#y_ticker)">
<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>
</template>
<template v-if="side == AxisSide.Left">
<g class="minor_tick" clip-path="url(#y_ticker)">
<template v-for="tick of lines[0]" :key="tick">
<polyline
:points="`${graph_data.x_map(toValue(graph_data.min_x)) + minor_tick_length},${y_map(tick)} ${graph_data.x_map(toValue(graph_data.min_x))},${y_map(tick)}`"
></polyline>
<text
class="left_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
:y="y_map(tick)"
>{{ tick.toFixed(2) }}</text
>
</template>
</g>
<g class="major_tick" clip-path="url(#y_ticker)">
<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="left_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
:y="y_map(tick)"
>{{ tick.toFixed(1) }}</text
>
</template>
</g>
<g class="grid_tick" clip-path="url(#y_ticker)">
<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="left_edge middle_text"
:x="graph_data.x_map(toValue(graph_data.min_x)) - text_offset"
:y="y_map(tick)"
>{{ tick.toFixed(0) }}</text
>
</template>
</g>
</template>
<g clip-path="url(#content)">
<slot></slot>
</g>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.x_axis { .x_axis {
fill: #ffffff; fill: #ffffff;
stroke: #ffffff; stroke: #ffffff;
color: #ffffff; color: #ffffff;
} }
.right_edge { .right_edge {
text-anchor: start; text-anchor: start;
} }
.left_edge { .left_edge {
text-anchor: end; text-anchor: end;
} }
.middle_text { .middle_text {
alignment-baseline: middle; alignment-baseline: middle;
font-family: Helvetica, sans-serif; font-family: Helvetica, sans-serif;
} }
.minor_tick { .minor_tick {
stroke: #666666; stroke: #666666;
stroke-width: 1px; stroke-width: 1px;
fill: #666666; fill: #666666;
color: #666666; color: #666666;
} }
.major_tick { .major_tick {
stroke: #aaaaaa; stroke: #aaaaaa;
stroke-width: 1px; stroke-width: 1px;
fill: #aaaaaa; fill: #aaaaaa;
color: #aaaaaa; color: #aaaaaa;
} }
.grid_tick { .grid_tick {
stroke: #ffffff; stroke: #ffffff;
stroke-width: 1px; stroke-width: 1px;
fill: #ffffff; fill: #ffffff;
color: #ffffff; color: #ffffff;
} }
</style> </style>

229
frontend/src/components/SvgGraph.vue
View File

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

189
frontend/src/components/TelemetryLine.vue
View File

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

40
frontend/src/composables/telemetry.ts
View File

@@ -1,29 +1,29 @@
import { ref, toValue, watchEffect } from 'vue' import { ref, toValue, watchEffect } from 'vue';
import { type MaybeRefOrGetter } from 'vue' import { type MaybeRefOrGetter } from 'vue';
export interface TelemetryDefinition { export interface TelemetryDefinition {
uuid: string uuid: string;
name: string name: string;
data_type: string data_type: string;
} }
export function useTelemetry(name: MaybeRefOrGetter<string>) { export function useTelemetry(name: MaybeRefOrGetter<string>) {
const data = ref<TelemetryDefinition | null>(null) const data = ref<TelemetryDefinition | null>(null);
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
const error = ref<any | null>(null) const error = ref<any | null>(null);
watchEffect(async () => { watchEffect(async () => {
const name_value = toValue(name) const name_value = toValue(name);
try { try {
const res = await fetch(`/api/tlm/${name_value}`) const res = await fetch(`/api/tlm/${name_value}`);
data.value = await res.json() data.value = await res.json();
error.value = null error.value = null;
} catch (e) { } catch (e) {
data.value = null data.value = null;
error.value = e error.value = e;
} }
}) });
return { data, error } return { data, error };
} }

28
frontend/src/composables/ticker.ts
View File

@@ -1,19 +1,19 @@
import { onMounted, onUnmounted, ref, shallowRef } from 'vue' import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
export function useNow(update_ms: number) { export function useNow(update_ms: number) {
const handle = shallowRef<number | undefined>(undefined) const handle = shallowRef<number | undefined>(undefined);
const now = ref(Date.now()) const now = ref(Date.now());
onMounted(() => { onMounted(() => {
handle.value = setInterval(() => { handle.value = setInterval(() => {
now.value = Date.now() now.value = Date.now();
}, update_ms) }, update_ms);
}) });
onUnmounted(() => { onUnmounted(() => {
if (handle.value) { if (handle.value) {
clearInterval(handle.value) clearInterval(handle.value);
} }
}) });
return now return now;
} }

231
frontend/src/composables/websocket.ts
View File

@@ -1,138 +1,143 @@
import { import {
computed, computed,
type MaybeRefOrGetter, type MaybeRefOrGetter,
onMounted, onMounted,
onUnmounted, onUnmounted,
ref, ref,
type Ref, type Ref,
shallowRef, shallowRef,
toValue, toValue,
watch, watch,
} from 'vue' } from 'vue';
import type { TelemetryDefinition } from '@/composables/telemetry' import type { TelemetryDefinition } from '@/composables/telemetry';
export interface TelemetryDataItem { export interface TelemetryDataItem {
// eslint-disable-next-line @typescript-eslint/no-explicit-any // eslint-disable-next-line @typescript-eslint/no-explicit-any
value: any value: any;
timestamp: string timestamp: string;
} }
interface TlmValue { interface TlmValue {
uuid: string uuid: string;
value: TelemetryDataItem value: TelemetryDataItem;
} }
export class WebsocketHandle { export class WebsocketHandle {
websocket: WebSocket | null websocket: WebSocket | null;
should_be_connected: boolean should_be_connected: boolean;
connected: Ref<boolean> connected: Ref<boolean>;
on_telem_value: Map<string, Array<(value: TelemetryDataItem) => void>> on_telem_value: Map<string, Array<(value: TelemetryDataItem) => void>>;
constructor() { constructor() {
this.websocket = null this.websocket = null;
this.should_be_connected = false this.should_be_connected = false;
this.connected = ref(false) this.connected = ref(false);
this.on_telem_value = new Map() this.on_telem_value = new Map();
}
connect() {
this.should_be_connected = true
if (this.websocket != null) {
return
} }
this.websocket = new WebSocket( connect() {
location.protocol.replace('http', 'ws') + '//' + location.host + '/ws', this.should_be_connected = true;
) if (this.websocket != null) {
this.websocket.addEventListener('open', () => { return;
this.connected.value = true
})
this.websocket.addEventListener('close', () => {
if (this.should_be_connected) {
this.disconnect()
setTimeout(() => {
this.connect()
}, 1000)
}
})
this.websocket.addEventListener('error', () => {
if (this.should_be_connected) {
this.disconnect()
setTimeout(() => {
this.connect()
}, 1000)
}
})
this.websocket.addEventListener('message', event => {
const message = JSON.parse(event.data)
if (message['TlmValue']) {
const tlm_value = message['TlmValue'] as TlmValue
const listeners = this.on_telem_value.get(tlm_value.uuid)
if (listeners) {
listeners.forEach(listener => {
listener(tlm_value.value)
})
} }
}
})
}
disconnect() { this.websocket = new WebSocket(
this.should_be_connected = false location.protocol.replace('http', 'ws') +
if (this.websocket == null) { '//' +
return location.host +
'/ws',
);
this.websocket.addEventListener('open', () => {
this.connected.value = true;
});
this.websocket.addEventListener('close', () => {
if (this.should_be_connected) {
this.disconnect();
setTimeout(() => {
this.connect();
}, 1000);
}
});
this.websocket.addEventListener('error', () => {
if (this.should_be_connected) {
this.disconnect();
setTimeout(() => {
this.connect();
}, 1000);
}
});
this.websocket.addEventListener('message', (event) => {
const message = JSON.parse(event.data);
if (message['TlmValue']) {
const tlm_value = message['TlmValue'] as TlmValue;
const listeners = this.on_telem_value.get(tlm_value.uuid);
if (listeners) {
listeners.forEach((listener) => {
listener(tlm_value.value);
});
}
}
});
} }
this.connected.value = false disconnect() {
this.websocket.close() this.should_be_connected = false;
this.websocket = null if (this.websocket == null) {
this.on_telem_value.clear() return;
}
listen_to_telemetry(telemetry: MaybeRefOrGetter<TelemetryDefinition | null>) {
const value_result = ref<TelemetryDataItem | null>(null)
const uuid = computed(() => {
const tlm = toValue(telemetry)
if (tlm) {
return tlm.uuid
}
return null
})
watch([uuid, this.connected], ([uuid_value, connected]) => {
if (connected && uuid_value) {
this.websocket?.send(
JSON.stringify({
RegisterTlmListener: {
uuid: uuid_value,
},
}),
)
if (!this.on_telem_value.has(uuid_value)) {
this.on_telem_value.set(uuid_value, [])
} }
this.on_telem_value.get(uuid_value)?.push(value => {
value_result.value = value
})
}
})
return value_result this.connected.value = false;
} this.websocket.close();
this.websocket = null;
this.on_telem_value.clear();
}
listen_to_telemetry(
telemetry: MaybeRefOrGetter<TelemetryDefinition | null>,
) {
const value_result = ref<TelemetryDataItem | null>(null);
const uuid = computed(() => {
const tlm = toValue(telemetry);
if (tlm) {
return tlm.uuid;
}
return null;
});
watch([uuid, this.connected], ([uuid_value, connected]) => {
if (connected && uuid_value) {
this.websocket?.send(
JSON.stringify({
RegisterTlmListener: {
uuid: uuid_value,
},
}),
);
if (!this.on_telem_value.has(uuid_value)) {
this.on_telem_value.set(uuid_value, []);
}
this.on_telem_value.get(uuid_value)?.push((value) => {
value_result.value = value;
});
}
});
return value_result;
}
} }
export const WEBSOCKET_SYMBOL = Symbol() export const WEBSOCKET_SYMBOL = Symbol();
export function useWebsocket() { export function useWebsocket() {
const handle = shallowRef<WebsocketHandle>(new WebsocketHandle()) const handle = shallowRef<WebsocketHandle>(new WebsocketHandle());
onMounted(() => { onMounted(() => {
handle.value.connect() handle.value.connect();
}) });
onUnmounted(() => { onUnmounted(() => {
handle.value.disconnect() handle.value.disconnect();
}) });
return handle return handle;
} }

22
frontend/src/graph/axis.ts
View File

@@ -1,20 +1,20 @@
import type { Ref } from 'vue' import type { Ref } from 'vue';
export enum AxisSide { export enum AxisSide {
Right, Right,
Left, Left,
Hidden, Hidden,
} }
export enum AxisType { export enum AxisType {
Linear, Linear,
Logarithmic, Logarithmic,
} }
export const AXIS_DATA = Symbol() export const AXIS_DATA = Symbol();
export interface AxisData { export interface AxisData {
axis_update_watch: Ref<number> axis_update_watch: Ref<number>;
max_y_callback: (y: number) => void max_y_callback: (y: number) => void;
min_y_callback: (y: number) => void min_y_callback: (y: number) => void;
y_map: (y: number) => number y_map: (y: number) => number;
} }

16
frontend/src/graph/graph.ts
View File

@@ -1,12 +1,12 @@
import type { MaybeRefOrGetter } from 'vue' import type { MaybeRefOrGetter } from 'vue';
export const GRAPH_DATA = Symbol() export const GRAPH_DATA = Symbol();
export interface GraphData { export interface GraphData {
border_top_bottom: MaybeRefOrGetter<number> border_top_bottom: MaybeRefOrGetter<number>;
min_x: MaybeRefOrGetter<number> min_x: MaybeRefOrGetter<number>;
max_x: MaybeRefOrGetter<number> max_x: MaybeRefOrGetter<number>;
width: MaybeRefOrGetter<number> width: MaybeRefOrGetter<number>;
height: MaybeRefOrGetter<number> height: MaybeRefOrGetter<number>;
x_map: (x: number) => number x_map: (x: number) => number;
} }

14
frontend/src/main.ts
View File

@@ -1,11 +1,11 @@
import './assets/main.scss' import './assets/main.scss';
import { createApp } from 'vue' import { createApp } from 'vue';
import App from './App.vue' import App from './App.vue';
import router from './router' import router from './router';
const app = createApp(App) const app = createApp(App);
app.use(router) app.use(router);
app.mount('#app') app.mount('#app');

22
frontend/src/router/index.ts
View File

@@ -1,14 +1,14 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
routes: [ routes: [
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: () => import('../views/HomeView.vue'), component: () => import('../views/HomeView.vue'),
}, },
], ],
}) });
export default router export default router;

40
frontend/src/views/HomeView.vue
View File

@@ -1,28 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket' import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
import { provide } from 'vue' import { provide } from 'vue';
import Graph from '@/components/SvgGraph.vue' import Graph from '@/components/SvgGraph.vue';
import Axis from '@/components/GraphAxis.vue' import Axis from '@/components/GraphAxis.vue';
import Line from '@/components/TelemetryLine.vue' import Line from '@/components/TelemetryLine.vue';
const websocket = useWebsocket() const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket) provide(WEBSOCKET_SYMBOL, websocket);
</script> </script>
<template> <template>
<main> <main>
<Graph <Graph
:width="1500" :width="1500"
:height="800" :height="800"
:border_top_bottom="24" :border_top_bottom="24"
:border_left_right="64" :border_left_right="64"
> >
<Axis> <Axis>
<Line data="simple_producer/sin" color="#FF0000"></Line> <Line data="simple_producer/sin" color="#FF0000"></Line>
<Line data="simple_producer/cos" color="#00FF00"></Line> <Line data="simple_producer/cos" color="#00FF00"></Line>
</Axis> </Axis>
</Graph> </Graph>
</main> </main>
</template> </template>
<style></style> <style></style>