Consume Lit context instead of hass in energy customise dialog

Drop the hass property from the dialog and consume the internationalization
and connection contexts directly, in line with the hass-to-context migration.
Defer the system-data load until the first update so the consumed contexts
have resolved (showDialog runs before the dialog is connected).

src/data/frontend.ts

@@ -26,6 +26,13 @@ export interface HomeFrontendSystemData {
   shortcuts?: ShortcutItem[];
 }
 
+export interface EnergyFrontendSystemData {
+  // Stable "<view>.<card-type>" keys of energy dashboard cards the user has
+  // hidden. An absent key or array means nothing is hidden (all cards visible),
+  // so cards added in the future are shown by default.
+  hidden_cards?: string[];
+}
+
 declare global {
   interface FrontendUserData {
     core: CoreFrontendUserData;
@@ -34,6 +41,7 @@ declare global {
   interface FrontendSystemData {
     core: CoreFrontendSystemData;
     home: HomeFrontendSystemData;
+    energy: EnergyFrontendSystemData;
   }
 }
 

src/panels/config/energy/dialogs/dialog-energy-customise.ts

@@ -0,0 +1,288 @@
+import { consume, type ContextType } from "@lit/context";
+import type { CSSResultGroup } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import type { LocalizeKeys } from "../../../../common/translations/localize";
+import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
+import "../../../../components/ha-dialog";
+import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-expansion-panel";
+import "../../../../components/ha-settings-row";
+import "../../../../components/ha-spinner";
+import "../../../../components/ha-switch";
+import type { HaSwitch } from "../../../../components/ha-switch";
+import "../../../../components/ha-tooltip";
+import {
+  connectionContext,
+  internationalizationContext,
+} from "../../../../data/context";
+import {
+  fetchFrontendSystemData,
+  saveFrontendSystemData,
+} from "../../../../data/frontend";
+import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
+import { haStyleDialog } from "../../../../resources/styles";
+import { showToast } from "../../../../util/toast";
+import type {
+  EnergyCardCatalogEntry,
+  EnergyViewPath,
+} from "../../../energy/strategies/energy-cards";
+import { ENERGY_CARD_CATALOG } from "../../../energy/strategies/energy-cards";
+import type { EnergyCustomiseDialogParams } from "./show-dialog-energy-customise";
+
+const VIEW_GROUPS: { view: EnergyViewPath; labelKey: LocalizeKeys }[] = [
+  {
+    view: "overview",
+    labelKey: "ui.panel.config.energy.customise.groups.overview",
+  },
+  { view: "electricity", labelKey: "ui.panel.config.energy.tabs.electricity" },
+  { view: "gas", labelKey: "ui.panel.config.energy.tabs.gas" },
+  { view: "water", labelKey: "ui.panel.config.energy.tabs.water" },
+  { view: "now", labelKey: "ui.panel.config.energy.customise.groups.now" },
+];
+
+@customElement("dialog-energy-customise")
+export class DialogEnergyCustomise
+  extends LitElement
+  implements HassDialog<EnergyCustomiseDialogParams>
+{
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  private _i18n!: ContextType<typeof internationalizationContext>;
+
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  private _connection!: ContextType<typeof connectionContext>;
+
+  @state() private _params?: EnergyCustomiseDialogParams;
+
+  @state() private _open = false;
+
+  @state() private _error?: string;
+
+  @state() private _submitting = false;
+
+  // Working copy of the hidden card keys. A switch that is ON means the card is
+  // visible, i.e. its key is NOT in this set.
+  @state() private _hidden?: Set<string>;
+
+  public showDialog(params: EnergyCustomiseDialogParams): void {
+    this._params = params;
+    this._open = true;
+    this._loadHidden();
+  }
+
+  public closeDialog(): boolean {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    this._hidden = undefined;
+    this._error = undefined;
+    this._submitting = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  private async _loadHidden(): Promise<void> {
+    this._error = undefined;
+    // showDialog runs before the dialog is connected to the DOM, so wait for
+    // the first update to ensure the consumed contexts have resolved.
+    await this.updateComplete;
+    if (!this._params) {
+      return;
+    }
+    try {
+      // The card labels reuse keys from the "energy" translation fragment,
+      // which is not guaranteed to be loaded on the config page.
+      const [data] = await Promise.all([
+        fetchFrontendSystemData(this._connection.connection, "energy"),
+        this._i18n.loadFragmentTranslation("energy"),
+      ]);
+      this._hidden = new Set(data?.hidden_cards ?? []);
+    } catch (err: any) {
+      this._error = err?.message || "Unknown error";
+      this._hidden = new Set();
+    }
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        .open=${this._open}
+        .headerTitle=${this._i18n.localize(
+          "ui.panel.config.energy.customise.title"
+        )}
+        prevent-scrim-close
+        @closed=${this._dialogClosed}
+      >
+        ${!this._hidden
+          ? html`<div class="loading">
+              <ha-spinner size="large"></ha-spinner>
+            </div>`
+          : this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : html`<div class="groups">${this._renderGroups()}</div>`}
+
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            appearance="plain"
+            slot="secondaryAction"
+            @click=${this.closeDialog}
+            .disabled=${this._submitting}
+          >
+            ${this._i18n.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button
+            slot="primaryAction"
+            @click=${this._save}
+            .disabled=${this._submitting || !this._hidden || !!this._error}
+          >
+            ${this._i18n.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-dialog>
+    `;
+  }
+
+  private _renderGroups() {
+    const prefs = this._params!.preferences;
+    return VIEW_GROUPS.map((group) => {
+      const cards = ENERGY_CARD_CATALOG.filter((c) => c.view === group.view);
+      // Hide the whole group when none of its cards apply to the current config.
+      if (!cards.some((c) => c.isApplicable(prefs))) {
+        return nothing;
+      }
+      return html`
+        <ha-expansion-panel
+          outlined
+          expanded
+          .header=${this._i18n.localize(group.labelKey)}
+        >
+          <div class="cards">
+            ${cards.map((card) => this._renderCardRow(card))}
+          </div>
+        </ha-expansion-panel>
+      `;
+    });
+  }
+
+  private _renderCardRow(card: EnergyCardCatalogEntry) {
+    const applicable = card.isApplicable(this._params!.preferences);
+    const label = this._i18n.localize(card.labelKey);
+    const rowId = `row-${card.key}`;
+    return html`
+      <ha-settings-row slim id=${rowId}>
+        <span slot="heading" class=${applicable ? "" : "disabled"}
+          >${label}</span
+        >
+        <ha-switch
+          .checked=${applicable && !this._hidden!.has(card.key)}
+          .disabled=${!applicable}
+          .ariaLabel=${label}
+          data-card-key=${card.key}
+          @change=${this._toggleCard}
+        ></ha-switch>
+      </ha-settings-row>
+      ${applicable
+        ? nothing
+        : html`
+            <ha-tooltip .for=${rowId} placement="top">
+              ${this._i18n.localize(
+                "ui.panel.config.energy.customise.unavailable"
+              )}
+            </ha-tooltip>
+          `}
+    `;
+  }
+
+  private _toggleCard = (ev: Event): void => {
+    const target = ev.currentTarget as HaSwitch;
+    const cardKey = target.dataset.cardKey;
+    if (!cardKey) {
+      return;
+    }
+    const next = new Set(this._hidden);
+    if (target.checked) {
+      next.delete(cardKey);
+    } else {
+      next.add(cardKey);
+    }
+    this._hidden = next;
+  };
+
+  private async _save(): Promise<void> {
+    if (!this._hidden) {
+      return;
+    }
+    this._submitting = true;
+    try {
+      const hidden = Array.from(this._hidden);
+      await saveFrontendSystemData(this._connection.connection, "energy", {
+        hidden_cards: hidden.length ? hidden : undefined,
+      });
+      this._params?.saveCallback?.();
+      this.closeDialog();
+    } catch (_err) {
+      showToast(this, {
+        message: this._i18n.localize(
+          "ui.panel.config.energy.customise.save_failed"
+        ),
+        duration: 0,
+        dismissable: true,
+      });
+    } finally {
+      this._submitting = false;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --dialog-content-padding: var(--ha-space-2) var(--ha-space-6);
+        }
+        .loading {
+          display: flex;
+          justify-content: center;
+          padding: var(--ha-space-6);
+        }
+        span.disabled {
+          color: var(--disabled-text-color);
+        }
+        .groups {
+          display: flex;
+          flex-direction: column;
+          gap: var(--ha-space-4);
+        }
+        ha-expansion-panel {
+          display: block;
+          --expansion-panel-content-padding: 0;
+          --expansion-panel-summary-padding: 0 var(--ha-space-4);
+          border-radius: var(--ha-border-radius-md);
+          --ha-card-border-radius: var(--ha-border-radius-md);
+        }
+        .cards {
+          padding: 0 var(--ha-space-4);
+        }
+        .cards ha-settings-row {
+          min-height: 48px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-energy-customise": DialogEnergyCustomise;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { fireEvent } from "../../../../common/dom/fire_event";
+import type { EnergyPreferences } from "../../../../data/energy";
+
+export interface EnergyCustomiseDialogParams {
+  preferences: EnergyPreferences;
+  // Called after a successful save (e.g. to show a toast on the page).
+  saveCallback?: () => void;
+}
+
+export const loadEnergyCustomiseDialog = () =>
+  import("./dialog-energy-customise");
+
+export const showEnergyCustomiseDialog = (
+  element: HTMLElement,
+  params: EnergyCustomiseDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-energy-customise",
+    dialogImport: loadEnergyCustomiseDialog,
+    dialogParams: params,
+  });
+};

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

@@ -1,5 +1,11 @@
 import "../../../layouts/hass-error-screen";
-import { mdiDownload, mdiFire, mdiLightningBolt, mdiWater } from "@mdi/js";
+import {
+  mdiDownload,
+  mdiFire,
+  mdiLightningBolt,
+  mdiViewDashboardEdit,
+  mdiWater,
+} from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -31,7 +37,9 @@ import "./components/ha-energy-battery-settings";
 import "./components/ha-energy-gas-settings";
 import "./components/ha-energy-water-settings";
 import { fileDownload } from "../../../util/file_download";
+import { showToast } from "../../../util/toast";
 import type { PageNavigation } from "../../../layouts/hass-tabs-subpage";
+import { showEnergyCustomiseDialog } from "./dialogs/show-dialog-energy-customise";
 
 const INITIAL_CONFIG: EnergyPreferences = {
   energy_sources: [],
@@ -124,14 +132,22 @@ class HaConfigEnergy extends LitElement {
         .route=${this.route}
         .tabs=${TABS}
       >
-        <ha-icon-button
-          slot="toolbar-icon"
-          .path=${mdiDownload}
-          .label=${this.hass.localize(
-            "ui.panel.config.devices.download_diagnostics"
-          )}
-          @click=${this._downloadDiagnostics}
-        ></ha-icon-button>
+        <div slot="toolbar-icon" class="toolbar-icons">
+          <ha-icon-button
+            .path=${mdiViewDashboardEdit}
+            .label=${this.hass.localize(
+              "ui.panel.config.energy.customise.toolbar_action"
+            )}
+            @click=${this._customise}
+          ></ha-icon-button>
+          <ha-icon-button
+            .path=${mdiDownload}
+            .label=${this.hass.localize(
+              "ui.panel.config.devices.download_diagnostics"
+            )}
+            @click=${this._downloadDiagnostics}
+          ></ha-icon-button>
+        </div>
         <ha-alert>
           ${this.hass.localize("ui.panel.config.energy.new_device_info")}
         </ha-alert>
@@ -254,6 +270,20 @@ class HaConfigEnergy extends LitElement {
     this._statsMetadata = statsMetadata;
   }
 
+  private _customise() {
+    if (!this._preferences) {
+      return;
+    }
+    showEnergyCustomiseDialog(this, {
+      preferences: this._preferences,
+      saveCallback: () => {
+        showToast(this, {
+          message: this.hass.localize("ui.panel.config.energy.customise.saved"),
+        });
+      },
+    });
+  }
+
   private async _downloadDiagnostics() {
     const data = {
       version: this.hass.config.version,
@@ -285,6 +315,10 @@ class HaConfigEnergy extends LitElement {
     return [
       haStyle,
       css`
+        .toolbar-icons {
+          display: flex;
+          align-items: center;
+        }
         .content {
           padding: 0 var(--ha-space-5);
           max-width: 1040px;

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

@@ -6,6 +6,8 @@ import "../../components/ha-alert";
 import "../../components/ha-icon-button-arrow-prev";
 import "../../components/ha-menu-button";
 import "../../components/ha-top-app-bar-fixed";
+import type { EnergyFrontendSystemData } from "../../data/frontend";
+import { fetchFrontendSystemData } from "../../data/frontend";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
@@ -26,6 +28,8 @@ class PanelEnergy extends LitElement {
 
   @state() private _lovelace?: Lovelace;
 
+  @state() private _config: EnergyFrontendSystemData = {};
+
   @property({ attribute: false }) public route?: {
     path: string;
     prefix: string;
@@ -58,10 +62,23 @@ class PanelEnergy extends LitElement {
     await Promise.all([
       this.hass.loadFragmentTranslation("lovelace"),
       this.hass.loadFragmentTranslation("energy"),
+      this._loadSystemData(),
     ]);
     this._loadConfig();
   }
 
+  private async _loadSystemData() {
+    try {
+      const data = await fetchFrontendSystemData(
+        this.hass.connection,
+        "energy"
+      );
+      this._config = data || {};
+    } catch (_err) {
+      this._config = {};
+    }
+  }
+
   private async _loadConfig() {
     try {
       this._error = undefined;
@@ -94,6 +111,7 @@ class PanelEnergy extends LitElement {
             this.route?.path === "/now"
               ? DEFAULT_POWER_COLLECTION_KEY
               : undefined,
+          hidden_cards: this._config.hidden_cards,
         },
       },
       this.hass
@@ -164,7 +182,8 @@ class PanelEnergy extends LitElement {
     navigate(`/config/energy/${tab}?historyBack=1`);
   }
 
-  private _reloadConfig() {
+  private async _reloadConfig() {
+    await this._loadSystemData();
     this._loadConfig();
   }
 

src/panels/energy/strategies/energy-cards.ts

@@ -0,0 +1,296 @@
+import type { LocalizeKeys } from "../../../common/translations/localize";
+import type {
+  EnergyPreferences,
+  GridSourceTypeEnergyPreference,
+} from "../../../data/energy";
+import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
+
+/** Strategy config shared by the per-view energy strategies. */
+export interface EnergyViewStrategyConfig extends LovelaceStrategyConfig {
+  collection_key?: string;
+  hidden_cards?: string[];
+}
+
+export type EnergyViewPath =
+  | "overview"
+  | "electricity"
+  | "gas"
+  | "water"
+  | "now";
+
+// --- Applicability helpers -------------------------------------------------
+// These mirror, one-to-one, the conditions the individual view strategies use
+// to decide whether to emit a card. The catalog and the strategies must agree
+// on what "applicable" means, so the conditions live here and are reused.
+
+export const hasGridSource = (prefs: EnergyPreferences): boolean =>
+  prefs.energy_sources.some(
+    (source): source is GridSourceTypeEnergyPreference =>
+      source.type === "grid" &&
+      (!!source.stat_energy_from || !!source.stat_energy_to)
+  );
+
+export const hasReturn = (prefs: EnergyPreferences): boolean =>
+  prefs.energy_sources.some(
+    (source) => source.type === "grid" && !!source.stat_energy_to
+  );
+
+export const hasSolar = (prefs: EnergyPreferences): boolean =>
+  prefs.energy_sources.some((source) => source.type === "solar");
+
+export const hasBattery = (prefs: EnergyPreferences): boolean =>
+  prefs.energy_sources.some((source) => source.type === "battery");
+
+export const hasGasSource = (prefs: EnergyPreferences): boolean =>
+  prefs.energy_sources.some((source) => source.type === "gas");
+
+export const hasWaterSource = (prefs: EnergyPreferences): boolean =>
+  prefs.energy_sources.some((source) => source.type === "water");
+
+export const hasWaterDevices = (prefs: EnergyPreferences): boolean =>
+  (prefs.device_consumption_water?.length ?? 0) > 0;
+
+export const hasDeviceConsumption = (prefs: EnergyPreferences): boolean =>
+  prefs.device_consumption.length > 0;
+
+export const hasPowerSources = (prefs: EnergyPreferences): boolean =>
+  prefs.energy_sources.some((source) => {
+    if (source.type === "solar" && source.stat_rate) return true;
+    if (source.type === "battery" && source.stat_rate) return true;
+    if (source.type === "grid") {
+      return !!source.stat_rate || !!source.power_config;
+    }
+    return false;
+  });
+
+export const hasPowerDevices = (prefs: EnergyPreferences): boolean =>
+  prefs.device_consumption.some((device) => device.stat_rate);
+
+export const hasPowerWaterDevices = (prefs: EnergyPreferences): boolean =>
+  (prefs.device_consumption_water ?? []).some((device) => device.stat_rate);
+
+// --- Card catalog ----------------------------------------------------------
+
+export interface EnergyCardCatalogEntry {
+  /** Stable identifier and storage token: `<view>.<cardType>`. */
+  key: string;
+  view: EnergyViewPath;
+  /** Localize key for the label shown in the customise dialog. */
+  labelKey: LocalizeKeys;
+  /** Whether this card is emitted for the given preferences. */
+  isApplicable: (prefs: EnergyPreferences) => boolean;
+}
+
+export const energyCardKey = (view: EnergyViewPath, cardType: string): string =>
+  `${view}.${cardType}`;
+
+const entry = (
+  view: EnergyViewPath,
+  cardType: string,
+  labelKey: LocalizeKeys,
+  isApplicable: (prefs: EnergyPreferences) => boolean
+): EnergyCardCatalogEntry => ({
+  key: energyCardKey(view, cardType),
+  view,
+  labelKey,
+  isApplicable,
+});
+
+export const ENERGY_CARD_CATALOG: readonly EnergyCardCatalogEntry[] = [
+  // --- Overview ---
+  entry(
+    "overview",
+    "energy-distribution",
+    "ui.panel.energy.cards.energy_distribution_title",
+    (p) => hasGridSource(p) || hasBattery(p) || hasSolar(p)
+  ),
+  entry(
+    "overview",
+    "energy-sources-table",
+    "ui.panel.energy.cards.energy_sources_table_title",
+    (p) => p.energy_sources.length > 0
+  ),
+  entry(
+    "overview",
+    "power-sources-graph",
+    "ui.panel.energy.cards.power_sources_graph_title",
+    (p) => hasPowerSources(p)
+  ),
+  entry(
+    "overview",
+    "energy-usage-graph",
+    "ui.panel.energy.cards.energy_usage_graph_title",
+    (p) => hasGridSource(p) || hasBattery(p)
+  ),
+  entry(
+    "overview",
+    "energy-gas-graph",
+    "ui.panel.energy.cards.energy_gas_graph_title",
+    (p) => hasGasSource(p)
+  ),
+  // One toggle gates the water row, which renders energy-water-graph (sources)
+  // or, with only water devices, water-sankey.
+  entry(
+    "overview",
+    "energy-water-graph",
+    "ui.panel.energy.cards.energy_water_graph_title",
+    (p) => hasWaterSource(p) || hasWaterDevices(p)
+  ),
+
+  // --- Electricity ---
+  entry(
+    "electricity",
+    "energy-distribution",
+    "ui.panel.energy.cards.energy_distribution_title",
+    (p) => hasGridSource(p) || hasBattery(p) || hasSolar(p)
+  ),
+  entry(
+    "electricity",
+    "energy-grid-balance",
+    "ui.panel.energy.cards.energy_grid_balance_title",
+    (p) => hasGridSource(p) && hasReturn(p)
+  ),
+  entry(
+    "electricity",
+    "energy-grid-neutrality-gauge",
+    "ui.panel.energy.cards.energy_grid_neutrality_gauge_title",
+    (p) => hasReturn(p)
+  ),
+  entry(
+    "electricity",
+    "energy-solar-consumed-gauge",
+    "ui.panel.energy.cards.energy_solar_consumed_gauge_title",
+    (p) => hasSolar(p) && hasReturn(p)
+  ),
+  entry(
+    "electricity",
+    "energy-self-sufficiency-gauge",
+    "ui.panel.energy.cards.energy_self_sufficiency_gauge_title",
+    (p) => hasSolar(p) && hasGridSource(p)
+  ),
+  entry(
+    "electricity",
+    "energy-carbon-consumed-gauge",
+    "ui.panel.energy.cards.energy_carbon_consumed_gauge_title",
+    (p) => hasGridSource(p)
+  ),
+  entry(
+    "electricity",
+    "energy-usage-graph",
+    "ui.panel.energy.cards.energy_usage_graph_title",
+    (p) => hasGridSource(p) || hasBattery(p)
+  ),
+  entry(
+    "electricity",
+    "energy-solar-graph",
+    "ui.panel.energy.cards.energy_solar_graph_title",
+    (p) => hasSolar(p)
+  ),
+  entry(
+    "electricity",
+    "energy-sources-table",
+    "ui.panel.energy.cards.energy_sources_table_title",
+    (p) => hasGridSource(p) || hasSolar(p) || hasBattery(p)
+  ),
+  entry(
+    "electricity",
+    "energy-devices-detail-graph",
+    "ui.panel.energy.cards.energy_devices_detail_graph_title",
+    (p) => hasDeviceConsumption(p)
+  ),
+  entry(
+    "electricity",
+    "energy-devices-graph",
+    "ui.panel.energy.cards.energy_devices_graph_title",
+    (p) => hasDeviceConsumption(p)
+  ),
+  entry(
+    "electricity",
+    "energy-sankey",
+    "ui.panel.energy.cards.energy_sankey_title",
+    (p) => hasDeviceConsumption(p)
+  ),
+
+  // --- Gas ---
+  entry(
+    "gas",
+    "energy-gas-graph",
+    "ui.panel.energy.cards.energy_gas_graph_title",
+    (p) => hasGasSource(p)
+  ),
+  entry(
+    "gas",
+    "energy-sources-table",
+    "ui.panel.energy.cards.energy_sources_table_title",
+    (p) => hasGasSource(p)
+  ),
+
+  // --- Water ---
+  entry(
+    "water",
+    "energy-water-graph",
+    "ui.panel.energy.cards.energy_water_graph_title",
+    (p) => hasWaterSource(p)
+  ),
+  entry(
+    "water",
+    "energy-sources-table",
+    "ui.panel.energy.cards.energy_sources_table_title",
+    (p) => hasWaterSource(p)
+  ),
+  entry(
+    "water",
+    "water-sankey",
+    "ui.panel.energy.cards.water_sankey_title",
+    (p) => hasWaterDevices(p)
+  ),
+
+  // --- Now (power) ---
+  entry(
+    "now",
+    "power-sources-graph",
+    "ui.panel.energy.cards.power_sources_graph_title",
+    (p) => hasPowerSources(p)
+  ),
+  entry(
+    "now",
+    "power-sankey",
+    "ui.panel.energy.cards.power_sankey_title",
+    (p) => hasPowerDevices(p)
+  ),
+  entry(
+    "now",
+    "water-flow-sankey",
+    "ui.panel.energy.cards.water_flow_sankey_title",
+    (p) => hasPowerWaterDevices(p)
+  ),
+];
+
+// --- Lookup helpers --------------------------------------------------------
+
+export const isEnergyCardHidden = (
+  view: EnergyViewPath,
+  cardType: string,
+  hidden: string[] | undefined
+): boolean => !!hidden?.includes(energyCardKey(view, cardType));
+
+/** Keys of all catalog cards that apply to the given preferences for a view. */
+export const applicableEnergyCardKeys = (
+  view: EnergyViewPath,
+  prefs: EnergyPreferences
+): string[] =>
+  ENERGY_CARD_CATALOG.filter(
+    (c) => c.view === view && c.isApplicable(prefs)
+  ).map((c) => c.key);
+
+/** True when a view has applicable cards but every one of them is hidden. */
+export const isEnergyViewEmpty = (
+  view: EnergyViewPath,
+  prefs: EnergyPreferences,
+  hidden: string[] | undefined
+): boolean => {
+  const applicable = applicableEnergyCardKeys(view, prefs);
+  return (
+    applicable.length > 0 && applicable.every((key) => hidden?.includes(key))
+  );
+};

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

@@ -7,7 +7,7 @@ import {
 import type { EnergyPreferences } from "../../../data/energy";
 import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceConfig } from "../../../data/lovelace/config/types";
-import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import type { LovelaceStrategyViewConfig } from "../../../data/lovelace/config/view";
 import type { LocalizeKeys } from "../../../common/translations/localize";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceStrategyDependency } from "../../lovelace/strategies/types";
@@ -15,6 +15,8 @@ import {
   DEFAULT_ENERGY_COLLECTION_KEY,
   DEFAULT_POWER_COLLECTION_KEY,
 } from "../constants";
+import type { EnergyViewPath } from "./energy-cards";
+import { isEnergyViewEmpty } from "./energy-cards";
 
 const OVERVIEW_VIEW = {
   path: "overview",
@@ -22,7 +24,7 @@ const OVERVIEW_VIEW = {
     type: "energy-overview",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
   },
-} as LovelaceViewConfig;
+} as LovelaceStrategyViewConfig;
 
 const ENERGY_VIEW = {
   path: "electricity",
@@ -30,7 +32,7 @@ const ENERGY_VIEW = {
     type: "energy",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
   },
-} as LovelaceViewConfig;
+} as LovelaceStrategyViewConfig;
 
 const WATER_VIEW = {
   path: "water",
@@ -38,7 +40,7 @@ const WATER_VIEW = {
     type: "water",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
   },
-} as LovelaceViewConfig;
+} as LovelaceStrategyViewConfig;
 
 const GAS_VIEW = {
   path: "gas",
@@ -46,7 +48,7 @@ const GAS_VIEW = {
     type: "gas",
     collection_key: DEFAULT_ENERGY_COLLECTION_KEY,
   },
-} as LovelaceViewConfig;
+} as LovelaceStrategyViewConfig;
 
 const POWER_VIEW = {
   path: "now",
@@ -54,7 +56,7 @@ const POWER_VIEW = {
     type: "power",
     collection_key: DEFAULT_POWER_COLLECTION_KEY,
   },
-} as LovelaceViewConfig;
+} as LovelaceStrategyViewConfig;
 
 const WIZARD_VIEW = {
   type: "panel",
@@ -65,6 +67,7 @@ const WIZARD_VIEW = {
 export interface EnergyDashboardStrategyConfig extends LovelaceStrategyConfig {
   type: "energy";
   default_collection?: string;
+  hidden_cards?: string[];
 }
 
 @customElement("energy-dashboard-strategy")
@@ -115,28 +118,42 @@ export class EnergyDashboardStrategy extends ReactiveElement {
 
     const hasDeviceConsumption = prefs.device_consumption.length > 0;
 
-    const views: LovelaceViewConfig[] = [];
+    const hidden = _config.hidden_cards;
+
+    const candidateViews: LovelaceStrategyViewConfig[] = [];
     if (hasEnergy || hasDeviceConsumption) {
-      views.push(ENERGY_VIEW);
+      candidateViews.push(ENERGY_VIEW);
     }
     if (hasGas) {
-      views.push(GAS_VIEW);
+      candidateViews.push(GAS_VIEW);
     }
     if (hasWater) {
-      views.push(WATER_VIEW);
+      candidateViews.push(WATER_VIEW);
     }
     if (hasPower) {
-      views.push(POWER_VIEW);
+      candidateViews.push(POWER_VIEW);
     }
     if (
       hasPowerSource ||
       [hasEnergy, hasGas, hasWater].filter(Boolean).length > 1
     ) {
-      views.unshift(OVERVIEW_VIEW);
+      candidateViews.unshift(OVERVIEW_VIEW);
     }
+
+    // Drop a view (tab) when every card it would render has been hidden, so we
+    // don't show an empty tab. Keep at least one view so the dashboard never
+    // renders blank and the customize entry stays reachable.
+    let views = candidateViews.filter(
+      (view) => !isEnergyViewEmpty(view.path as EnergyViewPath, prefs, hidden)
+    );
+    if (views.length === 0) {
+      views = candidateViews;
+    }
+
     return {
       views: views.map((view) => ({
         ...view,
+        strategy: { ...view.strategy, hidden_cards: hidden },
         title:
           view.title ||
           hass.localize(`ui.panel.energy.title.${view.path}` as LocalizeKeys),

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

@@ -4,20 +4,22 @@ import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
 import { getEnergyDataCollection } from "../../../data/energy";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
-import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceStrategyDependency } from "../../lovelace/strategies/types";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../constants";
+import type { EnergyViewStrategyConfig } from "./energy-cards";
+import { isEnergyCardHidden } from "./energy-cards";
 
 @customElement("energy-overview-view-strategy")
 export class EnergyOverviewViewStrategy extends ReactiveElement {
   static registryDependencies: readonly LovelaceStrategyDependency[] = [];
 
   static async generate(
-    _config: LovelaceStrategyConfig,
+    _config: EnergyViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+    const hidden = _config.hidden_cards;
 
     const view: LovelaceViewConfig = {
       type: "sections",
@@ -76,7 +78,10 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
       return false;
     });
 
-    if (hasGrid || hasBattery || hasSolar) {
+    if (
+      (hasGrid || hasBattery || hasSolar) &&
+      !isEnergyCardHidden("overview", "energy-distribution", hidden)
+    ) {
       view.sections!.push({
         type: "grid",
         cards: [
@@ -91,7 +96,10 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
       });
     }
 
-    if (prefs.energy_sources.length) {
+    if (
+      prefs.energy_sources.length &&
+      !isEnergyCardHidden("overview", "energy-sources-table", hidden)
+    ) {
       view.sections!.push({
         type: "grid",
         cards: [
@@ -107,7 +115,10 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasPowerSources) {
+    if (
+      hasPowerSources &&
+      !isEnergyCardHidden("overview", "power-sources-graph", hidden)
+    ) {
       view.sections!.push({
         type: "grid",
         cards: [
@@ -123,7 +134,10 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasGrid || hasBattery) {
+    if (
+      (hasGrid || hasBattery) &&
+      !isEnergyCardHidden("overview", "energy-usage-graph", hidden)
+    ) {
       view.sections!.push({
         type: "grid",
         cards: [
@@ -138,7 +152,7 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasGas) {
+    if (hasGas && !isEnergyCardHidden("overview", "energy-gas-graph", hidden)) {
       view.sections!.push({
         type: "grid",
         cards: [
@@ -153,7 +167,10 @@ export class EnergyOverviewViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasWaterSources || hasWaterDevices) {
+    if (
+      (hasWaterSources || hasWaterDevices) &&
+      !isEnergyCardHidden("overview", "energy-water-graph", hidden)
+    ) {
       view.sections!.push({
         type: "grid",
         cards: [

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

@@ -3,10 +3,11 @@ import { customElement } from "lit/decorators";
 import type { GridSourceTypeEnergyPreference } from "../../../data/energy";
 import { getEnergyDataCollection } from "../../../data/energy";
 import type { LovelaceCardConfig } from "../../../data/lovelace/config/card";
-import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../constants";
+import type { EnergyViewStrategyConfig } from "./energy-cards";
+import { isEnergyCardHidden } from "./energy-cards";
 import { shouldShowFloorsAndAreas } from "./show-floors-and-areas";
 import {
   LARGE_SCREEN_CONDITION,
@@ -19,11 +20,12 @@ export class EnergyViewStrategy extends ReactiveElement {
   static registryDependencies: readonly LovelaceStrategyDependency[] = [];
 
   static async generate(
-    _config: LovelaceStrategyConfig,
+    _config: EnergyViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+    const hidden = _config.hidden_cards;
 
     const view: LovelaceViewConfig = {
       type: "sections",
@@ -78,7 +80,10 @@ export class EnergyViewStrategy extends ReactiveElement {
     const gaugeCards: LovelaceCardConfig[] = [];
     const sidebarSection = view.sidebar!.sections![0];
 
-    if (hasGrid || hasBattery || hasSolar) {
+    if (
+      (hasGrid || hasBattery || hasSolar) &&
+      !isEnergyCardHidden("electricity", "energy-distribution", hidden)
+    ) {
       const distributionCard = {
         title: hass.localize("ui.panel.energy.cards.energy_distribution_title"),
         type: "energy-distribution",
@@ -94,7 +99,11 @@ export class EnergyViewStrategy extends ReactiveElement {
     }
 
     // Only include if we have both grid import and export configured
-    if (hasGrid && hasReturn) {
+    if (
+      hasGrid &&
+      hasReturn &&
+      !isEnergyCardHidden("electricity", "energy-grid-balance", hidden)
+    ) {
       const gridResultCard = {
         type: "energy-grid-balance",
         collection_key: collectionKey,
@@ -109,7 +118,10 @@ export class EnergyViewStrategy extends ReactiveElement {
     }
 
     // Only include if we have a grid source & return.
-    if (hasReturn) {
+    if (
+      hasReturn &&
+      !isEnergyCardHidden("electricity", "energy-grid-neutrality-gauge", hidden)
+    ) {
       const card = {
         type: "energy-grid-neutrality-gauge",
         collection_key: collectionKey,
@@ -119,14 +131,28 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     // Only include if we have a solar source.
     if (hasSolar) {
-      if (hasReturn) {
+      if (
+        hasReturn &&
+        !isEnergyCardHidden(
+          "electricity",
+          "energy-solar-consumed-gauge",
+          hidden
+        )
+      ) {
         const card = {
           type: "energy-solar-consumed-gauge",
           collection_key: collectionKey,
         };
         gaugeCards.push(card);
       }
-      if (hasGrid) {
+      if (
+        hasGrid &&
+        !isEnergyCardHidden(
+          "electricity",
+          "energy-self-sufficiency-gauge",
+          hidden
+        )
+      ) {
         const card = {
           type: "energy-self-sufficiency-gauge",
           collection_key: collectionKey,
@@ -136,7 +162,10 @@ export class EnergyViewStrategy extends ReactiveElement {
     }
 
     // Only include if we have a grid
-    if (hasGrid) {
+    if (
+      hasGrid &&
+      !isEnergyCardHidden("electricity", "energy-carbon-consumed-gauge", hidden)
+    ) {
       const card = {
         type: "energy-carbon-consumed-gauge",
         collection_key: collectionKey,
@@ -171,7 +200,10 @@ export class EnergyViewStrategy extends ReactiveElement {
     });
 
     // Only include if we have a grid or battery.
-    if (hasGrid || hasBattery) {
+    if (
+      (hasGrid || hasBattery) &&
+      !isEnergyCardHidden("electricity", "energy-usage-graph", hidden)
+    ) {
       mainCards.push({
         title: hass.localize("ui.panel.energy.cards.energy_usage_graph_title"),
         type: "energy-usage-graph",
@@ -181,7 +213,10 @@ export class EnergyViewStrategy extends ReactiveElement {
     }
 
     // Only include if we have a solar source.
-    if (hasSolar) {
+    if (
+      hasSolar &&
+      !isEnergyCardHidden("electricity", "energy-solar-graph", hidden)
+    ) {
       mainCards.push({
         title: hass.localize("ui.panel.energy.cards.energy_solar_graph_title"),
         type: "energy-solar-graph",
@@ -190,7 +225,10 @@ export class EnergyViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasGrid || hasSolar || hasBattery) {
+    if (
+      (hasGrid || hasSolar || hasBattery) &&
+      !isEnergyCardHidden("electricity", "energy-sources-table", hidden)
+    ) {
       mainCards.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_sources_table_title"
@@ -204,35 +242,47 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     // Only include if we have at least 1 device in the config.
     if (prefs.device_consumption.length) {
-      const showFloorsAndAreas = shouldShowFloorsAndAreas(
-        prefs.device_consumption,
-        hass,
-        (d) => d.stat_consumption
-      );
-      mainCards.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_detail_graph_title"
-        ),
-        type: "energy-devices-detail-graph",
-        collection_key: collectionKey,
-        grid_options: { columns: 36 },
-      });
-      mainCards.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_devices_graph_title"
-        ),
-        type: "energy-devices-graph",
-        collection_key: collectionKey,
-        grid_options: { columns: 36 },
-      });
-      mainCards.push({
-        title: hass.localize("ui.panel.energy.cards.energy_sankey_title"),
-        type: "energy-sankey",
-        collection_key: collectionKey,
-        group_by_floor: showFloorsAndAreas,
-        group_by_area: showFloorsAndAreas,
-        grid_options: { columns: 36 },
-      });
+      if (
+        !isEnergyCardHidden(
+          "electricity",
+          "energy-devices-detail-graph",
+          hidden
+        )
+      ) {
+        mainCards.push({
+          title: hass.localize(
+            "ui.panel.energy.cards.energy_devices_detail_graph_title"
+          ),
+          type: "energy-devices-detail-graph",
+          collection_key: collectionKey,
+          grid_options: { columns: 36 },
+        });
+      }
+      if (!isEnergyCardHidden("electricity", "energy-devices-graph", hidden)) {
+        mainCards.push({
+          title: hass.localize(
+            "ui.panel.energy.cards.energy_devices_graph_title"
+          ),
+          type: "energy-devices-graph",
+          collection_key: collectionKey,
+          grid_options: { columns: 36 },
+        });
+      }
+      if (!isEnergyCardHidden("electricity", "energy-sankey", hidden)) {
+        const showFloorsAndAreas = shouldShowFloorsAndAreas(
+          prefs.device_consumption,
+          hass,
+          (d) => d.stat_consumption
+        );
+        mainCards.push({
+          title: hass.localize("ui.panel.energy.cards.energy_sankey_title"),
+          type: "energy-sankey",
+          collection_key: collectionKey,
+          group_by_floor: showFloorsAndAreas,
+          group_by_area: showFloorsAndAreas,
+          grid_options: { columns: 36 },
+        });
+      }
     }
 
     view.sections!.push({

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

@@ -3,8 +3,9 @@ import { customElement } from "lit/decorators";
 import { getEnergyDataCollection } from "../../../data/energy";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
-import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../constants";
+import type { EnergyViewStrategyConfig } from "./energy-cards";
+import { isEnergyCardHidden } from "./energy-cards";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceStrategyDependency } from "../../lovelace/strategies/types";
 
@@ -13,11 +14,12 @@ export class GasViewStrategy extends ReactiveElement {
   static registryDependencies: readonly LovelaceStrategyDependency[] = [];
 
   static async generate(
-    _config: LovelaceStrategyConfig,
+    _config: EnergyViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+    const hidden = _config.hidden_cards;
 
     const view: LovelaceViewConfig = {
       type: "sections",
@@ -60,24 +62,30 @@ export class GasViewStrategy extends ReactiveElement {
       },
     });
 
-    section.cards!.push({
-      title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
-      type: "energy-gas-graph",
-      collection_key: collectionKey,
-      grid_options: {
-        columns: 24,
-      },
-    });
+    if (!isEnergyCardHidden("gas", "energy-gas-graph", hidden)) {
+      section.cards!.push({
+        title: hass.localize("ui.panel.energy.cards.energy_gas_graph_title"),
+        type: "energy-gas-graph",
+        collection_key: collectionKey,
+        grid_options: {
+          columns: 24,
+        },
+      });
+    }
 
-    section.cards!.push({
-      title: hass.localize("ui.panel.energy.cards.energy_sources_table_title"),
-      type: "energy-sources-table",
-      collection_key: collectionKey,
-      types: ["gas"],
-      grid_options: {
-        columns: 12,
-      },
-    });
+    if (!isEnergyCardHidden("gas", "energy-sources-table", hidden)) {
+      section.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_sources_table_title"
+        ),
+        type: "energy-sources-table",
+        collection_key: collectionKey,
+        types: ["gas"],
+        grid_options: {
+          columns: 12,
+        },
+      });
+    }
 
     return view;
   }

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

@@ -1,10 +1,11 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { getEnergyDataCollection } from "../../../data/energy";
-import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../constants";
+import type { EnergyViewStrategyConfig } from "./energy-cards";
+import { isEnergyCardHidden } from "./energy-cards";
 import { shouldShowFloorsAndAreas } from "./show-floors-and-areas";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
 import type { LovelaceBadgeConfig } from "../../../data/lovelace/config/badge";
@@ -15,11 +16,12 @@ export class PowerViewStrategy extends ReactiveElement {
   static registryDependencies: readonly LovelaceStrategyDependency[] = [];
 
   static async generate(
-    _config: LovelaceStrategyConfig,
+    _config: EnergyViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+    const hidden = _config.hidden_cards;
 
     const energyCollection = getEnergyDataCollection(hass, {
       key: collectionKey,
@@ -79,14 +81,18 @@ export class PowerViewStrategy extends ReactiveElement {
         collection_key: collectionKey,
       });
 
-      chartsSection.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.power_sources_graph_title"),
-        type: "power-sources-graph",
-        collection_key: collectionKey,
-        grid_options: {
-          columns: 36,
-        },
-      });
+      if (!isEnergyCardHidden("now", "power-sources-graph", hidden)) {
+        chartsSection.cards!.push({
+          title: hass.localize(
+            "ui.panel.energy.cards.power_sources_graph_title"
+          ),
+          type: "power-sources-graph",
+          collection_key: collectionKey,
+          grid_options: {
+            columns: 36,
+          },
+        });
+      }
     }
 
     if (hasGasSources) {
@@ -112,7 +118,7 @@ export class PowerViewStrategy extends ReactiveElement {
       }
     });
 
-    if (hasPowerDevices) {
+    if (hasPowerDevices && !isEnergyCardHidden("now", "power-sankey", hidden)) {
       const showFloorsAndAreas = shouldShowFloorsAndAreas(
         prefs.device_consumption,
         hass,
@@ -130,7 +136,10 @@ export class PowerViewStrategy extends ReactiveElement {
       });
     }
 
-    if (hasWaterDevices) {
+    if (
+      hasWaterDevices &&
+      !isEnergyCardHidden("now", "water-flow-sankey", hidden)
+    ) {
       const showFloorsAndAreas = shouldShowFloorsAndAreas(
         prefs.device_consumption_water,
         hass,

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

@@ -2,11 +2,12 @@ import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { getEnergyDataCollection } from "../../../data/energy";
 import type { LovelaceSectionConfig } from "../../../data/lovelace/config/section";
-import type { LovelaceStrategyConfig } from "../../../data/lovelace/config/strategy";
 import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
 import type { LovelaceStrategyDependency } from "../../lovelace/strategies/types";
 import { DEFAULT_ENERGY_COLLECTION_KEY } from "../constants";
+import type { EnergyViewStrategyConfig } from "./energy-cards";
+import { isEnergyCardHidden } from "./energy-cards";
 import { shouldShowFloorsAndAreas } from "./show-floors-and-areas";
 
 @customElement("water-view-strategy")
@@ -14,11 +15,12 @@ export class WaterViewStrategy extends ReactiveElement {
   static registryDependencies: readonly LovelaceStrategyDependency[] = [];
 
   static async generate(
-    _config: LovelaceStrategyConfig,
+    _config: EnergyViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const collectionKey =
       _config.collection_key || DEFAULT_ENERGY_COLLECTION_KEY;
+    const hidden = _config.hidden_cards;
 
     const view: LovelaceViewConfig = {
       type: "sections",
@@ -63,29 +65,38 @@ export class WaterViewStrategy extends ReactiveElement {
     });
 
     if (hasWaterSources) {
-      section.cards!.push({
-        title: hass.localize("ui.panel.energy.cards.energy_water_graph_title"),
-        type: "energy-water-graph",
-        collection_key: collectionKey,
-        grid_options: {
-          columns: 24,
-        },
-      });
-      section.cards!.push({
-        title: hass.localize(
-          "ui.panel.energy.cards.energy_sources_table_title"
-        ),
-        type: "energy-sources-table",
-        collection_key: collectionKey,
-        types: ["water"],
-        grid_options: {
-          columns: 12,
-        },
-      });
+      if (!isEnergyCardHidden("water", "energy-water-graph", hidden)) {
+        section.cards!.push({
+          title: hass.localize(
+            "ui.panel.energy.cards.energy_water_graph_title"
+          ),
+          type: "energy-water-graph",
+          collection_key: collectionKey,
+          grid_options: {
+            columns: 24,
+          },
+        });
+      }
+      if (!isEnergyCardHidden("water", "energy-sources-table", hidden)) {
+        section.cards!.push({
+          title: hass.localize(
+            "ui.panel.energy.cards.energy_sources_table_title"
+          ),
+          type: "energy-sources-table",
+          collection_key: collectionKey,
+          types: ["water"],
+          grid_options: {
+            columns: 12,
+          },
+        });
+      }
     }
 
     // Only include if we have at least 1 water device in the config.
-    if (hasWaterDevices) {
+    if (
+      hasWaterDevices &&
+      !isEnergyCardHidden("water", "water-sankey", hidden)
+    ) {
       const showFloorsAndAreas = shouldShowFloorsAndAreas(
         prefs.device_consumption_water,
         hass,

src/translations/en.json

@@ -4139,6 +4139,17 @@
             "gas": "Gas",
             "water": "Water"
           },
+          "customise": {
+            "toolbar_action": "Customize cards",
+            "title": "Customize energy",
+            "saved": "Energy dashboard updated",
+            "save_failed": "Failed to save energy customization",
+            "unavailable": "This card isn't shown because the energy source or device it needs isn't configured.",
+            "groups": {
+              "overview": "Overview",
+              "now": "Now"
+            }
+          },
           "delete_source": "Are you sure you want to remove this source?",
           "delete_integration": "Are you sure you want to remove this integration? It will remove the entities it provides",
           "grid": {
@@ -11194,7 +11205,12 @@
           "energy_top_consumers_title": "Top consumers",
           "power_sankey_title": "Current power flow",
           "water_flow_sankey_title": "Current water flow",
-          "power_sources_graph_title": "Power sources"
+          "power_sources_graph_title": "Power sources",
+          "energy_grid_balance_title": "Grid energy balance",
+          "energy_grid_neutrality_gauge_title": "Grid neutrality gauge",
+          "energy_solar_consumed_gauge_title": "Solar consumed gauge",
+          "energy_self_sufficiency_gauge_title": "Self-sufficiency gauge",
+          "energy_carbon_consumed_gauge_title": "Carbon consumed gauge"
         }
       },
       "history": {

test/panels/energy/strategies/energy-cards.test.ts

@@ -0,0 +1,130 @@
+import { describe, expect, it } from "vitest";
+import type {
+  EnergyPreferences,
+  EnergySource,
+} from "../../../../src/data/energy";
+import {
+  applicableEnergyCardKeys,
+  ENERGY_CARD_CATALOG,
+  energyCardKey,
+  isEnergyCardHidden,
+  isEnergyViewEmpty,
+} from "../../../../src/panels/energy/strategies/energy-cards";
+
+const source = (s: Partial<EnergySource> & { type: string }): EnergySource =>
+  s as unknown as EnergySource;
+
+const makePrefs = (
+  prefs: Partial<EnergyPreferences> = {}
+): EnergyPreferences => ({
+  energy_sources: [],
+  device_consumption: [],
+  device_consumption_water: [],
+  ...prefs,
+});
+
+const GRID_RETURN = source({
+  type: "grid",
+  stat_energy_from: "sensor.grid_in",
+  stat_energy_to: "sensor.grid_out",
+});
+const SOLAR = source({ type: "solar", stat_energy_from: "sensor.solar" });
+const GAS = source({ type: "gas", stat_energy_from: "sensor.gas" });
+const WATER = source({ type: "water", stat_energy_from: "sensor.water" });
+
+describe("energyCardKey", () => {
+  it("joins the view path and card type", () => {
+    expect(energyCardKey("electricity", "energy-solar-graph")).toBe(
+      "electricity.energy-solar-graph"
+    );
+    expect(energyCardKey("now", "power-sankey")).toBe("now.power-sankey");
+  });
+});
+
+describe("isEnergyCardHidden", () => {
+  it("returns true only when the composite key is in the hidden list", () => {
+    const hidden = ["electricity.energy-solar-graph"];
+    expect(
+      isEnergyCardHidden("electricity", "energy-solar-graph", hidden)
+    ).toBe(true);
+    // Same card type in a different view is independent.
+    expect(isEnergyCardHidden("overview", "energy-solar-graph", hidden)).toBe(
+      false
+    );
+    expect(
+      isEnergyCardHidden("electricity", "energy-usage-graph", hidden)
+    ).toBe(false);
+  });
+
+  it("treats undefined/empty hidden lists as nothing hidden", () => {
+    expect(
+      isEnergyCardHidden("electricity", "energy-solar-graph", undefined)
+    ).toBe(false);
+    expect(isEnergyCardHidden("electricity", "energy-solar-graph", [])).toBe(
+      false
+    );
+  });
+});
+
+describe("catalog applicability", () => {
+  it("only lists cards relevant to the configured sources", () => {
+    const gasOnly = makePrefs({ energy_sources: [GAS] });
+    expect(applicableEnergyCardKeys("gas", gasOnly)).toEqual([
+      "gas.energy-gas-graph",
+      "gas.energy-sources-table",
+    ]);
+    // No electricity sources -> no electricity cards apply.
+    expect(applicableEnergyCardKeys("electricity", gasOnly)).toEqual([]);
+  });
+
+  it("gates the solar graph and gauges on their sources", () => {
+    const solarGraph = ENERGY_CARD_CATALOG.find(
+      (c) => c.key === "electricity.energy-solar-graph"
+    )!;
+    expect(
+      solarGraph.isApplicable(makePrefs({ energy_sources: [SOLAR] }))
+    ).toBe(true);
+    expect(
+      solarGraph.isApplicable(makePrefs({ energy_sources: [GRID_RETURN] }))
+    ).toBe(false);
+
+    const neutralityGauge = ENERGY_CARD_CATALOG.find(
+      (c) => c.key === "electricity.energy-grid-neutrality-gauge"
+    )!;
+    // Needs grid export (return).
+    expect(
+      neutralityGauge.isApplicable(makePrefs({ energy_sources: [GRID_RETURN] }))
+    ).toBe(true);
+    expect(
+      neutralityGauge.isApplicable(makePrefs({ energy_sources: [SOLAR] }))
+    ).toBe(false);
+  });
+});
+
+describe("isEnergyViewEmpty", () => {
+  const prefs = makePrefs({ energy_sources: [WATER] });
+
+  it("is false when no cards in the view are hidden", () => {
+    expect(isEnergyViewEmpty("water", prefs, undefined)).toBe(false);
+  });
+
+  it("is false when only some applicable cards are hidden", () => {
+    expect(
+      isEnergyViewEmpty("water", prefs, ["water.energy-water-graph"])
+    ).toBe(false);
+  });
+
+  it("is true when every applicable card is hidden", () => {
+    expect(
+      isEnergyViewEmpty("water", prefs, [
+        "water.energy-water-graph",
+        "water.energy-sources-table",
+      ])
+    ).toBe(true);
+  });
+
+  it("is false when the view has no applicable cards at all", () => {
+    // Water source configured, but the gas view has nothing applicable.
+    expect(isEnergyViewEmpty("gas", prefs, [])).toBe(false);
+  });
+});