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

more lines

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-05 20:10:31 -08:00
parent e6a52f971b
commit a353585d47
9 changed files with 269 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -267,9 +267,7 @@ const lines = computed(() => {
</template>
</g>
</template>
<g>
<slot></slot>
</g>
<slot></slot>
</template>
<style scoped lang="scss">

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

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, provide } from 'vue';
import { computed, provide, ref } from 'vue';
import { useNow } from '@/composables/ticker';
import { GRAPH_DATA, type GraphData } from '@/graph/graph';
@@ -8,8 +8,7 @@ const props = defineProps<{
height: number;
border_left_right?: number;
border_top_bottom?: number;
// min_x?: number
// max_x?: number
utc?: boolean;
}>();
const width = computed(() => {
@@ -20,9 +19,6 @@ const height = computed(() => {
return props.height;
});
// const svg_viewbox = computed(() => {
// return `0 0 ${props.width} ${props.height}`;
// });
const now = useNow(33);
const window_duration = 10 * 1000; // 10 seconds
@@ -72,6 +68,8 @@ const x_map = (x: number) => {
);
};
const telemetry_lines = ref([]);
provide<GraphData>(GRAPH_DATA, {
border_top_bottom: border_top_bottom,
min_x: min_x,
@@ -79,26 +77,78 @@ provide<GraphData>(GRAPH_DATA, {
width: () => width.value - 2 * border_left_right.value,
height: () => height.value - 2 * border_top_bottom.value,
x_map: x_map,
lines: telemetry_lines,
});
const duration = computed(() => {
const diff_x = max_x.value - min_x.value;
return time_lines.find((duration) => diff_x / duration >= 3)!;
});
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;
let i = Math.ceil(max_x.value / duration.value);
i >= Math.ceil(min_x.value / duration.value) - 5;
i--
) {
const x = i * duration;
const x = i * duration.value;
result.push(x);
}
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>
<svg ref="svg_graph" :width="width" :height="height">
<svg ref="svg_graph" class="graph" :width="width" :height="height">
<defs>
<clipPath id="content">
<rect
@@ -135,7 +185,7 @@ const lines = computed(() => {
:x="x_map(tick)"
:y="height - border_top_bottom + text_offset"
>
{{ new Date(tick).toLocaleString() }}
{{ getDateString(new Date(tick)) }}
</text>
</template>
</g>

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

@@ -3,6 +3,8 @@ import { useTelemetry } from '@/composables/telemetry';
import {
computed,
inject,
onMounted,
onUnmounted,
ref,
shallowRef,
type ShallowRef,
@@ -20,7 +22,7 @@ import { AXIS_DATA, type AxisData } from '@/graph/axis';
const props = defineProps<{
data: string;
color: string;
class?: string;
}>();
const smoothing_distance = 0.15 * 1000;
@@ -38,6 +40,19 @@ const axis_data = inject<AxisData>(AXIS_DATA)!;
const min = ref(Infinity);
const max = ref(-Infinity);
const line = ref(Symbol());
const index = computed(() => {
return graph_data.lines.value.indexOf(line.value);
});
onMounted(() => {
graph_data.lines.value.push(line.value);
});
onUnmounted(() => {
graph_data.lines.value = graph_data.lines.value.filter(
(x) => x != line.value,
);
});
const memo = shallowRef<TelemetryDataItem[]>([]);
watch([value], ([val]) => {
const min_x = toValue(graph_data.min_x);
@@ -119,64 +134,57 @@ const current_value = computed(() => {
}
return undefined;
});
const test = computed(() => {
if (labelRef.value) {
const boundingBox = labelRef.value.getBBox();
return boundingBox.top;
}
return undefined;
});
watch([test], (x) => {
console.log(x);
});
</script>
<template>
<polyline
fill="none"
clip-path="url(#content)"
:stroke="color"
stroke-width="1"
: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"
:stroke="color"
></rect>
<text
ref="label-ref"
:x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
:y="axis_data.y_map(current_value)"
:fill="color"
:stroke="color"
>
{{ current_value.toFixed(2) }}
</text>
</template>
<g :class="`indexed-color color-${index}`">
<polyline
fill="none"
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"
:x="graph_data.x_map(toValue(graph_data.max_x)) + text_offset"
:y="axis_data.y_map(current_value)"
>
{{ current_value.toFixed(2) }}
</text>
</template>
</g>
</template>
<style scoped lang="scss">
@use '@/assets/variables';
text {
alignment-baseline: middle;
font-family: variables.$text-font;
text-anchor: start;
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>