Render energy-water in the display unit of the sources (#26141)

Render energy-water in the display unit of the source

src/data/energy.ts

@@ -26,7 +26,12 @@ import type {
   StatisticsMetaData,
   StatisticsUnitConfiguration,
 } from "./recorder";
-import { fetchStatistics, getStatisticMetadata } from "./recorder";
+import {
+  fetchStatistics,
+  getDisplayUnit,
+  getStatisticMetadata,
+  VOLUME_UNITS,
+} from "./recorder";
 import { calcDateRange } from "../common/datetime/calc_date_range";
 import type { DateRange } from "../common/datetime/calc_date_range";
 import { formatNumber } from "../common/number/format_number";
@@ -275,6 +280,7 @@ export interface EnergyData {
   co2SignalEntity?: string;
   fossilEnergyConsumption?: FossilEnergyConsumption;
   fossilEnergyConsumptionCompare?: FossilEnergyConsumption;
+  waterUnit: string;
 }
 
 export const getReferencedStatisticIds = (
@@ -398,12 +404,25 @@ const getEnergyData = async (
         : "hour";
 
   const lengthUnit = hass.config.unit_system.length || "";
+
+  const statsMetadata: Record<string, StatisticsMetaData> = {};
+  const statsMetadataArray = allStatIDs.length
+    ? await getStatisticMetadata(hass, allStatIDs)
+    : [];
+
+  if (allStatIDs.length) {
+    statsMetadataArray.forEach((x) => {
+      statsMetadata[x.statistic_id] = x;
+    });
+  }
+
   const energyUnits: StatisticsUnitConfiguration = {
     energy: "kWh",
     volume: lengthUnit === "km" ? "m³" : "ft³",
   };
+  const waterUnit = getEnergyWaterUnit(hass, prefs, statsMetadata);
   const waterUnits: StatisticsUnitConfiguration = {
-    volume: lengthUnit === "km" ? "L" : "gal",
+    volume: waterUnit,
   };
 
   const _energyStats: Statistics | Promise<Statistics> = energyStatIds.length
@@ -511,18 +530,11 @@ const getEnergyData = async (
     }
   }
 
-  const statsMetadata: Record<string, StatisticsMetaData> = {};
-  const _getStatisticMetadata:
-    | Promise<StatisticsMetaData[]>
-    | StatisticsMetaData[] = allStatIDs.length
-    ? getStatisticMetadata(hass, allStatIDs)
-    : [];
   const [
     energyStats,
     waterStats,
     energyStatsCompare,
     waterStatsCompare,
-    statsMetadataArray,
     fossilEnergyConsumption,
     fossilEnergyConsumptionCompare,
   ] = await Promise.all([
@@ -530,7 +542,6 @@ const getEnergyData = async (
     _waterStats,
     _energyStatsCompare,
     _waterStatsCompare,
-    _getStatisticMetadata,
     _fossilEnergyConsumption,
     _fossilEnergyConsumptionCompare,
   ]);
@@ -538,11 +549,6 @@ const getEnergyData = async (
   if (compare) {
     statsCompare = { ...energyStatsCompare, ...waterStatsCompare };
   }
-  if (allStatIDs.length) {
-    statsMetadataArray.forEach((x) => {
-      statsMetadata[x.statistic_id] = x;
-    });
-  }
 
   const data: EnergyData = {
     start,
@@ -557,6 +563,7 @@ const getEnergyData = async (
     co2SignalEntity,
     fossilEnergyConsumption,
     fossilEnergyConsumptionCompare,
+    waterUnit,
   };
 
   return data;
@@ -778,8 +785,32 @@ export const getEnergyGasUnit = (
   return hass.config.unit_system.length === "km" ? "m³" : "ft³";
 };
 
-export const getEnergyWaterUnit = (hass: HomeAssistant): string =>
+const getEnergyWaterUnit = (
-  hass.config.unit_system.length === "km" ? "L" : "gal";
+  hass: HomeAssistant,
+  prefs: EnergyPreferences,
+  statisticsMetaData: Record<string, StatisticsMetaData>
+): (typeof VOLUME_UNITS)[number] => {
+  const units = prefs.energy_sources
+    .filter((s) => s.type === "water")
+    .map((s) =>
+      getDisplayUnit(
+        hass,
+        s.stat_energy_from,
+        statisticsMetaData[s.stat_energy_from]
+      )
+    );
+  if (units.length) {
+    const first = units[0];
+    if (
+      VOLUME_UNITS.includes(first as any) &&
+      units.every((u) => u === first)
+    ) {
+      return first as (typeof VOLUME_UNITS)[number];
+    }
+  }
+
+  return hass.config.unit_system.length === "km" ? "L" : "gal";
+};
 
 export const energyStatisticHelpUrl =
   "/docs/energy/faq/#troubleshooting-missing-entities";

src/data/recorder.ts

@@ -108,6 +108,8 @@ export interface StatisticsValidationResultMeanTypeChanged {
   };
 }
 
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;
+
 export interface StatisticsUnitConfiguration {
   energy?: "Wh" | "kWh" | "MWh" | "GJ";
   power?: "W" | "kW";
@@ -122,7 +124,7 @@ export interface StatisticsUnitConfiguration {
     | "psi"
     | "mmHg";
   temperature?: "°C" | "°F" | "K";
-  volume?: "L" | "gal" | "ft³" | "m³";
+  volume?: (typeof VOLUME_UNITS)[number];
 }
 
 const _statisticTypes = [

src/panels/energy/ha-panel-energy.ts

@@ -25,7 +25,6 @@ import {
   computeConsumptionData,
   getEnergyDataCollection,
   getEnergyGasUnit,
-  getEnergyWaterUnit,
   getSummedData,
 } from "../../data/energy";
 import { fileDownload } from "../../util/file_download";
@@ -158,7 +157,6 @@ class PanelEnergy extends LitElement {
       energyData.prefs,
       energyData.state.statsMetadata
     );
-    const waterUnit = getEnergyWaterUnit(this.hass);
     const electricUnit = "kWh";
 
     const energy_sources = energyData.prefs.energy_sources;
@@ -335,7 +333,7 @@ class PanelEnergy extends LitElement {
     printCategory(
       "water_consumption",
       water_consumptions,
-      waterUnit,
+      energyData.state.waterUnit,
       "water_consumption_cost",
       water_consumptions_cost
     );

src/panels/lovelace/cards/energy/hui-energy-distribution-card.ts

@@ -24,7 +24,6 @@ import {
   energySourcesByType,
   getEnergyDataCollection,
   getEnergyGasUnit,
-  getEnergyWaterUnit,
   formatConsumptionShort,
   getSummedData,
   computeConsumptionData,
@@ -373,7 +372,7 @@ class HuiEnergyDistrubutionCard
                           ${formatConsumptionShort(
                             this.hass,
                             waterUsage,
-                            getEnergyWaterUnit(this.hass)
+                            this._data.waterUnit
                           )}
                         </div>
                         <svg width="80" height="30">
@@ -603,7 +602,7 @@ class HuiEnergyDistrubutionCard
                         ${formatConsumptionShort(
                           this.hass,
                           waterUsage,
-                          getEnergyWaterUnit(this.hass)
+                          this._data.waterUnit
                         )}
                       </div>
                       <span class="label"

src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts

@@ -14,7 +14,6 @@ import {
   energySourcesByType,
   getEnergyDataCollection,
   getEnergyGasUnit,
-  getEnergyWaterUnit,
 } from "../../../../data/energy";
 import {
   calculateStatisticSumGrowth,
@@ -140,7 +139,7 @@ export class HuiEnergySourcesTableCard
       this._data.statsMetadata
     );
 
-    const waterUnit = getEnergyWaterUnit(this.hass);
+    const waterUnit = this._data.waterUnit;
 
     const compare = this._data.statsCompare !== undefined;
 

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

@@ -13,10 +13,7 @@ import type {
   EnergyData,
   WaterSourceTypeEnergyPreference,
 } from "../../../../data/energy";
-import {
+import { getEnergyDataCollection } from "../../../../data/energy";
-  getEnergyDataCollection,
-  getEnergyWaterUnit,
-} from "../../../../data/energy";
 import type { Statistics, StatisticsMetaData } from "../../../../data/recorder";
 import { getStatisticLabel } from "../../../../data/recorder";
 import type { FrontendLocaleData } from "../../../../data/translation";
@@ -163,7 +160,7 @@ export class HuiEnergyWaterGraphCard
         (source) => source.type === "water"
       ) as WaterSourceTypeEnergyPreference[];
 
-    this._unit = getEnergyWaterUnit(this.hass);
+    this._unit = energyData.waterUnit;
 
     const datasets: BarSeriesOption[] = [];