jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +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.stats,
energyData.statsMetadata, energyData.statsMetadata,
gasSources, gasSources,
gasColor gasColor,
computedStyles
) )
); );
@ -335,6 +336,7 @@ export class HuiEnergyGasGraphCard
energyData.statsMetadata, energyData.statsMetadata,
gasSources, gasSources,
gasColor, gasColor,
computedStyles,
true true
) )
); );
@ -356,20 +358,26 @@ export class HuiEnergyGasGraphCard
statisticsMetaData: Record<string, StatisticsMetaData>, statisticsMetaData: Record<string, StatisticsMetaData>,
gasSources: GasSourceTypeEnergyPreference[], gasSources: GasSourceTypeEnergyPreference[],
gasColor: string, gasColor: string,
computedStyles: CSSStyleDeclaration,
compare = false compare = false
) { ) {
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = []; const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
gasSources.forEach((source, idx) => { gasSources.forEach((source, idx) => {
const modifiedColor = let borderColor = computedStyles
idx > 0 .getPropertyValue("--energy-gas-color-" + idx)
? this.hass.themes.darkMode .trim();
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx) if (borderColor.length === 0) {
: labDarken(rgb2lab(hex2rgb(gasColor)), idx) const modifiedColor =
: undefined; idx > 0
const borderColor = modifiedColor ? this.hass.themes.darkMode
? rgb2hex(lab2rgb(modifiedColor)) ? labBrighten(rgb2lab(hex2rgb(gasColor)), idx)
: gasColor; : labDarken(rgb2lab(hex2rgb(gasColor)), idx)
: undefined;
borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
}
let prevStart: number | null = null; 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.stats,
energyData.statsMetadata, energyData.statsMetadata,
solarSources, solarSources,
solarColor solarColor,
computedStyles
) )
); );
@ -345,6 +346,7 @@ export class HuiEnergySolarGraphCard
energyData.statsMetadata, energyData.statsMetadata,
solarSources, solarSources,
solarColor, solarColor,
computedStyles,
true true
) )
); );
@ -379,20 +381,26 @@ export class HuiEnergySolarGraphCard
statisticsMetaData: Record<string, StatisticsMetaData>, statisticsMetaData: Record<string, StatisticsMetaData>,
solarSources: SolarSourceTypeEnergyPreference[], solarSources: SolarSourceTypeEnergyPreference[],
solarColor: string, solarColor: string,
computedStyles: CSSStyleDeclaration,
compare = false compare = false
) { ) {
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = []; const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
solarSources.forEach((source, idx) => { solarSources.forEach((source, idx) => {
const modifiedColor = let borderColor = computedStyles
idx > 0 .getPropertyValue("--energy-solar-color-" + idx)
? this.hass.themes.darkMode .trim();
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx) if (borderColor.length === 0) {
: labDarken(rgb2lab(hex2rgb(solarColor)), idx) const modifiedColor =
: undefined; idx > 0
const borderColor = modifiedColor ? this.hass.themes.darkMode
? rgb2hex(lab2rgb(modifiedColor)) ? labBrighten(rgb2lab(hex2rgb(solarColor)), idx)
: solarColor; : labDarken(rgb2lab(hex2rgb(solarColor)), idx)
: undefined;
borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
}
let prevStart: number | null = null; 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; 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() { protected render() {
if (!this.hass || !this._config) { if (!this.hass || !this._config) {
return nothing; return nothing;
@ -95,27 +116,37 @@ export class HuiEnergySourcesTableCard
const types = energySourcesByType(this._data.prefs); 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 computedStyles = getComputedStyle(this);
const solarColor = computedStyles const solarColor = computedStyles
.getPropertyValue("--energy-solar-color") .getPropertyValue(colorPropertyMap.solar)
.trim(); .trim();
const batteryFromColor = computedStyles const batteryFromColor = computedStyles
.getPropertyValue("--energy-battery-out-color") .getPropertyValue(colorPropertyMap.battery_out)
.trim(); .trim();
const batteryToColor = computedStyles const batteryToColor = computedStyles
.getPropertyValue("--energy-battery-in-color") .getPropertyValue(colorPropertyMap.battery_in)
.trim(); .trim();
const returnColor = computedStyles const returnColor = computedStyles
.getPropertyValue("--energy-grid-return-color") .getPropertyValue(colorPropertyMap.grid_return)
.trim(); .trim();
const consumptionColor = computedStyles const consumptionColor = computedStyles
.getPropertyValue("--energy-grid-consumption-color") .getPropertyValue(colorPropertyMap.grid_consumption)
.trim(); .trim();
const gasColor = computedStyles const gasColor = computedStyles
.getPropertyValue("--energy-gas-color") .getPropertyValue(colorPropertyMap.gas)
.trim(); .trim();
const waterColor = computedStyles const waterColor = computedStyles
.getPropertyValue("--energy-water-color") .getPropertyValue(colorPropertyMap.water)
.trim(); .trim();
const showCosts = const showCosts =
@ -225,15 +256,12 @@ export class HuiEnergySourcesTableCard
0; 0;
totalSolarCompare += compareEnergy; totalSolarCompare += compareEnergy;
const modifiedColor = const color = this._getColor(
idx > 0 computedStyles,
? this.hass.themes.darkMode colorPropertyMap.solar,
? labBrighten(rgb2lab(hex2rgb(solarColor)), idx) solarColor,
: labDarken(rgb2lab(hex2rgb(solarColor)), idx) idx
: undefined; );
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: solarColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
@ -326,24 +354,18 @@ export class HuiEnergySourcesTableCard
0; 0;
totalBatteryCompare += energyFromCompare - energyToCompare; totalBatteryCompare += energyFromCompare - energyToCompare;
const modifiedFromColor = const fromColor = this._getColor(
idx > 0 computedStyles,
? this.hass.themes.darkMode colorPropertyMap.battery_out,
? labBrighten(rgb2lab(hex2rgb(batteryFromColor)), idx) batteryFromColor,
: labDarken(rgb2lab(hex2rgb(batteryFromColor)), idx) idx
: undefined; );
const fromColor = modifiedFromColor const toColor = this._getColor(
? rgb2hex(lab2rgb(modifiedFromColor)) computedStyles,
: batteryFromColor; colorPropertyMap.battery_in,
const modifiedToColor = batteryToColor,
idx > 0 idx
? this.hass.themes.darkMode );
? labBrighten(rgb2lab(hex2rgb(batteryToColor)), idx)
: labDarken(rgb2lab(hex2rgb(batteryToColor)), idx)
: undefined;
const toColor = modifiedToColor
? rgb2hex(lab2rgb(modifiedToColor))
: batteryToColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
@ -495,15 +517,12 @@ export class HuiEnergySourcesTableCard
totalGridCostCompare += costCompare; totalGridCostCompare += costCompare;
} }
const modifiedColor = const color = this._getColor(
idx > 0 computedStyles,
? this.hass.themes.darkMode colorPropertyMap.grid_consumption,
? labBrighten(rgb2lab(hex2rgb(consumptionColor)), idx) consumptionColor,
: labDarken(rgb2lab(hex2rgb(consumptionColor)), idx) idx
: undefined; );
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: consumptionColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
@ -602,15 +621,12 @@ export class HuiEnergySourcesTableCard
totalGridCostCompare += costCompare; totalGridCostCompare += costCompare;
} }
const modifiedColor = const color = this._getColor(
idx > 0 computedStyles,
? this.hass.themes.darkMode colorPropertyMap.grid_return,
? labBrighten(rgb2lab(hex2rgb(returnColor)), idx) returnColor,
: labDarken(rgb2lab(hex2rgb(returnColor)), idx) idx
: undefined; );
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: returnColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
@ -761,15 +777,12 @@ export class HuiEnergySourcesTableCard
totalGasCostCompare += costCompare; totalGasCostCompare += costCompare;
} }
const modifiedColor = const color = this._getColor(
idx > 0 computedStyles,
? this.hass.themes.darkMode colorPropertyMap.gas,
? labBrighten(rgb2lab(hex2rgb(gasColor)), idx) gasColor,
: labDarken(rgb2lab(hex2rgb(gasColor)), idx) idx
: undefined; );
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: gasColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <td class="mdc-data-table__cell cell-bullet">
@ -915,15 +928,12 @@ export class HuiEnergySourcesTableCard
totalWaterCostCompare += costCompare; totalWaterCostCompare += costCompare;
} }
const modifiedColor = const color = this._getColor(
idx > 0 computedStyles,
? this.hass.themes.darkMode colorPropertyMap.water,
? labBrighten(rgb2lab(hex2rgb(waterColor)), idx) waterColor,
: labDarken(rgb2lab(hex2rgb(waterColor)), idx) idx
: undefined; );
const color = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: waterColor;
return html`<tr class="mdc-data-table__row"> return html`<tr class="mdc-data-table__row">
<td class="mdc-data-table__cell cell-bullet"> <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.stats,
energyData.statsMetadata, energyData.statsMetadata,
waterSources, waterSources,
waterColor waterColor,
computedStyles
) )
); );
@ -333,6 +334,7 @@ export class HuiEnergyWaterGraphCard
energyData.statsMetadata, energyData.statsMetadata,
waterSources, waterSources,
waterColor, waterColor,
computedStyles,
true true
) )
); );
@ -354,20 +356,26 @@ export class HuiEnergyWaterGraphCard
statisticsMetaData: Record<string, StatisticsMetaData>, statisticsMetaData: Record<string, StatisticsMetaData>,
waterSources: WaterSourceTypeEnergyPreference[], waterSources: WaterSourceTypeEnergyPreference[],
waterColor: string, waterColor: string,
computedStyles: CSSStyleDeclaration,
compare = false compare = false
) { ) {
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = []; const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
waterSources.forEach((source, idx) => { waterSources.forEach((source, idx) => {
const modifiedColor = let borderColor = computedStyles
idx > 0 .getPropertyValue("--energy-water-color-" + idx)
? this.hass.themes.darkMode .trim();
? labBrighten(rgb2lab(hex2rgb(waterColor)), idx) if (borderColor.length === 0) {
: labDarken(rgb2lab(hex2rgb(waterColor)), idx) const modifiedColor =
: undefined; idx > 0
const borderColor = modifiedColor ? this.hass.themes.darkMode
? rgb2hex(lab2rgb(modifiedColor)) ? labBrighten(rgb2lab(hex2rgb(waterColor)), idx)
: waterColor; : labDarken(rgb2lab(hex2rgb(waterColor)), idx)
: undefined;
borderColor = modifiedColor
? rgb2hex(lab2rgb(modifiedColor))
: waterColor;
}
let prevStart: number | null = null; let prevStart: number | null = null;