jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix click action for timeline chart labels (#24039)

Browse Source 
* Fix click action for timeline chart labels

* Use id in line charts
This commit is contained in:
Petar Petrov 2025-02-03 12:36:59 +02:00 committed by GitHub
parent d77bdf4ac6
commit ad561b885b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 39 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/chart/state-history-chart-line.ts
View File

@ -372,13 +372,18 @@ export class StateHistoryChartLine extends LitElement {
prevValues = datavalues; prevValues = datavalues;
}; };
const addDataSet = (nameY: string, color?: string, fill = false) => { const addDataSet = (
id: string,
nameY: string,
color?: string,
fill = false
) => {
if (!color) { if (!color) {
color = getGraphColorByIndex(colorIndex, computedStyles); color = getGraphColorByIndex(colorIndex, computedStyles);
colorIndex++; colorIndex++;
} }
data.push({ data.push({
id: nameY, id,
data: [], data: [],
type: "line", type: "line",
cursor: "default", cursor: "default",
@ -440,6 +445,7 @@ export class StateHistoryChartLine extends LitElement {
entityState.attributes.target_temp_low entityState.attributes.target_temp_low
); );
addDataSet( addDataSet(
states.entity_id + "-current_temperature",
this.showNames this.showNames
? this.hass.localize("ui.card.climate.current_temperature", { ? this.hass.localize("ui.card.climate.current_temperature", {
name: name, name: name,
@ -450,6 +456,7 @@ export class StateHistoryChartLine extends LitElement {
); );
if (hasHeat) { if (hasHeat) {
addDataSet( addDataSet(
states.entity_id + "-heating",
this.showNames this.showNames
? this.hass.localize("ui.card.climate.heating", { name: name }) ? this.hass.localize("ui.card.climate.heating", { name: name })
: this.hass.localize( : this.hass.localize(
@ -463,6 +470,7 @@ export class StateHistoryChartLine extends LitElement {
} }
if (hasCool) { if (hasCool) {
addDataSet( addDataSet(
states.entity_id + "-cooling",
this.showNames this.showNames
? this.hass.localize("ui.card.climate.cooling", { name: name }) ? this.hass.localize("ui.card.climate.cooling", { name: name })
: this.hass.localize( : this.hass.localize(
@ -477,6 +485,7 @@ export class StateHistoryChartLine extends LitElement {
if (hasTargetRange) { if (hasTargetRange) {
addDataSet( addDataSet(
states.entity_id + "-target_temperature_mode",
this.showNames this.showNames
? this.hass.localize("ui.card.climate.target_temperature_mode", { ? this.hass.localize("ui.card.climate.target_temperature_mode", {
name: name, name: name,
@ -487,6 +496,7 @@ export class StateHistoryChartLine extends LitElement {
) )
); );
addDataSet( addDataSet(
states.entity_id + "-target_temperature_mode_low",
this.showNames this.showNames
? this.hass.localize("ui.card.climate.target_temperature_mode", { ? this.hass.localize("ui.card.climate.target_temperature_mode", {
name: name, name: name,
@ -498,6 +508,7 @@ export class StateHistoryChartLine extends LitElement {
); );
} else { } else {
addDataSet( addDataSet(
states.entity_id + "-target_temperature",
this.showNames this.showNames
? this.hass.localize( ? this.hass.localize(
"ui.card.climate.target_temperature_entity", "ui.card.climate.target_temperature_entity",
@ -560,6 +571,7 @@ export class StateHistoryChartLine extends LitElement {
); );
addDataSet( addDataSet(
states.entity_id + "-target_humidity",
this.showNames this.showNames
? this.hass.localize("ui.card.humidifier.target_humidity_entity", { ? this.hass.localize("ui.card.humidifier.target_humidity_entity", {
name: name, name: name,
@ -571,6 +583,7 @@ export class StateHistoryChartLine extends LitElement {
if (hasCurrent) { if (hasCurrent) {
addDataSet( addDataSet(
states.entity_id + "-current_humidity",
this.showNames this.showNames
? this.hass.localize( ? this.hass.localize(
"ui.card.humidifier.current_humidity_entity", "ui.card.humidifier.current_humidity_entity",
@ -588,6 +601,7 @@ export class StateHistoryChartLine extends LitElement {
// If action attribute is not available, we shade the area when the device is on // If action attribute is not available, we shade the area when the device is on
if (hasHumidifying) { if (hasHumidifying) {
addDataSet( addDataSet(
states.entity_id + "-humidifying",
this.showNames this.showNames
? this.hass.localize("ui.card.humidifier.humidifying", { ? this.hass.localize("ui.card.humidifier.humidifying", {
name: name, name: name,
@ -600,6 +614,7 @@ export class StateHistoryChartLine extends LitElement {
); );
} else if (hasDrying) { } else if (hasDrying) {
addDataSet( addDataSet(
states.entity_id + "-drying",
this.showNames this.showNames
? this.hass.localize("ui.card.humidifier.drying", { ? this.hass.localize("ui.card.humidifier.drying", {
name: name, name: name,
@ -612,6 +627,7 @@ export class StateHistoryChartLine extends LitElement {
); );
} else { } else {
addDataSet( addDataSet(
states.entity_id + "-on",
this.showNames this.showNames
? this.hass.localize("ui.card.humidifier.on_entity", { ? this.hass.localize("ui.card.humidifier.on_entity", {
name: name, name: name,
@ -651,7 +667,7 @@ export class StateHistoryChartLine extends LitElement {
pushData(new Date(entityState.last_changed), series); pushData(new Date(entityState.last_changed), series);
}); });
} else { } else {
addDataSet(name); addDataSet(states.entity_id, name);
let lastValue: number; let lastValue: number;
let lastDate: Date; let lastDate: Date;

35
src/components/chart/state-history-chart-timeline.ts
View File

@ -67,7 +67,7 @@ export class StateHistoryChartTimeline extends LitElement {
.hass=${this.hass} .hass=${this.hass}
.options=${this._chartOptions} .options=${this._chartOptions}
.height=${`${this.data.length * 30 + 30}px`} .height=${`${this.data.length * 30 + 30}px`}
.data=${this._chartData} .data=${this._chartData as ECOption["series"]}
@chart-click=${this._handleChartClick} @chart-click=${this._handleChartClick}
></ha-chart-base> ></ha-chart-base>
`; `;
@ -129,11 +129,11 @@ export class StateHistoryChartTimeline extends LitElement {
private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> = private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
(params: TooltipPositionCallbackParams) => { (params: TooltipPositionCallbackParams) => {
const { value, name, marker } = Array.isArray(params) const { value, name, marker, seriesName } = Array.isArray(params)
? params[0] ? params[0]
: params; : params;
const title = value![0] const title = seriesName
? `<h4 style="text-align: center; margin: 0;">${value![0]}</h4>` ? `<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
: ""; : "";
const durationInMs = value![2] - value![1]; const durationInMs = value![2] - value![1];
const formattedDuration = `${this.hass.localize( const formattedDuration = `${this.hass.localize(
@ -234,11 +234,15 @@ export class StateHistoryChartTimeline extends LitElement {
width: labelWidth - labelMargin, width: labelWidth - labelMargin,
overflow: "truncate", overflow: "truncate",
margin: labelMargin, margin: labelMargin,
formatter: (label: string) => { formatter: (id: string) => {
const width = Math.min( const label = this._chartData.find((d) => d.id === id)
measureTextWidth(label, 12) + labelMargin, ?.name as string;
maxInternalLabelWidth const width = label
); ? Math.min(
measureTextWidth(label, 12) + labelMargin,
maxInternalLabelWidth
)
: 0;
if (width > this._yWidth) { if (width > this._yWidth) {
this._yWidth = width; this._yWidth = width;
fireEvent(this, "y-width-changed", { fireEvent(this, "y-width-changed", {
@ -284,7 +288,7 @@ export class StateHistoryChartTimeline extends LitElement {
let locState: string | null = null; let locState: string | null = null;
let prevLastChanged = startTime; let prevLastChanged = startTime;
const entityDisplay: string = this.showNames const entityDisplay: string = this.showNames
? names[stateInfo.entity_id] || stateInfo.name ? names[stateInfo.entity_id] || stateInfo.name || stateInfo.entity_id
: ""; : "";
const dataRow: unknown[] = []; const dataRow: unknown[] = [];
@ -313,7 +317,7 @@ export class StateHistoryChartTimeline extends LitElement {
); );
dataRow.push({ dataRow.push({
value: [ value: [
entityDisplay, stateInfo.entity_id,
prevLastChanged, prevLastChanged,
newLastChanged, newLastChanged,
locState, locState,
@ -339,7 +343,7 @@ export class StateHistoryChartTimeline extends LitElement {
); );
dataRow.push({ dataRow.push({
value: [ value: [
entityDisplay, stateInfo.entity_id,
prevLastChanged, prevLastChanged,
endTime, endTime,
locState, locState,
@ -352,9 +356,10 @@ export class StateHistoryChartTimeline extends LitElement {
}); });
} }
datasets.push({ datasets.push({
id: stateInfo.entity_id,
data: dataRow, data: dataRow,
name: entityDisplay, name: entityDisplay,
dimensions: ["index", "start", "end", "name", "color", "textColor"], dimensions: ["id", "start", "end", "name", "color", "textColor"],
type: "custom", type: "custom",
encode: { encode: {
x: [1, 2], x: [1, 2],
@ -370,10 +375,10 @@ export class StateHistoryChartTimeline extends LitElement {
private _handleChartClick(e: CustomEvent<ECElementEvent>): void { private _handleChartClick(e: CustomEvent<ECElementEvent>): void {
if (e.detail.targetType === "axisLabel") { if (e.detail.targetType === "axisLabel") {
const dataset = this.data[e.detail.dataIndex]; const dataset = this._chartData[e.detail.dataIndex];
if (dataset) { if (dataset) {
fireEvent(this, "hass-more-info", { fireEvent(this, "hass-more-info", {
entityId: dataset.entity_id, entityId: dataset.id as string,
}); });
} }
} }