Implements meteoChartsPage, fixed responsiveness overall

src/features/telemetry/hooks/useTelemetryChartSeries.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type {
     WorkspaceChartInterval,
     WorkspaceChartPoint,
@@ -20,8 +20,8 @@ export function useTelemetryChartSeries(
     interval: WorkspaceChartInterval,
 ) {
     const [seriesByKey, setSeriesByKey] = useState<Record<string, WorkspaceChartPoint[]>>({});
-    const [loading, setLoading] = useState(true);
-    const [initialized, setInitialized] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const initializedRef = useRef(false);
 
     const keySignature = useMemo(
         () => sensorKeys.slice().sort().join(","),
@@ -31,20 +31,32 @@ export function useTelemetryChartSeries(
     useEffect(() => {
         if (sensorKeys.length === 0) {
             setSeriesByKey({});
+            setLoading(false);
+            initializedRef.current = false;
             return;
         }
 
         const controller = new AbortController();
 
-        async function loadHistory() {
+        async function loadHistory(showLoading: boolean) {
+            const startedAt = performance.now();
+
             try {
                 const to = new Date();
                 const from = new Date(to.getTime() - rangeToMs(timeRange));
 
-                if (!initialized) {
+                if (showLoading && !initializedRef.current) {
                     setLoading(true);
                 }
 
+                console.log("[TelemetryChartSeries REQUEST]", {
+                    sensorKeys,
+                    timeRange,
+                    interval,
+                    from: from.toISOString(),
+                    to: to.toISOString(),
+                });
+
                 const entries = await Promise.all(
                     sensorKeys.map(async (key) => {
                         const params = new URLSearchParams({
@@ -53,13 +65,15 @@ export function useTelemetryChartSeries(
                             to: to.toISOString(),
                         });
 
-                        const response = await fetch(
-                            `${BACKEND_URL}/api/historian/series?${params.toString()}`,
-                            { signal: controller.signal },
-                        );
+                        const url = `${BACKEND_URL}/api/historian/series?${params.toString()}`;
+
+                        const response = await fetch(url, {
+                            signal: controller.signal,
+                            cache: "no-store",
+                        });
 
                         if (!response.ok) {
-                            throw new Error(`Failed to load history for ${key}`);
+                            throw new Error(`Failed to load history for ${key}: ${response.status}`);
                         }
 
                         const payload = (await response.json()) as HistorianPoint[];
@@ -74,17 +88,24 @@ export function useTelemetryChartSeries(
                                 timestamp: point.timestamp,
                                 value: point.numericValue as number,
                             }));
+
                         return [key, aggregatePoints(points, interval)] as const;
                     }),
                 );
 
                 setSeriesByKey(Object.fromEntries(entries));
-                setInitialized(true);
+                initializedRef.current = true;
+
+                console.log("[TelemetryChartSeries DONE]", {
+                    sensorCount: sensorKeys.length,
+                    durationMs: Math.round(performance.now() - startedAt),
+                });
             } catch (error) {
                 if (controller.signal.aborted) return;
 
-                console.error("Failed to load telemetry chart history", error);
-                if (!initialized) {
+                console.error("[TelemetryChartSeries ERROR]", error);
+
+                if (!initializedRef.current) {
                     setSeriesByKey({});
                 }
             } finally {
@@ -94,17 +115,23 @@ export function useTelemetryChartSeries(
             }
         }
 
-        loadHistory();
+        loadHistory(true);
+
+        const refreshMs = getRefreshMs(timeRange);
+
+        if (refreshMs === null) {
+            return () => controller.abort();
+        }
 
         const intervalId = window.setInterval(() => {
-            loadHistory();
-        }, 10000);
+            loadHistory(false);
+        }, refreshMs);
 
         return () => {
             controller.abort();
             window.clearInterval(intervalId);
         };
-    }, [keySignature, timeRange, interval, initialized]);
+    }, [keySignature, timeRange, interval]);
 
     return {
         seriesByKey,
@@ -112,6 +139,24 @@ export function useTelemetryChartSeries(
     };
 }
 
+function getRefreshMs(range: WorkspaceChartTimeRange): number | null {
+    switch (range) {
+        case "15m":
+        case "1h":
+            return 10000;
+
+        case "6h":
+            return 30000;
+
+        case "24h":
+            return 60000;
+
+        case "7d":
+        case "30d":
+            return null;
+    }
+}
+
 function rangeToMs(range: WorkspaceChartTimeRange) {
     switch (range) {
         case "15m":
@@ -147,26 +192,22 @@ function aggregatePoints(
     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;
-        }
+        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);
+
+        const value = point.value;
+
+        if (value !== null && Number.isFinite(value)) {
+            values.push(value);
         }
+
         buckets.set(bucketTime, values);
     }
 
@@ -175,9 +216,12 @@ function aggregatePoints(
         .map(([bucketTime, values]) => ({
             timestamp: new Date(bucketTime).toISOString(),
             value: average(values),
-        }));
+        }))
+        .filter((point) => Number.isFinite(point.value));
 }
 
 function average(values: number[]) {
+    if (values.length === 0) return 0;
+
     return values.reduce((sum, value) => sum + value, 0) / values.length;
 }