diff --git a/frontend/index.html b/frontend/index.html index a888544..750f0f6 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -7,7 +7,9 @@ Vite App -
+
+
+
diff --git a/frontend/src/assets/variables.scss b/frontend/src/assets/variables.scss index 85a14c1..ea25cf6 100644 --- a/frontend/src/assets/variables.scss +++ b/frontend/src/assets/variables.scss @@ -1,3 +1,5 @@ +@use 'sass:color'; + $gray-1: oklch(90% 0 0); $gray-2: oklch(80% 0 0); $gray-3: oklch(70% 0 0); @@ -24,6 +26,8 @@ $magenta-2: oklch(75% 0.2 330); $text-color: $gray-1; $background-color: $gray-7; +$light-background-color: color.adjust($background-color, $lightness: 5%); +$dark-background-color: color.adjust($background-color, $lightness: -5%); $time-tick: $gray-1; $grid-line: $gray-1; @@ -31,6 +35,7 @@ $major-tick: $gray-4; $minor-tick: $gray-5; $text-font: Helvetica, sans-serif; +$large-text-size: 20px; $normal-text-size: 16px; $small-text-size: 12px; diff --git a/frontend/src/components/SvgGraph.vue b/frontend/src/components/SvgGraph.vue index 0572c72..96b4e9b 100644 --- a/frontend/src/components/SvgGraph.vue +++ b/frontend/src/components/SvgGraph.vue @@ -1,5 +1,13 @@ @@ -333,4 +403,59 @@ text { dominant-baseline: middle; font-size: variables.$small-monospace-text-size; } + +rect.legend { + stroke: none; + stroke-width: 0; + fill: transparent; +} + +rect.legend.selected, +rect.legend:hover, +rect.legend:has(~ .legend:hover) { + stroke: variables.$gray-2; + stroke-width: 1px; +} + +.legend { + cursor: help; +} + +div.column { + display: flex; + flex-flow: column nowrap; + justify-content: flex-start; + align-items: flex-start; + align-content: flex-start; + gap: 0.25em; +} + +div.row { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + align-items: center; + align-content: center; + gap: 0.25em; +} + +div.header.row { + margin-bottom: 1ex; +} + +div.colored.dash { + background-color: var(--indexed-color); + width: 0.75em; + height: 2px; + display: inline; + margin-right: 0.5em; +} + +span.large { + font-size: variables.$large-text-size; +} + +span.small { + font-size: variables.$small-text-size; +} diff --git a/frontend/src/components/TooltipDialog.vue b/frontend/src/components/TooltipDialog.vue new file mode 100644 index 0000000..c69ff64 --- /dev/null +++ b/frontend/src/components/TooltipDialog.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/frontend/src/components/TooltipDialogContents.vue b/frontend/src/components/TooltipDialogContents.vue new file mode 100644 index 0000000..d94a885 --- /dev/null +++ b/frontend/src/components/TooltipDialogContents.vue @@ -0,0 +1,83 @@ + + + + + diff --git a/frontend/src/graph/graph.ts b/frontend/src/graph/graph.ts index 43ea28d..e31f26b 100644 --- a/frontend/src/graph/graph.ts +++ b/frontend/src/graph/graph.ts @@ -24,4 +24,3 @@ export interface GraphData { legend_y_stride: MaybeRefOrGetter; legend_width: MaybeRefOrGetter; } - diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue index bd14a01..7a7a748 100644 --- a/frontend/src/views/HomeView.vue +++ b/frontend/src/views/HomeView.vue @@ -11,63 +11,57 @@ provide(WEBSOCKET_SYMBOL, websocket);