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

add initial controls bar

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-01 22:10:42 -05:00
parent 59431ebfff
commit 623c394446
4 changed files with 164 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,7 +63,7 @@ const min_y_value = computed(() => {
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;
return -1.05;
}
} else {
if (max_y.value > min_y.value) {
@@ -72,7 +72,7 @@ const min_y_value = computed(() => {
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;
return 0.01;
}
}
});
@@ -86,7 +86,7 @@ const max_y_value = computed(() => {
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;
return 1.05;
}
} else {
if (max_y.value > min_y.value) {
@@ -95,7 +95,7 @@ const max_y_value = computed(() => {
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;
return 1.05;
}
}
});
@@ -127,7 +127,7 @@ const lines = computed(() => {
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,
(location) => location <= diff_log10_fraction,
)!;
const grid_spread = Math.pow(10, Math.floor(diff_log10) + ticker_location);
const major_spread = grid_spread / 2;

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

@@ -1,27 +1,46 @@
<script setup lang="ts">
import { computed, provide, ref } from 'vue';
import { computed, onUnmounted, onWatcherCleanup, provide, ref, useTemplateRef, watch } from 'vue';
import { useNow } from '@/composables/ticker';
import { GRAPH_DATA, type GraphData, GraphSide } from '@/graph/graph';
import TimeText from '@/components/TimeText.vue';
const props = defineProps<{
width: number;
height: number;
duration?: number;
utc?: boolean;
left_axis?: boolean;
right_axis?: boolean;
hide_time_labels?: boolean;
hide_time_ticks?: boolean;
include_controls?: boolean;
legend?: GraphSide;
}>();
const width = computed(() => {
return props.width;
const divRef = useTemplateRef<HTMLDivElement>("graph-div");
const width = ref(0);
const height = ref(0);
const controls_height = 32;
const resize_observer = new ResizeObserver((elements) => {
for (const element of elements) {
if (element.target == divRef.value) {
width.value = element.contentBoxSize[0].inlineSize;
height.value = element.contentBoxSize[0].blockSize - (props.include_controls ? controls_height : 0);
}
}
});
const height = computed(() => {
return props.height;
watch([divRef], ([divRef]) => {
if (divRef) {
resize_observer.observe(divRef);
onWatcherCleanup(() => {
resize_observer.unobserve(divRef);
});
}
});
onUnmounted(() => {
resize_observer.disconnect();
});
const now = useNow(33);
@@ -107,8 +126,8 @@ provide<GraphData>(GRAPH_DATA, {
border_top: border_top,
min_x: min_x,
max_x: now,
width: () => width.value - border_left.value - border_right.value,
height: () => height.value - border_top.value - border_bottom.value,
width: () => Math.max(width.value - border_left.value - border_right.value, 0),
height: () => Math.max(height.value - border_top.value - border_bottom.value, 0),
x_map: x_map,
lines: telemetry_lines,
max_update_rate: 1000 / 10,
@@ -140,52 +159,60 @@ const lines = computed(() => {
</script>
<template>
<svg ref="svg_graph" class="graph" :width="width" :height="height">
<defs>
<clipPath id="content">
<rect
:x="border_left"
:y="border_top"
:width="width - border_left - border_right"
:height="height - border_top - border_bottom"
></rect>
</clipPath>
<clipPath id="y_ticker">
<rect
:x="0"
:y="border_top"
:width="width"
:height="height - border_top - border_bottom"
></rect>
</clipPath>
<clipPath id="x_ticker">
<rect
:x="border_left"
:y="0"
:width="width - border_left - border_right"
:height="height"
></rect>
</clipPath>
</defs>
<g class="time_tick" clip-path="url(#x_ticker)">
<template v-for="tick of lines" :key="tick">
<polyline
v-if="!hide_time_ticks"
:points="`${x_map(tick)},${border_top} ${x_map(tick)},${height - border_bottom}`"
></polyline>
<TimeText
v-if="!hide_time_labels"
class="bottom_edge"
:x="x_map(tick)"
:y="height - border_bottom + text_offset"
:timestamp="tick"
:utc="props.utc"
:show_millis="line_duration < 1000"
></TimeText>
</template>
</g>
<slot></slot>
</svg>
<div ref="graph-div" class="full-size">
<div v-if="include_controls" class="controls-header" :style="`height: ${controls_height}px`">
<div class="grow"></div>
<div>
<span>Duration Dropdown</span>
</div>
</div>
<svg ref="svg_graph" class="graph" :width="width" :height="height">
<defs>
<clipPath id="content">
<rect
:x="border_left"
:y="border_top"
:width="Math.max(width - border_left - border_right, 0)"
:height="Math.max(height - border_top - border_bottom, 0)"
></rect>
</clipPath>
<clipPath id="y_ticker">
<rect
:x="0"
:y="border_top"
:width="width"
:height="Math.max(height - border_top - border_bottom, 0)"
></rect>
</clipPath>
<clipPath id="x_ticker">
<rect
:x="border_left"
:y="0"
:width="Math.max(width - border_left - border_right, 0)"
:height="height"
></rect>
</clipPath>
</defs>
<g class="time_tick" clip-path="url(#x_ticker)">
<template v-for="tick of lines" :key="tick">
<polyline
v-if="!hide_time_ticks"
:points="`${x_map(tick)},${border_top} ${x_map(tick)},${height - border_bottom}`"
></polyline>
<TimeText
v-if="!hide_time_labels"
class="bottom_edge"
:x="x_map(tick)"
:y="height - border_bottom + text_offset"
:timestamp="tick"
:utc="props.utc"
:show_millis="line_duration < 1000"
></TimeText>
</template>
</g>
<slot></slot>
</svg>
</div>
</template>
<style scoped lang="scss">
@@ -201,4 +228,24 @@ const lines = computed(() => {
stroke: variables.$time-tick;
fill: variables.$time-tick;
}
div.full-size {
width: 100%;
height: 100%;
}
div.controls-header {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
align-content: stretch;
gap: 1em 0;
margin: 0 1em 0 1em;
}
div.controls-header > div.grow {
flex-grow: 1;
}
</style>

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

@@ -24,3 +24,4 @@ export interface GraphData {
legend_y_stride: MaybeRefOrGetter<number>;
legend_width: MaybeRefOrGetter<number>;
}

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

@@ -1,10 +1,10 @@
<script setup lang="ts">
import { useWebsocket, WEBSOCKET_SYMBOL } from '@/composables/websocket';
import { provide } from 'vue';
import Graph from '@/components/SvgGraph.vue';
import Axis from '@/components/GraphAxis.vue';
import Line from '@/components/TelemetryLine.vue';
import { GraphSide } from '@/graph/graph';
import SvgGraph from '@/components/SvgGraph.vue';
const websocket = useWebsocket();
provide(WEBSOCKET_SYMBOL, websocket);
@@ -12,62 +12,61 @@ provide(WEBSOCKET_SYMBOL, websocket);
<template>
<main>
<Graph
:width="800"
:height="400"
:right_axis="true"
:legend="GraphSide.Left"
>
<Axis>
<Line data="simple_producer/time_offset"></Line>
<Line data="simple_producer/publish_offset"></Line>
<Line data="simple_producer/await_offset"></Line>
</Axis>
</Graph>
<Graph
:width="800"
:height="400"
:duration="60 * 1000 * 10"
:right_axis="true"
:legend="GraphSide.Right"
>
<Axis>
<Line
data="simple_producer/sin"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos4"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin2"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin3"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos2"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/sin4"
:minimum_separation="2000"
></Line>
<Line
data="simple_producer/cos3"
:minimum_separation="2000"
></Line>
</Axis>
</Graph>
<Graph :width="800" :height="400" :duration="5 * 1000"> </Graph>
<Graph :width="800" :height="400" :duration="2 * 1000"> </Graph>
<div style="width: 100vw; height: 50vh">
<SvgGraph
:legend="GraphSide.Left"
right_axis
include_controls
>
<Axis>
<Line data="simple_producer/time_offset"></Line>
<Line data="simple_producer/publish_offset"></Line>
<Line data="simple_producer/await_offset"></Line>
</Axis>
</SvgGraph>
</div>
<div style="width: 100vw; height: 50vh">
<SvgGraph
:duration="60 * 1000 * 10"
:legend="GraphSide.Right"
right_axis
>
<Axis>
<Line
data="simple_producer/sin"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/cos4"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/sin2"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/cos"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/sin3"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/cos2"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/sin4"
:minimum_separation="1000"
></Line>
<Line
data="simple_producer/cos3"
:minimum_separation="1000"
></Line>
</Axis>
</SvgGraph>
</div>
</main>
</template>