refactor(ui): extract reusable component package

src/components/LineChart.tsx

@@ -0,0 +1,114 @@
+import "uplot/dist/uPlot.min.css";
+import { useEffect, useRef } from "react";
+import type { UiSeverity } from "../types";
+
+export interface LineChartProps {
+  values?: number[];
+  severity?: UiSeverity;
+  label?: string;
+}
+
+export function LineChart({
+  values = [],
+  severity = "neutral",
+  label = "Telemetry trend",
+}: LineChartProps) {
+  const chartElementRef = useRef<HTMLDivElement>(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 (
+    <div
+      className="line-chart"
+      data-chart-library="uplot"
+      data-severity={severity}
+      data-values={values.join(",")}
+      role="img"
+      aria-label={label}
+    >
+      <div ref={chartElementRef} className="line-chart__canvas" aria-hidden="true" />
+    </div>
+  );
+}
+
+type ChartInstance = {
+  destroy(): void;
+  setSize(size: { width: number; height: number }): void;
+};
+
+function chartData(values: number[]): import("uplot").AlignedData {
+  const normalized = values.length ? values : [0, 0];
+  return [
+    normalized.map((_, index) => index),
+    normalized.map((value) => Math.max(0, Number(value) || 0)),
+  ];
+}
+
+function chartOptions(
+  element: HTMLElement,
+  severity: UiSeverity,
+): import("uplot").Options {
+  return {
+    ...chartSize(element),
+    cursor: { show: false },
+    legend: { show: false },
+    padding: [2, 0, 2, 0],
+    scales: {
+      x: { time: false },
+      y: { auto: true },
+    },
+    axes: [{ show: false }, { show: false }],
+    series: [
+      {},
+      {
+        stroke: chartStroke(element, severity),
+        width: 2,
+        points: { show: false },
+      },
+    ],
+  };
+}
+
+function chartSize(element?: HTMLElement): { width: number; height: number } {
+  return {
+    width: Math.max(80, Math.round(element?.clientWidth || 120)),
+    height: Math.max(20, Math.round(element?.clientHeight || 24)),
+  };
+}
+
+function chartStroke(element: HTMLElement, severity: UiSeverity): string {
+  const styles = window.getComputedStyle(element.closest(".line-chart") || element);
+  const currentColor = styles.color;
+  if (currentColor) return currentColor;
+  if (severity === "danger") return "#ff1744";
+  if (severity === "warning") return "#ffb020";
+  return "#d7ff00";
+}