Render energy-gas in the display unit of the sources (#26143)

src/data/energy.ts

@@ -281,6 +281,7 @@ export interface EnergyData {
   fossilEnergyConsumption?: FossilEnergyConsumption;
   fossilEnergyConsumptionCompare?: FossilEnergyConsumption;
   waterUnit: string;
+  gasUnit: string;
 }
 
 export const getReferencedStatisticIds = (
@@ -403,8 +404,6 @@ const getEnergyData = async (
         ? "day"
         : "hour";
 
-  const lengthUnit = hass.config.unit_system.length || "";
-
   const statsMetadata: Record<string, StatisticsMetaData> = {};
   const statsMetadataArray = allStatIDs.length
     ? await getStatisticMetadata(hass, allStatIDs)
@@ -416,9 +415,14 @@ const getEnergyData = async (
     });
   }
 
+  const gasUnit = getEnergyGasUnit(hass, prefs, statsMetadata);
+  const gasIsVolume = VOLUME_UNITS.includes(gasUnit as any);
+
   const energyUnits: StatisticsUnitConfiguration = {
     energy: "kWh",
-    volume: lengthUnit === "km" ? "m³" : "ft³",
+    volume: gasIsVolume
+      ? (gasUnit as (typeof VOLUME_UNITS)[number])
+      : undefined,
   };
   const waterUnit = getEnergyWaterUnit(hass, prefs, statsMetadata);
   const waterUnits: StatisticsUnitConfiguration = {
@@ -564,6 +568,7 @@ const getEnergyData = async (
     fossilEnergyConsumption,
     fossilEnergyConsumptionCompare,
     waterUnit,
+    gasUnit,
   };
 
   return data;
@@ -772,7 +777,7 @@ export const getEnergyGasUnitClass = (
   return undefined;
 };
 
-export const getEnergyGasUnit = (
+const getEnergyGasUnit = (
   hass: HomeAssistant,
   prefs: EnergyPreferences,
   statisticsMetaData: Record<string, StatisticsMetaData> = {}
@@ -782,6 +787,25 @@ export const getEnergyGasUnit = (
     return "kWh";
   }
 
+  const units = prefs.energy_sources
+    .filter((s) => s.type === "gas")
+    .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" ? "m³" : "ft³";
 };
 

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

@@ -24,7 +24,6 @@ import type {
 import {
   computeConsumptionData,
   getEnergyDataCollection,
-  getEnergyGasUnit,
   getSummedData,
 } from "../../data/energy";
 import { fileDownload } from "../../util/file_download";
@@ -152,11 +151,7 @@ class PanelEnergy extends LitElement {
       return;
     }
 
-    const gasUnit = getEnergyGasUnit(
+    const gasUnit = energyData.state.gasUnit;
-      this.hass,
-      energyData.prefs,
-      energyData.state.statsMetadata
-    );
     const electricUnit = "kWh";
 
     const energy_sources = energyData.prefs.energy_sources;

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

@@ -23,7 +23,6 @@ import type { EnergyData } from "../../../../data/energy";
 import {
   energySourcesByType,
   getEnergyDataCollection,
-  getEnergyGasUnit,
   formatConsumptionShort,
   getSummedData,
   computeConsumptionData,
@@ -334,11 +333,7 @@ class HuiEnergyDistrubutionCard
                         ${formatConsumptionShort(
                           this.hass,
                           gasUsage,
-                          getEnergyGasUnit(
+                          this._data.gasUnit
-                            this.hass,
-                            prefs,
-                            this._data.statsMetadata
-                          )
                         )}
                       </div>
                       <svg width="80" height="30">

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

@@ -14,10 +14,7 @@ import type {
   EnergyData,
   GasSourceTypeEnergyPreference,
 } from "../../../../data/energy";
-import {
+import { getEnergyDataCollection } from "../../../../data/energy";
-  getEnergyDataCollection,
-  getEnergyGasUnit,
-} from "../../../../data/energy";
 import type { Statistics, StatisticsMetaData } from "../../../../data/recorder";
 import { getStatisticLabel } from "../../../../data/recorder";
 import type { FrontendLocaleData } from "../../../../data/translation";
@@ -163,11 +160,7 @@ export class HuiEnergyGasGraphCard
         (source) => source.type === "gas"
       ) as GasSourceTypeEnergyPreference[];
 
-    this._unit = getEnergyGasUnit(
+    this._unit = energyData.gasUnit;
-      this.hass,
-      energyData.prefs,
-      energyData.statsMetadata
-    );
 
     const datasets: BarSeriesOption[] = [];
 

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

@@ -13,7 +13,6 @@ import type { EnergyData } from "../../../../data/energy";
 import {
   energySourcesByType,
   getEnergyDataCollection,
-  getEnergyGasUnit,
 } from "../../../../data/energy";
 import {
   calculateStatisticSumGrowth,
@@ -133,11 +132,7 @@ export class HuiEnergySourcesTableCard
           flow.stat_cost || flow.entity_energy_price || flow.number_energy_price
       );
 
-    const gasUnit = getEnergyGasUnit(
+    const gasUnit = this._data.gasUnit;
-      this.hass,
-      this._data.prefs,
-      this._data.statsMetadata
-    );
 
     const waterUnit = this._data.waterUnit;