mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
State History Charts - Handle click to chart to open More Info for the clicked entity (#18036)
This commit is contained in:
parent
98bd08c9dd
commit
dd6a69ea03
@ -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);
|
||||
|
@ -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,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -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> `;
|
||||
|
@ -99,6 +99,7 @@ export class MoreInfoHistory extends LitElement {
|
||||
.historyData=${this._stateHistory}
|
||||
.isLoadingData=${!this._stateHistory}
|
||||
.showNames=${false}
|
||||
.clickForMoreInfo=${false}
|
||||
></state-history-charts>`}`
|
||||
: ""}`;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user