Open more-info on label click in echarts (#23921)

* Open more-info on label click in echarts

* check isExternalStatistic in energy devices click

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;
   }
 }

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",

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}
       ></ha-chart-base>
     `;
   }
@@ -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<ECElementEvent>): 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;

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(

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,

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}
           ></ha-chart-base>
         </div>
       </ha-card>
@@ -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<ECElementEvent>): 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;

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,

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,

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]

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,