Final energy tweaks (#9694)

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

@@ -4,6 +4,7 @@ import {
   ChartOptions,
   ParsedDataType,
 } from "chart.js";
+import { getRelativePosition } from "chart.js/helpers";
 import { addHours } from "date-fns";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -11,6 +12,7 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { getColorByIndex } from "../../../../common/color/colors";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import {
   formatNumber,
@@ -120,6 +122,18 @@ export class HuiEnergyDevicesGraphCard
       },
       // @ts-expect-error
       locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        const chart = e.chart;
+        const canvasPosition = getRelativePosition(e, chart);
+
+        const index = Math.abs(
+          chart.scales.y.getValueForPixel(canvasPosition.y)
+        );
+        fireEvent(this, "hass-more-info", {
+          // @ts-ignore
+          entityId: this._chartData?.datasets[0]?.data[index]?.entity_id,
+        });
+      },
     })
   );
 
@@ -162,19 +176,13 @@ export class HuiEnergyDevicesGraphCard
       },
     ];
 
-    for (let idx = 0; idx < energyData.prefs.device_consumption.length; idx++) {
-      const device = energyData.prefs.device_consumption[idx];
+    energyData.prefs.device_consumption.forEach((device, idx) => {
       const entity = this.hass.states[device.stat_consumption];
       const label = entity ? computeStateName(entity) : device.stat_consumption;
 
-      const color = getColorByIndex(idx);
-
-      borderColor.push(color);
-      backgroundColor.push(color + "7F");
-
       const value =
-        device.stat_consumption in this._data
-          ? calculateStatisticSumGrowth(this._data[device.stat_consumption]) ||
+        device.stat_consumption in this._data!
+          ? calculateStatisticSumGrowth(this._data![device.stat_consumption]) ||
             0
           : 0;
 
@@ -182,11 +190,20 @@ export class HuiEnergyDevicesGraphCard
         // @ts-expect-error
         y: label,
         x: value,
+        entity_id: device.stat_consumption,
+        idx,
       });
-    }
+    });
 
     data.sort((a, b) => b.x - a.x);
 
+    data.forEach((d: any) => {
+      const color = getColorByIndex(d.idx);
+
+      borderColor.push(color);
+      backgroundColor.push(color + "7F");
+    });
+
     this._chartData = {
       datasets,
     };

src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts

@@ -88,10 +88,10 @@ class HuiEnergySolarGaugeCard
       <ha-card>
         <ha-svg-icon id="info" .path=${mdiInformation}></ha-svg-icon>
         <paper-tooltip animation-delay="0" for="info" position="left">
-          This card represents how much of the solar energy was not used by your
-          home and was returned to the grid. If you frequently return a lot, try
-          to conserve this energy by installing a battery or buying an electric
-          car to charge.
+          This card represents how much of the solar energy was used by your
+          home and was not returned to the grid. If you frequently produce more
+          than you consume, try to conserve this energy by installing a battery
+          or buying an electric car to charge.
         </paper-tooltip>
         ${value !== undefined
           ? html`<ha-gauge

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

@@ -271,6 +271,9 @@ export class HuiEnergySolarGraphCard
             forecastsData = forecasts![configEntryId]?.wh_hours;
             return;
           }
+          if (!forecasts![configEntryId]) {
+            return;
+          }
           Object.entries(forecasts![configEntryId].wh_hours).forEach(
             ([date, value]) => {
               if (date in forecastsData!) {

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

@@ -352,6 +352,7 @@ export class HuiEnergyUsageGraphCard
               : entity
               ? computeStateName(entity)
               : statId,
+          order: type === "used_solar" ? 0 : idx + 1,
           borderColor,
           backgroundColor: hexBlend(borderColor, backgroundColor, 50),
           stack: "stack",