From 544c8fe3bb8c1750593e95c74aa7abd708d8fe8c Mon Sep 17 00:00:00 2001
From: Erik Montnemery <erik@montnemery.com>
Date: Thu, 15 Sep 2022 13:58:26 +0200
Subject: [PATCH] Improve `StatisticsChart` to only fetch needed metadata
 (#13617)

---
 src/components/chart/statistics-chart.ts      | 32 +++++++++++--------
 .../energy/hui-energy-sources-table-card.ts   |  1 -
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts
index 50f7e263de..e5f60ad4e0 100644
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -13,6 +13,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import {
@@ -20,11 +21,10 @@ import {
   numberFormatToLocale,
 } from "../../common/number/format_number";
 import {
-  getStatisticIds,
   getStatisticLabel,
+  getStatisticMetadata,
   Statistics,
   statisticsHaveType,
-  StatisticsMetaData,
   StatisticType,
 } from "../../data/recorder";
 import type { HomeAssistant } from "../../types";
@@ -36,8 +36,6 @@ class StatisticsChart extends LitElement {
 
   @property({ attribute: false }) public statisticsData!: Statistics;
 
-  @property({ type: Array }) public statisticIds?: StatisticsMetaData[];
-
   @property() public names: boolean | Record<string, string> = false;
 
   @property() public unit?: string;
@@ -191,18 +189,28 @@ class StatisticsChart extends LitElement {
     };
   }
 
-  private async _getStatisticIds() {
-    this.statisticIds = await getStatisticIds(this.hass);
-  }
+  private _getStatisticsMetaData = memoizeOne(
+    async (statisticIds: string[] | undefined) => {
+      const statsMetadataArray = await getStatisticMetadata(
+        this.hass,
+        statisticIds
+      );
+      const statisticsMetaData = {};
+      statsMetadataArray.forEach((x) => {
+        statisticsMetaData[x.statistic_id] = x;
+      });
+      return statisticsMetaData;
+    }
+  );
 
   private async _generateData() {
     if (!this.statisticsData) {
       return;
     }
 
-    if (!this.statisticIds) {
-      await this._getStatisticIds();
-    }
+    const statisticsMetaData = await this._getStatisticsMetaData(
+      Object.keys(this.statisticsData)
+    );
 
     let colorIndex = 0;
     const statisticsData = Object.values(this.statisticsData);
@@ -233,9 +241,7 @@ class StatisticsChart extends LitElement {
     const names = this.names || {};
     statisticsData.forEach((stats) => {
       const firstStat = stats[0];
-      const meta = this.statisticIds!.find(
-        (stat) => stat.statistic_id === firstStat.statistic_id
-      );
+      const meta = statisticsMetaData?.[firstStat.statistic_id];
       let name = names[firstStat.statistic_id];
       if (!name) {
         name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
index 64779926c3..dc5eb4b977 100644
--- a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
+++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
@@ -19,7 +19,6 @@ import {
 } from "../../../../common/color/convert-color";
 import { labBrighten, labDarken } from "../../../../common/color/lab";
 import { formatNumber } from "../../../../common/number/format_number";
-import "../../../../components/chart/statistics-chart";
 import "../../../../components/ha-card";
 import {
   EnergyData,