Show device area in energy device graph tooltips

src/data/energy.ts

@@ -26,10 +26,12 @@ import {
 } from "../common/datetime/calc_date";
 import type { DateRange } from "../common/datetime/calc_date_range";
 import { calcDateRange } from "../common/datetime/calc_date_range";
+import { computeAreaName } from "../common/entity/compute_area_name";
+import { getEntityAreaId } from "../common/entity/context/get_entity_context";
 import { formatNumber } from "../common/number/format_number";
 import { normalizeValueBySIPrefix } from "../common/number/normalize-by-si-prefix";
 import { groupBy } from "../common/util/group-by";
-import type { HomeAssistant } from "../types";
+import type { HomeAssistant, HomeAssistantRegistries } from "../types";
 import { fileDownload } from "../util/file_download";
 import type {
   StatisticPeriod,
@@ -343,6 +345,19 @@ export const computeEnergyLabel = (
   );
 };
 
+export const computeEnergyStatisticArea = (
+  registries: HomeAssistantRegistries,
+  statisticId: string
+): string | undefined => {
+  const areaId = getEntityAreaId(
+    statisticId,
+    registries.entities,
+    registries.devices
+  );
+  const area = areaId ? registries.areas[areaId] : undefined;
+  return area ? computeAreaName(area) : undefined;
+};
+
 /**
  * Device labels keyed by statistic id. Cards that show live power or flow
  * key their nodes by `stat_rate` instead of `stat_consumption`; devices

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

@@ -119,7 +119,8 @@ export function getCommonOptions(
   compareEnd?: Date,
   formatTotal?: (total: number) => string,
   detailedDailyData = false,
-  yAxisFractionDigits = 1
+  yAxisFractionDigits = 1,
+  getSeriesArea?: (seriesId: string) => string | undefined
 ): HaECOption {
   const suggestedPeriod = getSuggestedPeriod(start, end, detailedDailyData);
   let suggestedMax = getSuggestedMax(suggestedPeriod, end, detailedDailyData);
@@ -225,7 +226,8 @@ export function getCommonOptions(
                 compare,
                 showCompareYear,
                 unit,
-                formatTotal
+                formatTotal,
+                getSeriesArea
               )
             )
             .filter((s): s is TemplateResult => s !== nothing);
@@ -243,7 +245,8 @@ export function getCommonOptions(
           compare,
           showCompareYear,
           unit,
-          formatTotal
+          formatTotal,
+          getSeriesArea
         );
       },
     },
@@ -259,7 +262,8 @@ function formatTooltip(
   compare: boolean | null,
   showCompareYear: boolean,
   unit?: string,
-  formatTotal?: (total: number) => string
+  formatTotal?: (total: number) => string,
+  getSeriesArea?: (seriesId: string) => string | undefined
 ): TemplateResult | typeof nothing {
   if (!params[0]?.value) {
     return nothing;
@@ -307,11 +311,19 @@ function formatTooltip(
       sumPositive += y;
       countPositive++;
     }
+    const area = param.seriesId ? getSeriesArea?.(param.seriesId) : undefined;
     rows.push(
       html`<ha-chart-tooltip-marker
           .color=${String(param.color ?? "")}
         ></ha-chart-tooltip-marker>
-        ${param.seriesName}:
+        ${param.seriesName}${
+          area
+            ? html` ·
+                <span style="color: var(--secondary-text-color);"
+                  >${area}</span
+                >`
+            : nothing
+        }:
         <div style="direction:ltr; display: inline;">${value} ${unit}</div>`
     );
   }

src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts

@@ -14,11 +14,15 @@ import {
   configContext,
   formattersContext,
   internationalizationContext,
+  registriesContext,
   statesContext,
   uiContext,
 } from "../../../../data/context";
 import type { EnergyData } from "../../../../data/energy";
-import { validateEnergyCollectionKey } from "../../../../data/energy";
+import {
+  computeEnergyStatisticArea,
+  validateEnergyCollectionKey,
+} from "../../../../data/energy";
 import { EnergyCollectionController } from "../../../../data/energy-collection-controller";
 import { isExternalStatistic } from "../../../../data/recorder";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
@@ -29,6 +33,7 @@ import type {
   HomeAssistantConfig,
   HomeAssistantFormatters,
   HomeAssistantInternationalization,
+  HomeAssistantRegistries,
   HomeAssistantUI,
 } from "../../../../types";
 import type { LovelaceCard } from "../../types";
@@ -107,6 +112,9 @@ export class HuiEnergyDevicesDetailGraphCard
   @consume({ context: formattersContext, subscribe: true })
   private _formatters!: HomeAssistantFormatters;
 
+  @consume({ context: registriesContext, subscribe: true })
+  private _registries!: HomeAssistantRegistries;
+
   @consume({ context: uiContext, subscribe: true })
   private _ui!: HomeAssistantUI;
 
@@ -237,7 +245,8 @@ export class HuiEnergyDevicesDetailGraphCard
         compareEnd,
         this._formatTotal,
         false,
-        yAxisFractionDigits
+        yAxisFractionDigits,
+        this._getSeriesArea
       );
 
       const selected = legendData
@@ -311,6 +320,9 @@ export class HuiEnergyDevicesDetailGraphCard
     return getStatIdFromId(id);
   }
 
+  private _getSeriesArea = (seriesId: string): string | undefined =>
+    computeEnergyStatisticArea(this._registries, getStatIdFromId(seriesId));
+
   static styles = css`
     .card-header {
       padding-bottom: 0;

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

@@ -17,6 +17,7 @@ import "../../../../components/chart/ha-chart-tooltip-marker";
 import {
   formattersContext,
   internationalizationContext,
+  registriesContext,
   statesContext,
   uiContext,
 } from "../../../../data/context";
@@ -24,6 +25,7 @@ import type { EnergyData } from "../../../../data/energy";
 import {
   computeConsumptionData,
   computeEnergyDeviceLabels,
+  computeEnergyStatisticArea,
   getSummedData,
   validateEnergyCollectionKey,
 } from "../../../../data/energy";
@@ -38,6 +40,7 @@ import type {
   HomeAssistant,
   HomeAssistantFormatters,
   HomeAssistantInternationalization,
+  HomeAssistantRegistries,
   HomeAssistantUI,
 } from "../../../../types";
 import type { LovelaceCard } from "../../types";
@@ -110,6 +113,9 @@ export class HuiEnergyDevicesGraphCard
   @consume({ context: formattersContext, subscribe: true })
   private _formatters!: HomeAssistantFormatters;
 
+  @consume({ context: registriesContext, subscribe: true })
+  private _registries!: HomeAssistantRegistries;
+
   @consume({ context: uiContext, subscribe: true })
   private _ui!: HomeAssistantUI;
 
@@ -212,12 +218,22 @@ export class HuiEnergyDevicesGraphCard
 
   private _renderTooltip = (params: any) => {
     const deviceName = this._getDeviceName(params.name);
+    const area = computeEnergyStatisticArea(this._registries, params.name);
     const value = `${formatNumber(
       params.value[0] as number,
       this._i18n.locale,
       params.value < 0.1 ? { maximumFractionDigits: 3 } : undefined
     )} kWh ${params.percent ? `(${params.percent} %)` : ""}`;
     return html`<h4 style="text-align: center; margin: 0;">${deviceName}</h4>
+      ${
+        area
+          ? html`<div
+              style="text-align: center; color: var(--secondary-text-color);"
+            >
+              ${area}
+            </div>`
+          : nothing
+      }
       <ha-chart-tooltip-marker
         .color=${String(params.color ?? "")}
       ></ha-chart-tooltip-marker>