diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts index 372f61e60c..4451fa0468 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts +++ b/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, }; diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts index 3b3fca3bef..1ec5343d22 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-consumed-gauge-card.ts @@ -88,10 +88,10 @@ class HuiEnergySolarGaugeCard - 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. ${value !== undefined ? html` { if (date in forecastsData!) { diff --git a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts index ca64a24d6e..a8e188bed5 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-usage-graph-card.ts +++ b/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",