jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46: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 GitHub
parent a29544c1e6
commit 9fb1e1d2ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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);
});
// random id to always add untracked at the end
const order = Date.now();
const dataset: BarSeriesOption = {
type: "bar",
cursor: "default",
id: compare ? "compare-untracked" : "untracked",
id: compare ? `compare-untracked-${order}` : `untracked-${order}`,
name: this.hass.localize(
"ui.panel.lovelace.cards.energy.energy_devices_detail_graph.untracked_consumption"
),
@ -420,9 +422,10 @@ export class HuiEnergyDevicesDetailGraphCard
data.push({
type: "bar",
cursor: "default",
// add order to id, otherwise echarts refuses to reorder them
id: compare
? `compare-${source.stat_consumption}`
: source.stat_consumption,
? `compare-${source.stat_consumption}-${order}`
: `${source.stat_consumption}-${order}`,
name:
source.name ||
getStatisticLabel(
@ -439,7 +442,9 @@ export class HuiEnergyDevicesDetailGraphCard
stack: compare ? "devicesCompare" : "devices",
});
});
return data;
return sorted_devices.map(
(device) => data.find((d) => (d.id as string).includes(device))!
);
}
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
.hass=${this.hass}
.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`}
@chart-click=${this._handleChartClick}
></ha-chart-base>
@ -110,18 +110,17 @@ export class HuiEnergyDevicesGraphCard
}
private _createOptions = memoizeOne(
(darkMode: boolean): ECOption => ({
(data: BarSeriesOption[]): ECOption => ({
xAxis: {
type: "value",
name: "kWh",
splitLine: {
lineStyle: darkMode ? { opacity: 0.15 } : {},
},
},
yAxis: {
type: "category",
inverse: true,
triggerEvent: true,
// take order from data
data: data[0]?.data?.map((d: any) => d.value[1]),
axisLabel: {
formatter: this._getDeviceName.bind(this),
overflow: "truncate",