Refactor energy panel strategies to use DEFAULT_ENERGY_COLLECTION_KEY and remove gas/water strategies

src/panels/energy/ha-panel-energy.ts

@@ -30,31 +30,23 @@ import {
 import { fileDownload } from "../../util/file_download";
 import type { StatisticValue } from "../../data/recorder";
 
+export const DEFAULT_ENERGY_COLLECTION_KEY = "energy_dashboard";
+
 const ENERGY_LOVELACE_CONFIG: LovelaceConfig = {
   views: [
     {
       strategy: {
         type: "energy-overview",
+        collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
       },
     },
     {
       strategy: {
         type: "energy",
+        collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
       },
       path: "electricity",
     },
-    {
-      strategy: {
-        type: "water",
-      },
-      path: "water",
-    },
-    {
-      strategy: {
-        type: "gas",
-      },
-      path: "gas",
-    },
   ],
 };
 
@@ -124,7 +116,7 @@ class PanelEnergy extends LitElement {
 
           <hui-energy-period-selector
             .hass=${this.hass}
-            collection-key="energy_dashboard"
+            .collectionKey=${DEFAULT_ENERGY_COLLECTION_KEY}
           >
             ${this.hass.user?.is_admin
               ? html` <ha-list-item
@@ -186,7 +178,7 @@ class PanelEnergy extends LitElement {
   private async _dumpCSV(ev) {
     ev.stopPropagation();
     const energyData = getEnergyDataCollection(this.hass, {
-      key: "energy_dashboard",
+      key: DEFAULT_ENERGY_COLLECTION_KEY,
     });
 
     if (!energyData.prefs || !energyData.state.stats) {

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

@@ -10,6 +10,7 @@ import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
+import { DEFAULT_ENERGY_COLLECTION_KEY } from "../ha-panel-energy";
 
 const setupWizard = async (): Promise<LovelaceViewConfig> => {
   await import("../cards/energy-setup-wizard-card");
@@ -34,6 +35,8 @@ export class EnergyViewStrategy extends ReactiveElement {
     const view: LovelaceViewConfig = { type: "sections", sections: [] };
 
     let prefs: EnergyPreferences;
+    const collectionKey =
+      _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
 
     try {
       prefs = await getEnergyPreferences(hass);
@@ -80,11 +83,10 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     const energySection: LovelaceSectionConfig = {
       type: "grid",
-      column_span: COLUMNS,
       cards: [
         {
           type: "heading",
-          heading: hass.localize("ui.panel.energy.electricity_overview_title"),
+          heading: hass.localize("ui.panel.energy.summary_list.energy"),
           tap_action: {
             action: "navigate",
             navigation_path: "/energy/electricity",
@@ -98,48 +100,52 @@ export class EnergyViewStrategy extends ReactiveElement {
         title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
         type: "energy-distribution",
         view_layout: { position: "sidebar" },
-        collection_key: "energy_dashboard",
+        collection_key: collectionKey,
       });
     }
 
-    const gauges: LovelaceCardConfig[] = [];
+    if (prefs!.device_consumption.length > 0) {
-    // Only include if we have a grid source & return.
+      energySection.cards!.push({
-    if (hasReturn) {
+        title: hass.localize(
-      gauges.push({
+          "ui.panel.energy.cards.energy_top_consumers_title"
-        type: "energy-grid-neutrality-gauge",
+        ),
-        view_layout: { position: "sidebar" },
+        type: "energy-devices-graph",
-        collection_key: "energy_dashboard",
+        collection_key: collectionKey,
+        max_devices: 5,
       });
-    }
+    } else if (hasGrid) {
+      const gauges: LovelaceCardConfig[] = [];
+      // Only include if we have a grid source & return.
+      if (hasReturn) {
+        gauges.push({
+          type: "energy-grid-neutrality-gauge",
+          view_layout: { position: "sidebar" },
+          collection_key: collectionKey,
+        });
+      }
 
-    // Only include if we have a grid
-    if (hasGrid) {
       gauges.push({
         type: "energy-carbon-consumed-gauge",
         view_layout: { position: "sidebar" },
-        collection_key: "energy_dashboard",
+        collection_key: collectionKey,
       });
-    }
 
-    // Only include if we have a solar source.
+      // Only include if we have a solar source.
-    if (hasSolar) {
+      if (hasSolar) {
-      if (hasReturn) {
+        if (hasReturn) {
-        gauges.push({
+          gauges.push({
-          type: "energy-solar-consumed-gauge",
+            type: "energy-solar-consumed-gauge",
-          view_layout: { position: "sidebar" },
+            view_layout: { position: "sidebar" },
-          collection_key: "energy_dashboard",
+            collection_key: collectionKey,
-        });
+          });
-      }
+        }
-      if (hasGrid) {
         gauges.push({
           type: "energy-self-sufficiency-gauge",
           view_layout: { position: "sidebar" },
-          collection_key: "energy_dashboard",
+          collection_key: collectionKey,
         });
       }
-    }
 
-    if (gauges.length) {
       energySection.cards!.push({
         type: "grid",
         columns: 2,
@@ -153,18 +159,55 @@ export class EnergyViewStrategy extends ReactiveElement {
     if (hasGas) {
       view.sections!.push({
         type: "grid",
-        column_span: 1,
         cards: [
           {
             type: "heading",
-            heading: hass.localize("ui.panel.energy.gas_overview_title"),
+            heading: hass.localize("ui.panel.energy.summary_list.gas"),
-            tap_action: { action: "navigate", navigation_path: "/energy/gas" },
           },
           {
-            title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_gas_graph_title"
+            ),
             type: "energy-gas-graph",
-            collection_key: "energy_dashboard",
+            collection_key: collectionKey,
-          }
+          },
+        ],
+      });
+    }
+
+    if (hasWater) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize("ui.panel.energy.summary_list.water"),
+          },
+          {
+            title: hass.localize(
+              "ui.panel.energy.cards.energy_water_graph_title"
+            ),
+            type: "energy-water-graph",
+            collection_key: collectionKey,
+          },
+        ],
+      });
+    }
+
+    if (hasGrid || hasSolar || hasBattery || hasGas || hasWater) {
+      view.sections!.push({
+        type: "grid",
+        cards: [
+          {
+            type: "heading",
+            heading: hass.localize(
+              "ui.panel.energy.cards.energy_sources_table_title"
+            ),
+          },
+          {
+            type: "energy-sources-table",
+            collection_key: collectionKey,
+          },
         ],
       });
     }

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

@@ -63,13 +63,9 @@ export class EnergyViewStrategy extends ReactiveElement {
     const hasSolar = prefs.energy_sources.some(
       (source) => source.type === "solar"
     );
-    const hasGas = prefs.energy_sources.some((source) => source.type === "gas");
     const hasBattery = prefs.energy_sources.some(
       (source) => source.type === "battery"
     );
-    const hasWater = prefs.energy_sources.some(
-      (source) => source.type === "water"
-    );
 
     view.cards!.push({
       type: "energy-compare",
@@ -94,24 +90,6 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    // Only include if we have a gas source.
-    if (hasGas) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
-        type: "energy-gas-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
-    // Only include if we have a water source.
-    if (hasWater) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
-        type: "energy-water-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
     // Only include if we have a grid or battery.
     if (hasGrid || hasBattery) {
       view.cards!.push({
@@ -122,13 +100,14 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasGrid || hasSolar || hasGas || hasWater || hasBattery) {
+    if (hasGrid || hasSolar || hasBattery) {
       view.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_sources_table_title"
         ),
         type: "energy-sources-table",
         collection_key: "energy_dashboard",
+        types: ["grid", "solar", "battery"],
       });
     }
 

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

@@ -1,65 +0,0 @@
-import { ReactiveElement } from "lit";
-import { customElement } from "lit/decorators";
-import type { EnergyPreferences } from "../../../data/energy";
-import { getEnergyPreferences } from "../../../data/energy";
-import type { HomeAssistant } from "../../../types";
-import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
-import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
-
-const setupWizard = async (): Promise<LovelaceViewConfig> => {
-  await import("../cards/energy-setup-wizard-card");
-  return {
-    type: "panel",
-    cards: [
-      {
-        type: "custom:energy-setup-wizard-card",
-      },
-    ],
-  };
-};
-
-@customElement("gas-view-strategy")
-export class GasViewStrategy extends ReactiveElement {
-  static async generate(
-    _config: LovelaceStrategyConfig,
-    hass: HomeAssistant
-  ): Promise<LovelaceViewConfig> {
-    const view: LovelaceViewConfig = { type: "sidebar", cards: [] };
-
-    let prefs: EnergyPreferences;
-
-    try {
-      prefs = await getEnergyPreferences(hass);
-    } catch (err: any) {
-      if (err.code === "not_found") {
-        return setupWizard();
-      }
-      view.cards!.push({
-        type: "markdown",
-        content: `An error occurred while fetching your energy preferences: ${err.message}.`,
-      });
-      return view;
-    }
-
-    const hasGas = prefs.energy_sources.some(
-      (source) => source.type === "gas"
-    );
-
-    // Only include if we have a gas source.
-    if (hasGas) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
-        type: "energy-gas-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
-    return view;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "gas-view-strategy": GasViewStrategy;
-  }
-}

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

@@ -1,75 +0,0 @@
-import { ReactiveElement } from "lit";
-import { customElement } from "lit/decorators";
-import type { EnergyPreferences } from "../../../data/energy";
-import { getEnergyPreferences } from "../../../data/energy";
-import type { HomeAssistant } from "../../../types";
-import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
-import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
-
-const setupWizard = async (): Promise<LovelaceViewConfig> => {
-  await import("../cards/energy-setup-wizard-card");
-  return {
-    type: "panel",
-    cards: [
-      {
-        type: "custom:energy-setup-wizard-card",
-      },
-    ],
-  };
-};
-
-@customElement("water-view-strategy")
-export class WaterViewStrategy extends ReactiveElement {
-  static async generate(
-    _config: LovelaceStrategyConfig,
-    hass: HomeAssistant
-  ): Promise<LovelaceViewConfig> {
-    const view: LovelaceViewConfig = { cards: [] };
-
-    let prefs: EnergyPreferences;
-
-    try {
-      prefs = await getEnergyPreferences(hass);
-    } catch (err: any) {
-      if (err.code === "not_found") {
-        return setupWizard();
-      }
-      view.cards!.push({
-        type: "markdown",
-        content: `An error occurred while fetching your energy preferences: ${err.message}.`,
-      });
-      return view;
-    }
-
-    // No energy sources available, start from scratch
-    if (
-      prefs!.device_consumption.length === 0 &&
-      prefs!.energy_sources.length === 0
-    ) {
-      return setupWizard();
-    }
-
-    view.type = "sidebar";
-
-    const hasWater = prefs.energy_sources.some(
-      (source) => source.type === "water"
-    );
-
-    // Only include if we have a water source.
-    if (hasWater) {
-      view.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
-        type: "energy-water-graph",
-        collection_key: "energy_dashboard",
-      });
-    }
-
-    return view;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "water-view-strategy": WaterViewStrategy;
-  }
-}

src/panels/lovelace/strategies/get-strategy.ts

@@ -41,8 +41,6 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
     "energy-overview": () =>
       import("../../energy/strategies/energy-overview-view-strategy"),
     energy: () => import("../../energy/strategies/energy-view-strategy"),
-    water: () => import("../../energy/strategies/water-view-strategy"),
-    gas: () => import("../../energy/strategies/gas-view-strategy"),
     map: () => import("./map/map-view-strategy"),
     iframe: () => import("./iframe/iframe-view-strategy"),
     area: () => import("./areas/area-view-strategy"),

src/translations/en.json

@@ -9310,9 +9310,6 @@
         }
       },
       "energy": {
-        "electricity_overview_title": "Electricity",
-        "gas_overview_title": "Gas",
-        "water_overview_title": "Water",
         "summary_list": {
           "energy": "Energy",
           "gas": "Gas",
@@ -9347,7 +9344,8 @@
           "energy_sources_table_title": "Sources",
           "energy_devices_graph_title": "Individual devices total usage",
           "energy_devices_detail_graph_title": "Individual devices detail usage",
-          "energy_sankey_title": "Energy flow"
+          "energy_sankey_title": "Energy flow",
+          "energy_top_consumers_title": "Top consumers"
         }
       },
       "history": {