From b1d196e4ca8779cf5c734d6985600ede32535b06 Mon Sep 17 00:00:00 2001 From: vince Date: Fri, 19 Jun 2026 23:56:49 +0200 Subject: [PATCH] fix(ui): restore react dashboard visual parity --- src/lib/ui/components/LineChart.tsx | 89 +++++- src/lib/ui/components/styles.css | 260 +++++++++++++++++- tests/e2e/dashboard.spec.ts | 17 +- ...shboard-desktop-chromium-desktop-linux.png | Bin 257401 -> 257965 bytes ...dashboard-mobile-chromium-mobile-linux.png | Bin 282995 -> 279982 bytes 5 files changed, 362 insertions(+), 4 deletions(-) diff --git a/src/lib/ui/components/LineChart.tsx b/src/lib/ui/components/LineChart.tsx index fdbb993..386b515 100644 --- a/src/lib/ui/components/LineChart.tsx +++ b/src/lib/ui/components/LineChart.tsx @@ -1,4 +1,5 @@ import "uplot/dist/uPlot.min.css"; +import { useEffect, useRef } from "react"; import type { UiSeverity } from "../types"; export interface LineChartProps { @@ -12,6 +13,38 @@ export function LineChart({ severity = "neutral", label = "Telemetry trend", }: LineChartProps) { + const chartElementRef = useRef(null); + const valuesKey = values.join(","); + + useEffect(() => { + const chartElement = chartElementRef.current; + if (!chartElement) return; + + let chart: ChartInstance | null = null; + let resizeObserver: ResizeObserver | null = null; + let disposed = false; + + void import("uplot").then((module) => { + if (disposed || !chartElementRef.current) return; + + const element = chartElementRef.current; + chart = new module.default(chartOptions(element, severity), chartData(values), element); + + if (typeof ResizeObserver !== "undefined") { + resizeObserver = new ResizeObserver(() => { + chart?.setSize(chartSize(element)); + }); + resizeObserver.observe(element); + } + }); + + return () => { + disposed = true; + resizeObserver?.disconnect(); + chart?.destroy(); + }; + }, [severity, valuesKey, values]); + return (
-