Fix legend in devices-detail-graph (home-assistant#26596)

Author: karwosts

src/components/chart/ha-chart-base.ts

@@ -39,6 +39,7 @@ export type CustomLegendOption = ECOption["legend"] & {
   type: "custom";
   data?: {
     id?: string;
+    secondaryIds?: string[]; // Other dataset IDs that should be controlled by this legend item.
     name: string;
     itemStyle?: Record<string, any>;
   }[];
@@ -181,6 +182,10 @@ export class HaChartBase extends LitElement {
       return;
     }
     let chartOptions: ECOption = {};
+    if (changedProps.has("options")) {
+      // Separate 'if' from below since this must updated before _getSeries()
+      this._updateHiddenStatsFromOptions(this.options);
+    }
     if (changedProps.has("data") || changedProps.has("_hiddenDatasets")) {
       chartOptions.series = this._getSeries();
     }
@@ -451,14 +456,7 @@ export class HaChartBase extends LitElement {
         });
       }
 
-      const legend = ensureArray(this.options?.legend || [])[0] as
-        | LegendComponentOption
-        | undefined;
-      Object.entries(legend?.selected || {}).forEach(([stat, selected]) => {
-        if (selected === false) {
-          this._hiddenDatasets.add(stat);
-        }
-      });
+      this._updateHiddenStatsFromOptions(this.options);
 
       this.chart.setOption({
         ...this._createOptions(),
@@ -469,6 +467,42 @@ export class HaChartBase extends LitElement {
     }
   }
 
+  // Return an array of all IDs associated with the legend item of the primaryId
+  private _getAllIdsFromLegend(
+    options: ECOption | undefined,
+    primaryId: string
+  ): string[] {
+    if (!options) return [primaryId];
+    const legend = ensureArray(this.options?.legend || [])[0] as
+      | LegendComponentOption
+      | undefined;
+
+    let customLegendItem;
+    if (legend?.type === "custom") {
+      customLegendItem = (legend as CustomLegendOption).data?.find(
+        (li) => typeof li === "object" && li.id === primaryId
+      );
+    }
+
+    return [primaryId, ...(customLegendItem?.secondaryIds || [])];
+  }
+
+  // Parses the options structure and adds all ids of unselected legend items to hiddenDatasets.
+  // No known need to remove items at this time.
+  private _updateHiddenStatsFromOptions(options: ECOption | undefined) {
+    if (!options) return;
+    const legend = ensureArray(this.options?.legend || [])[0] as
+      | LegendComponentOption
+      | undefined;
+    Object.entries(legend?.selected || {}).forEach(([stat, selected]) => {
+      if (selected === false) {
+        this._getAllIdsFromLegend(options, stat).forEach((id) =>
+          this._hiddenDatasets.add(id)
+        );
+      }
+    });
+  }
+
   private _getDataZoomConfig(): DataZoomComponentOption | undefined {
     const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
       | XAXisOption
@@ -844,10 +878,14 @@ export class HaChartBase extends LitElement {
     }
     const id = ev.currentTarget?.id;
     if (this._hiddenDatasets.has(id)) {
-      this._hiddenDatasets.delete(id);
+      this._getAllIdsFromLegend(this.options, id).forEach((i) =>
+        this._hiddenDatasets.delete(i)
+      );
       fireEvent(this, "dataset-unhidden", { id });
     } else {
-      this._hiddenDatasets.add(id);
+      this._getAllIdsFromLegend(this.options, id).forEach((i) =>
+        this._hiddenDatasets.add(i)
+      );
       fireEvent(this, "dataset-hidden", { id });
     }
     this.requestUpdate("_hiddenDatasets");

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

@@ -148,13 +148,18 @@ export class HuiEnergyDevicesDetailGraphCard
       { num: formatNumber(total, this.hass.locale), unit: UNIT }
     );
 
+  // ha-chart-base will track hidden per ID (so it will have two entries for ID and compare-ID)
+  // But it will only fire the event for the primary ID, and we will convert and store a list of statistic ids only
   private _datasetHidden(ev) {
-    this._hiddenStats = [...this._hiddenStats, ev.detail.id];
+    this._hiddenStats = [
+      ...this._hiddenStats,
+      this._getStatIdFromId(ev.detail.id),
+    ];
   }
 
   private _datasetUnhidden(ev) {
     this._hiddenStats = this._hiddenStats.filter(
-      (stat) => stat !== ev.detail.id
+      (stat) => stat !== this._getStatIdFromId(ev.detail.id)
     );
   }
 
@@ -179,16 +184,25 @@ export class HuiEnergyDevicesDetailGraphCard
         this._formatTotal
       );
 
+      const selected = this._legendData
+        ? this._legendData
+            .filter(
+              (d) =>
+                d.id && this._hiddenStats.includes(this._getStatIdFromId(d.id))
+            )
+            .reduce((acc, d) => {
+              acc[d.id!] = false;
+              return acc;
+            }, {})
+        : {};
+
       return {
         ...commonOptions,
         legend: {
           show: true,
           type: "custom",
           data: this._legendData,
-          selected: this._hiddenStats.reduce((acc, stat) => {
-            acc[stat] = false;
-            return acc;
-          }, {}),
+          selected,
         },
         grid: {
           top: 15,
@@ -315,6 +329,7 @@ export class HuiEnergyDevicesDetailGraphCard
     datasets.push(...processedData);
     this._legendData = processedData.map((d) => ({
       id: d.id as string,
+      secondaryIds: [`compare-${d.id}`],
       name: d.name as string,
       itemStyle: {
         color: d.color as string,
@@ -332,6 +347,7 @@ export class HuiEnergyDevicesDetailGraphCard
       datasets.push(untrackedData);
       this._legendData.push({
         id: untrackedData.id as string,
+        secondaryIds: [`compare-${untrackedData.id}`],
         name: untrackedData.name as string,
         itemStyle: {
           color: untrackedData.color as string,