Merge branch 'water_devices' into water-sankey

demo/src/stubs/energy.ts

@@ -84,6 +84,7 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           stat_consumption: "sensor.energy_boiler",
         },
       ],
+      device_consumption_water: [],
     })
   );
   hass.mockWS(

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-ha.0",
+    "@home-assistant/webawesome": "3.0.0",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",

src/components/ha-label-picker.ts

@@ -154,10 +154,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
     }
 
     return this._getLabelsMemoized(
-      this.hass.states,
-      this.hass.areas,
-      this.hass.devices,
-      this.hass.entities,
+      this.hass,
       this._labels,
       this.includeDomains,
       this.excludeDomains,

src/components/ha-picker-combo-box.ts

@@ -192,7 +192,7 @@ export class HaPickerComboBox extends LitElement {
         @focus=${this._focusList}
         @visibilityChanged=${this._visibilityChanged}
       >
-      </lit-virtualizer>`;
+      </lit-virtualizer> `;
   }
 
   private _renderSectionButtons() {

src/components/ha-section-title.ts

@@ -1,28 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-section-title")
-class HaSectionTitle extends LitElement {
-  protected render() {
-    return html`<slot></slot>`;
-  }
-
-  static styles = css`
-    :host {
-      background-color: var(--ha-color-fill-neutral-quiet-resting);
-      padding: var(--ha-space-1) var(--ha-space-2);
-      font-weight: var(--ha-font-weight-bold);
-      color: var(--secondary-text-color);
-      min-height: var(--ha-space-6);
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-section-title": HaSectionTitle;
-  }
-}

src/components/ha-target-picker.ts

@@ -30,7 +30,6 @@ import {
   areaMeetsFilter,
   deviceMeetsFilter,
   entityRegMeetsFilter,
-  getTargetComboBoxItemType,
   type TargetType,
   type TargetTypeFloorless,
 } from "../data/target";
@@ -48,6 +47,7 @@ import "./ha-tree-indicator";
 import "./target-picker/ha-target-picker-item-group";
 import "./target-picker/ha-target-picker-value-chip";
 
+const EMPTY_SEARCH = "___EMPTY_SEARCH___";
 const SEPARATOR = "________";
 const CREATE_ID = "___create-new-entity___";
 
@@ -634,6 +634,35 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return undefined;
   }
 
+  private _getRowType = (
+    item:
+      | PickerComboBoxItem
+      | (FloorComboBoxItem & { last?: boolean | undefined })
+      | EntityComboBoxItem
+      | DevicePickerItem
+  ) => {
+    if (
+      (item as FloorComboBoxItem).type === "area" ||
+      (item as FloorComboBoxItem).type === "floor"
+    ) {
+      return (item as FloorComboBoxItem).type;
+    }
+
+    if ("domain" in item) {
+      return "device";
+    }
+
+    if ("stateObj" in item) {
+      return "entity";
+    }
+
+    if (item.id === EMPTY_SEARCH) {
+      return "empty";
+    }
+
+    return "label";
+  };
+
   private _sectionTitleFunction = ({
     firstIndex,
     lastIndex,
@@ -657,7 +686,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       return undefined;
     }
 
-    const type = getTargetComboBoxItemType(firstItem as PickerComboBoxItem);
+    const type = this._getRowType(firstItem as PickerComboBoxItem);
     const translationType:
       | "areas"
       | "entities"
@@ -829,10 +858,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
       if (!filterType || filterType === "label") {
         let labels = this._getLabelsMemoized(
-          this.hass.states,
-          this.hass.areas,
-          this.hass.devices,
-          this.hass.entities,
+          this.hass,
           this._labelRegistry,
           includeDomains,
           undefined,
@@ -948,7 +974,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       return nothing;
     }
 
-    const type = getTargetComboBoxItemType(item);
+    const type = this._getRowType(item);
     let hasFloor = false;
     let rtl = false;
     let showEntityId = false;

src/components/ha-wa-dialog.ts

@@ -235,7 +235,7 @@ export class HaWaDialog extends LitElement {
       }
 
       :host([width="large"]) wa-dialog {
-        --width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width));
+        --width: min(var(--ha-dialog-width-lg, 720px), var(--full-width));
       }
 
       :host([width="full"]) wa-dialog {

src/components/search-input.ts

@@ -34,6 +34,7 @@ class SearchInput extends LitElement {
     return html`
       <ha-textfield
         .autofocus=${this.autofocus}
+        autocomplete="off"
         .label=${this.label || this.hass.localize("ui.common.search")}
         .value=${this.filter || ""}
         icon

src/data/area_floor.ts

@@ -24,54 +24,11 @@ export interface FloorComboBoxItem extends PickerComboBoxItem {
   area?: AreaRegistryEntry;
 }
 
-export interface FloorNestedComboBoxItem extends PickerComboBoxItem {
-  floor?: FloorRegistryEntry;
-  areas: FloorComboBoxItem[];
-}
-
-export interface UnassignedAreasFloorComboBoxItem extends PickerComboBoxItem {
-  areas: FloorComboBoxItem[];
-}
-
 export interface AreaFloorValue {
   id: string;
   type: "floor" | "area";
 }
 
-export const getAreasNestedInFloors = (
-  states: HomeAssistant["states"],
-  haFloors: HomeAssistant["floors"],
-  haAreas: HomeAssistant["areas"],
-  haDevices: HomeAssistant["devices"],
-  haEntities: HomeAssistant["entities"],
-  formatId: (value: AreaFloorValue) => string,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeAreas?: string[],
-  excludeFloors?: string[],
-  includeEmptyFloors = false
-) =>
-  getAreasAndFloorsItems(
-    states,
-    haFloors,
-    haAreas,
-    haDevices,
-    haEntities,
-    formatId,
-    includeDomains,
-    excludeDomains,
-    includeDeviceClasses,
-    deviceFilter,
-    entityFilter,
-    excludeAreas,
-    excludeFloors,
-    includeEmptyFloors,
-    true
-  ) as (FloorNestedComboBoxItem | UnassignedAreasFloorComboBoxItem)[];
-
 export const getAreasAndFloors = (
   states: HomeAssistant["states"],
   haFloors: HomeAssistant["floors"],
@@ -85,47 +42,8 @@ export const getAreasAndFloors = (
   deviceFilter?: HaDevicePickerDeviceFilterFunc,
   entityFilter?: HaEntityPickerEntityFilterFunc,
   excludeAreas?: string[],
-  excludeFloors?: string[],
-  includeEmptyFloors = false
-) =>
-  getAreasAndFloorsItems(
-    states,
-    haFloors,
-    haAreas,
-    haDevices,
-    haEntities,
-    formatId,
-    includeDomains,
-    excludeDomains,
-    includeDeviceClasses,
-    deviceFilter,
-    entityFilter,
-    excludeAreas,
-    excludeFloors,
-    includeEmptyFloors
-  ) as FloorComboBoxItem[];
-
-const getAreasAndFloorsItems = (
-  states: HomeAssistant["states"],
-  haFloors: HomeAssistant["floors"],
-  haAreas: HomeAssistant["areas"],
-  haDevices: HomeAssistant["devices"],
-  haEntities: HomeAssistant["entities"],
-  formatId: (value: AreaFloorValue) => string,
-  includeDomains?: string[],
-  excludeDomains?: string[],
-  includeDeviceClasses?: string[],
-  deviceFilter?: HaDevicePickerDeviceFilterFunc,
-  entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeAreas?: string[],
-  excludeFloors?: string[],
-  includeEmptyFloors = false,
-  nested = false
-): (
-  | FloorComboBoxItem
-  | FloorNestedComboBoxItem
-  | UnassignedAreasFloorComboBoxItem
-)[] => {
+  excludeFloors?: string[]
+): FloorComboBoxItem[] => {
   const floors = Object.values(haFloors);
   const areas = Object.values(haAreas);
   const devices = Object.values(haDevices);
@@ -271,14 +189,6 @@ const getAreasAndFloorsItems = (
 
   const compare = floorCompare(haFloors);
 
-  if (includeEmptyFloors) {
-    Object.values(haFloors).forEach((floor) => {
-      if (!floorAreaLookup[floor.floor_id]) {
-        floorAreaLookup[floor.floor_id] = [];
-      }
-    });
-  }
-
   // @ts-ignore
   const floorAreaEntries: [
     FloorRegistryEntry | undefined,
@@ -290,15 +200,9 @@ const getAreasAndFloorsItems = (
     })
     .sort(([floorA], [floorB]) => compare(floorA.floor_id, floorB.floor_id));
 
-  const items: (
-    | FloorComboBoxItem
-    | FloorNestedComboBoxItem
-    | UnassignedAreasFloorComboBoxItem
-  )[] = [];
+  const items: FloorComboBoxItem[] = [];
 
   floorAreaEntries.forEach(([floor, floorAreas]) => {
-    let floorItem: FloorComboBoxItem | FloorNestedComboBoxItem;
-
     if (floor) {
       const floorName = computeFloorName(floor);
 
@@ -309,7 +213,7 @@ const getAreasAndFloorsItems = (
         })
         .flat();
 
-      floorItem = {
+      items.push({
         id: formatId({ id: floor.floor_id, type: "floor" }),
         type: "floor",
         primary: floorName,
@@ -321,9 +225,25 @@ const getAreasAndFloorsItems = (
           ...floor.aliases,
           ...areaSearchLabels,
         ],
-      };
+      });
     }
-    const floorAreasItems = floorAreas.map((area) => {
+    items.push(
+      ...floorAreas.map((area) => {
+        const areaName = computeAreaName(area) || area.area_id;
+        return {
+          id: formatId({ id: area.area_id, type: "area" }),
+          type: "area" as const,
+          primary: areaName,
+          area: area,
+          icon: area.icon || undefined,
+          search_labels: [area.area_id, areaName, ...area.aliases],
+        };
+      })
+    );
+  });
+
+  items.push(
+    ...unassignedAreas.map((area) => {
       const areaName = computeAreaName(area) || area.area_id;
       return {
         id: formatId({ id: area.area_id, type: "area" }),
@@ -333,38 +253,8 @@ const getAreasAndFloorsItems = (
         icon: area.icon || undefined,
         search_labels: [area.area_id, areaName, ...area.aliases],
       };
-    });
-
-    if (floor) {
-      items.push(floorItem!);
-    }
-
-    if (nested && floor) {
-      (floorItem! as FloorNestedComboBoxItem).areas = floorAreasItems;
-    } else {
-      items.push(...floorAreasItems);
-    }
-  });
-
-  const unassignedAreaItems = unassignedAreas.map((area) => {
-    const areaName = computeAreaName(area) || area.area_id;
-    return {
-      id: formatId({ id: area.area_id, type: "area" }),
-      type: "area" as const,
-      primary: areaName,
-      area: area,
-      icon: area.icon || undefined,
-      search_labels: [area.area_id, areaName, ...area.aliases],
-    };
-  });
-
-  if (nested && unassignedAreaItems.length) {
-    items.push({
-      areas: unassignedAreaItems,
-    } as UnassignedAreasFloorComboBoxItem);
-  } else {
-    items.push(...unassignedAreaItems);
-  }
+    })
+  );
 
   return items;
 };

src/data/area_registry.ts

@@ -1,10 +1,7 @@
 import { stringCompare } from "../common/string/compare";
 import type { HomeAssistant } from "../types";
 import type { DeviceRegistryEntry } from "./device_registry";
-import type {
-  EntityRegistryDisplayEntry,
-  EntityRegistryEntry,
-} from "./entity_registry";
+import type { EntityRegistryEntry } from "./entity_registry";
 import type { RegistryEntry } from "./registry";
 
 export { subscribeAreaRegistry } from "./ws-area_registry";
@@ -21,10 +18,7 @@ export interface AreaRegistryEntry extends RegistryEntry {
   temperature_entity_id: string | null;
 }
 
-export type AreaEntityLookup = Record<
-  string,
-  (EntityRegistryEntry | EntityRegistryDisplayEntry)[]
->;
+export type AreaEntityLookup = Record<string, EntityRegistryEntry[]>;
 
 export type AreaDeviceLookup = Record<string, DeviceRegistryEntry[]>;
 
@@ -66,17 +60,11 @@ export const deleteAreaRegistryEntry = (hass: HomeAssistant, areaId: string) =>
   });
 
 export const getAreaEntityLookup = (
-  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[],
-  filterHidden = false
+  entities: EntityRegistryEntry[]
 ): AreaEntityLookup => {
   const areaEntityLookup: AreaEntityLookup = {};
   for (const entity of entities) {
-    if (
-      !entity.area_id ||
-      (filterHidden &&
-        ((entity as EntityRegistryDisplayEntry).hidden ||
-          (entity as EntityRegistryEntry).hidden_by))
-    ) {
+    if (!entity.area_id) {
       continue;
     }
     if (!(entity.area_id in areaEntityLookup)) {

src/data/device_registry.ts

@@ -50,10 +50,7 @@ export type DeviceEntityDisplayLookup = Record<
   EntityRegistryDisplayEntry[]
 >;
 
-export type DeviceEntityLookup = Record<
-  string,
-  (EntityRegistryEntry | EntityRegistryDisplayEntry)[]
->;
+export type DeviceEntityLookup = Record<string, EntityRegistryEntry[]>;
 
 export interface DeviceRegistryEntryMutableParams {
   area_id?: string | null;
@@ -110,17 +107,11 @@ export const sortDeviceRegistryByName = (
   );
 
 export const getDeviceEntityLookup = (
-  entities: (EntityRegistryEntry | EntityRegistryDisplayEntry)[],
-  filterHidden = false
+  entities: EntityRegistryEntry[]
 ): DeviceEntityLookup => {
   const deviceEntityLookup: DeviceEntityLookup = {};
   for (const entity of entities) {
-    if (
-      !entity.device_id ||
-      (filterHidden &&
-        ((entity as EntityRegistryDisplayEntry).hidden ||
-          (entity as EntityRegistryEntry).hidden_by))
-    ) {
+    if (!entity.device_id) {
       continue;
     }
     if (!(entity.device_id in deviceEntityLookup)) {

src/data/energy.ts

@@ -200,6 +200,7 @@ export type EnergySource =
 export interface EnergyPreferences {
   energy_sources: EnergySource[];
   device_consumption: DeviceConsumptionEnergyPreference[];
+  device_consumption_water: DeviceConsumptionEnergyPreference[];
 }
 
 export interface EnergyInfo {
@@ -216,6 +217,7 @@ export interface EnergyValidationIssue {
 export interface EnergyPreferencesValidation {
   energy_sources: EnergyValidationIssue[][];
   device_consumption: EnergyValidationIssue[][];
+  device_consumption_water: EnergyValidationIssue[][];
 }
 
 export const getEnergyInfo = (hass: HomeAssistant) =>
@@ -356,6 +358,11 @@ export const getReferencedStatisticIds = (
   if (!(includeTypes && !includeTypes.includes("device"))) {
     statIDs.push(...prefs.device_consumption.map((d) => d.stat_consumption));
   }
+  if (!(includeTypes && !includeTypes.includes("water"))) {
+    statIDs.push(
+      ...prefs.device_consumption_water.map((d) => d.stat_consumption)
+    );
+  }
 
   return statIDs;
 };

src/data/integration.ts

@@ -1,8 +1,8 @@
 import type { Connection } from "home-assistant-js-websocket";
 import { createCollection } from "home-assistant-js-websocket";
 import type { LocalizeFunc } from "../common/translations/localize";
-import { debounce } from "../common/util/debounce";
 import type { HomeAssistant } from "../types";
+import { debounce } from "../common/util/debounce";
 
 export const integrationsWithPanel = {
   bluetooth: "config/bluetooth",
@@ -25,8 +25,6 @@ export type IntegrationType =
   | "entity"
   | "system";
 
-export type DomainManifestLookup = Record<string, IntegrationManifest>;
-
 export interface IntegrationManifest {
   is_built_in: boolean;
   overwrites_built_in?: boolean;

src/data/label_registry.ts

@@ -101,10 +101,7 @@ export const deleteLabelRegistryEntry = (
   });
 
 export const getLabels = (
-  hassStates: HomeAssistant["states"],
-  hassAreas: HomeAssistant["areas"],
-  hassDevices: HomeAssistant["devices"],
-  hassEntities: HomeAssistant["entities"],
+  hass: HomeAssistant,
   labels?: LabelRegistryEntry[],
   includeDomains?: string[],
   excludeDomains?: string[],
@@ -118,8 +115,8 @@ export const getLabels = (
     return [];
   }
 
-  const devices = Object.values(hassDevices);
-  const entities = Object.values(hassEntities);
+  const devices = Object.values(hass.devices);
+  const entities = Object.values(hass.entities);
 
   let deviceEntityLookup: DeviceEntityDisplayLookup = {};
   let inputDevices: DeviceRegistryEntry[] | undefined;
@@ -173,7 +170,7 @@ export const getLabels = (
           return false;
         }
         return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = hassStates[entity.entity_id];
+          const stateObj = hass.states[entity.entity_id];
           if (!stateObj) {
             return false;
           }
@@ -184,7 +181,7 @@ export const getLabels = (
         });
       });
       inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = hassStates[entity.entity_id];
+        const stateObj = hass.states[entity.entity_id];
         return (
           stateObj.attributes.device_class &&
           includeDeviceClasses.includes(stateObj.attributes.device_class)
@@ -203,7 +200,7 @@ export const getLabels = (
           return false;
         }
         return deviceEntityLookup[device.id].some((entity) => {
-          const stateObj = hassStates[entity.entity_id];
+          const stateObj = hass.states[entity.entity_id];
           if (!stateObj) {
             return false;
           }
@@ -211,7 +208,7 @@ export const getLabels = (
         });
       });
       inputEntities = inputEntities!.filter((entity) => {
-        const stateObj = hassStates[entity.entity_id];
+        const stateObj = hass.states[entity.entity_id];
         if (!stateObj) {
           return false;
         }
@@ -248,7 +245,7 @@ export const getLabels = (
 
   if (areaIds) {
     areaIds.forEach((areaId) => {
-      const area = hassAreas[areaId];
+      const area = hass.areas[areaId];
       area.labels.forEach((label) => usedLabels.add(label));
     });
   }

src/data/target.ts

@@ -1,16 +1,11 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
 import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
-import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
 import type { HomeAssistant } from "../types";
-import type { FloorComboBoxItem } from "./area_floor";
 import type { AreaRegistryEntry } from "./area_registry";
-import type { DevicePickerItem, DeviceRegistryEntry } from "./device_registry";
+import type { DeviceRegistryEntry } from "./device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import type {
-  EntityComboBoxItem,
-  EntityRegistryDisplayEntry,
-} from "./entity_registry";
+import type { EntityRegistryDisplayEntry } from "./entity_registry";
 
 export type TargetType = "entity" | "device" | "area" | "label" | "floor";
 export type TargetTypeFloorless = Exclude<TargetType, "floor">;
@@ -40,28 +35,6 @@ export const extractFromTarget = async (
     target,
   });
 
-export const getTriggersForTarget = async (
-  callWS: HomeAssistant["callWS"],
-  target: HassServiceTarget,
-  expandGroup = true
-) =>
-  callWS<string[]>({
-    type: "get_triggers_for_target",
-    target,
-    expand_group: expandGroup,
-  });
-
-export const getServicesForTarget = async (
-  callWS: HomeAssistant["callWS"],
-  target: HassServiceTarget,
-  expandGroup = true
-) =>
-  callWS<string[]>({
-    type: "get_services_for_target",
-    target,
-    expand_group: expandGroup,
-  });
-
 export const areaMeetsFilter = (
   area: AreaRegistryEntry,
   devices: HomeAssistant["devices"],
@@ -189,32 +162,3 @@ export const entityRegMeetsFilter = (
   }
   return true;
 };
-
-export const getTargetComboBoxItemType = (
-  item:
-    | PickerComboBoxItem
-    | (FloorComboBoxItem & { last?: boolean | undefined })
-    | EntityComboBoxItem
-    | DevicePickerItem
-) => {
-  if (
-    (item as FloorComboBoxItem).type === "area" ||
-    (item as FloorComboBoxItem).type === "floor"
-  ) {
-    return (item as FloorComboBoxItem).type;
-  }
-
-  if ("domain" in item) {
-    return "device";
-  }
-
-  if ("stateObj" in item) {
-    return "entity";
-  }
-
-  if (item.id === "___EMPTY_SEARCH___") {
-    return "empty";
-  }
-
-  return "label";
-};

src/panels/config/energy/components/ha-energy-device-settings-water.ts

@@ -0,0 +1,257 @@
+import {
+  mdiDelete,
+  mdiWater,
+  mdiDragHorizontalVariant,
+  mdiPencil,
+  mdiPlus,
+} from "@mdi/js";
+import type { CSSResultGroup, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { repeat } from "lit/directives/repeat";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-card";
+import "../../../../components/ha-button";
+import "../../../../components/ha-icon-button";
+import "../../../../components/ha-sortable";
+import "../../../../components/ha-svg-icon";
+import type {
+  DeviceConsumptionEnergyPreference,
+  EnergyPreferences,
+  EnergyPreferencesValidation,
+} from "../../../../data/energy";
+import { saveEnergyPreferences } from "../../../../data/energy";
+import type { StatisticsMetaData } from "../../../../data/recorder";
+import { getStatisticLabel } from "../../../../data/recorder";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../resources/styles";
+import type { HomeAssistant } from "../../../../types";
+import { documentationUrl } from "../../../../util/documentation-url";
+import { showEnergySettingsDeviceWaterDialog } from "../dialogs/show-dialogs-energy";
+import "./ha-energy-validation-result";
+import { energyCardStyles } from "./styles";
+
+@customElement("ha-energy-device-settings-water")
+export class EnergyDeviceSettingsWater extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false })
+  public preferences!: EnergyPreferences;
+
+  @property({ attribute: false })
+  public statsMetadata?: Record<string, StatisticsMetaData>;
+
+  @property({ attribute: false })
+  public validationResult?: EnergyPreferencesValidation;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card outlined>
+        <h1 class="card-header">
+          <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
+          ${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.title"
+          )}
+        </h1>
+
+        <div class="card-content">
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.energy.device_consumption_water.sub"
+            )}
+            <a
+              target="_blank"
+              rel="noopener noreferrer"
+              href=${documentationUrl(
+                this.hass,
+                "/docs/energy/water/#individual-devices"
+              )}
+              >${this.hass.localize(
+                "ui.panel.config.energy.device_consumption_water.learn_more"
+              )}</a
+            >
+          </p>
+          ${this.validationResult?.device_consumption_water.map(
+            (result) => html`
+              <ha-energy-validation-result
+                .hass=${this.hass}
+                .issues=${result}
+              ></ha-energy-validation-result>
+            `
+          )}
+          <h3>
+            ${this.hass.localize(
+              "ui.panel.config.energy.device_consumption_water.devices"
+            )}
+          </h3>
+          <ha-sortable handle-selector=".handle" @item-moved=${this._itemMoved}>
+            <div class="devices">
+              ${repeat(
+                this.preferences.device_consumption_water,
+                (device) => device.stat_consumption,
+                (device) => html`
+                  <div class="row" .device=${device}>
+                    <div class="handle">
+                      <ha-svg-icon
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
+                    </div>
+                    <span class="content"
+                      >${device.name ||
+                      getStatisticLabel(
+                        this.hass,
+                        device.stat_consumption,
+                        this.statsMetadata?.[device.stat_consumption]
+                      )}</span
+                    >
+                    <ha-icon-button
+                      .label=${this.hass.localize("ui.common.edit")}
+                      @click=${this._editDevice}
+                      .path=${mdiPencil}
+                    ></ha-icon-button>
+                    <ha-icon-button
+                      .label=${this.hass.localize("ui.common.delete")}
+                      @click=${this._deleteDevice}
+                      .device=${device}
+                      .path=${mdiDelete}
+                    ></ha-icon-button>
+                  </div>
+                `
+              )}
+            </div>
+          </ha-sortable>
+          <div class="row">
+            <ha-svg-icon .path=${mdiWater}></ha-svg-icon>
+            <ha-button
+              @click=${this._addDevice}
+              appearance="filled"
+              size="small"
+            >
+              <ha-svg-icon slot="start" .path=${mdiPlus}></ha-svg-icon
+              >${this.hass.localize(
+                "ui.panel.config.energy.device_consumption_water.add_device"
+              )}</ha-button
+            >
+          </div>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _itemMoved(ev: CustomEvent): void {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+    const devices = this.preferences.device_consumption_water.concat();
+    const device = devices.splice(oldIndex, 1)[0];
+    devices.splice(newIndex, 0, device);
+
+    const newPrefs = {
+      ...this.preferences,
+      device_consumption_water: devices,
+    };
+    fireEvent(this, "value-changed", { value: newPrefs });
+    this._savePreferences(newPrefs);
+  }
+
+  private _editDevice(ev) {
+    const origDevice: DeviceConsumptionEnergyPreference =
+      ev.currentTarget.closest(".row").device;
+    showEnergySettingsDeviceWaterDialog(this, {
+      statsMetadata: this.statsMetadata,
+      device: { ...origDevice },
+      device_consumptions: this.preferences
+        .device_consumption_water as DeviceConsumptionEnergyPreference[],
+      saveCallback: async (newDevice) => {
+        const newPrefs = {
+          ...this.preferences,
+          device_consumption_water:
+            this.preferences.device_consumption_water.map((d) =>
+              d === origDevice ? newDevice : d
+            ),
+        };
+        this._sanitizeParents(newPrefs);
+        await this._savePreferences(newPrefs);
+      },
+    });
+  }
+
+  private _addDevice() {
+    showEnergySettingsDeviceWaterDialog(this, {
+      statsMetadata: this.statsMetadata,
+      device_consumptions: this.preferences
+        .device_consumption_water as DeviceConsumptionEnergyPreference[],
+      saveCallback: async (device) => {
+        await this._savePreferences({
+          ...this.preferences,
+          device_consumption_water:
+            this.preferences.device_consumption_water.concat(device),
+        });
+      },
+    });
+  }
+
+  private _sanitizeParents(prefs: EnergyPreferences) {
+    const statIds = prefs.device_consumption_water.map(
+      (d) => d.stat_consumption
+    );
+    prefs.device_consumption_water.forEach((d) => {
+      if (d.included_in_stat && !statIds.includes(d.included_in_stat)) {
+        delete d.included_in_stat;
+      }
+    });
+  }
+
+  private async _deleteDevice(ev) {
+    const deviceToDelete: DeviceConsumptionEnergyPreference =
+      ev.currentTarget.device;
+
+    if (
+      !(await showConfirmationDialog(this, {
+        title: this.hass.localize("ui.panel.config.energy.delete_source"),
+      }))
+    ) {
+      return;
+    }
+
+    try {
+      const newPrefs = {
+        ...this.preferences,
+        device_consumption_water:
+          this.preferences.device_consumption_water.filter(
+            (device) => device !== deviceToDelete
+          ),
+      };
+      this._sanitizeParents(newPrefs);
+      await this._savePreferences(newPrefs);
+    } catch (err: any) {
+      showAlertDialog(this, { title: `Failed to save config: ${err.message}` });
+    }
+  }
+
+  private async _savePreferences(preferences: EnergyPreferences) {
+    const result = await saveEnergyPreferences(this.hass, preferences);
+    fireEvent(this, "value-changed", { value: result });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      energyCardStyles,
+      css`
+        .handle {
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-energy-device-settings-water": EnergyDeviceSettingsWater;
+  }
+}

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

@@ -0,0 +1,268 @@
+import { mdiWater } 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 { stopPropagation } from "../../../../common/dom/stop_propagation";
+import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/entity/ha-statistic-picker";
+import "../../../../components/ha-dialog";
+import "../../../../components/ha-radio";
+import "../../../../components/ha-button";
+import "../../../../components/ha-select";
+import "../../../../components/ha-list-item";
+import type { DeviceConsumptionEnergyPreference } from "../../../../data/energy";
+import { energyStatisticHelpUrl } from "../../../../data/energy";
+import { getStatisticLabel } from "../../../../data/recorder";
+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 { EnergySettingsDeviceWaterDialogParams } from "./show-dialogs-energy";
+
+const volumeUnitClasses = ["volume"];
+
+@customElement("dialog-energy-device-settings-water")
+export class DialogEnergyDeviceSettingsWater
+  extends LitElement
+  implements HassDialog<EnergySettingsDeviceWaterDialogParams>
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _params?: EnergySettingsDeviceWaterDialogParams;
+
+  @state() private _device?: DeviceConsumptionEnergyPreference;
+
+  @state() private _volume_units?: string[];
+
+  @state() private _error?: string;
+
+  private _excludeList?: string[];
+
+  private _possibleParents: DeviceConsumptionEnergyPreference[] = [];
+
+  public async showDialog(
+    params: EnergySettingsDeviceWaterDialogParams
+  ): Promise<void> {
+    this._params = params;
+    this._device = this._params.device;
+    this._computePossibleParents();
+    this._volume_units = (
+      await getSensorDeviceClassConvertibleUnits(this.hass, "water")
+    ).units;
+    this._excludeList = this._params.device_consumptions
+      .map((entry) => entry.stat_consumption)
+      .filter((id) => id !== this._device?.stat_consumption);
+  }
+
+  private _computePossibleParents() {
+    if (!this._device || !this._params) {
+      this._possibleParents = [];
+      return;
+    }
+    const children: string[] = [];
+    const devices = this._params.device_consumptions;
+    function getChildren(stat) {
+      devices.forEach((d) => {
+        if (d.included_in_stat === stat) {
+          children.push(d.stat_consumption);
+          getChildren(d.stat_consumption);
+        }
+      });
+    }
+    getChildren(this._device.stat_consumption);
+    this._possibleParents = this._params.device_consumptions.filter(
+      (d) =>
+        d.stat_consumption !== this._device!.stat_consumption &&
+        d.stat_consumption !== this._params?.device?.stat_consumption &&
+        !children.includes(d.stat_consumption)
+    );
+  }
+
+  public closeDialog() {
+    this._params = undefined;
+    this._device = undefined;
+    this._error = undefined;
+    this._excludeList = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+    return true;
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    const pickableUnit = this._volume_units?.join(", ") || "";
+
+    return html`
+      <ha-dialog
+        open
+        .heading=${html`<ha-svg-icon
+            .path=${mdiWater}
+            style="--mdc-icon-size: 32px;"
+          ></ha-svg-icon>
+          ${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.header"
+          )}`}
+        @closed=${this.closeDialog}
+      >
+        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.selected_stat_intro",
+            { unit: pickableUnit }
+          )}
+        </div>
+
+        <ha-statistic-picker
+          .hass=${this.hass}
+          .helpMissingEntityUrl=${energyStatisticHelpUrl}
+          .includeUnitClass=${volumeUnitClasses}
+          .value=${this._device?.stat_consumption}
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.device_consumption_water"
+          )}
+          .excludeStatistics=${this._excludeList}
+          @value-changed=${this._statisticChanged}
+          dialogInitialFocus
+        ></ha-statistic-picker>
+
+        <ha-textfield
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.display_name"
+          )}
+          type="text"
+          .disabled=${!this._device}
+          .value=${this._device?.name || ""}
+          .placeholder=${this._device
+            ? getStatisticLabel(
+                this.hass,
+                this._device.stat_consumption,
+                this._params?.statsMetadata?.[this._device.stat_consumption]
+              )
+            : ""}
+          @input=${this._nameChanged}
+        >
+        </ha-textfield>
+
+        <ha-select
+          .label=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.included_in_device"
+          )}
+          .value=${this._device?.included_in_stat || ""}
+          .helper=${this.hass.localize(
+            "ui.panel.config.energy.device_consumption_water.dialog.included_in_device_helper"
+          )}
+          .disabled=${!this._device}
+          @selected=${this._parentSelected}
+          @closed=${stopPropagation}
+          fixedMenuPosition
+          naturalMenuWidth
+          clearable
+        >
+          ${!this._possibleParents.length
+            ? html`
+                <ha-list-item disabled value="-"
+                  >${this.hass.localize(
+                    "ui.panel.config.energy.device_consumption_water.dialog.no_upstream_devices"
+                  )}</ha-list-item
+                >
+              `
+            : this._possibleParents.map(
+                (stat) => html`
+                  <ha-list-item .value=${stat.stat_consumption}
+                    >${stat.name ||
+                    getStatisticLabel(
+                      this.hass,
+                      stat.stat_consumption,
+                      this._params?.statsMetadata?.[stat.stat_consumption]
+                    )}</ha-list-item
+                  >
+                `
+              )}
+        </ha-select>
+
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="primaryAction"
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          @click=${this._save}
+          .disabled=${!this._device}
+          slot="primaryAction"
+        >
+          ${this.hass.localize("ui.common.save")}
+        </ha-button>
+      </ha-dialog>
+    `;
+  }
+
+  private _statisticChanged(ev: CustomEvent<{ value: string }>) {
+    if (!ev.detail.value) {
+      this._device = undefined;
+      return;
+    }
+    this._device = { stat_consumption: ev.detail.value };
+    this._computePossibleParents();
+  }
+
+  private _nameChanged(ev) {
+    const newDevice = {
+      ...this._device!,
+      name: ev.target!.value,
+    } as DeviceConsumptionEnergyPreference;
+    if (!newDevice.name) {
+      delete newDevice.name;
+    }
+    this._device = newDevice;
+  }
+
+  private _parentSelected(ev) {
+    const newDevice = {
+      ...this._device!,
+      included_in_stat: ev.target!.value,
+    } as DeviceConsumptionEnergyPreference;
+    if (!newDevice.included_in_stat) {
+      delete newDevice.included_in_stat;
+    }
+    this._device = newDevice;
+  }
+
+  private async _save() {
+    try {
+      await this._params!.saveCallback(this._device!);
+      this.closeDialog();
+    } catch (err: any) {
+      this._error = err.message;
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-statistic-picker {
+          width: 100%;
+        }
+        ha-select {
+          margin-top: 16px;
+          width: 100%;
+        }
+        ha-textfield {
+          margin-top: 16px;
+          width: 100%;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-energy-device-settings-water": DialogEnergyDeviceSettingsWater;
+  }
+}

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

@@ -83,6 +83,13 @@ export interface EnergySettingsDeviceDialogParams {
   saveCallback: (device: DeviceConsumptionEnergyPreference) => Promise<void>;
 }
 
+export interface EnergySettingsDeviceWaterDialogParams {
+  device?: DeviceConsumptionEnergyPreference;
+  device_consumptions: DeviceConsumptionEnergyPreference[];
+  statsMetadata?: Record<string, StatisticsMetaData>;
+  saveCallback: (device: DeviceConsumptionEnergyPreference) => Promise<void>;
+}
+
 export const showEnergySettingsDeviceDialog = (
   element: HTMLElement,
   dialogParams: EnergySettingsDeviceDialogParams
@@ -160,6 +167,17 @@ export const showEnergySettingsGridFlowToDialog = (
   });
 };
 
+export const showEnergySettingsDeviceWaterDialog = (
+  element: HTMLElement,
+  dialogParams: EnergySettingsDeviceWaterDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-energy-device-settings-water",
+    dialogImport: () => import("./dialog-energy-device-settings-water"),
+    dialogParams: dialogParams,
+  });
+};
+
 export const showEnergySettingsGridPowerDialog = (
   element: HTMLElement,
   dialogParams: EnergySettingsGridPowerDialogParams

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

@@ -22,6 +22,7 @@ import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import "../../../components/ha-alert";
 import "./components/ha-energy-device-settings";
+import "./components/ha-energy-device-settings-water";
 import "./components/ha-energy-grid-settings";
 import "./components/ha-energy-solar-settings";
 import "./components/ha-energy-battery-settings";
@@ -32,6 +33,7 @@ import { fileDownload } from "../../../util/file_download";
 const INITIAL_CONFIG: EnergyPreferences = {
   energy_sources: [],
   device_consumption: [],
+  device_consumption_water: [],
 };
 
 @customElement("ha-config-energy")
@@ -142,6 +144,13 @@ class HaConfigEnergy extends LitElement {
             .validationResult=${this._validationResult}
             @value-changed=${this._prefsChanged}
           ></ha-energy-device-settings>
+          <ha-energy-device-settings-water
+            .hass=${this.hass}
+            .preferences=${this._preferences!}
+            .statsMetadata=${this._statsMetadata}
+            .validationResult=${this._validationResult}
+            @value-changed=${this._prefsChanged}
+          ></ha-energy-device-settings-water>
         </div>
       </hass-subpage>
     `;

src/panels/energy/cards/energy-setup-wizard-card.ts

@@ -30,6 +30,7 @@ export class EnergySetupWizard extends LitElement implements LovelaceCard {
   @state() private _preferences: EnergyPreferences = {
     energy_sources: [],
     device_consumption: [],
+    device_consumption_water: [],
   };
 
   public getCardSize() {

src/panels/lovelace/cards/types.ts

@@ -231,6 +231,14 @@ export interface EnergySankeyCardConfig extends EnergyCardBaseConfig {
   group_by_area?: boolean;
 }
 
+export interface WaterSankeyCardConfig extends EnergyCardBaseConfig {
+  type: "water-sankey";
+  title?: string;
+  layout?: "vertical" | "horizontal" | "auto";
+  group_by_floor?: boolean;
+  group_by_area?: boolean;
+}
+
 export interface PowerSourcesGraphCardConfig extends EnergyCardBaseConfig {
   type: "power-sources-graph";
   title?: string;

src/panels/lovelace/cards/water/hui-water-sankey-card.ts

@@ -0,0 +1,464 @@
+import type { 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 "../../../../components/ha-card";
+import "../../../../components/ha-svg-icon";
+import type { EnergyData } from "../../../../data/energy";
+import { getEnergyDataCollection } from "../../../../data/energy";
+import {
+  calculateStatisticSumGrowth,
+  getStatisticLabel,
+} from "../../../../data/recorder";
+import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
+import type { HomeAssistant } from "../../../../types";
+import type { LovelaceCard, LovelaceGridOptions } from "../../types";
+import type { WaterSankeyCardConfig } from "../types";
+import "../../../../components/chart/ha-sankey-chart";
+import type { Link, Node } from "../../../../components/chart/ha-sankey-chart";
+import { getGraphColorByIndex } from "../../../../common/color/colors";
+import { formatNumber } from "../../../../common/number/format_number";
+import { getEntityContext } from "../../../../common/entity/context/get_entity_context";
+import { MobileAwareMixin } from "../../../../mixins/mobile-aware-mixin";
+
+const DEFAULT_CONFIG: Partial<WaterSankeyCardConfig> = {
+  group_by_floor: true,
+  group_by_area: true,
+};
+
+@customElement("hui-water-sankey-card")
+class HuiWaterSankeyCard
+  extends SubscribeMixin(MobileAwareMixin(LitElement))
+  implements LovelaceCard
+{
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public layout?: string;
+
+  @state() private _config?: WaterSankeyCardConfig;
+
+  @state() private _data?: EnergyData;
+
+  protected hassSubscribeRequiredHostProps = ["_config"];
+
+  public setConfig(config: WaterSankeyCardConfig): void {
+    this._config = { ...DEFAULT_CONFIG, ...config };
+  }
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      getEnergyDataCollection(this.hass, {
+        key: this._config?.collection_key,
+      }).subscribe((data) => {
+        this._data = data;
+      }),
+    ];
+  }
+
+  public getCardSize(): Promise<number> | number {
+    return 5;
+  }
+
+  getGridOptions(): LovelaceGridOptions {
+    return {
+      columns: 12,
+      min_columns: 6,
+      rows: 6,
+      min_rows: 2,
+    };
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return (
+      changedProps.has("_config") ||
+      changedProps.has("_data") ||
+      changedProps.has("_isMobileSize")
+    );
+  }
+
+  protected render() {
+    if (!this._config) {
+      return nothing;
+    }
+
+    if (!this._data) {
+      return html`${this.hass.localize(
+        "ui.panel.lovelace.cards.energy.loading"
+      )}`;
+    }
+
+    const prefs = this._data.prefs;
+    const waterSources = prefs.energy_sources.filter(
+      (source) => source.type === "water"
+    );
+
+    const computedStyle = getComputedStyle(this);
+
+    const nodes: Node[] = [];
+    const links: Link[] = [];
+
+    // Calculate total water consumption from all devices
+    let totalWaterConsumption = 0;
+    prefs.device_consumption_water.forEach((device) => {
+      const value =
+        device.stat_consumption in this._data!.stats
+          ? calculateStatisticSumGrowth(
+              this._data!.stats[device.stat_consumption]
+            ) || 0
+          : 0;
+      totalWaterConsumption += value;
+    });
+
+    // Create home/consumption node
+    const homeNode: Node = {
+      id: "home",
+      label: this.hass.localize(
+        "ui.panel.lovelace.cards.energy.energy_distribution.home"
+      ),
+      value: Math.max(0, totalWaterConsumption),
+      color: computedStyle.getPropertyValue("--primary-color").trim(),
+      index: 1,
+    };
+    nodes.push(homeNode);
+
+    // Add water source nodes
+    const waterColor = computedStyle
+      .getPropertyValue("--energy-water-color")
+      .trim();
+    waterSources.forEach((source) => {
+      if (source.type !== "water") {
+        return;
+      }
+      const value =
+        source.stat_energy_from in this._data!.stats
+          ? calculateStatisticSumGrowth(
+              this._data!.stats[source.stat_energy_from]
+            ) || 0
+          : 0;
+
+      if (value < 0.01) {
+        return;
+      }
+
+      nodes.push({
+        id: source.stat_energy_from,
+        label: getStatisticLabel(
+          this.hass,
+          source.stat_energy_from,
+          this._data!.statsMetadata[source.stat_energy_from]
+        ),
+        value,
+        color: waterColor,
+        index: 0,
+      });
+
+      links.push({
+        source: source.stat_energy_from,
+        target: "home",
+        value,
+      });
+    });
+
+    let untrackedConsumption = homeNode.value;
+    const deviceNodes: Node[] = [];
+    const parentLinks: Record<string, string> = {};
+    prefs.device_consumption_water.forEach((device, idx) => {
+      const value =
+        device.stat_consumption in this._data!.stats
+          ? calculateStatisticSumGrowth(
+              this._data!.stats[device.stat_consumption]
+            ) || 0
+          : 0;
+      if (value < 0.01) {
+        return;
+      }
+      const node = {
+        id: device.stat_consumption,
+        label:
+          device.name ||
+          getStatisticLabel(
+            this.hass,
+            device.stat_consumption,
+            this._data!.statsMetadata[device.stat_consumption]
+          ),
+        value,
+        color: getGraphColorByIndex(idx, computedStyle),
+        index: 4,
+        parent: device.included_in_stat,
+      };
+      if (node.parent) {
+        parentLinks[node.id] = node.parent;
+        links.push({
+          source: node.parent,
+          target: node.id,
+        });
+      } else {
+        untrackedConsumption -= value;
+      }
+      deviceNodes.push(node);
+    });
+    const devicesWithoutParent = deviceNodes.filter(
+      (node) => !parentLinks[node.id]
+    );
+
+    const { group_by_area, group_by_floor } = this._config;
+    if (group_by_area || group_by_floor) {
+      const { areas, floors } = this._groupByFloorAndArea(devicesWithoutParent);
+
+      Object.keys(floors)
+        .sort(
+          (a, b) =>
+            (this.hass.floors[b]?.level ?? -Infinity) -
+            (this.hass.floors[a]?.level ?? -Infinity)
+        )
+        .forEach((floorId) => {
+          let floorNodeId = `floor_${floorId}`;
+          if (floorId === "no_floor" || !group_by_floor) {
+            // link "no_floor" areas to home
+            floorNodeId = "home";
+          } else {
+            nodes.push({
+              id: floorNodeId,
+              label: this.hass.floors[floorId].name,
+              value: floors[floorId].value,
+              index: 2,
+              color: computedStyle.getPropertyValue("--primary-color").trim(),
+            });
+            links.push({
+              source: "home",
+              target: floorNodeId,
+            });
+          }
+          floors[floorId].areas.forEach((areaId) => {
+            let targetNodeId: string;
+
+            if (areaId === "no_area" || !group_by_area) {
+              // If group_by_area is false, link devices to floor or home
+              targetNodeId = floorNodeId;
+            } else {
+              // Create area node and link it to floor
+              const areaNodeId = `area_${areaId}`;
+              nodes.push({
+                id: areaNodeId,
+                label: this.hass.areas[areaId]!.name,
+                value: areas[areaId].value,
+                index: 3,
+                color: computedStyle.getPropertyValue("--primary-color").trim(),
+              });
+              links.push({
+                source: floorNodeId,
+                target: areaNodeId,
+                value: areas[areaId].value,
+              });
+              targetNodeId = areaNodeId;
+            }
+
+            // Link devices to the appropriate target (area, floor, or home)
+            areas[areaId].devices.forEach((device) => {
+              links.push({
+                source: targetNodeId,
+                target: device.id,
+                value: device.value,
+              });
+            });
+          });
+        });
+    } else {
+      devicesWithoutParent.forEach((deviceNode) => {
+        links.push({
+          source: "home",
+          target: deviceNode.id,
+          value: deviceNode.value,
+        });
+      });
+    }
+    const deviceSections = this._getDeviceSections(parentLinks, deviceNodes);
+    deviceSections.forEach((section, index) => {
+      section.forEach((node: Node) => {
+        nodes.push({ ...node, index: 4 + index });
+      });
+    });
+
+    // untracked consumption
+    if (untrackedConsumption > 0) {
+      nodes.push({
+        id: "untracked",
+        label: this.hass.localize(
+          "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
+        ),
+        value: untrackedConsumption,
+        color: computedStyle
+          .getPropertyValue("--state-unavailable-color")
+          .trim(),
+        index: 3 + deviceSections.length,
+      });
+      links.push({
+        source: "home",
+        target: "untracked",
+        value: untrackedConsumption,
+      });
+    }
+
+    const hasData = nodes.some((node) => node.value > 0);
+
+    const vertical =
+      this._config.layout === "vertical" ||
+      (this._config.layout !== "horizontal" && this._isMobileSize);
+
+    return html`
+      <ha-card
+        .header=${this._config.title}
+        class=${classMap({
+          "is-grid": this.layout === "grid",
+          "is-panel": this.layout === "panel",
+          "is-vertical": vertical,
+        })}
+      >
+        <div class="card-content">
+          ${hasData
+            ? html`<ha-sankey-chart
+                .data=${{ nodes, links }}
+                .vertical=${vertical}
+                .valueFormatter=${this._valueFormatter}
+              ></ha-sankey-chart>`
+            : html`${this.hass.localize(
+                "ui.panel.lovelace.cards.energy.no_data_period"
+              )}`}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  private _valueFormatter = (value: number) =>
+    `${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)} ${this._data!.waterUnit}`;
+
+  protected _groupByFloorAndArea(deviceNodes: Node[]) {
+    const areas: Record<string, { value: number; devices: Node[] }> = {
+      no_area: {
+        value: 0,
+        devices: [],
+      },
+    };
+    const floors: Record<string, { value: number; areas: string[] }> = {
+      no_floor: {
+        value: 0,
+        areas: ["no_area"],
+      },
+    };
+    deviceNodes.forEach((deviceNode) => {
+      const entity = this.hass.states[deviceNode.id];
+      const { area, floor } = entity
+        ? getEntityContext(
+            entity,
+            this.hass.entities,
+            this.hass.devices,
+            this.hass.areas,
+            this.hass.floors
+          )
+        : { area: null, floor: null };
+      if (area) {
+        if (area.area_id in areas) {
+          areas[area.area_id].value += deviceNode.value;
+          areas[area.area_id].devices.push(deviceNode);
+        } else {
+          areas[area.area_id] = {
+            value: deviceNode.value,
+            devices: [deviceNode],
+          };
+        }
+        // see if the area has a floor
+        if (floor) {
+          if (floor.floor_id in floors) {
+            floors[floor.floor_id].value += deviceNode.value;
+            if (!floors[floor.floor_id].areas.includes(area.area_id)) {
+              floors[floor.floor_id].areas.push(area.area_id);
+            }
+          } else {
+            floors[floor.floor_id] = {
+              value: deviceNode.value,
+              areas: [area.area_id],
+            };
+          }
+        } else {
+          floors.no_floor.value += deviceNode.value;
+          if (!floors.no_floor.areas.includes(area.area_id)) {
+            floors.no_floor.areas.unshift(area.area_id);
+          }
+        }
+      } else {
+        areas.no_area.value += deviceNode.value;
+        areas.no_area.devices.push(deviceNode);
+      }
+    });
+    return { areas, floors };
+  }
+
+  /**
+   * Organizes device nodes into hierarchical sections based on parent-child relationships.
+   */
+  protected _getDeviceSections(
+    parentLinks: Record<string, string>,
+    deviceNodes: Node[]
+  ): Node[][] {
+    const parentSection: Node[] = [];
+    const childSection: Node[] = [];
+    const parentIds = Object.values(parentLinks);
+    const remainingLinks: typeof parentLinks = {};
+
+    deviceNodes.forEach((deviceNode) => {
+      const isChild = deviceNode.id in parentLinks;
+      const isParent = parentIds.includes(deviceNode.id);
+      if (isParent && !isChild) {
+        // Top-level parents (have children but no parents themselves)
+        parentSection.push(deviceNode);
+      } else {
+        childSection.push(deviceNode);
+      }
+    });
+
+    // Filter out links where parent is already in current parent section
+    Object.entries(parentLinks).forEach(([child, parent]) => {
+      if (!parentSection.some((node) => node.id === parent)) {
+        remainingLinks[child] = parent;
+      }
+    });
+
+    if (parentSection.length > 0) {
+      // Recursively process child section with remaining links
+      return [
+        parentSection,
+        ...this._getDeviceSections(remainingLinks, childSection),
+      ];
+    }
+
+    // Base case: no more parent-child relationships to process
+    return [deviceNodes];
+  }
+
+  static styles = css`
+    ha-card {
+      height: 400px;
+      display: flex;
+      flex-direction: column;
+      --chart-max-height: none;
+    }
+    ha-card.is-vertical {
+      height: 500px;
+    }
+    ha-card.is-grid,
+    ha-card.is-panel {
+      height: 100%;
+    }
+    .card-content {
+      flex: 1;
+      display: flex;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-water-sankey-card": HuiWaterSankeyCard;
+  }
+}

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

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

src/resources/theme/color/wa.globals.ts

@@ -52,8 +52,6 @@ export const waColorStyles = css`
     --wa-color-danger-on-normal: var(--ha-color-on-danger-normal);
     --wa-color-danger-on-quiet: var(--ha-color-on-danger-quiet);
 
-    --wa-color-text-quiet: var(--ha-color-text-secondary);
-
     --wa-color-text-normal: var(--ha-color-text-primary);
     --wa-color-surface-default: var(--card-background-color);
     --wa-color-surface-raised: var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff));
@@ -64,7 +62,5 @@ export const waColorStyles = css`
 
     --wa-focus-ring-color: var(--ha-color-neutral-60);
     --wa-shadow-l: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);
-
-    --wa-color-text-normal: var(--ha-color-text-primary);
   }
 `;

src/resources/theme/wa.globals.ts

@@ -9,16 +9,12 @@ export const waMainStyles = css`
     --wa-focus-ring-offset: 2px;
     --wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-focus-ring-color);
 
-    --wa-space-xs: var(--ha-space-2);
-    --wa-space-m: var(--ha-space-4);
     --wa-space-l: var(--ha-space-6);
     --wa-space-xl: var(--ha-space-8);
 
     --wa-form-control-padding-block: 0.75em;
-    --wa-form-control-value-line-height: var(--ha-line-height-condensed);
 
     --wa-font-weight-action: var(--ha-font-weight-medium);
-    --wa-transition-normal: 150ms;
     --wa-transition-fast: 75ms;
     --wa-transition-easing: ease;
 
@@ -32,7 +28,6 @@ export const waMainStyles = css`
 
     --wa-line-height-condensed: var(--ha-line-height-condensed);
 
-    --wa-font-size-m: var(--ha-font-size-m);
     --wa-shadow-s: var(--ha-box-shadow-s);
     --wa-shadow-m: var(--ha-box-shadow-m);
     --wa-shadow-l: var(--ha-box-shadow-l);

src/translations/en.json

@@ -3225,6 +3225,22 @@
               "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"
             }
+          },
+          "device_consumption_water": {
+            "title": "Individual water devices",
+            "sub": "Tracking the water usage of individual devices allows Home Assistant to break down your water usage by device.",
+            "learn_more": "More information on how to get started.",
+            "devices": "Devices",
+            "add_device": "Add device",
+            "dialog": {
+              "header": "Add a water device",
+              "display_name": "Display name",
+              "device_consumption_water": "Device water consumption",
+              "selected_stat_intro": "Select the water sensor that measures the device's water 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 water meter measured by the main water supply), selecting the upstream device prevents duplicate water tracking.",
+              "no_upstream_devices": "No eligible upstream devices"
+            }
           }
         },
         "helpers": {
@@ -3990,25 +4006,7 @@
             "item_pasted": "{item} pasted",
             "ctrl": "Ctrl",
             "del": "Del",
-            "targets": "Targets",
-            "select_target": "Select a target",
-            "home": "Home",
-            "unassigned": "Unassigned",
             "blocks": "Blocks",
-            "show_more": "Show more",
-            "unassigned_entities": "Unassigned entities",
-            "unassigned_devices": "Unassigned devices",
-            "empty_section_search": {
-              "block": "No blocks found for {term}",
-              "entity": "No entities found for {term}",
-              "device": "No devices found for {term}",
-              "area": "No areas or floors found for {term}",
-              "label": "No labels found for {term}"
-            },
-            "load_target_items_failed": "Failed to load target items for",
-            "other_areas": "Other areas",
-            "services": "Services",
-            "helpers": "Helpers",
             "triggers": {
               "name": "Triggers",
               "header": "When",
@@ -4016,10 +4014,7 @@
               "learn_more": "Learn more about triggers",
               "triggered": "Triggered",
               "add": "Add trigger",
-              "empty_search": {
-                "global": "No triggers and targets found for {term}",
-                "item": "No triggers found for {term}"
-              },
+              "empty_search": "No triggers found for {term}",
               "id": "Trigger ID",
               "optional": "Optional",
               "edit_id": "Edit ID",
@@ -4040,7 +4035,6 @@
               "copied_to_clipboard": "Trigger copied to clipboard",
               "cut_to_clipboard": "Trigger cut to clipboard",
               "select": "Select a trigger",
-              "no_items_for_target": "No triggers available for",
               "groups": {
                 "device": {
                   "label": "Device"
@@ -4282,10 +4276,7 @@
               "description": "All conditions added here need to be satisfied for the automation to run. A condition can be satisfied or not at any given time, for example: ''If {user} is home''. You can use building blocks to create more complex conditions.",
               "learn_more": "Learn more about conditions",
               "add": "Add condition",
-              "empty_search": {
-                "global": "No conditions, blocks and targets found for {term}",
-                "item": "No conditions found for {term}"
-              },
+              "empty_search": "No conditions and blocks found for {term}",
               "add_building_block": "Add building block",
               "test": "Test",
               "testing_error": "Condition did not pass",
@@ -4308,7 +4299,6 @@
               "copied_to_clipboard": "Condition copied to clipboard",
               "cut_to_clipboard": "Condition cut to clipboard",
               "select": "Select a condition",
-              "no_items_for_target": "No conditions available for",
               "groups": {
                 "device": {
                   "label": "Device"
@@ -4454,10 +4444,7 @@
               "description": "All actions added here will be performed in sequence when the automation runs. An action usually controls one of your areas, devices, or entities, for example: 'Turn on the lights'. You can use building blocks to create more complex sequences of actions.",
               "learn_more": "Learn more about actions",
               "add": "Add action",
-              "empty_search": {
-                "global": "No actions, blocks and targets found for {term}",
-                "item": "No actions found for {term}"
-              },
+              "empty_search": "No actions and blocks found for {term}",
               "add_building_block": "Add building block",
               "invalid_action": "Invalid action",
               "run": "Run action",
@@ -4482,7 +4469,6 @@
               "copied_to_clipboard": "Action copied to clipboard",
               "cut_to_clipboard": "Action cut to clipboard",
               "select": "Select an action",
-              "no_items_for_target": "No actions available for",
               "groups": {
                 "device_id": {
                   "label": "Device"
@@ -9480,7 +9466,8 @@
           "energy_sources_table_title": "Sources",
           "energy_devices_graph_title": "Individual devices total usage",
           "energy_devices_detail_graph_title": "Individual devices detail usage",
-          "energy_sankey_title": "Energy flow"
+          "energy_sankey_title": "Energy flow",
+          "water_sankey_title": "Water flow"
         }
       },
       "history": {

yarn.lock

@@ -1940,9 +1940,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@home-assistant/webawesome@npm:3.0.0-ha.0":
-  version: 3.0.0-ha.0
-  resolution: "@home-assistant/webawesome@npm:3.0.0-ha.0"
+"@home-assistant/webawesome@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@home-assistant/webawesome@npm:3.0.0"
   dependencies:
     "@ctrl/tinycolor": "npm:4.1.0"
     "@floating-ui/dom": "npm:^1.6.13"
@@ -1953,7 +1953,7 @@ __metadata:
     lit: "npm:^3.2.1"
     nanoid: "npm:^5.1.5"
     qr-creator: "npm:^1.0.0"
-  checksum: 10/2034d498d5b26bb0573ebc2c9aadd144604bb48c04becbae0c67b16857d8e5d6562626e795974362c3fc41e9b593a9005595d8b5ff434b1569b2d724af13043b
+  checksum: 10/03400894cfee8548fd5b1f5c56d31d253830e704b18ba69d36ce6b761d8b1bef2fb52cffba8d9b033033bb582f2f51a2d6444d82622f66d70150e2104fcb49e2
   languageName: node
   linkType: hard
 
@@ -9226,7 +9226,7 @@ __metadata:
     "@fullcalendar/list": "npm:6.1.19"
     "@fullcalendar/luxon3": "npm:6.1.19"
     "@fullcalendar/timegrid": "npm:6.1.19"
-    "@home-assistant/webawesome": "npm:3.0.0-ha.0"
+    "@home-assistant/webawesome": "npm:3.0.0"
     "@lezer/highlight": "npm:1.2.3"
     "@lit-labs/motion": "npm:1.0.9"
     "@lit-labs/observers": "npm:2.0.6"