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

improve numeric labeling

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-01 14:28:05 -05:00
parent ac2014d27d
commit 6a8e076ee7
7 changed files with 124 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,9 +8,11 @@ const props = defineProps<{
width: number;
height: number;
duration?: number;
border_left_right?: number;
border_top_bottom?: number;
utc?: boolean;
left_axis?: boolean;
right_axis?: boolean;
hide_time_labels?: boolean;
hide_time_ticks?: boolean;
}>();
const width = computed(() => {
@@ -60,8 +62,10 @@ const time_lines = [
time_lines.reverse();
const text_offset = computed(() => 5);
const border_left_right = computed(() => props.border_left_right || 0);
const border_top_bottom = computed(() => props.border_top_bottom || 0);
const border_left = computed(() => props.left_axis ? 96 : 0);
const border_right = computed(() => props.right_axis ? 80 : 0);
const border_top = computed(() => 6);
const border_bottom = computed(() => props.hide_time_labels ? 6 : 24);
const max_x = now;
const min_x = computed(() => max_x.value - window_duration.value);
@@ -69,20 +73,20 @@ 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 - 2 * border_left_right.value) * (x - min_x.value)) /
((width.value - border_left.value - border_right.value) * (x - min_x.value)) /
diff_x +
border_left_right.value
border_left.value
);
};
const telemetry_lines = ref([]);
provide<GraphData>(GRAPH_DATA, {
border_top_bottom: border_top_bottom,
border_top: border_top,
min_x: min_x,
max_x: now,
width: () => width.value - 2 * border_left_right.value,
height: () => height.value - 2 * border_top_bottom.value,
width: () => width.value - border_left.value - border_right.value,
height: () => height.value - border_top.value - border_bottom.value,
x_map: x_map,
lines: telemetry_lines,
max_update_rate: 1000 / 10,
@@ -112,25 +116,25 @@ const lines = computed(() => {
<defs>
<clipPath id="content">
<rect
:x="border_left_right"
:y="border_top_bottom"
:width="width - border_left_right * 2"
:height="height - border_top_bottom * 2"
: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_bottom"
:y="border_top"
:width="width"
:height="height - border_top_bottom * 2"
:height="height - border_top - border_bottom"
></rect>
</clipPath>
<clipPath id="x_ticker">
<rect
:x="border_left_right"
:x="border_left"
:y="0"
:width="width - border_left_right * 2"
:width="width - border_left - border_right"
:height="height"
></rect>
</clipPath>
@@ -138,12 +142,14 @@ const lines = computed(() => {
<g class="time_tick" clip-path="url(#x_ticker)">
<template v-for="tick of lines" :key="tick">
<polyline
:points="`${x_map(tick)},${border_top_bottom} ${x_map(tick)},${height - border_top_bottom}`"
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_top_bottom + text_offset"
:y="height - border_bottom + text_offset"
:timestamp="tick"
:utc="props.utc"
:show_millis="line_duration < 1000"
@@ -167,4 +173,5 @@ const lines = computed(() => {
stroke: variables.$time-tick;
fill: variables.$time-tick;
}
</style>