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

adds legend tooltips

Browse Source
This commit is contained in:
Sergey Savelyev
2025-01-03 00:20:56 -05:00
parent 623c394446
commit 35603c98a4
8 changed files with 343 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,13 @@
<script setup lang="ts">
import { computed, onUnmounted, onWatcherCleanup, provide, ref, useTemplateRef, watch } 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';
@@ -15,7 +23,7 @@ const props = defineProps<{
legend?: GraphSide;
}>();
const divRef = useTemplateRef<HTMLDivElement>("graph-div");
const divRef = useTemplateRef<HTMLDivElement>('graph-div');
const width = ref(0);
const height = ref(0);
@@ -26,7 +34,9 @@ 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);
height.value =
element.contentBoxSize[0].blockSize -
(props.include_controls ? controls_height : 0);
}
}
});
@@ -126,8 +136,10 @@ provide<GraphData>(GRAPH_DATA, {
border_top: border_top,
min_x: min_x,
max_x: now,
width: () => Math.max(width.value - border_left.value - border_right.value, 0),
height: () => Math.max(height.value - border_top.value - border_bottom.value, 0),
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,
@@ -160,7 +172,11 @@ const lines = computed(() => {
<template>
<div ref="graph-div" class="full-size">
<div v-if="include_controls" class="controls-header" :style="`height: ${controls_height}px`">
<div
v-if="include_controls"
class="controls-header"
:style="`height: ${controls_height}px`"
>
<div class="grow"></div>
<div>
<span>Duration Dropdown</span>
@@ -173,7 +189,9 @@ const lines = computed(() => {
:x="border_left"
:y="border_top"
:width="Math.max(width - border_left - border_right, 0)"
:height="Math.max(height - border_top - border_bottom, 0)"
:height="
Math.max(height - border_top - border_bottom, 0)
"
></rect>
</clipPath>
<clipPath id="y_ticker">
@@ -181,7 +199,9 @@ const lines = computed(() => {
:x="0"
:y="border_top"
:width="width"
:height="Math.max(height - border_top - border_bottom, 0)"
:height="
Math.max(height - border_top - border_bottom, 0)
"
></rect>
</clipPath>
<clipPath id="x_ticker">
@@ -247,5 +267,4 @@ div.controls-header {
div.controls-header > div.grow {
flex-grow: 1;
}
</style>