sergeysav/telemetry_visualization
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 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

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

@@ -11,63 +11,57 @@ provide(WEBSOCKET_SYMBOL, websocket);
</script>
<template>
<main>
<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>
<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>
</template>
<style lang="scss">