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

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

Browse Source 
* 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
1 changed files with 33 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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