api: fix line chart rendering with null gaps (use labels+data arrays, not {x,y} objects)

Chart.js 4's LineController.parseObjectData throws 'Cannot read properties
of null (reading x)' when a dataset mixes {x,y} point objects with null
entries. This aborted loadMainCharts() after the PV chart, leaving the
overview/battery/SOC charts blank.

Switch to the standard labels (timestamps) + data (values) array form,
which Chart.js handles natively for gaps via spanGaps:false.

Author: jmewing

api/static/index.html

@@ -666,13 +666,13 @@ <h3 id="rule-editor-title">Edit Rule</h3>
   renderDetailHTML();
 }
 
-function createLineChart(id, datasets, opts={}) {
+function createLineChart(id, labels, datasets, opts={}) {
   const ctx = document.getElementById(id);
   if (!ctx) return;
   if (charts[id]) charts[id].destroy();
   charts[id] = new Chart(ctx.getContext('2d'), {
     type:'line',
-    data:{datasets},
+    data:{labels, datasets},
     options:{
       responsive:true,
       maintainAspectRatio:false,
@@ -708,14 +708,15 @@ <h3 id="rule-editor-title">Edit Rule</h3>
   try {
     const res = await fetchJson(API + '/api/history?minutes=1440&max_points=300&fields=pv1_power,pv2_power,charge_power,discharge_power,grid_import_power,grid_export_power,load_power,battery_voltage,soc');
     const rows = res.snapshots || [];
+    const labels = rows.map(r => r.timestamp);
     const mk = (label, field, color, fill=true) => ({
       label,
-      data: rows.map(r => r.registers[field] != null ? {x:r.timestamp, y:r.registers[field]} : null),
+      data: rows.map(r => r.registers[field] != null ? r.registers[field] : null),
       spanGaps: false,
       borderColor: color, backgroundColor: color + (fill?'33':''), fill, tension:0.2, pointRadius:0
     });
-    createLineChart('chart-pv-today', [mk('PV1','pv1_power','#eab308'), mk('PV2','pv2_power','#facc15')]);
-    createLineChart('chart-overview-24h', [
+    createLineChart('chart-pv-today', labels, [mk('PV1','pv1_power','#eab308'), mk('PV2','pv2_power','#facc15')]);
+    createLineChart('chart-overview-24h', labels, [
       mk('Solar','pv1_power','#eab308'),
       mk('Battery charge','charge_power','#a855f7'),
       mk('Battery discharge','discharge_power','#22c55e'),
@@ -731,13 +732,13 @@ <h3 id="rule-editor-title">Edit Rule</h3>
         const d = r.registers['discharge_power'];
         const c = r.registers['charge_power'];
         if (d == null && c == null) return null;
-        return { x: r.timestamp, y: (d || 0) - (c || 0) };
+        return (d || 0) - (c || 0);
       }),
       spanGaps: false,
       borderColor: '#22c55e', backgroundColor: '#22c55e', fill: false, tension: 0.2, pointRadius: 0
     };
-    createLineChart('chart-battery-power', [batPower]);
-    createLineChart('chart-battery-soc', [mk('SOC','soc','#a855f7', false)]);
+    createLineChart('chart-battery-power', labels, [batPower]);
+    createLineChart('chart-battery-soc', labels, [mk('SOC','soc','#a855f7', false)]);
   } catch (e) { console.error('loadMainCharts error', e); }
 }