Center energy dashboard bar charts on period midpoint

src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts

@@ -389,9 +389,8 @@ export class HuiEnergyDevicesDetailGraphCard
 
     processedData.forEach((device) => {
       device.data.forEach((datapoint) => {
-        totalDeviceConsumption[datapoint[compare ? 2 : 0]] =
-          (totalDeviceConsumption[datapoint[compare ? 2 : 0]] || 0) +
-          datapoint[1];
+        totalDeviceConsumption[datapoint[2]] =
+          (totalDeviceConsumption[datapoint[2]] || 0) + datapoint[1];
       });
     });
     const compareTransform = getCompareTransform(
@@ -400,20 +399,23 @@ export class HuiEnergyDevicesDetailGraphCard
     );
 
     const untrackedConsumption: BarSeriesOption["data"] = [];
-    Object.keys(consumptionData.used_total)
-      .sort((a, b) => Number(a) - Number(b))
-      .forEach((time) => {
-        const ts = Number(time);
-        const value =
-          consumptionData.used_total[time] -
-          (totalDeviceConsumption[time] || 0);
-        const dataPoint: number[] = [ts, value];
-        if (compare) {
-          dataPoint[2] = dataPoint[0];
-          dataPoint[0] = compareTransform(new Date(ts)).getTime();
-        }
-        untrackedConsumption.push(dataPoint);
-      });
+    const sortedTimes = Object.keys(consumptionData.used_total).sort(
+      (a, b) => Number(a) - Number(b)
+    );
+    const periodOffset =
+      sortedTimes.length >= 2
+        ? (Number(sortedTimes[1]) - Number(sortedTimes[0])) / 2
+        : 0;
+    sortedTimes.forEach((time) => {
+      const ts = Number(time);
+      const value =
+        consumptionData.used_total[time] - (totalDeviceConsumption[time] || 0);
+      const dataPoint: number[] = [ts + periodOffset, value, ts];
+      if (compare) {
+        dataPoint[0] = compareTransform(new Date(ts + periodOffset)).getTime();
+      }
+      untrackedConsumption.push(dataPoint);
+    });
     // random id to always add untracked at the end
     const order = Date.now();
     const dataset: BarSeriesOption = {
@@ -499,10 +501,10 @@ export class HuiEnergyDevicesDetailGraphCard
               cStats?.find((cStat) => cStat.start === point.start)?.change || 0;
           });
 
-          const dataPoint = [point.start, point.change - sumChildren];
+          const midpoint = (point.start + point.end) / 2;
+          const dataPoint = [midpoint, point.change - sumChildren, point.start];
           if (compare) {
-            dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(new Date(point.start)).getTime();
+            dataPoint[0] = compareTransform(new Date(midpoint)).getTime();
           }
           consumptionData.push(dataPoint);
           prevStart = point.start;

src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts

@@ -285,13 +285,14 @@ export class HuiEnergyGasGraphCard
           if (prevStart === point.start) {
             continue;
           }
+          const midpoint = (point.start + point.end) / 2;
           const dataPoint: (Date | string | number)[] = [
-            point.start,
+            midpoint,
             point.change,
+            point.start,
           ];
           if (compare) {
-            dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(new Date(point.start));
+            dataPoint[0] = compareTransform(new Date(midpoint));
           }
           gasConsumptionData.push(dataPoint);
           prevStart = point.start;

src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts

@@ -308,13 +308,14 @@ export class HuiEnergySolarGraphCard
           if (prevStart === point.start) {
             continue;
           }
+          const midpoint = (point.start + point.end) / 2;
           const dataPoint: (Date | string | number)[] = [
-            point.start,
+            midpoint,
             point.change,
+            point.start,
           ];
           if (compare) {
-            dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(new Date(point.start));
+            dataPoint[0] = compareTransform(new Date(midpoint));
           }
           solarProductionData.push(dataPoint);
           prevStart = point.start;
@@ -410,8 +411,18 @@ export class HuiEnergySolarGraphCard
 
         if (forecastsData) {
           const solarForecastData: LineSeriesOption["data"] = [];
+          const forecastTimes = Object.keys(forecastsData)
+            .map(Number)
+            .sort((a, b) => a - b);
+          const forecastOffset =
+            forecastTimes.length >= 2
+              ? (forecastTimes[1] - forecastTimes[0]) / 2
+              : 0;
           for (const [time, value] of Object.entries(forecastsData)) {
-            solarForecastData.push([Number(time), value / 1000]);
+            solarForecastData.push([
+              Number(time) + forecastOffset,
+              value / 1000,
+            ]);
           }
 
           if (solarForecastData.length) {

src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts

@@ -482,6 +482,9 @@ export class HuiEnergyUsageGraphCard
 
     const uniqueKeys = summedData.timestamps;
 
+    const periodOffset =
+      uniqueKeys.length >= 2 ? (uniqueKeys[1] - uniqueKeys[0]) / 2 : 0;
+
     const compareTransform = getCompareTransform(
       this._start,
       this._compareStart!
@@ -494,13 +497,13 @@ export class HuiEnergyUsageGraphCard
         for (const key of uniqueKeys) {
           const value = source[key] || 0;
           const dataPoint = [
-            new Date(key),
+            new Date(key + periodOffset),
             value && ["to_grid", "to_battery"].includes(type)
               ? -1 * value
               : value,
+            new Date(key),
           ];
           if (compare) {
-            dataPoint[2] = dataPoint[0];
             dataPoint[0] = compareTransform(dataPoint[0] as Date);
           }
           points.push(dataPoint);

src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts

@@ -285,13 +285,14 @@ export class HuiEnergyWaterGraphCard
           if (prevStart === point.start) {
             continue;
           }
+          const midpoint = (point.start + point.end) / 2;
           const dataPoint: (Date | string | number)[] = [
-            point.start,
+            midpoint,
             point.change,
+            point.start,
           ];
           if (compare) {
-            dataPoint[2] = dataPoint[0];
-            dataPoint[0] = compareTransform(new Date(point.start));
+            dataPoint[0] = compareTransform(new Date(midpoint));
           }
           waterConsumptionData.push(dataPoint);
           prevStart = point.start;