Use name from statistics metadata in energy dashboard (#13469)

src/data/history.ts

@@ -569,12 +569,12 @@ export const adjustStatisticsSum = (
 export const getStatisticLabel = (
   hass: HomeAssistant,
   statisticsId: string,
-  statisticsMetaData: Record<string, StatisticsMetaData>
+  statisticsMetaData: Record<string, StatisticsMetaData> | undefined
 ): string => {
   const entity = hass.states[statisticsId];
   if (entity) {
     return computeStateName(entity);
   }
-  const statisticMetaData = statisticsMetaData[statisticsId];
+  const statisticMetaData = statisticsMetaData?.[statisticsId];
   return statisticMetaData?.name || statisticsId;
 };

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

@@ -14,7 +14,6 @@ import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { getColorByIndex } from "../../../../common/color/colors";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import {
   formatNumber,
   numberFormatToLocale,
@@ -26,6 +25,7 @@ import { EnergyData, getEnergyDataCollection } from "../../../../data/energy";
 import {
   calculateStatisticSumGrowth,
   fetchStatistics,
+  getStatisticLabel,
   Statistics,
 } from "../../../../data/history";
 import { FrontendLocaleData } from "../../../../data/translation";
@@ -45,6 +45,8 @@ export class HuiEnergyDevicesGraphCard
 
   @state() private _chartData: ChartData = { datasets: [] };
 
+  @state() private _data?: EnergyData;
+
   @query("ha-chart-base") private _chart?: HaChartBase;
 
   protected hassSubscribeRequiredHostProps = ["_config"];
@@ -53,7 +55,10 @@ export class HuiEnergyDevicesGraphCard
     return [
       getEnergyDataCollection(this.hass, {
         key: this._config?.collection_key,
-      }).subscribe((data) => this._getStatistics(data)),
+      }).subscribe((data) => {
+        this._data = data;
+        this._getStatistics(data);
+      }),
     ];
   }
 
@@ -105,11 +110,14 @@ export class HuiEnergyDevicesGraphCard
           ticks: {
             autoSkip: false,
             callback: (index) => {
-              const entityId = (
+              const statisticId = (
                 this._chartData.datasets[0].data[index] as ScatterDataPoint
               ).y;
-              const entity = this.hass.states[entityId];
-              return entity ? computeStateName(entity) : entityId;
+              return getStatisticLabel(
+                this.hass,
+                statisticId as any,
+                this._data?.statsMetadata
+              );
             },
           },
         },
@@ -126,8 +134,12 @@ export class HuiEnergyDevicesGraphCard
           mode: "nearest",
           callbacks: {
             title: (item) => {
-              const entity = this.hass.states[item[0].label];
-              return entity ? computeStateName(entity) : item[0].label;
+              const statisticId = item[0].label;
+              return getStatisticLabel(
+                this.hass,
+                statisticId,
+                this._data?.statsMetadata
+              );
             },
             label: (context) =>
               `${context.dataset.label}: ${formatNumber(

src/panels/lovelace/cards/energy/hui-energy-solar-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,
@@ -327,6 +326,7 @@ export class HuiEnergySolarGraphCard
     if (forecasts) {
       datasets.push(
         ...this._processForecast(
+          energyData.statsMetadata,
           forecasts,
           solarSources,
           computedStyles.getPropertyValue("--primary-text-color"),
@@ -422,6 +422,7 @@ export class HuiEnergySolarGraphCard
   }
 
   private _processForecast(
+    statisticsMetaData: Record<string, StatisticsMetaData>,
     forecasts: EnergySolarForecasts,
     solarSources: SolarSourceTypeEnergyPreference[],
     borderColor: string,
@@ -435,8 +436,6 @@ export class HuiEnergySolarGraphCard
     // Process solar forecast data.
     solarSources.forEach((source) => {
       if (source.config_entry_solar_forecast) {
-        const entity = this.hass.states[source.stat_energy_from];
-
         const forecastsData: Record<string, number> | undefined = {};
         source.config_entry_solar_forecast.forEach((configEntryId) => {
           if (!forecasts![configEntryId]) {
@@ -481,9 +480,11 @@ export class HuiEnergySolarGraphCard
               label: this.hass.localize(
                 "ui.panel.lovelace.cards.energy.energy_solar_graph.forecast",
                 {
-                  name: entity
-                    ? computeStateName(entity)
-                    : source.stat_energy_from,
+                  name: getStatisticLabel(
+                    this.hass,
+                    source.stat_energy_from,
+                    statisticsMetaData
+                  ),
                 }
               ),
               fill: false,

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

@@ -18,7 +18,6 @@ import {
   hex2rgb,
 } from "../../../../common/color/convert-color";
 import { labBrighten, labDarken } from "../../../../common/color/lab";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { formatNumber } from "../../../../common/number/format_number";
 import "../../../../components/chart/statistics-chart";
 import "../../../../components/ha-card";
@@ -28,7 +27,10 @@ import {
   getEnergyDataCollection,
   getEnergyGasUnit,
 } from "../../../../data/energy";
-import { calculateStatisticSumGrowth } from "../../../../data/history";
+import {
+  calculateStatisticSumGrowth,
+  getStatisticLabel,
+} from "../../../../data/history";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCard } from "../../types";
@@ -199,7 +201,6 @@ export class HuiEnergySourcesTableCard
             </thead>
             <tbody class="mdc-data-table__content">
               ${types.solar?.map((source, idx) => {
-                const entity = this.hass.states[source.stat_energy_from];
                 const energy =
                   calculateStatisticSumGrowth(
                     this._data!.stats[source.stat_energy_from]
@@ -235,9 +236,11 @@ export class HuiEnergySourcesTableCard
                     ></div>
                   </td>
                   <th class="mdc-data-table__cell" scope="row">
-                    ${entity
-                      ? computeStateName(entity)
-                      : source.stat_energy_from}
+                    ${getStatisticLabel(
+                      this.hass,
+                      source.stat_energy_from,
+                      this._data?.statsMetadata
+                    )}
                   </th>
                   ${compare
                     ? html`<td
@@ -287,8 +290,6 @@ export class HuiEnergySourcesTableCard
                   </tr>`
                 : ""}
               ${types.battery?.map((source, idx) => {
-                const entityFrom = this.hass.states[source.stat_energy_from];
-                const entityTo = this.hass.states[source.stat_energy_to];
                 const energyFrom =
                   calculateStatisticSumGrowth(
                     this._data!.stats[source.stat_energy_from]
@@ -343,9 +344,11 @@ export class HuiEnergySourcesTableCard
                       ></div>
                     </td>
                     <th class="mdc-data-table__cell" scope="row">
-                      ${entityFrom
-                        ? computeStateName(entityFrom)
-                        : source.stat_energy_from}
+                      ${getStatisticLabel(
+                        this.hass,
+                        source.stat_energy_from,
+                        this._data?.statsMetadata
+                      )}
                     </th>
                     ${compare
                       ? html`<td
@@ -378,9 +381,11 @@ export class HuiEnergySourcesTableCard
                       ></div>
                     </td>
                     <th class="mdc-data-table__cell" scope="row">
-                      ${entityTo
-                        ? computeStateName(entityTo)
-                        : source.stat_energy_from}
+                      ${getStatisticLabel(
+                        this.hass,
+                        source.stat_energy_to,
+                        this._data?.statsMetadata
+                      )}
                     </th>
                     ${compare
                       ? html`<td
@@ -440,7 +445,6 @@ export class HuiEnergySourcesTableCard
                 : ""}
               ${types.grid?.map(
                 (source) => html`${source.flow_from.map((flow, idx) => {
-                  const entity = this.hass.states[flow.stat_energy_from];
                   const energy =
                     calculateStatisticSumGrowth(
                       this._data!.stats[flow.stat_energy_from]
@@ -498,9 +502,11 @@ export class HuiEnergySourcesTableCard
                       ></div>
                     </td>
                     <th class="mdc-data-table__cell" scope="row">
-                      ${entity
-                        ? computeStateName(entity)
-                        : flow.stat_energy_from}
+                      ${getStatisticLabel(
+                        this.hass,
+                        flow.stat_energy_from,
+                        this._data?.statsMetadata
+                      )}
                     </th>
                     ${compare
                       ? html`<td
@@ -545,7 +551,6 @@ export class HuiEnergySourcesTableCard
                   </tr>`;
                 })}
                 ${source.flow_to.map((flow, idx) => {
-                  const entity = this.hass.states[flow.stat_energy_to];
                   const energy =
                     (calculateStatisticSumGrowth(
                       this._data!.stats[flow.stat_energy_to]
@@ -602,7 +607,11 @@ export class HuiEnergySourcesTableCard
                       ></div>
                     </td>
                     <th class="mdc-data-table__cell" scope="row">
-                      ${entity ? computeStateName(entity) : flow.stat_energy_to}
+                      ${getStatisticLabel(
+                        this.hass,
+                        flow.stat_energy_to,
+                        this._data?.statsMetadata
+                      )}
                     </th>
                     ${compare
                       ? html`<td
@@ -695,7 +704,6 @@ export class HuiEnergySourcesTableCard
                   </tr>`
                 : ""}
               ${types.gas?.map((source, idx) => {
-                const entity = this.hass.states[source.stat_energy_from];
                 const energy =
                   calculateStatisticSumGrowth(
                     this._data!.stats[source.stat_energy_from]
@@ -752,9 +760,11 @@ export class HuiEnergySourcesTableCard
                     ></div>
                   </td>
                   <th class="mdc-data-table__cell" scope="row">
-                    ${entity
-                      ? computeStateName(entity)
-                      : source.stat_energy_from}
+                    ${getStatisticLabel(
+                      this.hass,
+                      source.stat_energy_from,
+                      this._data?.statsMetadata
+                    )}
                   </th>
                   ${compare
                     ? html` <td