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

improves performance

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-25 12:32:36 -05:00
parent cd3e15d9e9
commit 147d1abaf8
6 changed files with 193 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -282,7 +282,7 @@ const lines = computed(() => {
}
.middle_text {
alignment-baseline: middle;
dominant-baseline: middle;
font-family: variables.$text-font;
}

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

@@ -2,6 +2,7 @@
import { computed, provide, ref } from 'vue';
import { useNow } from '@/composables/ticker';
import { GRAPH_DATA, type GraphData } from '@/graph/graph';
import TimeText from '@/components/TimeText.vue';
const props = defineProps<{
width: number;
@@ -82,7 +83,7 @@ provide<GraphData>(GRAPH_DATA, {
const duration = computed(() => {
const diff_x = max_x.value - min_x.value;
return time_lines.find((duration) => diff_x / duration >= 3)!;
return time_lines.find((duration) => diff_x / duration >= 2)!;
});
const lines = computed(() => {
@@ -97,54 +98,6 @@ const lines = computed(() => {
}
return result;
});
function getDateString(date: Date) {
const year = props.utc ? date.getUTCFullYear() : date.getFullYear();
const month = (
(props.utc ? date.getMonth() : date.getMonth()) + 1
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const day = (props.utc ? date.getUTCDate() : date.getDate()).toLocaleString(
'en-US',
{
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
},
);
const hour = (
props.utc ? date.getUTCHours() : date.getHours()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const minute = (
props.utc ? date.getUTCMinutes() : date.getMinutes()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const second = (
props.utc ? date.getUTCSeconds() : date.getSeconds()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const milliseconds = (
props.utc ? date.getUTCMilliseconds() : date.getMilliseconds()
).toLocaleString('en-US', {
minimumIntegerDigits: 3,
useGrouping: false,
maximumFractionDigits: 0,
});
return `${year}/${month}/${day} ${hour}:${minute}:${second}${duration.value < 1000 ? `.${milliseconds}` : ''}${props.utc ? 'Z' : ''}`;
}
</script>
<template>
@@ -180,13 +133,15 @@ function getDateString(date: Date) {
<polyline
:points="`${x_map(tick)},${border_top_bottom} ${x_map(tick)},${height - border_top_bottom}`"
></polyline>
<text
<TimeText
class="bottom_edge"
:x="x_map(tick)"
:y="height - border_top_bottom + text_offset"
:timestamp="tick"
:utc="props.utc"
:show_millis="duration < 1000"
>
{{ getDateString(new Date(tick)) }}
</text>
</TimeText>
</template>
</g>
<slot></slot>
@@ -198,7 +153,7 @@ function getDateString(date: Date) {
.bottom_edge {
text-anchor: middle;
alignment-baseline: text-before-edge;
dominant-baseline: hanging;
font-family: variables.$text-font;
}

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

@@ -9,7 +9,6 @@ import {
shallowRef,
type ShallowRef,
toValue,
useTemplateRef,
watch,
} from 'vue';
import {
@@ -19,6 +18,7 @@ import {
} from '@/composables/websocket';
import { GRAPH_DATA, type GraphData } from '@/graph/graph';
import { AXIS_DATA, type AxisData } from '@/graph/axis';
import ValueLabel from '@/components/ValueLabel.vue';
const props = defineProps<{
data: string;
@@ -28,7 +28,6 @@ const props = defineProps<{
const smoothing_distance = 0.15 * 1000;
const text_offset = computed(() => 10);
const background_offset = computed(() => 5);
const { data } = useTelemetry(() => props.data);
const websocket = inject<ShallowRef<WebsocketHandle>>(WEBSOCKET_SYMBOL)!;
@@ -127,6 +126,7 @@ watch(
},
);
// This function is somewhat slow
const points = computed(() => {
let points = '';
if (memo.value.length == 0 || data.value == null) {
@@ -156,7 +156,6 @@ const points = computed(() => {
return points;
});
const labelRef = useTemplateRef<SVGTextElement>('label-ref');
const current_value = computed(() => {
const val = value.value;
if (val) {
@@ -173,27 +172,13 @@ const current_value = computed(() => {
clip-path="url(#content)"
:points="points"
></polyline>
<template v-if="current_value">
<rect
v-if="labelRef"
:x="
graph_data.x_map(toValue(graph_data.max_x)) +
text_offset -
background_offset
"
:y="axis_data.y_map(current_value) - 9 - background_offset"
:width="labelRef.getBBox().width + background_offset * 2"
:height="16 + background_offset * 2"
></rect>
<text
ref="label-ref"
<ValueLabel
v-if="current_value"
:x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
:y="axis_data.y_map(current_value)"
:value="current_value"
>
{{ max.toFixed(2) }}
{{ min.toFixed(2) }}
</text>
</template>
</ValueLabel>
</g>
</template>
@@ -204,18 +189,4 @@ polyline {
stroke-width: 1px;
stroke: var(--indexed-color);
}
rect {
fill: variables.$background-color;
stroke-width: 1px;
stroke: var(--indexed-color);
}
text {
alignment-baseline: middle;
font-family: variables.$text-font;
text-anchor: start;
stroke: var(--indexed-color);
fill: var(--indexed-color);
}
</style>

78
frontend/src/components/TimeText.vue Normal file
View File

@@ -0,0 +1,78 @@
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
x: number;
y: number;
timestamp: number;
utc?: boolean
show_millis?: boolean
}>();
// This function is slow
function getDateString(date: Date) {
const year = props.utc ? date.getUTCFullYear() : date.getFullYear();
const month = (
(props.utc ? date.getMonth() : date.getMonth()) + 1
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const day = (props.utc ? date.getUTCDate() : date.getDate()).toLocaleString(
'en-US',
{
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
},
);
const hour = (
props.utc ? date.getUTCHours() : date.getHours()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const minute = (
props.utc ? date.getUTCMinutes() : date.getMinutes()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const second = (
props.utc ? date.getUTCSeconds() : date.getSeconds()
).toLocaleString('en-US', {
minimumIntegerDigits: 2,
useGrouping: false,
maximumFractionDigits: 0,
});
const milliseconds = (
props.utc ? date.getUTCMilliseconds() : date.getMilliseconds()
).toLocaleString('en-US', {
minimumIntegerDigits: 3,
useGrouping: false,
maximumFractionDigits: 0,
});
return `${year}/${month}/${day} ${hour}:${minute}:${second}${props.show_millis ? `.${milliseconds}` : ''}${props.utc ? 'Z' : ''}`;
}
const timetext = computed(() => {
return getDateString(new Date(props.timestamp));
});
</script>
<template>
<text
:x="props.x"
:y="props.y"
>
{{ timetext }}
</text>
</template>
<style scoped lang="scss">
</style>

62
frontend/src/components/ValueLabel.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup lang="ts">
import { computed, ref, useTemplateRef, watch, watchPostEffect } from 'vue';
import { useNow } from '@/composables/ticker';
const props = defineProps<{
x: number;
y: number;
value: number;
}>();
const background_offset = computed(() => 5);
const y_offset = computed(() => 9);
const labelRef = useTemplateRef<SVGTextElement>('label-ref');
const value_text = computed(() => {
return props.value.toFixed(2);
});
const label_width = ref(0);
watch([value_text, labelRef], ([_, label]) => {
label_width.value = label?.getBBox().width || 0;
}, {
flush: 'post',
});
</script>
<template>
<rect
:x="x - background_offset"
:y="y - y_offset - background_offset"
:width="label_width + background_offset * 2"
:height="16 + background_offset * 2"
></rect>
<text
ref="label-ref"
:x="x"
:y="y"
>
{{ value_text }}
</text>
</template>
<style scoped lang="scss">
@use '@/assets/variables';
rect {
fill: variables.$background-color;
stroke-width: 1px;
stroke: var(--indexed-color);
}
text {
font-family: variables.$text-font;
text-anchor: start;
stroke: var(--indexed-color);
fill: var(--indexed-color);
dominant-baseline: middle;
}
</style>

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

@@ -12,24 +12,47 @@ provide(WEBSOCKET_SYMBOL, websocket);
<template>
<main>
<Graph
:width="1500"
:height="800"
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/sin"></Line>
<Line data="simple_producer/cos4"></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/sin2"></Line>
<Line data="simple_producer/cos"></Line>
<!-- <Line data="simple_producer/sin2"></Line>-->
<!-- <Line data="simple_producer/cos2"></Line>-->
<!-- <Line data="simple_producer/sin3"></Line>-->
<!-- <Line data="simple_producer/cos3"></Line>-->
<!-- <Line data="simple_producer/sin4"></Line>-->
<!-- <Line data="simple_producer/cos4"></Line>-->
<!-- <Line data="simple_producer/sin5"></Line>-->
<!-- <Line data="simple_producer/cos5"></Line>-->
<!-- <Line data="simple_producer/sin6"></Line>-->
<!-- <Line data="simple_producer/cos6"></Line>-->
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/sin3"></Line>
<Line data="simple_producer/cos2"></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:border_top_bottom="24"
:border_left_right="128"
>
<Axis>
<Line data="simple_producer/sin4"></Line>
<Line data="simple_producer/cos3"></Line>
</Axis>
</Graph>
</main>