Add EnergyDataPoint type for chart data point tuples

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -37,6 +37,18 @@ import { filterXSS } from "../../../../../common/util/xss";
 import type { StatisticPeriod } from "../../../../../data/recorder";
 import { getSuggestedPeriod } from "../../../../../data/energy";
 
+/**
+ * Energy chart data point tuple:
+ * [0] displayX  - midpoint of the period, used for bar positioning
+ * [1] value     - the energy value
+ * [2] originalStart - original period start timestamp, used for tooltips
+ */
+export type EnergyDataPoint = [
+  displayX: number,
+  value: number,
+  originalStart: number,
+];
+
 // Number of days of padding when showing time axis in months
 const MONTH_TIME_AXIS_PADDING = 5;
 
@@ -216,9 +228,8 @@ function formatTooltip(
   if (!params[0]?.value) {
     return "";
   }
-  // when comparing the first value is offset to match the main period
-  // and the real date is in the third value
-  // find the first param with the real date to handle gap-filled entries
+  // displayX is the period midpoint; originalStart has the real date for display.
+  // Gap-filled entries lack originalStart, so find the first real one.
   const origDate = params.find((p) => p.value?.[2] != null)?.value?.[2];
   const date = new Date(origDate ?? params[0].value?.[0]);
   let period: string;

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

@@ -33,6 +33,7 @@ import type { EnergyDevicesDetailGraphCardConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
 import {
   computeStatMidpoint,
+  type EnergyDataPoint,
   fillDataGapsAndRoundCaps,
   getCommonOptions,
   getCompareTransform,
@@ -411,7 +412,7 @@ export class HuiEnergyDevicesDetailGraphCard
       const ts = Number(time);
       const value =
         consumptionData.used_total[time] - (totalDeviceConsumption[time] || 0);
-      const dataPoint: number[] = [ts + periodOffset, value, ts];
+      const dataPoint: EnergyDataPoint = [ts + periodOffset, value, ts];
       if (compare) {
         dataPoint[0] = compareTransform(new Date(ts)).getTime() + periodOffset;
       }
@@ -502,7 +503,7 @@ export class HuiEnergyDevicesDetailGraphCard
               cStats?.find((cStat) => cStat.start === point.start)?.change || 0;
           });
 
-          const dataPoint = [
+          const dataPoint: EnergyDataPoint = [
             computeStatMidpoint(
               point.start,
               point.end,

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

@@ -28,6 +28,7 @@ import type { EnergyGasGraphCardConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
 import {
   computeStatMidpoint,
+  type EnergyDataPoint,
   fillDataGapsAndRoundCaps,
   getCommonOptions,
   getCompareTransform,
@@ -286,7 +287,7 @@ export class HuiEnergyGasGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint: (Date | string | number)[] = [
+          const dataPoint: EnergyDataPoint = [
             computeStatMidpoint(
               point.start,
               point.end,

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

@@ -31,6 +31,7 @@ import type { EnergySolarGraphCardConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
 import {
   computeStatMidpoint,
+  type EnergyDataPoint,
   fillDataGapsAndRoundCaps,
   getCommonOptions,
   getCompareTransform,
@@ -309,7 +310,7 @@ export class HuiEnergySolarGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint: (Date | string | number)[] = [
+          const dataPoint: EnergyDataPoint = [
             computeStatMidpoint(
               point.start,
               point.end,

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

@@ -496,6 +496,7 @@ export class HuiEnergyUsageGraphCard
         // Process chart data.
         for (const key of uniqueKeys) {
           const value = source[key] || 0;
+          // [displayX (midpoint), value, originalStart]
           const dataPoint = [
             new Date(key + periodOffset),
             value && ["to_grid", "to_battery"].includes(type)

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

@@ -27,6 +27,7 @@ import type { EnergyWaterGraphCardConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
 import {
   computeStatMidpoint,
+  type EnergyDataPoint,
   fillDataGapsAndRoundCaps,
   getCommonOptions,
   getCompareTransform,
@@ -286,7 +287,7 @@ export class HuiEnergyWaterGraphCard
           if (prevStart === point.start) {
             continue;
           }
-          const dataPoint: (Date | string | number)[] = [
+          const dataPoint: EnergyDataPoint = [
             computeStatMidpoint(
               point.start,
               point.end,