M5: roll Energy chart window for live auto-refresh (English label); render boolean config fields as switches

frontend/src/energy/EnergyCharts.tsx

@@ -83,13 +83,6 @@ const TIME_PRESETS: TimePreset[] = [
 
 const DEFAULT_PRESET = '1h'
 
-/** Derive ISO start/end strings for a given preset. */
-function presetWindow(spanMs: number): { start: string; end: string } {
-  const end = new Date()
-  const start = new Date(end.getTime() - spanMs)
-  return { start: start.toISOString(), end: end.toISOString() }
-}
-
 // ---------------------------------------------------------------------------
 // Metric colour palette — cycles through a fixed set
 // ---------------------------------------------------------------------------
@@ -145,15 +138,16 @@ export function EnergyCharts({ uuid, deviceName, autoRefresh }: EnergyChartsProp
   const [activePreset, setActivePreset] = useState<string>(DEFAULT_PRESET)
 
   const selectedPreset = TIME_PRESETS.find((p) => p.value === activePreset) ?? TIME_PRESETS[0]
-  const { start, end } = useMemo(
-    () => presetWindow(selectedPreset.spanMs),
-    // Recompute whenever the preset changes; intentionally excludes Date.now()
-    // so the window doesn't drift on every render — it only resets on tab change.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [activePreset],
-  )
 
-  const readingsQuery = useReadings(uuid, { start, end, limit: CHART_READINGS_LIMIT }, autoRefresh)
+  // Pass spanMs rather than fixed start/end so that every refetchInterval-triggered
+  // queryFn call computes end=now() and rolls the window forward — new readings
+  // recorded after mount will appear without a manual page refresh.
+  // Switching presets changes spanMs → different queryKey → immediate re-fetch.
+  const readingsQuery = useReadings(
+    uuid,
+    { spanMs: selectedPreset.spanMs, limit: CHART_READINGS_LIMIT },
+    autoRefresh,
+  )
   const metricsQuery = useMetrics(uuid)
 
   // -------------------------------------------------------------------------