From af35b154003aa99a1be7bbe306e99d21c7708a2c Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Mon, 3 Feb 2025 12:36:59 +0200 Subject: [PATCH] Fix click action for timeline chart labels (#24039) * Fix click action for timeline chart labels * Use id in line charts --- .../chart/state-history-chart-line.ts | 22 ++++++++++-- .../chart/state-history-chart-timeline.ts | 35 +++++++++++-------- 2 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/components/chart/state-history-chart-line.ts b/src/components/chart/state-history-chart-line.ts index ae721aad83..de7f127ddf 100644 --- a/src/components/chart/state-history-chart-line.ts +++ b/src/components/chart/state-history-chart-line.ts @@ -372,13 +372,18 @@ export class StateHistoryChartLine extends LitElement { prevValues = datavalues; }; - const addDataSet = (nameY: string, color?: string, fill = false) => { + const addDataSet = ( + id: string, + nameY: string, + color?: string, + fill = false + ) => { if (!color) { color = getGraphColorByIndex(colorIndex, computedStyles); colorIndex++; } data.push({ - id: nameY, + id, data: [], type: "line", cursor: "default", @@ -440,6 +445,7 @@ export class StateHistoryChartLine extends LitElement { entityState.attributes.target_temp_low ); addDataSet( + states.entity_id + "-current_temperature", this.showNames ? this.hass.localize("ui.card.climate.current_temperature", { name: name, @@ -450,6 +456,7 @@ export class StateHistoryChartLine extends LitElement { ); if (hasHeat) { addDataSet( + states.entity_id + "-heating", this.showNames ? this.hass.localize("ui.card.climate.heating", { name: name }) : this.hass.localize( @@ -463,6 +470,7 @@ export class StateHistoryChartLine extends LitElement { } if (hasCool) { addDataSet( + states.entity_id + "-cooling", this.showNames ? this.hass.localize("ui.card.climate.cooling", { name: name }) : this.hass.localize( @@ -477,6 +485,7 @@ export class StateHistoryChartLine extends LitElement { if (hasTargetRange) { addDataSet( + states.entity_id + "-target_temperature_mode", this.showNames ? this.hass.localize("ui.card.climate.target_temperature_mode", { name: name, @@ -487,6 +496,7 @@ export class StateHistoryChartLine extends LitElement { ) ); addDataSet( + states.entity_id + "-target_temperature_mode_low", this.showNames ? this.hass.localize("ui.card.climate.target_temperature_mode", { name: name, @@ -498,6 +508,7 @@ export class StateHistoryChartLine extends LitElement { ); } else { addDataSet( + states.entity_id + "-target_temperature", this.showNames ? this.hass.localize( "ui.card.climate.target_temperature_entity", @@ -560,6 +571,7 @@ export class StateHistoryChartLine extends LitElement { ); addDataSet( + states.entity_id + "-target_humidity", this.showNames ? this.hass.localize("ui.card.humidifier.target_humidity_entity", { name: name, @@ -571,6 +583,7 @@ export class StateHistoryChartLine extends LitElement { if (hasCurrent) { addDataSet( + states.entity_id + "-current_humidity", this.showNames ? this.hass.localize( "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 (hasHumidifying) { addDataSet( + states.entity_id + "-humidifying", this.showNames ? this.hass.localize("ui.card.humidifier.humidifying", { name: name, @@ -600,6 +614,7 @@ export class StateHistoryChartLine extends LitElement { ); } else if (hasDrying) { addDataSet( + states.entity_id + "-drying", this.showNames ? this.hass.localize("ui.card.humidifier.drying", { name: name, @@ -612,6 +627,7 @@ export class StateHistoryChartLine extends LitElement { ); } else { addDataSet( + states.entity_id + "-on", this.showNames ? this.hass.localize("ui.card.humidifier.on_entity", { name: name, @@ -651,7 +667,7 @@ export class StateHistoryChartLine extends LitElement { pushData(new Date(entityState.last_changed), series); }); } else { - addDataSet(name); + addDataSet(states.entity_id, name); let lastValue: number; let lastDate: Date; diff --git a/src/components/chart/state-history-chart-timeline.ts b/src/components/chart/state-history-chart-timeline.ts index cfd3b6534a..4069473b62 100644 --- a/src/components/chart/state-history-chart-timeline.ts +++ b/src/components/chart/state-history-chart-timeline.ts @@ -67,7 +67,7 @@ export class StateHistoryChartTimeline extends LitElement { .hass=${this.hass} .options=${this._chartOptions} .height=${`${this.data.length * 30 + 30}px`} - .data=${this._chartData} + .data=${this._chartData as ECOption["series"]} @chart-click=${this._handleChartClick} > `; @@ -129,11 +129,11 @@ export class StateHistoryChartTimeline extends LitElement { private _renderTooltip: TooltipFormatterCallback = (params: TooltipPositionCallbackParams) => { - const { value, name, marker } = Array.isArray(params) + const { value, name, marker, seriesName } = Array.isArray(params) ? params[0] : params; - const title = value![0] - ? `

${value![0]}

` + const title = seriesName + ? `

${seriesName}

` : ""; const durationInMs = value![2] - value![1]; const formattedDuration = `${this.hass.localize( @@ -234,11 +234,15 @@ export class StateHistoryChartTimeline extends LitElement { width: labelWidth - labelMargin, overflow: "truncate", margin: labelMargin, - formatter: (label: string) => { - const width = Math.min( - measureTextWidth(label, 12) + labelMargin, - maxInternalLabelWidth - ); + formatter: (id: string) => { + const label = this._chartData.find((d) => d.id === id) + ?.name as string; + const width = label + ? Math.min( + measureTextWidth(label, 12) + labelMargin, + maxInternalLabelWidth + ) + : 0; if (width > this._yWidth) { this._yWidth = width; fireEvent(this, "y-width-changed", { @@ -284,7 +288,7 @@ export class StateHistoryChartTimeline extends LitElement { let locState: string | null = null; let prevLastChanged = startTime; const entityDisplay: string = this.showNames - ? names[stateInfo.entity_id] || stateInfo.name + ? names[stateInfo.entity_id] || stateInfo.name || stateInfo.entity_id : ""; const dataRow: unknown[] = []; @@ -313,7 +317,7 @@ export class StateHistoryChartTimeline extends LitElement { ); dataRow.push({ value: [ - entityDisplay, + stateInfo.entity_id, prevLastChanged, newLastChanged, locState, @@ -339,7 +343,7 @@ export class StateHistoryChartTimeline extends LitElement { ); dataRow.push({ value: [ - entityDisplay, + stateInfo.entity_id, prevLastChanged, endTime, locState, @@ -352,9 +356,10 @@ export class StateHistoryChartTimeline extends LitElement { }); } datasets.push({ + id: stateInfo.entity_id, data: dataRow, name: entityDisplay, - dimensions: ["index", "start", "end", "name", "color", "textColor"], + dimensions: ["id", "start", "end", "name", "color", "textColor"], type: "custom", encode: { x: [1, 2], @@ -370,10 +375,10 @@ export class StateHistoryChartTimeline extends LitElement { private _handleChartClick(e: CustomEvent): void { if (e.detail.targetType === "axisLabel") { - const dataset = this.data[e.detail.dataIndex]; + const dataset = this._chartData[e.detail.dataIndex]; if (dataset) { fireEvent(this, "hass-more-info", { - entityId: dataset.entity_id, + entityId: dataset.id as string, }); } }