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

Dynamically reorder energy devices (echarts) (#23966)

Browse Source 
* Dynamically reorder energy devices (echarts)

* fix initial sorting in hui-energy-devices-detail-graph-card

* fix dynamic reordering in devices detail
This commit is contained in:
Petar Petrov 2025-01-30 18:43:06 +02:00 committed by Bram Kragten
parent 52e9bc3213
commit 6aab60cf45
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts
View File

@ -334,10 +334,12 @@ export class HuiEnergyDevicesDetailGraphCard
} }
untrackedConsumption.push(dataPoint); untrackedConsumption.push(dataPoint);
}); });
// random id to always add untracked at the end
const order = Date.now();
const dataset: BarSeriesOption = { const dataset: BarSeriesOption = {
type: "bar", type: "bar",
cursor: "default", cursor: "default",
id: compare ? "compare-untracked" : "untracked", id: compare ? `compare-untracked-${order}` : `untracked-${order}`,
name: this.hass.localize( name: this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption" "ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
), ),
@ -420,9 +422,10 @@ export class HuiEnergyDevicesDetailGraphCard
data.push({ data.push({
type: "bar", type: "bar",
cursor: "default", cursor: "default",
// add order to id, otherwise echarts refuses to reorder them
id: compare id: compare
? `compare-${source.stat_consumption}` ? `compare-${source.stat_consumption}-${order}`
: source.stat_consumption, : `${source.stat_consumption}-${order}`,
name: name:
source.name || source.name ||
getStatisticLabel( getStatisticLabel(
@ -439,7 +442,9 @@ export class HuiEnergyDevicesDetailGraphCard
stack: compare ? "devicesCompare" : "devices", stack: compare ? "devicesCompare" : "devices",
}); });
}); });
return data; return sorted_devices.map(
(device) => data.find((d) => (d.id as string).includes(device))!
);
} }
static styles = css` static styles = css`

9
src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts
View File

@ -88,7 +88,7 @@ export class HuiEnergyDevicesGraphCard
<ha-chart-base <ha-chart-base
.hass=${this.hass} .hass=${this.hass}
.data=${this._chartData} .data=${this._chartData}
.options=${this._createOptions(this.hass.themes?.darkMode)} .options=${this._createOptions(this._chartData)}
.height=${`${(this._chartData[0]?.data?.length || 0) * 28 + 50}px`} .height=${`${(this._chartData[0]?.data?.length || 0) * 28 + 50}px`}
@chart-click=${this._handleChartClick} @chart-click=${this._handleChartClick}
></ha-chart-base> ></ha-chart-base>
@ -110,18 +110,17 @@ export class HuiEnergyDevicesGraphCard
} }
private _createOptions = memoizeOne( private _createOptions = memoizeOne(
(darkMode: boolean): ECOption => ({ (data: BarSeriesOption[]): ECOption => ({
xAxis: { xAxis: {
type: "value", type: "value",
name: "kWh", name: "kWh",
splitLine: {
lineStyle: darkMode ? { opacity: 0.15 } : {},
},
}, },
yAxis: { yAxis: {
type: "category", type: "category",
inverse: true, inverse: true,
triggerEvent: true, triggerEvent: true,
// take order from data
data: data[0]?.data?.map((d: any) => d.value[1]),
axisLabel: { axisLabel: {
formatter: this._getDeviceName.bind(this), formatter: this._getDeviceName.bind(this),
overflow: "truncate", overflow: "truncate",