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

Add per-set theme coloring to remainder of energy dashboard (#17826)

Browse Source
This commit is contained in:
karwosts 2023-10-09 04:55:21 -07:00 committed by GitHub
parent bfeee618f4
commit 811ebde42a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 134 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
View File

@ -313,7 +313,8 @@ export class HuiEnergyGasGraphCard
energyData.stats,
energyData.statsMetadata,
gasSources,
gasColor
gasColor,
computedStyles
)
);
@ -335,6 +336,7 @@ export class HuiEnergyGasGraphCard
energyData.statsMetadata,
gasSources,
gasColor,
computedStyles,
true
)
);
@ -356,20 +358,26 @@ export class HuiEnergyGasGraphCard
statisticsMetaData: Record<string, StatisticsMetaData>,
gasSources: GasSourceTypeEnergyPreference[],
gasColor: string,
computedStyles: CSSStyleDeclaration,
compare = false
) {
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
gasSources.forEach((source, idx) => {
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
: labDarken(rgb2lab(hex2rgb(gasColor)), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
let borderColor = computedStyles
.getPropertyValue("--energy-gas-color-" + idx)
.trim();
if (borderColor.length === 0) {
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
: labDarken(rgb2lab(hex2rgb(gasColor)), idx)
: undefined;
borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
}
let prevStart: number | null = null;

28
src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
View File

@ -323,7 +323,8 @@ export class HuiEnergySolarGraphCard
energyData.stats,
energyData.statsMetadata,
solarSources,
solarColor
solarColor,
computedStyles
)
);
@ -345,6 +346,7 @@ export class HuiEnergySolarGraphCard
energyData.statsMetadata,
solarSources,
solarColor,
computedStyles,
true
)
);
@ -379,20 +381,26 @@ export class HuiEnergySolarGraphCard
statisticsMetaData: Record<string, StatisticsMetaData>,
solarSources: SolarSourceTypeEnergyPreference[],
solarColor: string,
computedStyles: CSSStyleDeclaration,
compare = false
) {
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
solarSources.forEach((source, idx) => {
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
: labDarken(rgb2lab(hex2rgb(solarColor)), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
let borderColor = computedStyles
.getPropertyValue("--energy-solar-color-" + idx)
.trim();
if (borderColor.length === 0) {
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
: labDarken(rgb2lab(hex2rgb(solarColor)), idx)
: undefined;
borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
}
let prevStart: number | null = null;

150
src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
View File

@ -60,6 +60,27 @@ export class HuiEnergySourcesTableCard
this._config = config;
}
private _getColor(
computedStyles: CSSStyleDeclaration,
propertyName: string,
baseColor: string,
idx: number
): string {
let color = computedStyles
.getPropertyValue(propertyName + "-" + idx)
.trim();
if (color.length === 0) {
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(baseColor)), idx)
: labDarken(rgb2lab(hex2rgb(baseColor)), idx)
: undefined;
color = modifiedColor ? rgb2hex(lab2rgb(modifiedColor)) : baseColor;
}
return color;
}
protected render() {
if (!this.hass || !this._config) {
return nothing;
@ -95,27 +116,37 @@ export class HuiEnergySourcesTableCard
const types = energySourcesByType(this._data.prefs);
const colorPropertyMap = {
grid_return: "--energy-grid-return-color",
grid_consumption: "--energy-grid-consumption-color",
battery_in: "--energy-battery-in-color",
battery_out: "--energy-battery-out-color",
solar: "--energy-solar-color",
gas: "--energy-gas-color",
water: "--energy-water-color",
};
const computedStyles = getComputedStyle(this);
const solarColor = computedStyles
.getPropertyValue("--energy-solar-color")
.getPropertyValue(colorPropertyMap.solar)
.trim();
const batteryFromColor = computedStyles
.getPropertyValue("--energy-battery-out-color")
.getPropertyValue(colorPropertyMap.battery_out)
.trim();
const batteryToColor = computedStyles
.getPropertyValue("--energy-battery-in-color")
.getPropertyValue(colorPropertyMap.battery_in)
.trim();
const returnColor = computedStyles
.getPropertyValue("--energy-grid-return-color")
.getPropertyValue(colorPropertyMap.grid_return)
.trim();
const consumptionColor = computedStyles
.getPropertyValue("--energy-grid-consumption-color")
.getPropertyValue(colorPropertyMap.grid_consumption)
.trim();
const gasColor = computedStyles
.getPropertyValue("--energy-gas-color")
.getPropertyValue(colorPropertyMap.gas)
.trim();
const waterColor = computedStyles
.getPropertyValue("--energy-water-color")
.getPropertyValue(colorPropertyMap.water)
.trim();
const showCosts =
@ -225,15 +256,12 @@ export class HuiEnergySourcesTableCard
0;
totalSolarCompare += compareEnergy;
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
: labDarken(rgb2lab(hex2rgb(solarColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
const color = this._getColor(
computedStyles,
colorPropertyMap.solar,
solarColor,
idx
);
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
@ -326,24 +354,18 @@ export class HuiEnergySourcesTableCard
0;
totalBatteryCompare += energyFromCompare - energyToCompare;
const modifiedFromColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(batteryFromColor)), idx)
: labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx)
: undefined;
const fromColor = modifiedFromColor
? rgb2hex(lab2rgb(modifiedFromColor))
: batteryFromColor;
const modifiedToColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(batteryToColor)), idx)
: labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
: undefined;
const toColor = modifiedToColor
? rgb2hex(lab2rgb(modifiedToColor))
: batteryToColor;
const fromColor = this._getColor(
computedStyles,
colorPropertyMap.battery_out,
batteryFromColor,
idx
);
const toColor = this._getColor(
computedStyles,
colorPropertyMap.battery_in,
batteryToColor,
idx
);
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
@ -495,15 +517,12 @@ export class HuiEnergySourcesTableCard
totalGridCostCompare += costCompare;
}
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx)
: labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: consumptionColor;
const color = this._getColor(
computedStyles,
colorPropertyMap.grid_consumption,
consumptionColor,
idx
);
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
@ -602,15 +621,12 @@ export class HuiEnergySourcesTableCard
totalGridCostCompare += costCompare;
}
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(returnColor)), idx)
: labDarken(rgb2lab(hex2rgb(returnColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: returnColor;
const color = this._getColor(
computedStyles,
colorPropertyMap.grid_return,
returnColor,
idx
);
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
@ -761,15 +777,12 @@ export class HuiEnergySourcesTableCard
totalGasCostCompare += costCompare;
}
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
: labDarken(rgb2lab(hex2rgb(gasColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
const color = this._getColor(
computedStyles,
colorPropertyMap.gas,
gasColor,
idx
);
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">
@ -915,15 +928,12 @@ export class HuiEnergySourcesTableCard
totalWaterCostCompare += costCompare;
}
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(waterColor)), idx)
: labDarken(rgb2lab(hex2rgb(waterColor)), idx)
: undefined;
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: waterColor;
const color = this._getColor(
computedStyles,
colorPropertyMap.water,
waterColor,
idx
);
return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet">

28
src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
View File

@ -311,7 +311,8 @@ export class HuiEnergyWaterGraphCard
energyData.stats,
energyData.statsMetadata,
waterSources,
waterColor
waterColor,
computedStyles
)
);
@ -333,6 +334,7 @@ export class HuiEnergyWaterGraphCard
energyData.statsMetadata,
waterSources,
waterColor,
computedStyles,
true
)
);
@ -354,20 +356,26 @@ export class HuiEnergyWaterGraphCard
statisticsMetaData: Record<string, StatisticsMetaData>,
waterSources: WaterSourceTypeEnergyPreference[],
waterColor: string,
computedStyles: CSSStyleDeclaration,
compare = false
) {
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
waterSources.forEach((source, idx) => {
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(waterColor)), idx)
: labDarken(rgb2lab(hex2rgb(waterColor)), idx)
: undefined;
const borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: waterColor;
let borderColor = computedStyles
.getPropertyValue("--energy-water-color-" + idx)
.trim();
if (borderColor.length === 0) {
const modifiedColor =
idx > 0
? this.hass.themes.darkMode
? labBrighten(rgb2lab(hex2rgb(waterColor)), idx)
: labDarken(rgb2lab(hex2rgb(waterColor)), idx)
: undefined;
borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: waterColor;
}
let prevStart: number | null = null;