Support max_devices for energy-devices-detail-graph (#19936)

* Support max_devices for energy-devices-detail-graph

* responsive ui editor
This commit is contained in:
karwosts 2024-03-04 09:02:32 -05:00 committed by GitHub
parent 05c1328ca7
commit 19d50b9c92
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -96,7 +96,10 @@ export class HuiEnergyDevicesDetailGraphCard
}
protected willUpdate(changedProps: PropertyValues) {
if (changedProps.has("_hiddenStats") && this._data) {
if (
(changedProps.has("_hiddenStats") || changedProps.has("_config")) &&
this._data
) {
this._processStatistics();
}
}
@ -217,17 +220,17 @@ export class HuiEnergyDevicesDetailGraphCard
const datasets: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
const datasetExtras: ChartDatasetExtra[] = [];
datasets.push(
...this._processDataSet(
const { data: processedData, dataExtras: processedDataExtras } =
this._processDataSet(
data,
energyData.statsMetadata,
energyData.prefs.device_consumption,
sorted_devices
)
);
);
const items = datasets.length;
datasetExtras.push(...Array<ChartDatasetExtra>(items).fill({}));
datasets.push(...processedData);
datasetExtras.push(...processedDataExtras);
if (compareData) {
// Add empty dataset to align the bars
@ -247,18 +250,19 @@ export class HuiEnergyDevicesDetailGraphCard
show_legend: false,
});
datasets.push(
...this._processDataSet(
compareData,
energyData.statsMetadata,
energyData.prefs.device_consumption,
sorted_devices,
true
)
);
datasetExtras.push(
...Array<ChartDatasetExtra>(items).fill({ show_legend: false })
const {
data: processedCompareData,
dataExtras: processedCompareDataExtras,
} = this._processDataSet(
compareData,
energyData.statsMetadata,
energyData.prefs.device_consumption,
sorted_devices,
true
);
datasets.push(...processedCompareData);
datasetExtras.push(...processedCompareDataExtras);
}
this._start = energyData.start;
@ -281,6 +285,7 @@ export class HuiEnergyDevicesDetailGraphCard
compare = false
) {
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
const dataExtras: ChartDatasetExtra[] = [];
devices.forEach((source, idx) => {
const color = getColorByIndex(idx);
@ -317,23 +322,30 @@ export class HuiEnergyDevicesDetailGraphCard
}
}
const order = sorted_devices.indexOf(source.stat_consumption);
const itemExceedsMax = !!(
this._config?.max_devices && order >= this._config.max_devices
);
data.push({
label: getStatisticLabel(
this.hass,
source.stat_consumption,
statisticsMetaData[source.stat_consumption]
),
hidden: this._hiddenStats.has(source.stat_consumption),
hidden:
this._hiddenStats.has(source.stat_consumption) || itemExceedsMax,
borderColor: compare ? color + "7F" : color,
backgroundColor: compare ? color + "32" : color + "7F",
data: consumptionData,
order: 1 + sorted_devices.indexOf(source.stat_consumption),
order: 1 + order,
stack: "devices",
pointStyle: compare ? false : "circle",
xAxisID: compare ? "xAxisCompare" : undefined,
});
dataExtras.push({ show_legend: !compare && !itemExceedsMax });
});
return data;
return { data, dataExtras };
}
static get styles(): CSSResultGroup {