diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index 898b5ec34f..42450c8bb8 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -6,7 +6,11 @@ import { mdiRestart } from "@mdi/js"; import type { EChartsType } from "echarts/core"; import type { DataZoomComponentOption } from "echarts/components"; import { ResizeController } from "@lit-labs/observers/resize-controller"; -import type { XAXisOption, YAXisOption } from "echarts/types/dist/shared"; +import type { + ECElementEvent, + XAXisOption, + YAXisOption, +} from "echarts/types/dist/shared"; import { consume } from "@lit-labs/context"; import { fireEvent } from "../../common/dom/fire_event"; import type { HomeAssistant } from "../../types"; @@ -197,6 +201,15 @@ export class HaChartBase extends LitElement { const { start, end } = e.batch?.[0] ?? e; this._isZoomed = start !== 0 || end !== 100; }); + this.chart.on("click", (e: ECElementEvent) => { + fireEvent(this, "chart-click", e); + }); + this.chart.on("mousemove", (e: ECElementEvent) => { + if (e.componentType === "series" && e.componentSubType === "custom") { + // custom series do not support cursor style so we need to set it manually + this.chart?.getZr()?.setCursorStyle("default"); + } + }); this.chart.setOption({ ...this._createOptions(), series: this.data }); } finally { this._loading = false; @@ -318,5 +331,6 @@ declare global { interface HASSDomEvents { "dataset-hidden": { name: string }; "dataset-unhidden": { name: string }; + "chart-click": ECElementEvent; } } diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index 3e7c42ec00..9ba683cdf4 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -316,6 +316,7 @@ export class StateHistoryChartLine extends LitElement { id: nameY, data: [], type: "line", + cursor: "default", name: nameY, color, symbol: "circle", diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts index 1612c0d03b..910b4cd8d3 100644 --- a/src/components/chart/state-history-chart-timeline.ts +++ b/src/components/chart/state-history-chart-timeline.ts @@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators"; import type { CustomSeriesOption, CustomSeriesRenderItem, + ECElementEvent, TooltipFormatterCallback, TooltipPositionCallbackParams, } from "echarts/types/dist/shared"; @@ -67,6 +68,7 @@ export class StateHistoryChartTimeline extends LitElement { .options=${this._chartOptions} .height=${`${this.data.length * 30 + 30}px`} .data=${this._chartData} + @chart-click=${this._handleChartClick} > `; } @@ -215,6 +217,7 @@ export class StateHistoryChartTimeline extends LitElement { type: "category", inverse: true, position: rtl ? "right" : "left", + triggerEvent: true, axisTick: { show: false, }, @@ -359,6 +362,17 @@ export class StateHistoryChartTimeline extends LitElement { this._chartData = datasets; } + private _handleChartClick(e: CustomEvent): void { + if (e.detail.targetType === "axisLabel") { + const dataset = this.data[e.detail.dataIndex]; + if (dataset) { + fireEvent(this, "hass-more-info", { + entityId: dataset.entity_id, + }); + } + } + } + static styles = css` ha-chart-base { --chart-max-height: none; diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index c04e60dc7a..6c54e511d9 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -424,6 +424,7 @@ export class StatisticsChart extends LitElement { const series: LineSeriesOption | BarSeriesOption = { id: `${statistic_id}-${type}`, type: this.chartType, + cursor: "default", data: [], name: name ? `${name} (${this.hass.localize( diff --git a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts index 9f130c9829..943a3b6457 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts @@ -335,6 +335,7 @@ export class HuiEnergyDevicesDetailGraphCard }); const dataset: BarSeriesOption = { type: "bar", + cursor: "default", id: compare ? "compare-untracked" : "untracked", name: this.hass.localize( "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption" @@ -417,6 +418,7 @@ export class HuiEnergyDevicesDetailGraphCard data.push({ type: "bar", + cursor: "default", id: compare ? `compare-${source.stat_consumption}` : source.stat_consumption, 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 b421fa96d2..e12f747c90 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 @@ -5,6 +5,7 @@ import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import memoizeOne from "memoize-one"; import type { BarSeriesOption } from "echarts/charts"; +import type { ECElementEvent } from "echarts/types/dist/shared"; import { getGraphColorByIndex } from "../../../../common/color/colors"; import { formatNumber, @@ -16,6 +17,7 @@ import { getEnergyDataCollection } from "../../../../data/energy"; import { calculateStatisticSumGrowth, getStatisticLabel, + isExternalStatistic, } from "../../../../data/recorder"; import { SubscribeMixin } from "../../../../mixins/subscribe-mixin"; import type { HomeAssistant } from "../../../../types"; @@ -24,6 +26,7 @@ import type { EnergyDevicesGraphCardConfig } from "../types"; import { hasConfigChanged } from "../../common/has-changed"; import type { ECOption } from "../../../../resources/echarts"; import "../../../../components/ha-card"; +import { fireEvent } from "../../../../common/dom/fire_event"; @customElement("hui-energy-devices-graph-card") export class HuiEnergyDevicesGraphCard @@ -87,6 +90,7 @@ export class HuiEnergyDevicesGraphCard .data=${this._chartData} .options=${this._createOptions(this.hass.themes?.darkMode)} .height=${`${(this._chartData[0]?.data?.length || 0) * 28 + 50}px`} + @chart-click=${this._handleChartClick} > @@ -117,6 +121,7 @@ export class HuiEnergyDevicesGraphCard yAxis: { type: "category", inverse: true, + triggerEvent: true, axisLabel: { formatter: this._getDeviceName.bind(this), overflow: "truncate", @@ -167,6 +172,7 @@ export class HuiEnergyDevicesGraphCard }, data: chartData, barWidth: compareData ? 10 : 20, + cursor: "default", }, ]; @@ -181,6 +187,7 @@ export class HuiEnergyDevicesGraphCard }, data: chartDataCompare, barWidth: 10, + cursor: "default", }); } @@ -229,6 +236,18 @@ export class HuiEnergyDevicesGraphCard await this.updateComplete; } + private _handleChartClick(e: CustomEvent): void { + if ( + e.detail.targetType === "axisLabel" && + e.detail.value && + !isExternalStatistic(e.detail.value as string) + ) { + fireEvent(this, "hass-more-info", { + entityId: e.detail.value as string, + }); + } + } + static styles = css` .card-header { padding-bottom: 0; diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts index 5774f16ec1..0c19285d70 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts @@ -248,6 +248,7 @@ export class HuiEnergyGasGraphCard data.push({ type: "bar", + cursor: "default", id: compare ? "compare-" + source.stat_energy_from : source.stat_energy_from, diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts index 13a37565da..e679022a1b 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts @@ -267,6 +267,7 @@ export class HuiEnergySolarGraphCard data.push({ type: "bar", + cursor: "default", id: compare ? "compare-" + source.stat_energy_from : source.stat_energy_from, 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 ede8804f64..74fc5dc83f 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 @@ -502,6 +502,7 @@ export class HuiEnergyUsageGraphCard data.push({ id: compare ? "compare-" + statId : statId, type: "bar", + cursor: "default", name: type in labels ? labels[type] diff --git a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts index 731e9793e5..919bd06ed1 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts @@ -246,6 +246,7 @@ export class HuiEnergyWaterGraphCard data.push({ type: "bar", + cursor: "default", id: compare ? "compare-" + source.stat_energy_from : source.stat_energy_from,