Merge a5a3a54b93 into cff54b73a4

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

@@ -38,6 +38,7 @@ import { LovelaceCard } from "../../types";
 import { EnergyDevicesDetailGraphCardConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
 import { getCommonOptions } from "./common/energy-chart-options";
+import { fireEvent } from "../../../../common/dom/fire_event";
 
 const UNIT = "kWh";
 
@@ -56,6 +57,8 @@ export class HuiEnergyDevicesDetailGraphCard
 
   @state() private _data?: EnergyData;
 
+  @state() private _devicesIds?: string[];
+
   @state() private _start = startOfToday();
 
   @state() private _end = endOfToday();
@@ -192,6 +195,18 @@ export class HuiEnergyDevicesDetailGraphCard
             },
           },
         },
+        onClick: (_event, elements, chart) => {
+          const index = elements[0]?.datasetIndex ?? -1;
+
+          if (index < 0) return;
+
+          const statisticId = this._devicesIds?.[index];
+
+          if (!statisticId) return;
+
+          fireEvent(this, "hass-more-info", { entityId: statisticId });
+          chart?.canvas?.dispatchEvent(new Event("mouseout")); // to hide tooltip
+        },
       };
       return options;
     }
@@ -279,6 +294,9 @@ export class HuiEnergyDevicesDetailGraphCard
       datasets,
     };
     this._chartDatasetExtra = datasetExtras;
+    this._devicesIds = energyData.prefs.device_consumption.map(
+      (device) => device.stat_consumption
+    );
   }
 
   private _processDataSet(

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

@@ -31,6 +31,7 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceCard } from "../../types";
 import { EnergySourcesTableCardConfig } from "../types";
 import { hasConfigChanged } from "../../common/has-changed";
+import { fireEvent } from "../../../../common/dom/fire_event";
 
 const colorPropertyMap = {
   grid_return: "--energy-grid-return-color",
@@ -225,7 +226,11 @@ export class HuiEnergySourcesTableCard
                   0;
                 totalSolarCompare += compareEnergy;
 
-                return html`<tr class="mdc-data-table__row">
+                return html`<tr
+                  class="mdc-data-table__row"
+                  @click=${this._handleMoreInfo}
+                  .entity=${source.stat_energy_from}
+                >
                   <td class="mdc-data-table__cell cell-bullet">
                     <div
                       class="bullet"
@@ -330,7 +335,11 @@ export class HuiEnergySourcesTableCard
                   0;
                 totalBatteryCompare += energyFromCompare - energyToCompare;
 
-                return html`<tr class="mdc-data-table__row">
+                return html`<tr
+                    class="mdc-data-table__row"
+                    @click=${this._handleMoreInfo}
+                    .entity=${source.stat_energy_from}
+                  >
                     <td class="mdc-data-table__cell cell-bullet">
                       <div
                         class="bullet"
@@ -381,7 +390,11 @@ export class HuiEnergySourcesTableCard
                       ? html`<td class="mdc-data-table__cell"></td>`
                       : ""}
                   </tr>
-                  <tr class="mdc-data-table__row">
+                  <tr
+                    class="mdc-data-table__row"
+                    @click=${this._handleMoreInfo}
+                    .entity=${source.stat_energy_to}
+                  >
                     <td class="mdc-data-table__cell cell-bullet">
                       <div
                         class="bullet"
@@ -508,7 +521,11 @@ export class HuiEnergySourcesTableCard
                       totalGridCostCompare += costCompare;
                     }
 
-                    return html`<tr class="mdc-data-table__row">
+                    return html`<tr
+                      class="mdc-data-table__row"
+                      @click=${this._handleMoreInfo}
+                      .entity=${flow.stat_energy_from}
+                    >
                       <td class="mdc-data-table__cell cell-bullet">
                         <div
                           class="bullet"
@@ -619,7 +636,11 @@ export class HuiEnergySourcesTableCard
                       totalGridCostCompare += costCompare;
                     }
 
-                    return html`<tr class="mdc-data-table__row">
+                    return html`<tr
+                      class="mdc-data-table__row"
+                      @click=${this._handleMoreInfo}
+                      .entity=${flow.stat_energy_to}
+                    >
                       <td class="mdc-data-table__cell cell-bullet">
                         <div
                           class="bullet"
@@ -782,7 +803,11 @@ export class HuiEnergySourcesTableCard
                   totalGasCostCompare += costCompare;
                 }
 
-                return html`<tr class="mdc-data-table__row">
+                return html`<tr
+                  class="mdc-data-table__row"
+                  @click=${this._handleMoreInfo}
+                  .entity=${source.stat_energy_from}
+                >
                   <td class="mdc-data-table__cell cell-bullet">
                     <div
                       class="bullet"
@@ -940,7 +965,11 @@ export class HuiEnergySourcesTableCard
                   totalWaterCostCompare += costCompare;
                 }
 
-                return html`<tr class="mdc-data-table__row">
+                return html`<tr
+                  class="mdc-data-table__row"
+                  @click=${this._handleMoreInfo}
+                  .entity=${source.stat_energy_from}
+                >
                   <td class="mdc-data-table__cell cell-bullet">
                     <div
                       class="bullet"
@@ -1109,6 +1138,12 @@ export class HuiEnergySourcesTableCard
     </ha-card>`;
   }
 
+  private _handleMoreInfo(ev): void {
+    fireEvent(this, "hass-more-info", {
+      entityId: ev.currentTarget?.entity,
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(dataTableStyles)}