M5: Energy view — per-metric decimal formatting and chart auto-refresh toggle

frontend/src/energy/EnergyCharts.tsx

@@ -41,7 +41,8 @@ import {
 } from '@mantine/core'
 
 import { useReadings, useMetrics } from './hooks'
-import type { MetricInfo } from './hooks'
+import type { MetricInfo, AutoRefreshOptions } from './hooks'
+import { formatMetricValue } from './format'
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -59,6 +60,8 @@ interface EnergyChartsProps {
   uuid: string
   /** Friendly name for the chart title. */
   deviceName: string
+  /** Auto-refresh options forwarded to useReadings. */
+  autoRefresh?: AutoRefreshOptions
 }
 
 // ---------------------------------------------------------------------------
@@ -138,7 +141,7 @@ function safePayloadValue(
 // EnergyCharts component
 // ---------------------------------------------------------------------------
 
-export function EnergyCharts({ uuid, deviceName }: EnergyChartsProps) {
+export function EnergyCharts({ uuid, deviceName, autoRefresh }: EnergyChartsProps) {
   const [activePreset, setActivePreset] = useState<string>(DEFAULT_PRESET)
 
   const selectedPreset = TIME_PRESETS.find((p) => p.value === activePreset) ?? TIME_PRESETS[0]
@@ -150,7 +153,7 @@ export function EnergyCharts({ uuid, deviceName }: EnergyChartsProps) {
     [activePreset],
   )
 
-  const readingsQuery = useReadings(uuid, { start, end, limit: CHART_READINGS_LIMIT })
+  const readingsQuery = useReadings(uuid, { start, end, limit: CHART_READINGS_LIMIT }, autoRefresh)
   const metricsQuery = useMetrics(uuid)
 
   // -------------------------------------------------------------------------
@@ -295,10 +298,10 @@ export function EnergyCharts({ uuid, deviceName }: EnergyChartsProps) {
                       />
                       <RechartsTooltip
                         formatter={(value) => {
-                          const n = value as number | null | undefined
-                          if (n == null) return ['–', metric.label] as [string, string]
+                          const formatted = formatMetricValue(value, metric)
+                          if (formatted === '—') return ['—', metric.label] as [string, string]
                           return [
-                            `${n}${metric.unit ? ' ' + metric.unit : ''}`,
+                            `${formatted}${metric.unit ? ' ' + metric.unit : ''}`,
                             metric.label,
                           ] as [string, string]
                         }}