From 4ab42d7325edd6bae866cfb8a05b243d4839bbb3 Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Tue, 31 Mar 2026 11:45:39 +0300 Subject: [PATCH] Add EnergyDataPoint type for chart data point tuples --- .../cards/energy/common/energy-chart-options.ts | 17 ++++++++++++++--- .../hui-energy-devices-detail-graph-card.ts | 5 +++-- .../cards/energy/hui-energy-gas-graph-card.ts | 3 ++- .../cards/energy/hui-energy-solar-graph-card.ts | 3 ++- .../cards/energy/hui-energy-usage-graph-card.ts | 1 + .../cards/energy/hui-energy-water-graph-card.ts | 3 ++- 6 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/panels/lovelace/cards/energy/common/energy-chart-options.ts b/src/panels/lovelace/cards/energy/common/energy-chart-options.ts index cff27590b9..5e2d072f4c 100644 --- a/src/panels/lovelace/cards/energy/common/energy-chart-options.ts +++ b/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; diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts index 3cac642b13..6653b65191 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts +++ b/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, diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts index 210f76163a..c00f9baf3b 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts +++ b/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, diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts index 80d6a2d22f..8e80333c4a 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts +++ b/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, diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts index bd6bcc0226..b8adcbf385 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts +++ b/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) diff --git a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts index a8b21374d7..04b2f1e2d4 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts +++ b/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,