Detail view for energy devices graph

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

@@ -75,6 +75,8 @@ export class HaChartBase extends LitElement {
 
   private _paddingYAxisInternal = 0;
 
+  private _datasetOrder: number[] = [];
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._releaseCanvas();
@@ -165,7 +167,17 @@ export class HaChartBase extends LitElement {
       }
     }
 
+    // put the legend labels in sorted order if provided
     if (changedProps.has("data")) {
+      this._datasetOrder = this.data.datasets.map((_, index) => index);
+      if (this.data?.datasets.some((dataset) => dataset.order)) {
+        this._datasetOrder.sort(
+          (a, b) =>
+            (this.data.datasets[a].order || 0) -
+            (this.data.datasets[b].order || 0)
+        );
+      }
+
       if (this.externalHidden) {
         this._hiddenDatasets = new Set();
         if (this.data?.datasets) {
@@ -205,8 +217,9 @@ export class HaChartBase extends LitElement {
       ${this.options?.plugins?.legend?.display === true
         ? html`<div class="chartLegend">
             <ul>
-              ${this.data.datasets.map((dataset, index) =>
-                this.extraData?.[index]?.show_legend === false
+              ${this._datasetOrder.map((index) => {
+                const dataset = this.data.datasets[index];
+                return this.extraData?.[index]?.show_legend === false
                   ? nothing
                   : html`<li
                       .datasetIndex=${index}
@@ -228,8 +241,8 @@ export class HaChartBase extends LitElement {
                         ${this.extraData?.[index]?.legend_label ??
                         dataset.label}
                       </div>
-                    </li>`
-              )}
+                    </li>`;
+              })}
             </ul>
           </div>`
         : ""}

src/panels/energy/strategies/energy-view-strategy.ts

@@ -154,6 +154,13 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     // Only include if we have at least 1 device in the config.
     if (prefs.device_consumption.length) {
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_detail_graph_title"
+        ),
+        type: "energy-devices-detail-graph",
+        collection_key: "energy_dashboard",
+      });
       view.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_devices_graph_title"