Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 1 commit into from
Oct 9, 2023
+134 −100
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
28 changes: 18 additions & 10 deletions src/panels/lovelace/cards/energy/hui-energy-gas-graph-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,8 @@ export class HuiEnergyGasGraphCard
energyData.stats,
energyData.statsMetadata,
gasSources,
gasColor
gasColor,
computedStyles
)
);

Expand All @@ -335,6 +336,7 @@ export class HuiEnergyGasGraphCard
energyData.statsMetadata,
gasSources,
gasColor,
computedStyles,
true
)
);
Expand All @@ -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;

Expand Down
28 changes: 18 additions & 10 deletions src/panels/lovelace/cards/energy/hui-energy-solar-graph-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,7 +323,8 @@ export class HuiEnergySolarGraphCard
energyData.stats,
energyData.statsMetadata,
solarSources,
solarColor
solarColor,
computedStyles
)
);

Expand All @@ -345,6 +346,7 @@ export class HuiEnergySolarGraphCard
energyData.statsMetadata,
solarSources,
solarColor,
computedStyles,
true
)
);
Expand Down Expand Up @@ -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;

Expand Down
150 changes: 80 additions & 70 deletions src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 =
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down
28 changes: 18 additions & 10 deletions src/panels/lovelace/cards/energy/hui-energy-water-graph-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,7 +311,8 @@ export class HuiEnergyWaterGraphCard
energyData.stats,
energyData.statsMetadata,
waterSources,
waterColor
waterColor,
computedStyles
)
);

Expand All @@ -333,6 +334,7 @@ export class HuiEnergyWaterGraphCard
energyData.statsMetadata,
waterSources,
waterColor,
computedStyles,
true
)
);
Expand All @@ -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;

Expand Down