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

This commit is contained in:
K3A 2023-09-26 23:19:11 +02:00 committed by GitHub
parent 98bd08c9dd
commit dd6a69ea03
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 50 additions and 0 deletions

View File

@ -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);

View File

@ -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,
});
},
};
}

View File

@ -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> `;

View File

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