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

logarithmic graph

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-03 23:06:47 -08:00
parent 1fb3ef02db
commit 07b585f956
16 changed files with 758 additions and 554 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
examples/simple_producer/src/main.rs
View File

@@ -66,7 +66,6 @@ impl Telemetry {
tokio::time::sleep(Duration::from_secs(1)).await; tokio::time::sleep(Duration::from_secs(1)).await;
} }
} }
()
}); });
Ok(Self { Ok(Self {
@@ -140,13 +139,13 @@ async fn main() -> Result<(), Box<dyn Error>> {
tokio::time::sleep_until(next_time).await; tokio::time::sleep_until(next_time).await;
sin_tlm_handle.publish( sin_tlm_handle.publish(
Value::Float32( Value::Float32(
(f32::TAU() * (index as f32) / (1000.0_f32)).sin() + (index as f32) / (1000.0_f32) (f32::TAU() * (index as f32) / (1000.0_f32)).sin()
), ),
chrono::Utc::now(), chrono::Utc::now(),
).await?; ).await?;
cos_tlm_handle.publish( cos_tlm_handle.publish(
Value::Float64( Value::Float64(
(f64::TAU() * (index as f64) / (1000.0_f64)).cos() + (index as f64) / (1000.0_f64) (f64::TAU() * (index as f64) / (1000.0_f64)).cos()
), ),
chrono::Utc::now(), chrono::Utc::now(),
).await?; ).await?;

2
frontend/src/App.vue
View File

@@ -4,4 +4,4 @@ import { RouterView } from 'vue-router'
<template> <template>
<RouterView /> <RouterView />
</template> </template>

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

@@ -1,4 +1,3 @@
$light-gray: #d0d1d0; $light-gray: #d0d1d0;
$dark-gray: #303031; $dark-gray: #303031;

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

@@ -1,183 +0,0 @@
<script setup lang="ts">
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: 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 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>

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

@@ -1,107 +0,0 @@
<script setup lang="ts">
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
border?: number
// min_x?: number
// max_x?: number
}>();
const svg_viewbox = computed(() => {
return `0 0 ${props.width} ${props.height}`;
})
const now = useNow(33);
const window_duration = 30 * 1000; // 30 seconds
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 - 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">
.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>

303
frontend/src/components/GraphAxis.vue Normal file
View File

@@ -0,0 +1,303 @@
<script setup lang="ts">
import { computed, inject, provide, ref, toValue, watch } from 'vue'
import { AXIS_DATA, type AxisData, AxisSide, AxisType } from '@/graph/axis'
import { useNow } from '@/composables/ticker'
import { GRAPH_DATA, type GraphData } from '@/graph/graph'
const props = defineProps<{
y_limits?: [number, number]
side?: AxisSide
type?: AxisType
}>()
const minor_tick_length = computed(() => 4)
const major_tick_length = computed(() => 8)
const text_offset = computed(() => 5)
const side = computed(() => props.side || AxisSide.Right)
const type = computed(() => props.type || AxisType.Linear)
const ticker_locations = [Math.log10(1), Math.log10(2), Math.log10(5)]
ticker_locations.reverse()
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 (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 (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(() => {
if (props.y_limits) {
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 (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 y_map = (y: number) => {
const height = toValue(graph_data.height)
const border_top_bottom = toValue(graph_data.border_top_bottom)
let max_value = toValue(max_y_value)
let min_value = toValue(min_y_value)
let y_value = y
if (type.value == AxisType.Logarithmic) {
max_value = Math.log(max_value)
min_value = Math.log(min_value)
y_value = Math.log(y_value)
}
const diff_y = max_value - min_value
return height * (1 - (y_value - min_value) / diff_y) + border_top_bottom
}
provide<AxisData>(AXIS_DATA, {
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) / 2
const diff_log10 = Math.log10(diff_y_val)
const diff_log10_fraction = diff_log10 - Math.floor(diff_log10)
const ticker_location = ticker_locations.find(
location => location < diff_log10_fraction,
)!
const grid_spread = Math.pow(10, Math.floor(diff_log10) + ticker_location)
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>
<template v-if="side == AxisSide.Right">
<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.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" 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>
<style scoped lang="scss">
.x_axis {
fill: #ffffff;
stroke: #ffffff;
color: #ffffff;
}
.right_edge {
text-anchor: start;
}
.left_edge {
text-anchor: end;
}
.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>

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

@@ -1,95 +0,0 @@
<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, error } = useTelemetry(() => props.data);
const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
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);
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 (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 "";
}
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 = 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>

141
frontend/src/components/SvgGraph.vue Normal file
View File

@@ -0,0 +1,141 @@
<script setup lang="ts">
import { computed, provide } from 'vue'
import { useNow } from '@/composables/ticker'
import { GRAPH_DATA, type GraphData } from '@/graph/graph'
const props = defineProps<{
width: number
height: number
border_left_right?: number
border_top_bottom?: number
// min_x?: number
// max_x?: number
}>()
const svg_viewbox = computed(() => {
return `0 0 ${props.width} ${props.height}`
})
const now = useNow(33)
const window_duration = 30 * 1000 // 30 seconds
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_left_right = computed(() => props.border_left_right || 0)
const border_top_bottom = computed(() => props.border_top_bottom || 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 - 2 * border_left_right.value) * (x - min_x.value)) / diff_x +
border_left_right.value
)
}
provide<GraphData>(GRAPH_DATA, {
border_top_bottom: border_top_bottom,
min_x: min_x,
max_x: now,
width: () => props.width - 2 * border_left_right.value,
height: () => props.height - 2 * border_top_bottom.value,
x_map: x_map,
})
const lines = computed(() => {
const diff_x = max_x.value - min_x.value
const duration = time_lines.find(duration => diff_x / duration >= 3)!
const result = []
for (
let i = Math.ceil(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="border_left_right"
:y="border_top_bottom"
:width="width - border_left_right * 2"
:height="height - border_top_bottom * 2"
></rect>
</clipPath>
<clipPath id="y_ticker">
<rect
:x="0"
:y="border_top_bottom"
:width="width"
:height="height - border_top_bottom * 2"
></rect>
</clipPath>
<clipPath id="x_ticker">
<rect
:x="border_left_right"
:y="0"
:width="width - border_left_right * 2"
:height="height"
></rect>
</clipPath>
</defs>
<g class="time_tick" clip-path="url(#x_ticker)">
<template v-for="tick of lines" :key="tick">
<polyline
:points="`${x_map(tick)},${border_top_bottom} ${x_map(tick)},${height - border_top_bottom}`"
></polyline>
<text
class="bottom_edge"
:transform="`translate(${x_map(tick)},${height - border_top_bottom + text_offset}) rotate(0)`"
>
{{ new Date(tick).toLocaleString() }}
</text>
</template>
</g>
<slot></slot>
</svg>
</template>
<style scoped lang="scss">
.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>

120
frontend/src/components/TelemetryLine.vue Normal file
View File

@@ -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>

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

@@ -1,28 +1,29 @@
import { ref, toValue, watchEffect } from 'vue' import { ref, toValue, watchEffect } from 'vue'
import { type MaybeRefOrGetter } from '@vue/reactivity' 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)
const error = ref<any | null>(null); // eslint-disable-next-line @typescript-eslint/no-explicit-any
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 }
} }

26
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
} }

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

@@ -1,121 +1,138 @@
import { computed, onMounted, onUnmounted, ref, type Ref, shallowRef, watch } from 'vue' import {
computed,
type MaybeRefOrGetter,
onMounted,
onUnmounted,
ref,
type Ref,
shallowRef,
toValue,
watch,
} from 'vue'
import type { TelemetryDefinition } from '@/composables/telemetry'
export interface TelemetryDataItem { export interface TelemetryDataItem {
value: any; // eslint-disable-next-line @typescript-eslint/no-explicit-any
timestamp: string; value: any
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
} }
connect() { this.websocket = new WebSocket(
this.should_be_connected = true; location.protocol.replace('http', 'ws') + '//' + location.host + '/ws',
if (this.websocket != null) { )
return; 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.websocket = new WebSocket(location.protocol.replace("http", "ws") + "//" + location.host + "/ws"); disconnect() {
this.websocket.addEventListener("open", (event) => { this.should_be_connected = false
this.connected.value = true; if (this.websocket == null) {
}); return
this.websocket.addEventListener("close", (event) => {
if (this.should_be_connected) {
this.disconnect();
setTimeout(() => {
this.connect();
}, 1000);
}
});
this.websocket.addEventListener("error", (event) => {
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.connected.value = false
this.should_be_connected = false; this.websocket.close()
if (this.websocket == null) { this.websocket = null
return; 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
})
}
})
this.connected.value = false; return value_result
this.websocket.close(); }
this.websocket = null;
this.on_telem_value.clear();
}
listen_to_telemetry(telemetry: Ref<any>) {
const value_result = ref<TelemetryDataItem | null>(null);
const uuid = computed(() => {
if (telemetry.value) {
return telemetry.value.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,12 +1,20 @@
import type { MaybeRefOrGetter } from '@vue/reactivity'
import type { Ref } from 'vue' import type { Ref } from 'vue'
export enum AxisSide {
Right,
Left,
Hidden,
}
export enum AxisType {
Linear,
Logarithmic,
}
export const AXIS_DATA = Symbol() export const AXIS_DATA = Symbol()
export interface AxisData { export interface AxisData {
min_y: MaybeRefOrGetter<number>; axis_update_watch: Ref<number>
max_y: MaybeRefOrGetter<number>; max_y_callback: (y: number) => void
axis_update_watch: Ref<number>; min_y_callback: (y: number) => void
max_y_callback: (y: number) => void; y_map: (y: number) => number
min_y_callback: (y: number) => void;
y_map: (y: number) => number;
} }

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

@@ -1,12 +1,12 @@
import type { MaybeRefOrGetter } from '@vue/reactivity' import type { MaybeRefOrGetter } from 'vue'
export const GRAPH_DATA = Symbol() export const GRAPH_DATA = Symbol()
export interface GraphData { export interface GraphData {
border: 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
} }

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

@@ -1,25 +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/Graph.vue' import Graph from '@/components/SvgGraph.vue'
import Axis from '@/components/Axis.vue' import Axis from '@/components/GraphAxis.vue'
import Line from '@/components/Line.vue' import Line from '@/components/TelemetryLine.vue'
const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket);
const websocket = useWebsocket()
provide(WEBSOCKET_SYMBOL, websocket)
</script> </script>
<template> <template>
<main> <main>
<Graph :width=1500 :height=800 :border="48"> <Graph
<Axis> :width="1500"
<Line data="simple_producer/sin" color="#FF0000"></Line> :height="800"
<Line data="simple_producer/cos" color="#00FF00"></Line> :border_top_bottom="24"
</Axis> :border_left_right="64"
</Graph> >
</main> <Axis>
<Line data="simple_producer/sin" color="#FF0000"></Line>
<Line data="simple_producer/cos" color="#00FF00"></Line>
</Axis>
</Graph>
</main>
</template> </template>
<style> <style></style>
</style>

12
server/src/telemetry.rs
View File

@@ -14,7 +14,7 @@ fn tlm_data_type_serialzier<S>(tlm_data_type: &TelemetryDataType, serializer: S)
struct TlmDataTypeVisitor; struct TlmDataTypeVisitor;
impl<'de> Visitor<'de> for TlmDataTypeVisitor { impl Visitor<'_> for TlmDataTypeVisitor {
type Value = TelemetryDataType; type Value = TelemetryDataType;
fn expecting(&self, formatter: &mut Formatter) -> std::fmt::Result { fn expecting(&self, formatter: &mut Formatter) -> std::fmt::Result {
@@ -95,7 +95,7 @@ impl TelemetryManagementService {
definition: TelemetryDefinition { definition: TelemetryDefinition {
uuid: uuid.clone(), uuid: uuid.clone(),
name: telemetry_definition_request.name.clone(), name: telemetry_definition_request.name.clone(),
data_type: telemetry_definition_request.data_type().clone(), data_type: telemetry_definition_request.data_type(),
}, },
data: tokio::sync::watch::channel(None).0 data: tokio::sync::watch::channel(None).0
}); });
@@ -104,11 +104,9 @@ impl TelemetryManagementService {
} }
pub async fn get_by_name(&self, name: &String) -> Option<TelemetryData> { pub async fn get_by_name(&self, name: &String) -> Option<TelemetryData> {
let Some(uuid) = ({ let uuid = {
let uuid_lock = self.uuid_mapping.lock().await; let uuid_lock = self.uuid_mapping.lock().await;
uuid_lock.get(name).map(|inner| inner.clone()) uuid_lock.get(name).cloned()?
}) else {
return None;
}; };
self.get_by_uuid(&uuid).await self.get_by_uuid(&uuid).await
@@ -116,6 +114,6 @@ impl TelemetryManagementService {
pub async fn get_by_uuid(&self, uuid: &String) -> Option<TelemetryData> { pub async fn get_by_uuid(&self, uuid: &String) -> Option<TelemetryData> {
let tlm_lock = self.tlm_mapping.lock().await; let tlm_lock = self.tlm_mapping.lock().await;
tlm_lock.get(uuid).map(|inner| inner.clone()) tlm_lock.get(uuid).cloned()
} }
} }