State History Charts - Handle click to chart to open More Info for the clicked entity (#18036)

src/components/chart/state-history-chart-line.ts

@@ -35,6 +35,8 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ type: Boolean }) public showNames = true;
 
+  @property({ type: Boolean }) public clickForMoreInfo = true;
+
   @property({ attribute: false }) public startTime!: Date;
 
   @property({ attribute: false }) public endTime!: Date;
@@ -45,6 +47,8 @@ export class StateHistoryChartLine extends LitElement {
 
   @state() private _chartData?: ChartData<"line">;
 
+  @state() private _entityIds: string[] = [];
+
   @state() private _chartOptions?: ChartOptions;
 
   @state() private _yWidth = 0;
@@ -171,6 +175,25 @@ export class StateHistoryChartLine extends LitElement {
         },
         // @ts-expect-error
         locale: numberFormatToLocale(this.hass.locale),
+        onClick: (e: any) => {
+          if (!this.clickForMoreInfo) {
+            return;
+          }
+
+          const points = e.chart.getElementsAtEventForMode(
+            e,
+            "nearest",
+            { intersect: true },
+            true
+          );
+
+          if (points.length) {
+            const firstPoint = points[0];
+            fireEvent(this, "hass-more-info", {
+              entityId: this._entityIds[firstPoint.datasetIndex],
+            });
+          }
+        },
       };
     }
     if (
@@ -191,6 +214,7 @@ export class StateHistoryChartLine extends LitElement {
     const computedStyles = getComputedStyle(this);
     const entityStates = this.data;
     const datasets: ChartDataset<"line">[] = [];
+    const entityIds: string[] = [];
     if (entityStates.length === 0) {
       return;
     }
@@ -242,6 +266,7 @@ export class StateHistoryChartLine extends LitElement {
           pointRadius: 0,
           data: [],
         });
+        entityIds.push(states.entity_id);
       };
 
       if (
@@ -493,6 +518,7 @@ export class StateHistoryChartLine extends LitElement {
     this._chartData = {
       datasets,
     };
+    this._entityIds = entityIds;
   }
 }
 customElements.define("state-history-chart-line", StateHistoryChartLine);

src/components/chart/state-history-chart-timeline.ts

@@ -1,4 +1,5 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
+import { getRelativePosition } from "chart.js/helpers";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -32,6 +33,8 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ type: Boolean }) public showNames = true;
 
+  @property({ type: Boolean }) public clickForMoreInfo = true;
+
   @property({ type: Boolean }) public chunked = false;
 
   @property({ attribute: false }) public startTime!: Date;
@@ -220,6 +223,22 @@ export class StateHistoryChartTimeline extends LitElement {
       },
       // @ts-expect-error
       locale: numberFormatToLocale(this.hass.locale),
+      onClick: (e: any) => {
+        if (!this.clickForMoreInfo) {
+          return;
+        }
+
+        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[index]?.label,
+        });
+      },
     };
   }
 

src/components/chart/state-history-charts.ts

@@ -69,6 +69,8 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean }) public showNames = true;
 
+  @property({ type: Boolean }) public clickForMoreInfo = true;
+
   @property({ type: Boolean }) public isLoadingData = false;
 
   @state() private _computedStartTime!: Date;
@@ -181,6 +183,7 @@ export class StateHistoryCharts extends LitElement {
           .paddingYAxis=${this._maxYWidth}
           .names=${this.names}
           .chartIndex=${index}
+          .clickForMoreInfo=${this.clickForMoreInfo}
           @y-width-changed=${this._yWidthChanged}
         ></state-history-chart-line>
       </div> `;
@@ -197,6 +200,7 @@ export class StateHistoryCharts extends LitElement {
         .chunked=${this.virtualize}
         .paddingYAxis=${this._maxYWidth}
         .chartIndex=${index}
+        .clickForMoreInfo=${this.clickForMoreInfo}
         @y-width-changed=${this._yWidthChanged}
       ></state-history-chart-timeline>
     </div> `;

src/dialogs/more-info/ha-more-info-history.ts

@@ -99,6 +99,7 @@ export class MoreInfoHistory extends LitElement {
                 .historyData=${this._stateHistory}
                 .isLoadingData=${!this._stateHistory}
                 .showNames=${false}
+                .clickForMoreInfo=${false}
               ></state-history-charts>`}`
       : ""}`;
   }