feat(charts): add persistent workspace chart management

src/features/telemetry/hooks/useTelemetryChartSeries.ts

@@ -0,0 +1,183 @@
+import { useEffect, useMemo, useState } from "react";
+import type {
+    WorkspaceChartInterval,
+    WorkspaceChartPoint,
+    WorkspaceChartTimeRange,
+} from "../../../components/charts/WorkspaceChart";
+
+const BACKEND_URL = "http://localhost:18450";
+
+type HistorianPoint = {
+    timestamp: string;
+    numericValue: number | null;
+    booleanValue: boolean | null;
+    textValue: string | null;
+};
+
+export function useTelemetryChartSeries(
+    sensorKeys: string[],
+    timeRange: WorkspaceChartTimeRange,
+    interval: WorkspaceChartInterval,
+) {
+    const [seriesByKey, setSeriesByKey] = useState<Record<string, WorkspaceChartPoint[]>>({});
+    const [loading, setLoading] = useState(true);
+    const [initialized, setInitialized] = useState(false);
+
+    const keySignature = useMemo(
+        () => sensorKeys.slice().sort().join(","),
+        [sensorKeys],
+    );
+
+    useEffect(() => {
+        if (sensorKeys.length === 0) {
+            setSeriesByKey({});
+            return;
+        }
+
+        const controller = new AbortController();
+
+        async function loadHistory() {
+            try {
+                const to = new Date();
+                const from = new Date(to.getTime() - rangeToMs(timeRange));
+
+                if (!initialized) {
+                    setLoading(true);
+                }
+
+                const entries = await Promise.all(
+                    sensorKeys.map(async (key) => {
+                        const params = new URLSearchParams({
+                            key,
+                            from: from.toISOString(),
+                            to: to.toISOString(),
+                        });
+
+                        const response = await fetch(
+                            `${BACKEND_URL}/api/historian/series?${params.toString()}`,
+                            { signal: controller.signal },
+                        );
+
+                        if (!response.ok) {
+                            throw new Error(`Failed to load history for ${key}`);
+                        }
+
+                        const payload = (await response.json()) as HistorianPoint[];
+
+                        const points = payload
+                            .filter(
+                                (point) =>
+                                    point.numericValue !== null &&
+                                    Number.isFinite(point.numericValue),
+                            )
+                            .map((point) => ({
+                                timestamp: point.timestamp,
+                                value: point.numericValue as number,
+                            }));
+                        return [key, aggregatePoints(points, interval)] as const;
+                    }),
+                );
+
+                setSeriesByKey(Object.fromEntries(entries));
+                setInitialized(true);
+            } catch (error) {
+                if (controller.signal.aborted) return;
+
+                console.error("Failed to load telemetry chart history", error);
+                if (!initialized) {
+                    setSeriesByKey({});
+                }
+            } finally {
+                if (!controller.signal.aborted) {
+                    setLoading(false);
+                }
+            }
+        }
+
+        loadHistory();
+
+        const intervalId = window.setInterval(() => {
+            loadHistory();
+        }, 10000);
+
+        return () => {
+            controller.abort();
+            window.clearInterval(intervalId);
+        };
+    }, [keySignature, timeRange, interval, initialized]);
+
+    return {
+        seriesByKey,
+        loading,
+    };
+}
+
+function rangeToMs(range: WorkspaceChartTimeRange) {
+    switch (range) {
+        case "15m":
+            return 15 * 60 * 1000;
+        case "1h":
+            return 60 * 60 * 1000;
+        case "6h":
+            return 6 * 60 * 60 * 1000;
+        case "24h":
+            return 24 * 60 * 60 * 1000;
+        case "7d":
+            return 7 * 24 * 60 * 60 * 1000;
+        case "30d":
+            return 30 * 24 * 60 * 60 * 1000;
+    }
+}
+
+function intervalToMs(interval: WorkspaceChartInterval) {
+    switch (interval) {
+        case "1m":
+            return 60 * 1000;
+        case "5m":
+            return 5 * 60 * 1000;
+        case "15m":
+            return 15 * 60 * 1000;
+        case "1h":
+            return 60 * 60 * 1000;
+    }
+}
+
+function aggregatePoints(
+    points: WorkspaceChartPoint[],
+    interval: WorkspaceChartInterval,
+): WorkspaceChartPoint[] {
+    const bucketMs = intervalToMs(interval);
+
+    if (bucketMs === 0) {
+        return points;
+    }
+
+    const buckets = new Map<number, number[]>();
+
+    for (const point of points) {
+        const time = new Date(point.timestamp).getTime();
+
+        if (!Number.isFinite(time)) {
+            continue;
+        }
+
+        const bucketTime = Math.floor(time / bucketMs) * bucketMs;
+
+        const values = buckets.get(bucketTime) ?? [];
+        if (point.value !== null && Number.isFinite(point.value)) {
+            values.push(point.value);
+        }
+        buckets.set(bucketTime, values);
+    }
+
+    return Array.from(buckets.entries())
+        .sort(([a], [b]) => a - b)
+        .map(([bucketTime, values]) => ({
+            timestamp: new Date(bucketTime).toISOString(),
+            value: average(values),
+        }));
+}
+
+function average(values: number[]) {
+    return values.reduce((sum, value) => sum + value, 0) / values.length;
+}