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

applies formatting and linting

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-01 15:51:19 -05:00
parent 825b85ddad
commit 59431ebfff
13 changed files with 325 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -181,7 +181,8 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
><NumericText :value="tick" :max_width="7"></NumericText></text>
><NumericText :value="tick" :max_width="7"></NumericText
></text>
</template>
</g>
<g class="major_tick" clip-path="url(#y_ticker)">
@@ -196,8 +197,8 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
><NumericText :value="tick" :max_width="6"></NumericText></text
>
><NumericText :value="tick" :max_width="6"></NumericText
></text>
</template>
</g>
<g class="grid_tick" clip-path="url(#y_ticker)">
@@ -212,10 +213,9 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
>
<NumericText :value="tick" :max_width="5"></NumericText>
</text
>
<NumericText :value="tick" :max_width="5"></NumericText>
</text>
</template>
</g>
</template>
@@ -232,7 +232,8 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
><NumericText :value="tick" :max_width="7"></NumericText></text>
><NumericText :value="tick" :max_width="7"></NumericText
></text>
</template>
</g>
<g class="major_tick" clip-path="url(#y_ticker)">
@@ -247,7 +248,8 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
><NumericText :value="tick" :max_width="6"></NumericText></text>
><NumericText :value="tick" :max_width="6"></NumericText
></text>
</template>
</g>
<g class="grid_tick" clip-path="url(#y_ticker)">
@@ -262,7 +264,8 @@ const lines = computed(() => {
text_offset
"
:y="y_map(tick)"
><NumericText :value="tick" :max_width="5"></NumericText></text>
><NumericText :value="tick" :max_width="5"></NumericText
></text>
</template>
</g>
</template>

28
frontend/src/components/NumericText.vue
View File

@@ -1,27 +1,30 @@
<script setup lang="ts">
import { computed, type Ref, watch } from 'vue';
import { computed, watch } from 'vue';
const props = defineProps<{
value: number;
max_width: number;
}>();
const emit = defineEmits<{
(e: 'update', value: string): void
}>()
(e: 'update', value: string): void;
}>();
const display_value = computed(() => {
if (props.value == 0) {
return "0";
return '0';
}
let precision = props.value.toPrecision(props.max_width - 3);
// Chop off the last character as long as it is a 0
while (precision.length > 0 && precision.charAt(precision.length - 1) == '0') {
while (
precision.length > 0 &&
precision.charAt(precision.length - 1) == '0'
) {
precision = precision.substring(0, precision.length - 1);
}
if (precision.length > 0 && precision.charAt(precision.length - 1) == '.') {
precision = precision.substring(0, precision.length - 1);
}
if (precision.includes("e")) {
if (precision.includes('e')) {
let fixed = props.value.toFixed(props.max_width - 4);
// Chop off the last character as long as it is a 0
while (fixed.length > 0 && fixed.charAt(fixed.length - 1) == '0') {
@@ -35,7 +38,9 @@ const display_value = computed(() => {
}
}
if (precision.length > props.max_width) {
const initial_exponential = props.value.toExponential(props.max_width - 4);
const initial_exponential = props.value.toExponential(
props.max_width - 4,
);
const parts = initial_exponential.split('e');
let left = parts[0];
// Chop off the last character as long as it is a 0
@@ -45,21 +50,18 @@ const display_value = computed(() => {
if (left.length > 0 && left.charAt(left.length - 1) == '.') {
left = left.substring(0, left.length - 1);
}
let right = parts[1];
return left + "e" + right;
const right = parts[1];
return left + 'e' + right;
}
return precision;
});
watch([display_value], ([display_str]) => {
emit('update', display_str);
});
</script>
<template>
{{ display_value }}
</template>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

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

@@ -64,10 +64,18 @@ time_lines.reverse();
const text_offset = computed(() => 5);
const legend_width = 160;
const border_left = computed(() => (props.left_axis ? 96 : 0) + (props.legend == GraphSide.Left ? legend_width : 0));
const border_right = computed(() => (props.right_axis ? 80 : 0) + (props.legend == GraphSide.Right ? legend_width : 0));
const border_left = computed(
() =>
(props.left_axis ? 96 : 0) +
(props.legend == GraphSide.Left ? legend_width : 0),
);
const border_right = computed(
() =>
(props.right_axis ? 80 : 0) +
(props.legend == GraphSide.Right ? legend_width : 0),
);
const border_top = computed(() => 6);
const border_bottom = computed(() => props.hide_time_labels ? 6 : 24);
const border_bottom = computed(() => (props.hide_time_labels ? 6 : 24));
const max_x = now;
const min_x = computed(() => max_x.value - window_duration.value);
@@ -75,7 +83,8 @@ const min_x = computed(() => max_x.value - window_duration.value);
const x_map = (x: number) => {
const diff_x = max_x.value - min_x.value;
return (
((width.value - border_left.value - border_right.value) * (x - min_x.value)) /
((width.value - border_left.value - border_right.value) *
(x - min_x.value)) /
diff_x +
border_left.value
);
@@ -83,8 +92,12 @@ const x_map = (x: number) => {
const telemetry_lines = ref([]);
const legend_enabled = computed(() => props.legend === GraphSide.Left || props.legend === GraphSide.Right);
const legend_x = computed(() => (props.legend === GraphSide.Left) ? (8) : (width.value - legend_width + 8));
const legend_enabled = computed(
() => props.legend === GraphSide.Left || props.legend === GraphSide.Right,
);
const legend_x = computed(() =>
props.legend === GraphSide.Left ? 8 : width.value - legend_width + 8,
);
const legend_y = computed(() => border_top.value);
const legend_x_stride = computed(() => 0);
const legend_y_stride = computed(() => 16);
@@ -188,5 +201,4 @@ const lines = computed(() => {
stroke: variables.$time-tick;
fill: variables.$time-tick;
}
</style>

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

@@ -35,14 +35,13 @@ const legend_line_length = 8;
const legend_text_offset = 4;
const text_offset = computed(() => 10);
const min_sep = computed(() => Math.min(props.minimum_separation || 0, maximum_minimum_separation_live));
const min_sep = computed(() =>
Math.min(props.minimum_separation || 0, maximum_minimum_separation_live),
);
const { data } = useTelemetry(() => props.data);
const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
const value = websocket.value.listen_to_telemetry(
data,
min_sep,
);
const value = websocket.value.listen_to_telemetry(data, min_sep);
const graph_data = inject<GraphData>(GRAPH_DATA)!;
const axis_data = inject<AxisData>(AXIS_DATA)!;
@@ -128,7 +127,9 @@ watch(
max.value = item_val;
}
}
memo.value.reduce_to_maximum_separation(props.minimum_separation || 0);
memo.value.reduce_to_maximum_separation(
props.minimum_separation || 0,
);
triggerRef(memo);
debounced_recompute();
} catch (e) {
@@ -251,28 +252,41 @@ const current_value = computed(() => {
});
const legend_x = computed(() => {
return toValue(graph_data.legend_x) + toValue(graph_data.legend_x_stride) * index.value;
return (
toValue(graph_data.legend_x) +
toValue(graph_data.legend_x_stride) * index.value
);
});
const legend_y = computed(() => {
return toValue(graph_data.legend_y) + toValue(graph_data.legend_y_stride) * index.value;
return (
toValue(graph_data.legend_y) +
toValue(graph_data.legend_y_stride) * index.value
);
});
const legend_text = computed(() => {
const max_chars = (toValue(graph_data.legend_width) - legend_line_length - legend_text_offset * 2) / 7;
const max_chars =
(toValue(graph_data.legend_width) -
legend_line_length -
legend_text_offset * 2) /
7;
const start_text = props.data;
if (start_text.length > max_chars) {
return start_text.substring(0, 3) + "..." + start_text.substring(start_text.length - max_chars + 6);
return (
start_text.substring(0, 3) +
'...' +
start_text.substring(start_text.length - max_chars + 6)
);
}
return start_text;
});
const legend_line = computed(() => {
let x = legend_x.value;
let y = legend_y.value;
const x = legend_x.value;
const y = legend_y.value;
return `${x},${y} ${x + legend_line_length},${y}`;
});
</script>
<template>
@@ -292,13 +306,11 @@ const legend_line = computed(() => {
>
</ValueLabel>
<template v-if="toValue(graph_data.legend_enabled)">
<polyline
fill="none"
:points="legend_line"
></polyline>
<polyline fill="none" :points="legend_line"></polyline>
<text
:x="legend_x + legend_line_length + legend_text_offset"
:y="legend_y">
:y="legend_y"
>
{{ legend_text }}
</text>
</template>
@@ -321,5 +333,4 @@ text {
dominant-baseline: middle;
font-size: variables.$small-monospace-text-size;
}
</style>

10
frontend/src/components/ValueLabel.vue
View File

@@ -2,7 +2,7 @@
import { computed, ref, useTemplateRef, watch } from 'vue';
import NumericText from '@/components/NumericText.vue';
const props = defineProps<{
defineProps<{
x: number;
y: number;
value: number;
@@ -13,7 +13,7 @@ const y_offset = computed(() => 9);
const labelRef = useTemplateRef<SVGTextElement>('label-ref');
const value_text = ref("");
const value_text = ref('');
const label_width = ref(0);
watch(
@@ -39,7 +39,11 @@ function update_value_text(text: string) {
:height="16 + background_offset * 2"
></rect>
<text ref="label-ref" :x="x" :y="y">
<NumericText :value="value" :max_width="6" @update="update_value_text"></NumericText>
<NumericText
:value="value"
:max_width="6"
@update="update_value_text"
></NumericText>
</text>
</template>

20
frontend/src/graph/line.ts
View File

@@ -38,18 +38,27 @@ export class PointLine {
const index = this.find_index(point.x);
this.data.splice(index, 0, point);
if (maximum_separation !== undefined) {
this.reduce_to_maximum_separation(maximum_separation, [index - 1, index + 1]);
this.reduce_to_maximum_separation(maximum_separation, [
index - 1,
index + 1,
]);
}
}
reduce_to_maximum_separation(maximum_separation: number, range?: [number, number]) {
reduce_to_maximum_separation(
maximum_separation: number,
range?: [number, number],
) {
if (maximum_separation <= 0) {
return;
}
// Add a default range if it does not exist
range = range || [1, this.data.length - 2];
// clamp it to the bounds
range = [Math.max(1, range[0]), Math.min(this.data.length - 2, range[1])];
range = [
Math.max(1, range[0]),
Math.min(this.data.length - 2, range[1]),
];
// Loop over the indices in the range (backwards so removals don't break anything)
for (let i = range[1]; i >= range[0]; i--) {
@@ -61,7 +70,10 @@ export class PointLine {
const separation_after = x_next - x_current;
// If the data points are too close on both sides then delete this point
if (separation_before < maximum_separation && separation_after < maximum_separation) {
if (
separation_before < maximum_separation &&
separation_after < maximum_separation
) {
this.data.splice(i, 1);
}
}

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

@@ -66,18 +66,8 @@ provide(WEBSOCKET_SYMBOL, websocket);
></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:duration="5 * 1000"
>
</Graph>
<Graph
:width="800"
:height="400"
:duration="2 * 1000"
>
</Graph>
<Graph :width="800" :height="400" :duration="5 * 1000"> </Graph>
<Graph :width="800" :height="400" :duration="2 * 1000"> </Graph>
</main>
</template>