From 811ebde42a4ea50a528b8381f7c1a8100ed32cbf Mon Sep 17 00:00:00 2001 From: karwosts <32912880+karwosts@users.noreply.github.com> Date: Mon, 9 Oct 2023 04:55:21 -0700 Subject: [PATCH] Add per-set theme coloring to remainder of energy dashboard (#17826) --- .../cards/energy/hui-energy-gas-graph-card.ts | 28 ++-- .../energy/hui-energy-solar-graph-card.ts | 28 ++-- .../energy/hui-energy-sources-table-card.ts | 150 ++++++++++-------- .../energy/hui-energy-water-graph-card.ts | 28 ++-- 4 files changed, 134 insertions(+), 100 deletions(-) diff --git a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts index f9f3874d42..cb1a953ca5 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts @@ -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, 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; diff --git a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts index 0721fc1545..1b75484eb9 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts @@ -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, 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; diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts index 4b061f42a0..489dbfc4f8 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts @@ -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` @@ -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` @@ -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` @@ -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` @@ -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` @@ -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` diff --git a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts index c283025d7c..a940e21a64 100644 --- a/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts +++ b/src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts @@ -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, 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;