Add proper label for gas energy stats (#12828)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/data/energy.ts

@@ -240,6 +240,7 @@ export interface EnergyData {
   prefs: EnergyPreferences;
   info: EnergyInfo;
   stats: Statistics;
+  statsMetadata: Record<string, StatisticsMetaData>;
   statsCompare: Statistics;
   co2SignalConfigEntry?: ConfigEntry;
   co2SignalEntity?: string;
@@ -285,15 +286,6 @@ const getEnergyData = async (
 
   const consumptionStatIDs: string[] = [];
   const statIDs: string[] = [];
-  const gasSources: GasSourceTypeEnergyPreference[] =
-    prefs.energy_sources.filter(
-      (source) => source.type === "gas"
-    ) as GasSourceTypeEnergyPreference[];
-  const gasStatisticIdsWithMeta: StatisticsMetaData[] =
-    await getStatisticMetadata(
-      hass,
-      gasSources.map((source) => source.stat_energy_from)
-    );
 
   for (const source of prefs.energy_sources) {
     if (source.type === "solar") {
@@ -303,20 +295,6 @@ const getEnergyData = async (
 
     if (source.type === "gas") {
       statIDs.push(source.stat_energy_from);
-      const entity = hass.states[source.stat_energy_from];
-      if (!entity) {
-        for (const statisticIdWithMeta of gasStatisticIdsWithMeta) {
-          if (
-            statisticIdWithMeta?.statistic_id === source.stat_energy_from &&
-            statisticIdWithMeta?.unit_of_measurement
-          ) {
-            source.unit_of_measurement =
-              statisticIdWithMeta?.unit_of_measurement === "Wh"
-                ? "kWh"
-                : statisticIdWithMeta?.unit_of_measurement;
-          }
-        }
-      }
       if (source.stat_cost) {
         statIDs.push(source.stat_cost);
       }
@@ -432,6 +410,12 @@ const getEnergyData = async (
     }
   });
 
+  const statsMetadataArray = await getStatisticMetadata(hass, statIDs);
+  const statsMetadata: Record<string, StatisticsMetaData> = {};
+  statsMetadataArray.forEach((x) => {
+    statsMetadata[x.statistic_id] = x;
+  });
+
   const data: EnergyData = {
     start,
     end,
@@ -440,6 +424,7 @@ const getEnergyData = async (
     info,
     prefs,
     stats,
+    statsMetadata,
     statsCompare,
     co2SignalConfigEntry,
     co2SignalEntity,
@@ -628,13 +613,13 @@ export const getEnergyGasUnitCategory = (
 
 export const getEnergyGasUnit = (
   hass: HomeAssistant,
-  prefs: EnergyPreferences
+  prefs: EnergyPreferences,
+  statisticsMetaData: Record<string, StatisticsMetaData> = {}
 ): string | undefined => {
   for (const source of prefs.energy_sources) {
     if (source.type !== "gas") {
       continue;
     }
-
     const entity = hass.states[source.stat_energy_from];
     if (entity?.attributes.unit_of_measurement) {
       // Wh is normalized to kWh by stats generation
@@ -642,8 +627,11 @@ export const getEnergyGasUnit = (
         ? "kWh"
         : entity.attributes.unit_of_measurement;
     }
-    if (source.unit_of_measurement) {
+    const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
-      return source.unit_of_measurement;
+    if (statisticIdWithMeta?.unit_of_measurement) {
+      return statisticIdWithMeta.unit_of_measurement === "Wh"
+        ? "kWh"
+        : statisticIdWithMeta.unit_of_measurement;
     }
   }
   return undefined;

src/data/history.ts

@@ -1,7 +1,10 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplayFromEntityAttributes } from "../common/entity/compute_state_display";
-import { computeStateNameFromEntityAttributes } from "../common/entity/compute_state_name";
+import {
+  computeStateName,
+  computeStateNameFromEntityAttributes,
+} from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
 import { FrontendLocaleData } from "./translation";
@@ -547,3 +550,16 @@ export const adjustStatisticsSum = (
     start_time,
     adjustment,
   });
+
+export const getStatisticLabel = (
+  hass: HomeAssistant,
+  statisticsId: string,
+  statisticsMetaData: Record<string, StatisticsMetaData>
+): string => {
+  const entity = hass.states[statisticsId];
+  if (entity) {
+    return computeStateName(entity);
+  }
+  const statisticMetaData = statisticsMetaData[statisticsId];
+  return statisticMetaData?.name || statisticsId;
+};

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

@@ -315,7 +315,11 @@ class HuiEnergyDistrubutionCard
                         ${formatNumber(gasUsage || 0, this.hass.locale, {
                           maximumFractionDigits: 1,
                         })}
-                        ${getEnergyGasUnit(this.hass, prefs) || "m³"}
+                        ${getEnergyGasUnit(
+                          this.hass,
+                          prefs,
+                          this._data.statsMetadata
+                        ) || "m³"}
                       </div>
                       <svg width="80" height="30">
                         <path d="M40 0 v30" id="gas" />

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

@@ -26,7 +26,6 @@ import {
 import { labBrighten, labDarken } from "../../../../common/color/lab";
 import { formatDateShort } from "../../../../common/datetime/format_date";
 import { formatTime } from "../../../../common/datetime/format_time";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import {
   formatNumber,
   numberFormatToLocale,
@@ -39,7 +38,11 @@ import {
   getEnergyDataCollection,
   getEnergyGasUnit,
 } from "../../../../data/energy";
-import { Statistics } from "../../../../data/history";
+import {
+  Statistics,
+  StatisticsMetaData,
+  getStatisticLabel,
+} from "../../../../data/history";
 import { FrontendLocaleData } from "../../../../data/translation";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
@@ -270,7 +273,9 @@ export class HuiEnergyGasGraphCard
         (source) => source.type === "gas"
       ) as GasSourceTypeEnergyPreference[];
 
-    this._unit = getEnergyGasUnit(this.hass, energyData.prefs) || "m³";
+    this._unit =
+      getEnergyGasUnit(this.hass, energyData.prefs, energyData.statsMetadata) ||
+      "m³";
 
     const datasets: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
 
@@ -280,7 +285,12 @@ export class HuiEnergyGasGraphCard
       .trim();
 
     datasets.push(
-      ...this._processDataSet(energyData.stats, gasSources, gasColor)
+      ...this._processDataSet(
+        energyData.stats,
+        energyData.statsMetadata,
+        gasSources,
+        gasColor
+      )
     );
 
     if (energyData.statsCompare) {
@@ -298,6 +308,7 @@ export class HuiEnergyGasGraphCard
       datasets.push(
         ...this._processDataSet(
           energyData.statsCompare,
+          energyData.statsMetadata,
           gasSources,
           gasColor,
           true
@@ -318,14 +329,14 @@ export class HuiEnergyGasGraphCard
 
   private _processDataSet(
     statistics: Statistics,
+    statisticsMetaData: Record<string, StatisticsMetaData>,
     gasSources: GasSourceTypeEnergyPreference[],
     gasColor: string,
     compare = false
   ) {
     const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
-    gasSources.forEach((source, idx) => {
-      const entity = this.hass.states[source.stat_energy_from];
 
+    gasSources.forEach((source, idx) => {
       const modifiedColor =
         idx > 0
           ? this.hass.themes.darkMode
@@ -368,7 +379,11 @@ export class HuiEnergyGasGraphCard
       }
 
       data.push({
-        label: entity ? computeStateName(entity) : source.stat_energy_from,
+        label: getStatisticLabel(
+          this.hass,
+          source.stat_energy_from,
+          statisticsMetaData
+        ),
         borderColor: compare ? borderColor + "7F" : borderColor,
         backgroundColor: compare ? borderColor + "32" : borderColor + "7F",
         data: gasConsumptionData,

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

@@ -40,7 +40,11 @@ import {
   getEnergySolarForecasts,
   SolarSourceTypeEnergyPreference,
 } from "../../../../data/energy";
-import { Statistics } from "../../../../data/history";
+import {
+  Statistics,
+  StatisticsMetaData,
+  getStatisticLabel,
+} from "../../../../data/history";
 import { FrontendLocaleData } from "../../../../data/translation";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
@@ -289,7 +293,12 @@ export class HuiEnergySolarGraphCard
       .trim();
 
     datasets.push(
-      ...this._processDataSet(energyData.stats, solarSources, solarColor)
+      ...this._processDataSet(
+        energyData.stats,
+        energyData.statsMetadata,
+        solarSources,
+        solarColor
+      )
     );
 
     if (energyData.statsCompare) {
@@ -307,6 +316,7 @@ export class HuiEnergySolarGraphCard
       datasets.push(
         ...this._processDataSet(
           energyData.statsCompare,
+          energyData.statsMetadata,
           solarSources,
           solarColor,
           true
@@ -339,6 +349,7 @@ export class HuiEnergySolarGraphCard
 
   private _processDataSet(
     statistics: Statistics,
+    statisticsMetaData: Record<string, StatisticsMetaData>,
     solarSources: SolarSourceTypeEnergyPreference[],
     solarColor: string,
     compare = false
@@ -346,8 +357,6 @@ export class HuiEnergySolarGraphCard
     const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
 
     solarSources.forEach((source, idx) => {
-      const entity = this.hass.states[source.stat_energy_from];
-
       const modifiedColor =
         idx > 0
           ? this.hass.themes.darkMode
@@ -393,7 +402,11 @@ export class HuiEnergySolarGraphCard
         label: this.hass.localize(
           "ui.panel.lovelace.cards.energy.energy_solar_graph.production",
           {
-            name: entity ? computeStateName(entity) : source.stat_energy_from,
+            name: getStatisticLabel(
+              this.hass,
+              source.stat_energy_from,
+              statisticsMetaData
+            ),
           }
         ),
         borderColor: compare ? borderColor + "7F" : borderColor,

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

@@ -128,7 +128,9 @@ export class HuiEnergySourcesTableCard
           flow.stat_cost || flow.entity_energy_price || flow.number_energy_price
       );
 
-    const gasUnit = getEnergyGasUnit(this.hass, this._data.prefs) || "";
+    const gasUnit =
+      getEnergyGasUnit(this.hass, this._data.prefs, this._data.statsMetadata) ||
+      "";
 
     const compare = this._data.statsCompare !== undefined;
 

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

@@ -26,7 +26,6 @@ import {
 import { labBrighten, labDarken } from "../../../../common/color/lab";
 import { formatDateShort } from "../../../../common/datetime/format_date";
 import { formatTime } from "../../../../common/datetime/format_time";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import {
   formatNumber,
   numberFormatToLocale,
@@ -34,7 +33,11 @@ import {
 import "../../../../components/chart/ha-chart-base";
 import "../../../../components/ha-card";
 import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
-import { Statistics } from "../../../../data/history";
+import {
+  Statistics,
+  StatisticsMetaData,
+  getStatisticLabel,
+} from "../../../../data/history";
 import { FrontendLocaleData } from "../../../../data/translation";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
@@ -378,7 +381,14 @@ export class HuiEnergyUsageGraphCard
     this._compareEnd = energyData.endCompare;
 
     datasets.push(
-      ...this._processDataSet(energyData.stats, statIds, colors, labels, false)
+      ...this._processDataSet(
+        energyData.stats,
+        energyData.statsMetadata,
+        statIds,
+        colors,
+        labels,
+        false
+      )
     );
 
     if (energyData.statsCompare) {
@@ -396,6 +406,7 @@ export class HuiEnergyUsageGraphCard
       datasets.push(
         ...this._processDataSet(
           energyData.statsCompare,
+          energyData.statsMetadata,
           statIds,
           colors,
           labels,
@@ -411,6 +422,7 @@ export class HuiEnergyUsageGraphCard
 
   private _processDataSet(
     statistics: Statistics,
+    statisticsMetaData: Record<string, StatisticsMetaData>,
     statIdsByCat: {
       to_grid?: string[] | undefined;
       from_grid?: string[] | undefined;
@@ -580,8 +592,6 @@ export class HuiEnergyUsageGraphCard
 
     Object.entries(combinedData).forEach(([type, sources]) => {
       Object.entries(sources).forEach(([statId, source], idx) => {
-        const entity = this.hass.states[statId];
-
         const modifiedColor =
           idx > 0
             ? this.hass.themes.darkMode
@@ -610,9 +620,7 @@ export class HuiEnergyUsageGraphCard
           label:
             type in labels
               ? labels[type]
-              : entity
+              : getStatisticLabel(this.hass, statId, statisticsMetaData),
-              ? computeStateName(entity)
-              : statId,
           order:
             type === "used_solar"
               ? 1