Add power sankey to overview

Author: MindFreeze

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

@@ -15,7 +15,12 @@ export class EnergyViewStrategy extends ReactiveElement {
     _config: LovelaceStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
-    const view: LovelaceViewConfig = { type: "sections", sections: [] };
+    const view: LovelaceViewConfig = {
+      type: "sections",
+      sections: [],
+      dense_section_placement: true,
+      max_columns: 2,
+    };
 
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
@@ -56,11 +61,25 @@ export class EnergyViewStrategy extends ReactiveElement {
         (source.type === "battery" && source.stat_rate) ||
         (source.type === "grid" && source.power?.length)
     );
+    const hasPowerDevices = prefs.device_consumption.find(
+      (device) => device.stat_rate
+    );
 
     const overviewSection: LovelaceSectionConfig = {
       type: "grid",
+      column_span: 24,
       cards: [],
     };
+    if (hasPowerSources && hasPowerDevices) {
+      overviewSection.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.power_sankey_title"),
+        type: "power-sankey",
+        collection_key: collectionKey,
+        grid_options: {
+          columns: 24,
+        },
+      });
+    }
     // Only include if we have a grid or battery.
     if (hasGrid || hasBattery) {
       overviewSection.cards!.push({
@@ -69,7 +88,6 @@ export class EnergyViewStrategy extends ReactiveElement {
         collection_key: collectionKey,
       });
     }
-
     if (hasGrid || hasSolar || hasBattery || hasGas || hasWater) {
       overviewSection.cards!.push({
         type: "energy-sources-table",
@@ -78,7 +96,7 @@ export class EnergyViewStrategy extends ReactiveElement {
     }
     view.sections!.push(overviewSection);
 
-    const energySection: LovelaceSectionConfig = {
+    const electricitySection: LovelaceSectionConfig = {
       type: "grid",
       cards: [
         {
@@ -93,13 +111,13 @@ export class EnergyViewStrategy extends ReactiveElement {
     };
 
     if (hasPowerSources) {
-      energySection.cards!.push({
+      electricitySection.cards!.push({
         type: "power-sources-graph",
         collection_key: collectionKey,
       });
     }
     if (prefs!.device_consumption.length > 3) {
-      energySection.cards!.push({
+      electricitySection.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_top_consumers_title"
         ),
@@ -108,8 +126,7 @@ export class EnergyViewStrategy extends ReactiveElement {
         max_devices: 3,
         modes: ["bar"],
       });
-    }
-    if (hasGrid) {
+    } else if (hasGrid) {
       const gauges: LovelaceCardConfig[] = [];
       // Only include if we have a grid source & return.
       if (hasReturn) {
@@ -142,15 +159,15 @@ export class EnergyViewStrategy extends ReactiveElement {
         });
       }
 
-      energySection.cards!.push({
+      electricitySection.cards!.push({
         type: "grid",
         columns: 2,
         square: false,
         cards: gauges,
       });
     }
 
-    view.sections!.push(energySection);
+    view.sections!.push(electricitySection);
 
     if (hasGas) {
       view.sections!.push({