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

allows restricting the streaming speed for the frontend

Browse Source
This commit is contained in:
Sergey Savelyev
2024-12-30 13:23:21 -05:00
parent be85ea3aa6
commit 10e80a0c2d
9 changed files with 234 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@ import TimeText from '@/components/TimeText.vue';
const props = defineProps<{
width: number;
height: number;
duration?: number;
border_left_right?: number;
border_top_bottom?: number;
utc?: boolean;
@@ -21,7 +22,12 @@ const height = computed(() => {
});
const now = useNow(33);
const window_duration = 10 * 1000; // 10 seconds
const window_duration = computed(() => {
if (props.duration) {
return props.duration;
}
return 10 * 1000; // 10 seconds
});
const time_lines = [
1, // 1ms
@@ -58,7 +64,7 @@ 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 min_x = computed(() => max_x.value - window_duration.value);
const x_map = (x: number) => {
const diff_x = max_x.value - min_x.value;
@@ -79,10 +85,10 @@ provide<GraphData>(GRAPH_DATA, {
height: () => height.value - 2 * border_top_bottom.value,
x_map: x_map,
lines: telemetry_lines,
max_update_rate: 1000 / 10
max_update_rate: 1000 / 10,
});
const duration = computed(() => {
const line_duration = computed(() => {
const diff_x = max_x.value - min_x.value;
return time_lines.find((duration) => diff_x / duration >= 2)!;
});
@@ -90,11 +96,11 @@ const duration = computed(() => {
const lines = computed(() => {
const result = [];
for (
let i = Math.ceil(max_x.value / duration.value);
i >= Math.ceil(min_x.value / duration.value) - 5;
let i = Math.ceil(max_x.value / line_duration.value);
i >= Math.ceil(min_x.value / line_duration.value) - 5;
i--
) {
const x = i * duration.value;
const x = i * line_duration.value;
result.push(x);
}
return result;
@@ -140,7 +146,7 @@ const lines = computed(() => {
:y="height - border_top_bottom + text_offset"
:timestamp="tick"
:utc="props.utc"
:show_millis="duration < 1000"
:show_millis="line_duration < 1000"
></TimeText>
</template>
</g>