Apply suggestions from code review

Co-authored-by: Aidan Timson <aidan@timmo.dev>

src/components/entity/ha-statistic-picker.ts

@@ -21,7 +21,6 @@ import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
 import "../ha-icon-button";
-import "../ha-input-helper-text";
 import type {
   PickerComboBoxItem,
   PickerComboBoxSearchFn,
@@ -477,6 +476,7 @@ export class HaStatisticPicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
+        .helper=${this.helper}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/data/energy.ts

@@ -102,6 +102,7 @@ export type EnergySolarForecasts = Record<string, EnergySolarForecast>;
 export interface DeviceConsumptionEnergyPreference {
   // This is an ever increasing value
   stat_consumption: string;
+  stat_power?: string;
   name?: string;
   included_in_stat?: string;
 }
@@ -130,11 +131,17 @@ export interface FlowToGridSourceEnergyPreference {
   number_energy_price: number | null;
 }
 
+export interface GridPowerSourceEnergyPreference {
+  // W meter
+  stat_power: string;
+}
+
 export interface GridSourceTypeEnergyPreference {
   type: "grid";
 
   flow_from: FlowFromGridSourceEnergyPreference[];
   flow_to: FlowToGridSourceEnergyPreference[];
+  power?: GridPowerSourceEnergyPreference[];
 
   cost_adjustment_day: number;
 }
@@ -143,6 +150,7 @@ export interface SolarSourceTypeEnergyPreference {
   type: "solar";
 
   stat_energy_from: string;
+  stat_power?: string;
   config_entry_solar_forecast: string[] | null;
 }
 
@@ -150,6 +158,7 @@ export interface BatterySourceTypeEnergyPreference {
   type: "battery";
   stat_energy_from: string;
   stat_energy_to: string;
+  stat_power?: string;
 }
 export interface GasSourceTypeEnergyPreference {
   type: "gas";
@@ -351,6 +360,35 @@ export const getReferencedStatisticIds = (
   return statIDs;
 };
 
+export const getReferencedStatisticIdsPower = (
+  prefs: EnergyPreferences
+): string[] => {
+  const statIDs: (string | undefined)[] = [];
+
+  for (const source of prefs.energy_sources) {
+    if (source.type === "gas" || source.type === "water") {
+      continue;
+    }
+
+    if (source.type === "solar") {
+      statIDs.push(source.stat_power);
+      continue;
+    }
+
+    if (source.type === "battery") {
+      statIDs.push(source.stat_power);
+      continue;
+    }
+
+    if (source.power) {
+      statIDs.push(...source.power.map((p) => p.stat_power));
+    }
+  }
+  statIDs.push(...prefs.device_consumption.map((d) => d.stat_power));
+
+  return statIDs.filter(Boolean) as string[];
+};
+
 export const enum CompareMode {
   NONE = "",
   PREVIOUS = "previous",
@@ -398,9 +436,10 @@ const getEnergyData = async (
     "gas",
     "device",
   ]);
+  const powerStatIds = getReferencedStatisticIdsPower(prefs);
   const waterStatIds = getReferencedStatisticIds(prefs, info, ["water"]);
 
-  const allStatIDs = [...energyStatIds, ...waterStatIds];
+  const allStatIDs = [...energyStatIds, ...waterStatIds, ...powerStatIds];
 
   const dayDifference = differenceInDays(end || new Date(), start);
   const period =
@@ -411,6 +450,8 @@ const getEnergyData = async (
       : dayDifference > 2
         ? "day"
         : "hour";
+  const finePeriod =
+    dayDifference > 64 ? "day" : dayDifference > 8 ? "hour" : "5minute";
 
   const statsMetadata: Record<string, StatisticsMetaData> = {};
   const statsMetadataArray = allStatIDs.length
@@ -432,6 +473,9 @@ const getEnergyData = async (
       ? (gasUnit as (typeof VOLUME_UNITS)[number])
       : undefined,
   };
+  const powerUnits: StatisticsUnitConfiguration = {
+    power: "kW",
+  };
   const waterUnit = getEnergyWaterUnit(hass, prefs, statsMetadata);
   const waterUnits: StatisticsUnitConfiguration = {
     volume: waterUnit,
@@ -442,6 +486,12 @@ const getEnergyData = async (
         "change",
       ])
     : {};
+  const _powerStats: Statistics | Promise<Statistics> = powerStatIds.length
+    ? fetchStatistics(hass!, start, end, powerStatIds, finePeriod, powerUnits, [
+        "mean",
+      ])
+    : {};
+
   const _waterStats: Statistics | Promise<Statistics> = waterStatIds.length
     ? fetchStatistics(hass!, start, end, waterStatIds, period, waterUnits, [
         "change",
@@ -548,6 +598,7 @@ const getEnergyData = async (
 
   const [
     energyStats,
+    powerStats,
     waterStats,
     energyStatsCompare,
     waterStatsCompare,
@@ -555,13 +606,14 @@ const getEnergyData = async (
     fossilEnergyConsumptionCompare,
   ] = await Promise.all([
     _energyStats,
+    _powerStats,
     _waterStats,
     _energyStatsCompare,
     _waterStatsCompare,
     _fossilEnergyConsumption,
     _fossilEnergyConsumptionCompare,
   ]);
-  const stats = { ...energyStats, ...waterStats };
+  const stats = { ...energyStats, ...waterStats, ...powerStats };
   if (compare) {
     statsCompare = { ...energyStatsCompare, ...waterStatsCompare };
   }

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -15,6 +15,7 @@ import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
+import { join } from "lit/directives/join";
 import { keyed } from "lit/directives/keyed";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -32,7 +33,6 @@ import {
 } from "../../common/entity/context/get_entity_context";
 import { shouldHandleRequestSelectedEvent } from "../../common/mwc/handle-request-selected-event";
 import { navigate } from "../../common/navigate";
-import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-button-menu";
 import "../../components/ha-dialog";
 import "../../components/ha-dialog-header";
@@ -361,8 +361,6 @@ export class MoreInfoDialog extends LitElement {
     );
     const title = this._childView?.viewTitle || breadcrumb.pop() || entityId;
 
-    const isRTL = computeRTL(this.hass);
-
     return html`
       <ha-dialog
         open
@@ -396,13 +394,17 @@ export class MoreInfoDialog extends LitElement {
             ${breadcrumb.length > 0
               ? !__DEMO__ && isAdmin
                 ? html`
-                    <button class="breadcrumb" @click=${this._breadcrumbClick}>
-                      ${breadcrumb.join(isRTL ? " ◂ " : " ▸ ")}
+                    <button
+                      class="breadcrumb"
+                      @click=${this._breadcrumbClick}
+                      aria-label=${breadcrumb.join(" > ")}
+                    >
+                      ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
                     </button>
                   `
                 : html`
                     <p class="breadcrumb">
-                      ${breadcrumb.join(isRTL ? " ◂ " : " ▸ ")}
+                      ${join(breadcrumb, html`<ha-icon-next></ha-icon-next>`)}
                     </p>
                   `
               : nothing}

src/panels/config/backup/dialogs/dialog-new-backup.ts

@@ -1,11 +1,14 @@
-import { mdiCalendarSync, mdiGestureTap } from "@mdi/js";
+import { mdiCalendarSync, mdiClose, mdiGestureTap } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-dialog-header";
+import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-next";
+import "../../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
 import "../../../../components/ha-md-list";
-import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-svg-icon";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
@@ -21,80 +24,92 @@ class DialogNewBackup extends LitElement implements HassDialog {
 
   @state() private _params?: NewBackupDialogParams;
 
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
+
   public showDialog(params: NewBackupDialogParams): void {
     this._opened = true;
     this._params = params;
   }
 
   public closeDialog() {
-    this._opened = false;
+    this._dialog?.close();
     return true;
   }
 
   private _dialogClosed() {
-    if (this._params?.cancel) {
-      this._params.cancel();
+    if (this._params!.cancel) {
+      this._params!.cancel();
     }
+    if (this._opened) {
+      fireEvent(this, "dialog-closed", { dialog: this.localName });
+    }
+    this._opened = false;
     this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render() {
-    if (!this._params) {
+    if (!this._opened || !this._params) {
       return nothing;
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._opened}
-        header-title=${this.hass.localize(
-          "ui.panel.config.backup.dialogs.new.title"
-        )}
-        @closed=${this._dialogClosed}
-      >
-        <ha-md-list
-          innerRole="listbox"
-          itemRoles="option"
-          .innerAriaLabel=${this.hass.localize(
-            "ui.panel.config.backup.dialogs.new.options"
-          )}
-          rootTabbable
-        >
-          <ha-md-list-item
-            @click=${this._automatic}
-            type="button"
-            .disabled=${!this._params.config.create_backup.password}
+      <ha-md-dialog open @closed=${this._dialogClosed}>
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            @click=${this.closeDialog}
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title">
+            ${this.hass.localize("ui.panel.config.backup.dialogs.new.title")}
+          </span>
+        </ha-dialog-header>
+        <div slot="content">
+          <ha-md-list
+            innerRole="listbox"
+            itemRoles="option"
+            .innerAriaLabel=${this.hass.localize(
+              "ui.panel.config.backup.dialogs.new.options"
+            )}
+            rootTabbable
+            dialogInitialFocus
           >
-            <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
-            <span slot="headline">
-              ${this.hass.localize(
-                "ui.panel.config.backup.dialogs.new.automatic.title"
-              )}
-            </span>
-            <span slot="supporting-text">
-              ${this.hass.localize(
-                "ui.panel.config.backup.dialogs.new.automatic.description"
-              )}
-            </span>
-            <ha-icon-next slot="end"></ha-icon-next>
-          </ha-md-list-item>
-          <ha-md-list-item @click=${this._manual} type="button">
-            <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
-            <span slot="headline">
-              ${this.hass.localize(
-                "ui.panel.config.backup.dialogs.new.manual.title"
-              )}
-            </span>
-            <span slot="supporting-text">
-              ${this.hass.localize(
-                "ui.panel.config.backup.dialogs.new.manual.description"
-              )}
-            </span>
-            <ha-icon-next slot="end"></ha-icon-next>
-          </ha-md-list-item>
-        </ha-md-list>
-      </ha-wa-dialog>
+            <ha-md-list-item
+              @click=${this._automatic}
+              type="button"
+              .disabled=${!this._params.config.create_backup.password}
+            >
+              <ha-svg-icon slot="start" .path=${mdiCalendarSync}></ha-svg-icon>
+              <span slot="headline">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.dialogs.new.automatic.title"
+                )}
+              </span>
+              <span slot="supporting-text">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.dialogs.new.automatic.description"
+                )}
+              </span>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+            <ha-md-list-item @click=${this._manual} type="button">
+              <ha-svg-icon slot="start" .path=${mdiGestureTap}></ha-svg-icon>
+              <span slot="headline">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.dialogs.new.manual.title"
+                )}
+              </span>
+              <span slot="supporting-text">
+                ${this.hass.localize(
+                  "ui.panel.config.backup.dialogs.new.manual.description"
+                )}
+              </span>
+              <ha-icon-next slot="end"></ha-icon-next>
+            </ha-md-list-item>
+          </ha-md-list>
+        </div>
+      </ha-md-dialog>
     `;
   }
 
@@ -113,13 +128,24 @@ class DialogNewBackup extends LitElement implements HassDialog {
       haStyle,
       haStyleDialog,
       css`
-        ha-wa-dialog {
+        ha-md-dialog {
           --dialog-content-padding: 0;
+          max-width: 500px;
+        }
+        @media all and (max-width: 450px), all and (max-height: 500px) {
+          ha-md-dialog {
+            max-width: none;
+          }
+          div[slot="content"] {
+            margin-top: 0;
+          }
         }
 
         ha-md-list {
           background: none;
         }
+        ha-md-list-item {
+        }
         ha-icon-next {
           width: 24px;
         }

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -26,6 +26,7 @@ import type {
   EnergySource,
   FlowFromGridSourceEnergyPreference,
   FlowToGridSourceEnergyPreference,
+  GridPowerSourceEnergyPreference,
   GridSourceTypeEnergyPreference,
 } from "../../../../data/energy";
 import {
@@ -47,6 +48,7 @@ import { documentationUrl } from "../../../../util/documentation-url";
 import {
   showEnergySettingsGridFlowFromDialog,
   showEnergySettingsGridFlowToDialog,
+  showEnergySettingsGridPowerDialog,
 } from "../dialogs/show-dialogs-energy";
 import "./ha-energy-validation-result";
 import { energyCardStyles } from "./styles";
@@ -226,6 +228,58 @@ export class EnergyGridSettings extends LitElement {
             >
           </div>
 
+          <h3>
+            ${this.hass.localize("ui.panel.config.energy.grid.grid_power")}
+          </h3>
+          ${gridSource.power?.map((power) => {
+            const entityState = this.hass.states[power.stat_power];
+            return html`
+              <div class="row" .source=${power}>
+                ${entityState?.attributes.icon
+                  ? html`<ha-icon
+                      .icon=${entityState.attributes.icon}
+                    ></ha-icon>`
+                  : html`<ha-svg-icon
+                      .path=${mdiTransmissionTower}
+                    ></ha-svg-icon>`}
+                <span class="content"
+                  >${getStatisticLabel(
+                    this.hass,
+                    power.stat_power,
+                    this.statsMetadata?.[power.stat_power]
+                  )}</span
+                >
+                <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.grid.edit_power"
+                  )}
+                  @click=${this._editPowerSource}
+                  .path=${mdiPencil}
+                ></ha-icon-button>
+                <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.panel.config.energy.grid.delete_power"
+                  )}
+                  @click=${this._deletePowerSource}
+                  .path=${mdiDelete}
+                ></ha-icon-button>
+              </div>
+            `;
+          })}
+          <div class="row border-bottom">
+            <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
+            <ha-button
+              @click=${this._addPowerSource}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon
+              >${this.hass.localize(
+                "ui.panel.config.energy.grid.add_power"
+              )}</ha-button
+            >
+          </div>
+
           <h3>
             ${this.hass.localize(
               "ui.panel.config.energy.grid.grid_carbon_footprint"
@@ -499,6 +553,97 @@ export class EnergyGridSettings extends LitElement {
     await this._savePreferences(cleanedPreferences);
   }
 
+  private _addPowerSource() {
+    const gridSource = this.preferences.energy_sources.find(
+      (src) => src.type === "grid"
+    ) as GridSourceTypeEnergyPreference | undefined;
+    showEnergySettingsGridPowerDialog(this, {
+      grid_source: gridSource,
+      saveCallback: async (power) => {
+        let preferences: EnergyPreferences;
+        if (!gridSource) {
+          preferences = {
+            ...this.preferences,
+            energy_sources: [
+              ...this.preferences.energy_sources,
+              {
+                ...emptyGridSourceEnergyPreference(),
+                power: [power],
+              },
+            ],
+          };
+        } else {
+          preferences = {
+            ...this.preferences,
+            energy_sources: this.preferences.energy_sources.map((src) =>
+              src.type === "grid"
+                ? { ...src, power: [...(gridSource.power || []), power] }
+                : src
+            ),
+          };
+        }
+        await this._savePreferences(preferences);
+      },
+    });
+  }
+
+  private _editPowerSource(ev) {
+    const origSource: GridPowerSourceEnergyPreference =
+      ev.currentTarget.closest(".row").source;
+    const gridSource = this.preferences.energy_sources.find(
+      (src) => src.type === "grid"
+    ) as GridSourceTypeEnergyPreference | undefined;
+    showEnergySettingsGridPowerDialog(this, {
+      source: { ...origSource },
+      grid_source: gridSource,
+      saveCallback: async (source) => {
+        const power =
+          energySourcesByType(this.preferences).grid![0].power || [];
+
+        const preferences: EnergyPreferences = {
+          ...this.preferences,
+          energy_sources: this.preferences.energy_sources.map((src) =>
+            src.type === "grid"
+              ? {
+                  ...src,
+                  power: power.map((p) => (p === origSource ? source : p)),
+                }
+              : src
+          ),
+        };
+        await this._savePreferences(preferences);
+      },
+    });
+  }
+
+  private async _deletePowerSource(ev) {
+    const sourceToDelete: GridPowerSourceEnergyPreference =
+      ev.currentTarget.closest(".row").source;
+
+    if (
+      !(await showConfirmationDialog(this, {
+        title: this.hass.localize("ui.panel.config.energy.delete_source"),
+      }))
+    ) {
+      return;
+    }
+
+    const power =
+      energySourcesByType(this.preferences).grid![0].power?.filter(
+        (p) => p !== sourceToDelete
+      ) || [];
+
+    const preferences: EnergyPreferences = {
+      ...this.preferences,
+      energy_sources: this.preferences.energy_sources.map((source) =>
+        source.type === "grid" ? { ...source, power } : source
+      ),
+    };
+
+    const cleanedPreferences = this._removeEmptySources(preferences);
+    await this._savePreferences(cleanedPreferences);
+  }
+
   private _removeEmptySources(preferences: EnergyPreferences) {
     // Check if grid sources became an empty type and remove if so
     preferences.energy_sources = preferences.energy_sources.reduce<
@@ -507,7 +652,8 @@ export class EnergyGridSettings extends LitElement {
       if (
         source.type !== "grid" ||
         source.flow_from.length > 0 ||
-        source.flow_to.length > 0
+        source.flow_to.length > 0 ||
+        (source.power && source.power.length > 0)
       ) {
         acc.push(source);
       }

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -18,6 +18,7 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsBatteryDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
+const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-battery-settings")
 export class DialogEnergyBatterySettings
@@ -32,10 +33,14 @@ export class DialogEnergyBatterySettings
 
   @state() private _energy_units?: string[];
 
+  @state() private _power_units?: string[];
+
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
+  private _excludeListPower?: string[];
+
   public async showDialog(
     params: EnergySettingsBatteryDialogParams
   ): Promise<void> {
@@ -46,6 +51,9 @@ export class DialogEnergyBatterySettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
+    this._power_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
+    ).units;
     const allSources: string[] = [];
     this._params.battery_sources.forEach((entry) => {
       allSources.push(entry.stat_energy_from);
@@ -56,6 +64,9 @@ export class DialogEnergyBatterySettings
         id !== this._source?.stat_energy_from &&
         id !== this._source?.stat_energy_to
     );
+    this._excludeListPower = this._params.battery_sources
+      .map((entry) => entry.stat_power)
+      .filter((id) => id && id !== this._source?.stat_power) as string[];
   }
 
   public closeDialog() {
@@ -72,8 +83,6 @@ export class DialogEnergyBatterySettings
       return nothing;
     }
 
-    const pickableUnit = this._energy_units?.join(", ") || "";
-
     return html`
       <ha-dialog
         open
@@ -85,12 +94,6 @@ export class DialogEnergyBatterySettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          ${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.entity_para",
-            { unit: pickableUnit }
-          )}
-        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -105,6 +108,10 @@ export class DialogEnergyBatterySettings
             this._source.stat_energy_from,
           ]}
           @value-changed=${this._statisticToChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.energy_helper_into",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
@@ -121,6 +128,25 @@ export class DialogEnergyBatterySettings
             this._source.stat_energy_to,
           ]}
           @value-changed=${this._statisticFromChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.energy_helper_out",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
+        ></ha-statistic-picker>
+
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._source.stat_power}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.power"
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.power_helper",
+            { unit: this._power_units?.join(", ") || "" }
+          )}
         ></ha-statistic-picker>
 
         <ha-button
@@ -150,6 +176,10 @@ export class DialogEnergyBatterySettings
     this._source = { ...this._source!, stat_energy_from: ev.detail.value };
   }
 
+  private _powerChanged(ev: CustomEvent<{ value: string }>) {
+    this._source = { ...this._source!, stat_power: ev.detail.value };
+  }
+
   private async _save() {
     try {
       await this._params!.saveCallback(this._source!);
@@ -168,7 +198,11 @@ export class DialogEnergyBatterySettings
           --mdc-dialog-max-width: 430px;
         }
         ha-statistic-picker {
-          width: 100%;
+          display: block;
+          margin-bottom: var(--ha-space-4);
+        }
+        ha-statistic-picker:last-of-type {
+          margin-bottom: 0;
         }
       `,
     ];

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -21,6 +21,7 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsDeviceDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
+const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-device-settings")
 export class DialogEnergyDeviceSettings
@@ -35,10 +36,14 @@ export class DialogEnergyDeviceSettings
 
   @state() private _energy_units?: string[];
 
+  @state() private _power_units?: string[];
+
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
+  private _excludeListPower?: string[];
+
   private _possibleParents: DeviceConsumptionEnergyPreference[] = [];
 
   public async showDialog(
@@ -50,9 +55,15 @@ export class DialogEnergyDeviceSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
+    this._power_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
+    ).units;
     this._excludeList = this._params.device_consumptions
       .map((entry) => entry.stat_consumption)
       .filter((id) => id !== this._device?.stat_consumption);
+    this._excludeListPower = this._params.device_consumptions
+      .map((entry) => entry.stat_power)
+      .filter((id) => id && id !== this._device?.stat_power) as string[];
   }
 
   private _computePossibleParents() {
@@ -93,8 +104,6 @@ export class DialogEnergyDeviceSettings
       return nothing;
     }
 
-    const pickableUnit = this._energy_units?.join(", ") || "";
-
     return html`
       <ha-dialog
         open
@@ -108,12 +117,6 @@ export class DialogEnergyDeviceSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          ${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
-            { unit: pickableUnit }
-          )}
-        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -125,9 +128,28 @@ export class DialogEnergyDeviceSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._device?.stat_power}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption.dialog.device_consumption_power"
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerStatisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
+            { unit: this._power_units?.join(", ") || "" }
+          )}
+        ></ha-statistic-picker>
+
         <ha-textfield
           .label=${this.hass.localize(
             "ui.panel.config.energy.device_consumption.dialog.display_name"
@@ -210,6 +232,20 @@ export class DialogEnergyDeviceSettings
     this._computePossibleParents();
   }
 
+  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
+    if (!this._device) {
+      return;
+    }
+    const newDevice = {
+      ...this._device,
+      stat_power: ev.detail.value,
+    } as DeviceConsumptionEnergyPreference;
+    if (!newDevice.stat_power) {
+      delete newDevice.stat_power;
+    }
+    this._device = newDevice;
+  }
+
   private _nameChanged(ev) {
     const newDevice = {
       ...this._device!,
@@ -245,15 +281,19 @@ export class DialogEnergyDeviceSettings
     return [
       haStyleDialog,
       css`
+        ha-statistic-picker {
+          display: block;
+          margin-bottom: var(--ha-space-2);
+        }
         ha-statistic-picker {
           width: 100%;
         }
         ha-select {
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
           width: 100%;
         }
         ha-textfield {
-          margin-top: 16px;
+          margin-top: var(--ha-space-4);
           width: 100%;
         }
       `,

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -115,8 +115,6 @@ export class DialogEnergyGridFlowSettings
       return nothing;
     }
 
-    const pickableUnit = this._energy_units?.join(", ") || "";
-
     const unitPriceSensor = this._pickedDisplayUnit
       ? `${this.hass.config.currency}/${this._pickedDisplayUnit}`
       : undefined;
@@ -150,19 +148,11 @@ export class DialogEnergyGridFlowSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          <p>
-            ${this.hass.localize(
-              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
-            )}
-          </p>
-          <p>
-            ${this.hass.localize(
-              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
-              { unit: pickableUnit }
-            )}
-          </p>
-        </div>
+        <p>
+          ${this.hass.localize(
+            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
+          )}
+        </p>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -178,6 +168,10 @@ export class DialogEnergyGridFlowSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
+          .helper=${this.hass.localize(
+            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
@@ -380,6 +374,10 @@ export class DialogEnergyGridFlowSettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
+        ha-statistic-picker {
+          display: block;
+          margin: var(--ha-space-4) 0;
+        }
         ha-formfield {
           display: block;
         }

src/panels/config/energy/dialogs/dialog-energy-grid-power-settings.ts

@@ -0,0 +1,153 @@
+import { mdiTransmissionTower } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/entity/ha-statistic-picker";
+import "../../../../components/ha-dialog";
+import "../../../../components/ha-button";
+import type { GridPowerSourceEnergyPreference } from "../../../../data/energy";
+import { energyStatisticHelpUrl } from "../../../../data/energy";
+import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
+import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import type { EnergySettingsGridPowerDialogParams } from "./show-dialogs-energy";
+
+const powerUnitClasses = ["power"];
+
+@customElement("dialog-energy-grid-power-settings")
+export class DialogEnergyGridPowerSettings
+  extends LitElement
+  implements HassDialog<EnergySettingsGridPowerDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: EnergySettingsGridPowerDialogParams;
+
+  @state() private _source?: GridPowerSourceEnergyPreference;
+
+  @state() private _power_units?: string[];
+
+  @state() private _error?: string;
+
+  private _excludeListPower?: string[];
+
+  public async showDialog(
+    params: EnergySettingsGridPowerDialogParams
+  ): Promise<void> {
+    this._params = params;
+    this._source = params.source ? { ...params.source } : { stat_power: "" };
+
+    const initialSourceIdPower = this._source.stat_power;
+
+    this._power_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
+    ).units;
+
+    this._excludeListPower = [
+      ...(this._params.grid_source?.power?.map((entry) => entry.stat_power) ||
+        []),
+    ].filter((id) => id && id !== initialSourceIdPower) as string[];
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    this._source = undefined;
+    this._error = undefined;
+    this._excludeListPower = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    return true;
+  }
+
+  protected render() {
+    if (!this._params || !this._source) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        .heading=${html`<ha-svg-icon
+            .path=${mdiTransmissionTower}
+            style="--mdc-icon-size: 32px;"
+          ></ha-svg-icon
+          >${this.hass.localize(
+            "ui.panel.config.energy.grid.power_dialog.header"
+          )}`}
+        @closed=${this.closeDialog}
+      >
+        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .helpMissingEntityUrl=${energyStatisticHelpUrl}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._source.stat_power}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.grid.power_dialog.power_stat"
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerStatisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.grid.power_dialog.power_helper",
+            { unit: this._power_units?.join(", ") || "" }
+          )}
+          dialogInitialFocus
+        ></ha-statistic-picker>
+
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="primaryAction"
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          @click=${this._save}
+          .disabled=${!this._source.stat_power}
+          slot="primaryAction"
+        >
+          ${this.hass.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
+    this._source = {
+      ...this._source!,
+      stat_power: ev.detail.value,
+    };
+  }
+
+  private async _save() {
+    try {
+      await this._params!.saveCallback(this._source!);
+      this.closeDialog();
+    } catch (err: any) {
+      this._error = err.message;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --mdc-dialog-max-width: 430px;
+        }
+        ha-statistic-picker {
+          display: block;
+          margin: var(--ha-space-4) 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-energy-grid-power-settings": DialogEnergyGridPowerSettings;
+  }
+}

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -28,6 +28,7 @@ import { brandsUrl } from "../../../../util/brands-url";
 import type { EnergySettingsSolarDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
+const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-solar-settings")
 export class DialogEnergySolarSettings
@@ -46,10 +47,14 @@ export class DialogEnergySolarSettings
 
   @state() private _energy_units?: string[];
 
+  @state() private _power_units?: string[];
+
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
+  private _excludeListPower?: string[];
+
   public async showDialog(
     params: EnergySettingsSolarDialogParams
   ): Promise<void> {
@@ -62,9 +67,15 @@ export class DialogEnergySolarSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
+    this._power_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
+    ).units;
     this._excludeList = this._params.solar_sources
       .map((entry) => entry.stat_energy_from)
       .filter((id) => id !== this._source?.stat_energy_from);
+    this._excludeListPower = this._params.solar_sources
+      .map((entry) => entry.stat_power)
+      .filter((id) => id && id !== this._source?.stat_power) as string[];
   }
 
   public closeDialog() {
@@ -81,8 +92,6 @@ export class DialogEnergySolarSettings
       return nothing;
     }
 
-    const pickableUnit = this._energy_units?.join(", ") || "";
-
     return html`
       <ha-dialog
         open
@@ -94,12 +103,6 @@ export class DialogEnergySolarSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <div>
-          ${this.hass.localize(
-            "ui.panel.config.energy.solar.dialog.entity_para",
-            { unit: pickableUnit }
-          )}
-        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -111,9 +114,28 @@ export class DialogEnergySolarSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.entity_para",
+            { unit: this._energy_units?.join(", ") || "" }
+          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .includeUnitClass=${powerUnitClasses}
+          .value=${this._source.stat_power}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.solar_production_power"
+          )}
+          .excludeStatistics=${this._excludeListPower}
+          @value-changed=${this._powerStatisticChanged}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.entity_para",
+            { unit: this._power_units?.join(", ") || "" }
+          )}
+        ></ha-statistic-picker>
+
         <h3>
           ${this.hass.localize(
             "ui.panel.config.energy.solar.dialog.solar_production_forecast"
@@ -267,6 +289,10 @@ export class DialogEnergySolarSettings
     this._source = { ...this._source!, stat_energy_from: ev.detail.value };
   }
 
+  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
+    this._source = { ...this._source!, stat_power: ev.detail.value };
+  }
+
   private async _save() {
     try {
       if (!this._forecast) {
@@ -287,6 +313,10 @@ export class DialogEnergySolarSettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
+        ha-statistic-picker {
+          display: block;
+          margin-bottom: var(--ha-space-4);
+        }
         img {
           height: 24px;
           margin-right: 16px;

src/panels/config/energy/dialogs/show-dialogs-energy.ts

@@ -7,6 +7,7 @@ import type {
   FlowFromGridSourceEnergyPreference,
   FlowToGridSourceEnergyPreference,
   GasSourceTypeEnergyPreference,
+  GridPowerSourceEnergyPreference,
   GridSourceTypeEnergyPreference,
   SolarSourceTypeEnergyPreference,
   WaterSourceTypeEnergyPreference,
@@ -41,6 +42,12 @@ export interface EnergySettingsGridFlowToDialogParams {
   saveCallback: (source: FlowToGridSourceEnergyPreference) => Promise<void>;
 }
 
+export interface EnergySettingsGridPowerDialogParams {
+  source?: GridPowerSourceEnergyPreference;
+  grid_source?: GridSourceTypeEnergyPreference;
+  saveCallback: (source: GridPowerSourceEnergyPreference) => Promise<void>;
+}
+
 export interface EnergySettingsSolarDialogParams {
   info: EnergyInfo;
   source?: SolarSourceTypeEnergyPreference;
@@ -152,3 +159,14 @@ export const showEnergySettingsGridFlowToDialog = (
     dialogParams: { ...dialogParams, direction: "to" },
   });
 };
+
+export const showEnergySettingsGridPowerDialog = (
+  element: HTMLElement,
+  dialogParams: EnergySettingsGridPowerDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-energy-grid-power-settings",
+    dialogImport: () => import("./dialog-energy-grid-power-settings"),
+    dialogParams: dialogParams,
+  });
+};

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -128,10 +128,11 @@ class ZHAAddDevicesPage extends LitElement {
                               this.hass,
                               "/integrations/zha#adding-devices"
                             )}
-                            >${this.hass.localize(
-                              "ui.panel.config.zha.add_device_page.pairing_mode_link"
-                            )}</a
                           >
+                            ${this.hass.localize(
+                              "ui.panel.config.zha.add_device_page.pairing_mode_link"
+                            )}
+                          </a>
                         `,
                       }
                     )}

src/panels/lovelace/cards/energy/common/energy-chart-options.ts

@@ -16,6 +16,7 @@ import {
 import type {
   BarSeriesOption,
   CallbackDataParams,
+  LineSeriesOption,
   TopLevelFormatterParams,
 } from "echarts/types/dist/shared";
 import type { FrontendLocaleData } from "../../../../../data/translation";
@@ -170,11 +171,10 @@ function formatTooltip(
       compare
         ? `${(showCompareYear ? formatDateShort : formatDateVeryShort)(date, locale, config)}: `
         : ""
-    }${formatTime(date, locale, config)} – ${formatTime(
-      addHours(date, 1),
-      locale,
-      config
-    )}`;
+    }${formatTime(date, locale, config)}`;
+    if (params[0].componentSubType === "bar") {
+      period += ` – ${formatTime(addHours(date, 1), locale, config)}`;
+    }
   }
   const title = `<h4 style="text-align: center; margin: 0;">${period}</h4>`;
 
@@ -281,6 +281,35 @@ export function fillDataGapsAndRoundCaps(datasets: BarSeriesOption[]) {
   });
 }
 
+export function fillLineGaps(datasets: LineSeriesOption[]) {
+  const buckets = Array.from(
+    new Set(
+      datasets
+        .map((dataset) =>
+          dataset.data!.map((datapoint) => Number(datapoint![0]))
+        )
+        .flat()
+    )
+  ).sort((a, b) => a - b);
+  buckets.forEach((bucket, index) => {
+    for (let i = datasets.length - 1; i >= 0; i--) {
+      const dataPoint = datasets[i].data![index];
+      const item: any =
+        dataPoint && typeof dataPoint === "object" && "value" in dataPoint
+          ? dataPoint
+          : { value: dataPoint };
+      const x = item.value?.[0];
+      if (x === undefined) {
+        continue;
+      }
+      if (Number(x) !== bucket) {
+        datasets[i].data?.splice(index, 0, [bucket, 0]);
+      }
+    }
+  });
+  return datasets;
+}
+
 export function getCompareTransform(start: Date, compareStart?: Date) {
   if (!compareStart) {
     return (ts: Date) => ts;

src/panels/lovelace/cards/energy/hui-power-sources-graph-card.ts

@@ -0,0 +1,305 @@
+import { endOfToday, isToday, startOfToday } from "date-fns";
+import type { HassConfig, UnsubscribeFunc } from "home-assistant-js-websocket";
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
+import type { LineSeriesOption } from "echarts/charts";
+import { graphic } from "echarts";
+import "../../../../components/chart/ha-chart-base";
+import "../../../../components/ha-card";
+import type { EnergyData } from "../../../../data/energy";
+import { getEnergyDataCollection } from "../../../../data/energy";
+import type { StatisticValue } from "../../../../data/recorder";
+import type { FrontendLocaleData } from "../../../../data/translation";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../../types";
+import type { LovelaceCard } from "../../types";
+import type { PowerSourcesGraphCardConfig } from "../types";
+import { hasConfigChanged } from "../../common/has-changed";
+import { getCommonOptions, fillLineGaps } from "./common/energy-chart-options";
+import type { ECOption } from "../../../../resources/echarts";
+import { hex2rgb } from "../../../../common/color/convert-color";
+
+@customElement("hui-power-sources-graph-card")
+export class HuiPowerSourcesGraphCard
+  extends SubscribeMixin(LitElement)
+  implements LovelaceCard
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _config?: PowerSourcesGraphCardConfig;
+
+  @state() private _chartData: LineSeriesOption[] = [];
+
+  @state() private _start = startOfToday();
+
+  @state() private _end = endOfToday();
+
+  @state() private _compareStart?: Date;
+
+  @state() private _compareEnd?: Date;
+
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      getEnergyDataCollection(this.hass, {
+        key: this._config?.collection_key,
+      }).subscribe((data) => this._getStatistics(data)),
+    ];
+  }
+
+  public getCardSize(): Promise<number> | number {
+    return 3;
+  }
+
+  public setConfig(config: PowerSourcesGraphCardConfig): void {
+    this._config = config;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return (
+      hasConfigChanged(this, changedProps) ||
+      changedProps.size > 1 ||
+      !changedProps.has("hass")
+    );
+  }
+
+  protected render() {
+    if (!this.hass || !this._config) {
+      return nothing;
+    }
+
+    return html`
+      <ha-card>
+        ${this._config.title
+          ? html`<h1 class="card-header">${this._config.title}</h1>`
+          : ""}
+        <div
+          class="content ${classMap({
+            "has-header": !!this._config.title,
+          })}"
+        >
+          <ha-chart-base
+            .hass=${this.hass}
+            .data=${this._chartData}
+            .options=${this._createOptions(
+              this._start,
+              this._end,
+              this.hass.locale,
+              this.hass.config,
+              this._compareStart,
+              this._compareEnd
+            )}
+          ></ha-chart-base>
+          ${!this._chartData.some((dataset) => dataset.data!.length)
+            ? html`<div class="no-data">
+                ${isToday(this._start)
+                  ? this.hass.localize("ui.panel.lovelace.cards.energy.no_data")
+                  : this.hass.localize(
+                      "ui.panel.lovelace.cards.energy.no_data_period"
+                    )}
+              </div>`
+            : nothing}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _createOptions = memoizeOne(
+    (
+      start: Date,
+      end: Date,
+      locale: FrontendLocaleData,
+      config: HassConfig,
+      compareStart?: Date,
+      compareEnd?: Date
+    ): ECOption =>
+      getCommonOptions(
+        start,
+        end,
+        locale,
+        config,
+        "kW",
+        compareStart,
+        compareEnd
+      )
+  );
+
+  private async _getStatistics(energyData: EnergyData): Promise<void> {
+    const datasets: LineSeriesOption[] = [];
+
+    const statIds = {
+      solar: {
+        stats: [] as string[],
+        color: "--energy-solar-color",
+        name: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.power_graph.solar"
+        ),
+      },
+      grid: {
+        stats: [] as string[],
+        color: "--energy-grid-consumption-color",
+        name: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.power_graph.grid"
+        ),
+      },
+      battery: {
+        stats: [] as string[],
+        color: "--energy-battery-out-color",
+        name: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.power_graph.battery"
+        ),
+      },
+    };
+
+    const computedStyles = getComputedStyle(this);
+
+    for (const source of energyData.prefs.energy_sources) {
+      if (source.type === "solar") {
+        if (source.stat_power) {
+          statIds.solar.stats.push(source.stat_power);
+        }
+        continue;
+      }
+
+      if (source.type === "battery") {
+        if (source.stat_power) {
+          statIds.battery.stats.push(source.stat_power);
+        }
+        continue;
+      }
+
+      if (source.type === "grid" && source.power) {
+        statIds.grid.stats.push(...source.power.map((p) => p.stat_power));
+      }
+    }
+    const commonSeriesOptions: LineSeriesOption = {
+      type: "line",
+      smooth: 0.4,
+      smoothMonotone: "x",
+      lineStyle: {
+        width: 1,
+      },
+    };
+
+    Object.keys(statIds).forEach((key, keyIndex) => {
+      if (statIds[key].stats.length) {
+        const colorHex = computedStyles.getPropertyValue(statIds[key].color);
+        const rgb = hex2rgb(colorHex);
+        const { positive, negative } = this._processData(
+          statIds[key].stats.map((id: string) => energyData.stats[id] ?? [])
+        );
+        datasets.push({
+          ...commonSeriesOptions,
+          id: key,
+          name: statIds[key].name,
+          color: colorHex,
+          stack: "positive",
+          areaStyle: {
+            color: new graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.75)`,
+              },
+              {
+                offset: 1,
+                color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.25)`,
+              },
+            ]),
+          },
+          data: positive,
+          z: 3 - keyIndex, // draw in reverse order so 0 value lines are overwritten
+        });
+        if (key !== "solar") {
+          datasets.push({
+            ...commonSeriesOptions,
+            id: `${key}-negative`,
+            name: statIds[key].name,
+            color: colorHex,
+            stack: "negative",
+            areaStyle: {
+              color: new graphic.LinearGradient(0, 1, 0, 0, [
+                {
+                  offset: 0,
+                  color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.75)`,
+                },
+                {
+                  offset: 1,
+                  color: `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0.25)`,
+                },
+              ]),
+            },
+            data: negative,
+            z: 4 - keyIndex, // draw in reverse order but above positive series
+          });
+        }
+      }
+    });
+
+    this._start = energyData.start;
+    this._end = energyData.end || endOfToday();
+
+    this._chartData = fillLineGaps(datasets);
+  }
+
+  private _processData(stats: StatisticValue[][]) {
+    const data: Record<number, number[]> = {};
+    stats.forEach((statSet) => {
+      statSet.forEach((point) => {
+        if (point.mean == null) {
+          return;
+        }
+        const x = (point.start + point.end) / 2;
+        data[x] = [...(data[x] ?? []), point.mean];
+      });
+    });
+    const positive: [number, number][] = [];
+    const negative: [number, number][] = [];
+    Object.entries(data).forEach(([x, y]) => {
+      const ts = Number(x);
+      const meanY = y.reduce((a, b) => a + b, 0) / y.length;
+      positive.push([ts, Math.max(0, meanY)]);
+      negative.push([ts, Math.min(0, meanY)]);
+    });
+    return { positive, negative };
+  }
+
+  static styles = css`
+    ha-card {
+      height: 100%;
+    }
+    .card-header {
+      padding-bottom: 0;
+    }
+    .content {
+      padding: var(--ha-space-4);
+    }
+    .has-header {
+      padding-top: 0;
+    }
+    .no-data {
+      position: absolute;
+      height: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 20%;
+      margin-left: var(--ha-space-8);
+      margin-inline-start: var(--ha-space-8);
+      margin-inline-end: initial;
+      box-sizing: border-box;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-power-sources-graph-card": HuiPowerSourcesGraphCard;
+  }
+}

src/panels/lovelace/cards/types.ts

@@ -227,6 +227,11 @@ export interface EnergySankeyCardConfig extends EnergyCardBaseConfig {
   group_by_area?: boolean;
 }
 
+export interface PowerSourcesGraphCardConfig extends EnergyCardBaseConfig {
+  type: "power-sources-graph";
+  title?: string;
+}
+
 export interface EntityFilterCardConfig extends LovelaceCardConfig {
   type: "entity-filter";
   entities: (EntityFilterEntityConfig | string)[];

src/panels/lovelace/create-element/create-card-element.ts

@@ -66,6 +66,8 @@ const LAZY_LOAD_TYPES = {
   "energy-usage-graph": () =>
     import("../cards/energy/hui-energy-usage-graph-card"),
   "energy-sankey": () => import("../cards/energy/hui-energy-sankey-card"),
+  "power-sources-graph": () =>
+    import("../cards/energy/hui-power-sources-graph-card"),
   "entity-filter": () => import("../cards/hui-entity-filter-card"),
   error: () => import("../cards/hui-error-card"),
   "home-summary": () => import("../cards/hui-home-summary-card"),

src/panels/lovelace/editor/get-dashboard-documentation-url.ts

@@ -22,6 +22,7 @@ const NON_STANDARD_URLS = {
   "energy-devices-graph": "energy/#devices-energy-graph",
   "energy-devices-detail-graph": "energy/#detail-devices-energy-graph",
   "energy-sankey": "energy/#sankey-energy-graph",
+  "power-sources-graph": "energy/#power-sources-graph",
 };
 
 export const getCardDocumentationURL = (

src/panels/lovelace/strategies/home/home-main-view-strategy.ts

@@ -16,6 +16,7 @@ import type {
   AreaCardConfig,
   HomeSummaryCard,
   MarkdownCardConfig,
+  TileCardConfig,
   WeatherForecastCardConfig,
 } from "../../cards/types";
 import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
@@ -130,14 +131,31 @@ export class HomeMainViewStrategy extends ReactiveElement {
     const favoriteEntities = (config.favorite_entities || []).filter(
       (entityId) => hass.states[entityId] !== undefined
     );
-    const maxCommonControls = Math.max(8, favoriteEntities.length);
+
+    if (favoriteEntities.length > 0) {
+      favoriteSection.cards!.push(
+        {
+          type: "heading",
+          heading: "",
+          heading_style: "subtitle",
+        },
+        ...favoriteEntities.map(
+          (entityId) =>
+            ({
+              type: "tile",
+              entity: entityId,
+              show_entity_picture: true,
+            }) as TileCardConfig
+        )
+      );
+    }
 
     const commonControlsSection = {
       strategy: {
         type: "common-controls",
         title: hass.localize("ui.panel.lovelace.strategy.home.common_controls"),
-        limit: maxCommonControls,
-        include_entities: favoriteEntities,
+        limit: 4,
+        exclude_entities: favoriteEntities,
         hide_empty: true,
       } satisfies CommonControlSectionStrategyConfig,
       column_span: maxColumns,

src/panels/lovelace/strategies/usage_prediction/common-controls-section-strategy.ts

@@ -14,7 +14,6 @@ export interface CommonControlSectionStrategyConfig {
   icon?: string;
   limit?: number;
   exclude_entities?: string[];
-  include_entities?: string[];
   hide_empty?: boolean;
 }
 
@@ -53,23 +52,12 @@ export class CommonControlsSectionStrategy extends ReactiveElement {
       (entity) => entity in hass.states
     );
 
-    if (config.exclude_entities?.length) {
+    if (config.exclude_entities) {
       predictedEntities = predictedEntities.filter(
         (entity) => !config.exclude_entities!.includes(entity)
       );
     }
 
-    if (config.include_entities?.length) {
-      // Remove included entities from predicted list to avoid duplicates
-      predictedEntities = predictedEntities.filter(
-        (entity) => !config.include_entities!.includes(entity)
-      );
-      // Add included entities to the start of the list
-      predictedEntities.unshift(
-        ...config.include_entities!.filter((entity) => entity in hass.states)
-      );
-    }
-
     const limit = config.limit ?? DEFAULT_LIMIT;
     predictedEntities = predictedEntities.slice(0, limit);
 

src/translations/en.json

@@ -3036,6 +3036,15 @@
             "grid_carbon_footprint": "Grid carbon footprint",
             "remove_co2_signal": "Remove Electricity Maps integration",
             "add_co2_signal": "Add Electricity Maps integration",
+            "grid_power": "Grid power",
+            "add_power": "Add power sensor",
+            "edit_power": "Edit power sensor",
+            "delete_power": "Delete power sensor",
+            "power_dialog": {
+              "header": "Configure grid power",
+              "power_stat": "Power sensor",
+              "power_helper": "Pick a sensor which measures grid power in either of {unit}. Positive values indicate using electricity from the grid, negative values indicate exporting electricity to the grid."
+            },
             "flow_dialog": {
               "from": {
                 "header": "Configure grid consumption",
@@ -3082,6 +3091,7 @@
               "header": "Configure solar panels",
               "entity_para": "Pick a sensor which measures solar energy production in either of {unit}.",
               "solar_production_energy": "Solar production energy",
+              "solar_production_power": "Solar production power",
               "solar_production_forecast": "Solar production forecast",
               "solar_production_forecast_description": "Adding solar production forecast information will allow you to quickly see your expected production for today.",
               "dont_forecast_production": "Don't forecast production",
@@ -3099,9 +3109,12 @@
             "add_battery_system": "Add battery system",
             "dialog": {
               "header": "Configure battery system",
-              "entity_para": "Pick sensors which measure energy going into and coming out of the battery in either of {unit}.",
-              "energy_into_battery": "Energy going into the battery",
-              "energy_out_of_battery": "Energy coming out of the battery"
+              "energy_helper_into": "Pick a sensor that measures the electricity flowing into the battery in either of {unit}.",
+              "energy_helper_out": "Pick a sensor that measures the electricity flowing out of the battery in either of {unit}.",
+              "energy_into_battery": "Energy charged into the battery",
+              "energy_out_of_battery": "Energy discharged from the battery",
+              "power": "Battery power",
+              "power_helper": "Pick a sensor which measures the electricity flowing into and out of the battery in either of {unit}. Positive values indicate discharging the battery, negative values indicate charging the battery."
             }
           },
           "gas": {
@@ -3163,7 +3176,8 @@
               "header": "Add a device",
               "display_name": "Display name",
               "device_consumption_energy": "Device energy consumption",
-              "selected_stat_intro": "Select the energy sensor that measures the device's energy usage in either of {unit}.",
+              "device_consumption_power": "Device power consumption",
+              "selected_stat_intro": "Select the sensor that measures the device's electricity usage in either of {unit}.",
               "included_in_device": "Upstream device",
               "included_in_device_helper": "If this device is already counted by another device (such as a smart switch measured by a smart breaker), selecting the upstream device prevents duplicate energy tracking.",
               "no_upstream_devices": "No eligible upstream devices"
@@ -7039,6 +7053,11 @@
               "card_indicates_energy_used": "This card indicates how much of the electricity consumed by your home was generated using non-fossil fuels like solar, wind, and nuclear. The higher, the better!",
               "low_carbon_energy_consumed": "Low-carbon electricity consumed",
               "low_carbon_energy_not_calculated": "Consumed low-carbon electricity couldn't be calculated"
+            },
+            "power_graph": {
+              "grid": "Grid",
+              "solar": "Solar",
+              "battery": "Battery"
             }
           },
           "heading": {