Add clickForMoreInfo to statistics graph card (#19178)

* add clickForMoreInfo * only show more info on graphs when mouse is used * disable clickForMoreInfo already in more-info popup * check if not isExternalStatistic * Apply suggestions from code review Co-authored-by: Bram Kragten <[email protected]> --------- Co-authored-by: Bram Kragten <[email protected]>
home-assistant · Mar 5, 2024 · bf02891 · bf02891
1 parent b03f483
commit bf02891
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 0 deletions.
diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts
@@ -16,6 +16,7 @@ import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { fireEvent } from "../../common/dom/fire_event";
 import {
   formatNumber,
   numberFormatToLocale,
@@ -25,6 +26,7 @@ import {
   getDisplayUnit,
   getStatisticLabel,
   getStatisticMetadata,
+  isExternalStatistic,
   Statistics,
   statisticsHaveType,
   StatisticsMetaData,
@@ -79,6 +81,8 @@ export class StatisticsChart extends LitElement {
 
   @property({ type: Boolean }) public isLoadingData = false;
 
+  @property({ type: Boolean }) public clickForMoreInfo = true;
+
   @property() public period?: string;
 
   @state() private _chartData: ChartData = { datasets: [] };
@@ -273,6 +277,33 @@ export class StatisticsChart extends LitElement {
       },
       // @ts-expect-error
       locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        if (
+          !this.clickForMoreInfo ||
+          !(e.native instanceof MouseEvent) ||
+          (e.native instanceof PointerEvent && e.native.pointerType !== "mouse")
+        ) {
+          return;
+        }
+
+        const chart = e.chart;
+
+        const points = chart.getElementsAtEventForMode(
+          e,
+          "nearest",
+          { intersect: true },
+          true
+        );
+
+        if (points.length) {
+          const firstPoint = points[0];
+          const statisticId = this._statisticIds[firstPoint.datasetIndex];
+          if (!isExternalStatistic(statisticId)) {
+            fireEvent(this, "hass-more-info", { entityId: statisticId });
+            chart.canvas.dispatchEvent(new Event("mouseout")); // to hide tooltip
+          }
+        }
+      },
     };
   }
 

diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts
@@ -93,6 +93,7 @@ export class MoreInfoHistory extends LitElement {
                   .names=${this._statNames}
                   hideLegend
                   .showNames=${false}
+                  .clickForMoreInfo=${false}
                 ></statistics-chart>`
               : html`<state-history-charts
                   up-to-now