mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Support color names in energy themes (#19597)
* Support color names in energy themes * fix yarn
This commit is contained in:
karwosts
GitHub
parent
ebdbab81d3
commit
4dc154201a
@ -99,6 +99,7 @@
|
||||
"@webcomponents/webcomponentsjs": "2.8.0",
|
||||
"app-datepicker": "5.1.1",
|
||||
"chart.js": "4.4.1",
|
||||
"color-name": "~1.1.4",
|
||||
"comlink": "4.4.1",
|
||||
"core-js": "3.36.0",
|
||||
"cropperjs": "1.6.1",
|
||||
@ -170,6 +171,7 @@
|
||||
"@types/babel__plugin-transform-runtime": "7.9.5",
|
||||
"@types/chromecast-caf-receiver": "6.0.13",
|
||||
"@types/chromecast-caf-sender": "1.0.8",
|
||||
"@types/color-name": "^1",
|
||||
"@types/glob": "8.1.0",
|
||||
"@types/html-minifier-terser": "7.0.2",
|
||||
"@types/js-yaml": "4.0.9",
|
||||
|
||||
64
src/panels/lovelace/cards/energy/common/color.ts
Normal file
64
src/panels/lovelace/cards/energy/common/color.ts
Normal file
@ -0,0 +1,64 @@
|
||||
import colors from "color-name";
|
||||
import {
|
||||
hex2rgb,
|
||||
lab2rgb,
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} from "../../../../../common/color/convert-color";
|
||||
import { labBrighten, labDarken } from "../../../../../common/color/lab";
|
||||
|
||||
export function getEnergyColor(
|
||||
computedStyles: CSSStyleDeclaration,
|
||||
darkMode: boolean,
|
||||
background: boolean,
|
||||
compare: boolean,
|
||||
propertyName: string,
|
||||
idx?: number
|
||||
): string {
|
||||
const themeIdxColor = computedStyles
|
||||
.getPropertyValue(propertyName + "-" + idx)
|
||||
.trim();
|
||||
|
||||
const themeColor =
|
||||
themeIdxColor.length > 0
|
||||
? themeIdxColor
|
||||
: computedStyles.getPropertyValue(propertyName).trim();
|
||||
|
||||
let hexColor;
|
||||
if (themeColor.startsWith("#")) {
|
||||
hexColor = themeColor;
|
||||
} else {
|
||||
const rgbFromColorName = colors[themeColor];
|
||||
if (!rgbFromColorName) {
|
||||
// We have a named color, and there's nothing in the table,
|
||||
// so nothing further we can do with it.
|
||||
// Compare/border/background color will all be the same.
|
||||
return themeColor;
|
||||
}
|
||||
hexColor = rgb2hex(rgbFromColorName);
|
||||
}
|
||||
|
||||
if (themeIdxColor.length === 0 && idx) {
|
||||
// Brighten or darken the color based on set position.
|
||||
// Skip if theme already provides a color for this set.
|
||||
|
||||
hexColor = rgb2hex(
|
||||
lab2rgb(
|
||||
darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(hexColor)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(hexColor)), idx)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
if (compare) {
|
||||
if (background) {
|
||||
hexColor += "32";
|
||||
} else {
|
||||
hexColor += "7F";
|
||||
}
|
||||
} else if (background) {
|
||||
hexColor += "7F";
|
||||
}
|
||||
return hexColor;
|
||||
}
|
||||
@ -17,13 +17,7 @@ import {
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
hex2rgb,
|
||||
lab2rgb,
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} from "../../../../common/color/convert-color";
|
||||
import { labBrighten, labDarken } from "../../../../common/color/lab";
|
||||
import { getEnergyColor } from "./common/color";
|
||||
import { formatNumber } from "../../../../common/number/format_number";
|
||||
import "../../../../components/chart/ha-chart-base";
|
||||
import "../../../../components/ha-card";
|
||||
@ -204,16 +198,12 @@ export class HuiEnergyGasGraphCard
|
||||
const datasets: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
|
||||
|
||||
const computedStyles = getComputedStyle(this);
|
||||
const gasColor = computedStyles
|
||||
.getPropertyValue("--energy-gas-color")
|
||||
.trim();
|
||||
|
||||
datasets.push(
|
||||
...this._processDataSet(
|
||||
energyData.stats,
|
||||
energyData.statsMetadata,
|
||||
gasSources,
|
||||
gasColor,
|
||||
computedStyles
|
||||
)
|
||||
);
|
||||
@ -235,7 +225,6 @@ export class HuiEnergyGasGraphCard
|
||||
energyData.statsCompare,
|
||||
energyData.statsMetadata,
|
||||
gasSources,
|
||||
gasColor,
|
||||
computedStyles,
|
||||
true
|
||||
)
|
||||
@ -257,28 +246,12 @@ export class HuiEnergyGasGraphCard
|
||||
statistics: Statistics,
|
||||
statisticsMetaData: Record<string, StatisticsMetaData>,
|
||||
gasSources: GasSourceTypeEnergyPreference[],
|
||||
gasColor: string,
|
||||
computedStyles: CSSStyleDeclaration,
|
||||
compare = false
|
||||
) {
|
||||
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
|
||||
|
||||
gasSources.forEach((source, idx) => {
|
||||
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;
|
||||
|
||||
const gasConsumptionData: ScatterDataPoint[] = [];
|
||||
@ -317,8 +290,22 @@ export class HuiEnergyGasGraphCard
|
||||
source.stat_energy_from,
|
||||
statisticsMetaData[source.stat_energy_from]
|
||||
),
|
||||
borderColor: compare ? borderColor + "7F" : borderColor,
|
||||
backgroundColor: compare ? borderColor + "32" : borderColor + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
compare,
|
||||
"--energy-gas-color",
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
compare,
|
||||
"--energy-gas-color",
|
||||
idx
|
||||
),
|
||||
data: gasConsumptionData,
|
||||
order: 1,
|
||||
stack: "gas",
|
||||
|
||||
@ -22,13 +22,7 @@ import {
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
hex2rgb,
|
||||
lab2rgb,
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} from "../../../../common/color/convert-color";
|
||||
import { labBrighten, labDarken } from "../../../../common/color/lab";
|
||||
import { getEnergyColor } from "./common/color";
|
||||
import { formatNumber } from "../../../../common/number/format_number";
|
||||
import "../../../../components/chart/ha-chart-base";
|
||||
import "../../../../components/ha-card";
|
||||
@ -226,16 +220,12 @@ export class HuiEnergySolarGraphCard
|
||||
const datasets: ChartDataset<"bar" | "line">[] = [];
|
||||
|
||||
const computedStyles = getComputedStyle(this);
|
||||
const solarColor = computedStyles
|
||||
.getPropertyValue("--energy-solar-color")
|
||||
.trim();
|
||||
|
||||
datasets.push(
|
||||
...this._processDataSet(
|
||||
energyData.stats,
|
||||
energyData.statsMetadata,
|
||||
solarSources,
|
||||
solarColor,
|
||||
computedStyles
|
||||
)
|
||||
);
|
||||
@ -257,7 +247,6 @@ export class HuiEnergySolarGraphCard
|
||||
energyData.statsCompare,
|
||||
energyData.statsMetadata,
|
||||
solarSources,
|
||||
solarColor,
|
||||
computedStyles,
|
||||
true
|
||||
)
|
||||
@ -292,28 +281,12 @@ export class HuiEnergySolarGraphCard
|
||||
statistics: Statistics,
|
||||
statisticsMetaData: Record<string, StatisticsMetaData>,
|
||||
solarSources: SolarSourceTypeEnergyPreference[],
|
||||
solarColor: string,
|
||||
computedStyles: CSSStyleDeclaration,
|
||||
compare = false
|
||||
) {
|
||||
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
|
||||
|
||||
solarSources.forEach((source, idx) => {
|
||||
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;
|
||||
|
||||
const solarProductionData: ScatterDataPoint[] = [];
|
||||
@ -357,8 +330,22 @@ export class HuiEnergySolarGraphCard
|
||||
),
|
||||
}
|
||||
),
|
||||
borderColor: compare ? borderColor + "7F" : borderColor,
|
||||
backgroundColor: compare ? borderColor + "32" : borderColor + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
compare,
|
||||
"--energy-solar-color",
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
compare,
|
||||
"--energy-solar-color",
|
||||
idx
|
||||
),
|
||||
data: solarProductionData,
|
||||
order: 1,
|
||||
stack: "solar",
|
||||
|
||||
@ -12,14 +12,8 @@ import {
|
||||
} from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import {
|
||||
hex2rgb,
|
||||
lab2rgb,
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} from "../../../../common/color/convert-color";
|
||||
import { labBrighten, labDarken } from "../../../../common/color/lab";
|
||||
import { formatNumber } from "../../../../common/number/format_number";
|
||||
import { getEnergyColor } from "./common/color";
|
||||
import "../../../../components/ha-card";
|
||||
import {
|
||||
EnergyData,
|
||||
@ -38,6 +32,16 @@ import { LovelaceCard } from "../../types";
|
||||
import { EnergySourcesTableCardConfig } from "../types";
|
||||
import { hasConfigChanged } from "../../common/has-changed";
|
||||
|
||||
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",
|
||||
};
|
||||
|
||||
@customElement("hui-energy-sources-table-card")
|
||||
export class HuiEnergySourcesTableCard
|
||||
extends SubscribeMixin(LitElement)
|
||||
@ -77,27 +81,6 @@ export class HuiEnergySourcesTableCard
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
@ -133,38 +116,7 @@ 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(colorPropertyMap.solar)
|
||||
.trim();
|
||||
const batteryFromColor = computedStyles
|
||||
.getPropertyValue(colorPropertyMap.battery_out)
|
||||
.trim();
|
||||
const batteryToColor = computedStyles
|
||||
.getPropertyValue(colorPropertyMap.battery_in)
|
||||
.trim();
|
||||
const returnColor = computedStyles
|
||||
.getPropertyValue(colorPropertyMap.grid_return)
|
||||
.trim();
|
||||
const consumptionColor = computedStyles
|
||||
.getPropertyValue(colorPropertyMap.grid_consumption)
|
||||
.trim();
|
||||
const gasColor = computedStyles
|
||||
.getPropertyValue(colorPropertyMap.gas)
|
||||
.trim();
|
||||
const waterColor = computedStyles
|
||||
.getPropertyValue(colorPropertyMap.water)
|
||||
.trim();
|
||||
|
||||
const showCosts =
|
||||
types.grid?.[0].flow_from.some(
|
||||
@ -273,20 +225,27 @@ export class HuiEnergySourcesTableCard
|
||||
0;
|
||||
totalSolarCompare += compareEnergy;
|
||||
|
||||
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">
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: color,
|
||||
backgroundColor: color + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
false,
|
||||
colorPropertyMap.solar,
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
false,
|
||||
colorPropertyMap.solar,
|
||||
idx
|
||||
),
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
@ -371,26 +330,27 @@ export class HuiEnergySourcesTableCard
|
||||
0;
|
||||
totalBatteryCompare += energyFromCompare - energyToCompare;
|
||||
|
||||
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">
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: fromColor,
|
||||
backgroundColor: fromColor + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
false,
|
||||
colorPropertyMap.battery_out,
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
false,
|
||||
colorPropertyMap.battery_out,
|
||||
idx
|
||||
),
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
@ -426,8 +386,22 @@ export class HuiEnergySourcesTableCard
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: toColor,
|
||||
backgroundColor: toColor + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
false,
|
||||
colorPropertyMap.battery_in,
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
false,
|
||||
colorPropertyMap.battery_in,
|
||||
idx
|
||||
),
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
@ -534,20 +508,27 @@ export class HuiEnergySourcesTableCard
|
||||
totalGridCostCompare += costCompare;
|
||||
}
|
||||
|
||||
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">
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: color,
|
||||
backgroundColor: color + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
false,
|
||||
colorPropertyMap.grid_consumption,
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
false,
|
||||
colorPropertyMap.grid_consumption,
|
||||
idx
|
||||
),
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
@ -638,20 +619,27 @@ export class HuiEnergySourcesTableCard
|
||||
totalGridCostCompare += costCompare;
|
||||
}
|
||||
|
||||
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">
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: color,
|
||||
backgroundColor: color + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
false,
|
||||
colorPropertyMap.grid_return,
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
false,
|
||||
colorPropertyMap.grid_return,
|
||||
idx
|
||||
),
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
@ -794,20 +782,27 @@ export class HuiEnergySourcesTableCard
|
||||
totalGasCostCompare += costCompare;
|
||||
}
|
||||
|
||||
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">
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: color,
|
||||
backgroundColor: color + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
false,
|
||||
colorPropertyMap.gas,
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
false,
|
||||
colorPropertyMap.gas,
|
||||
idx
|
||||
),
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
@ -945,20 +940,27 @@ export class HuiEnergySourcesTableCard
|
||||
totalWaterCostCompare += costCompare;
|
||||
}
|
||||
|
||||
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">
|
||||
<div
|
||||
class="bullet"
|
||||
style=${styleMap({
|
||||
borderColor: color,
|
||||
backgroundColor: color + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
false,
|
||||
colorPropertyMap.water,
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
false,
|
||||
colorPropertyMap.water,
|
||||
idx
|
||||
),
|
||||
})}
|
||||
></div>
|
||||
</td>
|
||||
|
||||
@ -17,13 +17,7 @@ import {
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
hex2rgb,
|
||||
lab2rgb,
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} from "../../../../common/color/convert-color";
|
||||
import { labBrighten, labDarken } from "../../../../common/color/lab";
|
||||
import { getEnergyColor } from "./common/color";
|
||||
import { formatNumber } from "../../../../common/number/format_number";
|
||||
import "../../../../components/chart/ha-chart-base";
|
||||
import "../../../../components/ha-card";
|
||||
@ -41,10 +35,14 @@ import { EnergyUsageGraphCardConfig } from "../types";
|
||||
import { hasConfigChanged } from "../../common/has-changed";
|
||||
import { getCommonOptions } from "./common/energy-chart-options";
|
||||
|
||||
interface ColorSet {
|
||||
base: string;
|
||||
overrides?: Record<string, string>;
|
||||
}
|
||||
const colorPropertyMap = {
|
||||
to_grid: "--energy-grid-return-color",
|
||||
to_battery: "--energy-battery-in-color",
|
||||
from_grid: "--energy-grid-consumption-color",
|
||||
used_grid: "--energy-grid-consumption-color",
|
||||
used_solar: "--energy-solar-color",
|
||||
used_battery: "--energy-battery-out-color",
|
||||
};
|
||||
|
||||
@customElement("hui-energy-usage-graph-card")
|
||||
export class HuiEnergyUsageGraphCard
|
||||
@ -263,47 +261,9 @@ export class HuiEnergyUsageGraphCard
|
||||
|
||||
const computedStyles = getComputedStyle(this);
|
||||
|
||||
const colorPropertyMap = {
|
||||
to_grid: "--energy-grid-return-color",
|
||||
to_battery: "--energy-battery-in-color",
|
||||
from_grid: "--energy-grid-consumption-color",
|
||||
used_grid: "--energy-grid-consumption-color",
|
||||
used_solar: "--energy-solar-color",
|
||||
used_battery: "--energy-battery-out-color",
|
||||
};
|
||||
|
||||
const colors = {
|
||||
to_grid: {
|
||||
base: computedStyles.getPropertyValue(colorPropertyMap.to_grid).trim(),
|
||||
},
|
||||
to_battery: {
|
||||
base: computedStyles
|
||||
.getPropertyValue(colorPropertyMap.to_battery)
|
||||
.trim(),
|
||||
},
|
||||
from_grid: {
|
||||
base: computedStyles
|
||||
.getPropertyValue(colorPropertyMap.from_grid)
|
||||
.trim(),
|
||||
},
|
||||
used_grid: {
|
||||
base: computedStyles
|
||||
.getPropertyValue(colorPropertyMap.used_grid)
|
||||
.trim(),
|
||||
},
|
||||
used_solar: {
|
||||
base: computedStyles
|
||||
.getPropertyValue(colorPropertyMap.used_solar)
|
||||
.trim(),
|
||||
},
|
||||
used_battery: {
|
||||
base: computedStyles
|
||||
.getPropertyValue(colorPropertyMap.used_battery)
|
||||
.trim(),
|
||||
},
|
||||
};
|
||||
|
||||
Object.entries(colorPropertyMap).forEach(([key, colorProp]) => {
|
||||
const colorIndices: Record<string, Record<string, number>> = {};
|
||||
Object.keys(colorPropertyMap).forEach((key) => {
|
||||
colorIndices[key] = {};
|
||||
if (
|
||||
key === "used_grid" ||
|
||||
key === "used_solar" ||
|
||||
@ -311,15 +271,9 @@ export class HuiEnergyUsageGraphCard
|
||||
) {
|
||||
return;
|
||||
}
|
||||
colors[key].overrides = [];
|
||||
if (statIds[key]) {
|
||||
Object.values(statIds[key]).forEach((id, idx) => {
|
||||
const override = computedStyles
|
||||
.getPropertyValue(colorProp + "-" + idx)
|
||||
.trim();
|
||||
if (override.length > 0) {
|
||||
colors[key].overrides[id] = override;
|
||||
}
|
||||
colorIndices[key][id as string] = idx;
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -347,7 +301,8 @@ export class HuiEnergyUsageGraphCard
|
||||
energyData.stats,
|
||||
energyData.statsMetadata,
|
||||
statIds,
|
||||
colors,
|
||||
colorIndices,
|
||||
computedStyles,
|
||||
labels,
|
||||
false
|
||||
)
|
||||
@ -370,7 +325,8 @@ export class HuiEnergyUsageGraphCard
|
||||
energyData.statsCompare,
|
||||
energyData.statsMetadata,
|
||||
statIds,
|
||||
colors,
|
||||
colorIndices,
|
||||
computedStyles,
|
||||
labels,
|
||||
true
|
||||
)
|
||||
@ -392,14 +348,8 @@ export class HuiEnergyUsageGraphCard
|
||||
to_battery?: string[] | undefined;
|
||||
from_battery?: string[] | undefined;
|
||||
},
|
||||
colors: {
|
||||
to_grid: ColorSet;
|
||||
to_battery: ColorSet;
|
||||
from_grid: ColorSet;
|
||||
used_grid: ColorSet;
|
||||
used_solar: ColorSet;
|
||||
used_battery: ColorSet;
|
||||
},
|
||||
colorIndices: Record<string, Record<string, number>>,
|
||||
computedStyles: CSSStyleDeclaration,
|
||||
labels: {
|
||||
used_grid: string;
|
||||
used_solar: string;
|
||||
@ -553,19 +503,6 @@ export class HuiEnergyUsageGraphCard
|
||||
|
||||
Object.entries(combinedData).forEach(([type, sources]) => {
|
||||
Object.entries(sources).forEach(([statId, source], idx) => {
|
||||
let borderColor = colors[type].overrides?.[statId];
|
||||
if (!borderColor) {
|
||||
const modifiedColor =
|
||||
idx > 0
|
||||
? this.hass.themes.darkMode
|
||||
? labBrighten(rgb2lab(hex2rgb(colors[type].base)), idx)
|
||||
: labDarken(rgb2lab(hex2rgb(colors[type].base)), idx)
|
||||
: undefined;
|
||||
borderColor = modifiedColor
|
||||
? rgb2hex(lab2rgb(modifiedColor))
|
||||
: colors[type].base;
|
||||
}
|
||||
|
||||
const points: ScatterDataPoint[] = [];
|
||||
// Process chart data.
|
||||
for (const key of uniqueKeys) {
|
||||
@ -600,8 +537,22 @@ export class HuiEnergyUsageGraphCard
|
||||
: type === "to_battery"
|
||||
? Object.keys(combinedData).length
|
||||
: idx + 2,
|
||||
borderColor: compare ? borderColor + "7F" : borderColor,
|
||||
backgroundColor: compare ? borderColor + "32" : borderColor + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
compare,
|
||||
colorPropertyMap[type],
|
||||
colorIndices[type]?.[statId]
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
compare,
|
||||
colorPropertyMap[type],
|
||||
colorIndices[type]?.[statId]
|
||||
),
|
||||
stack: "stack",
|
||||
data: points,
|
||||
xAxisID: compare ? "xAxisCompare" : undefined,
|
||||
|
||||
@ -17,13 +17,7 @@ import {
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { classMap } from "lit/directives/class-map";
|
||||
import memoizeOne from "memoize-one";
|
||||
import {
|
||||
hex2rgb,
|
||||
lab2rgb,
|
||||
rgb2hex,
|
||||
rgb2lab,
|
||||
} from "../../../../common/color/convert-color";
|
||||
import { labBrighten, labDarken } from "../../../../common/color/lab";
|
||||
import { getEnergyColor } from "./common/color";
|
||||
import { formatNumber } from "../../../../common/number/format_number";
|
||||
import "../../../../components/chart/ha-chart-base";
|
||||
import "../../../../components/ha-card";
|
||||
@ -202,16 +196,12 @@ export class HuiEnergyWaterGraphCard
|
||||
const datasets: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
|
||||
|
||||
const computedStyles = getComputedStyle(this);
|
||||
const waterColor = computedStyles
|
||||
.getPropertyValue("--energy-water-color")
|
||||
.trim();
|
||||
|
||||
datasets.push(
|
||||
...this._processDataSet(
|
||||
energyData.stats,
|
||||
energyData.statsMetadata,
|
||||
waterSources,
|
||||
waterColor,
|
||||
computedStyles
|
||||
)
|
||||
);
|
||||
@ -233,7 +223,6 @@ export class HuiEnergyWaterGraphCard
|
||||
energyData.statsCompare,
|
||||
energyData.statsMetadata,
|
||||
waterSources,
|
||||
waterColor,
|
||||
computedStyles,
|
||||
true
|
||||
)
|
||||
@ -255,28 +244,12 @@ export class HuiEnergyWaterGraphCard
|
||||
statistics: Statistics,
|
||||
statisticsMetaData: Record<string, StatisticsMetaData>,
|
||||
waterSources: WaterSourceTypeEnergyPreference[],
|
||||
waterColor: string,
|
||||
computedStyles: CSSStyleDeclaration,
|
||||
compare = false
|
||||
) {
|
||||
const data: ChartDataset<"bar", ScatterDataPoint[]>[] = [];
|
||||
|
||||
waterSources.forEach((source, idx) => {
|
||||
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;
|
||||
|
||||
const waterConsumptionData: ScatterDataPoint[] = [];
|
||||
@ -315,8 +288,22 @@ export class HuiEnergyWaterGraphCard
|
||||
source.stat_energy_from,
|
||||
statisticsMetaData[source.stat_energy_from]
|
||||
),
|
||||
borderColor: compare ? borderColor + "7F" : borderColor,
|
||||
backgroundColor: compare ? borderColor + "32" : borderColor + "7F",
|
||||
borderColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
false,
|
||||
compare,
|
||||
"--energy-water-color",
|
||||
idx
|
||||
),
|
||||
backgroundColor: getEnergyColor(
|
||||
computedStyles,
|
||||
this.hass.themes.darkMode,
|
||||
true,
|
||||
compare,
|
||||
"--energy-water-color",
|
||||
idx
|
||||
),
|
||||
data: waterConsumptionData,
|
||||
order: 1,
|
||||
stack: "water",
|
||||
|
||||
@ -4003,6 +4003,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/color-name@npm:^1":
|
||||
version: 1.1.3
|
||||
resolution: "@types/color-name@npm:1.1.3"
|
||||
checksum: 10/9060d16d0bce2cdf562d6da54e18c5f23e80308ccb58b725b9173a028818f27d8e01c8a5cd96952e76f11145a7388ed7d2f450fb4652f4760383834f2e698263
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@types/command-line-args@npm:^5.0.0":
|
||||
version: 5.2.3
|
||||
resolution: "@types/command-line-args@npm:5.2.3"
|
||||
@ -9605,6 +9612,7 @@ __metadata:
|
||||
"@types/babel__plugin-transform-runtime": "npm:7.9.5"
|
||||
"@types/chromecast-caf-receiver": "npm:6.0.13"
|
||||
"@types/chromecast-caf-sender": "npm:1.0.8"
|
||||
"@types/color-name": "npm:^1"
|
||||
"@types/glob": "npm:8.1.0"
|
||||
"@types/html-minifier-terser": "npm:7.0.2"
|
||||
"@types/js-yaml": "npm:4.0.9"
|
||||
@ -9635,6 +9643,7 @@ __metadata:
|
||||
babel-plugin-template-html-minifier: "npm:4.1.0"
|
||||
chai: "npm:5.1.0"
|
||||
chart.js: "npm:4.4.1"
|
||||
color-name: "npm:~1.1.4"
|
||||
comlink: "npm:4.4.1"
|
||||
core-js: "npm:3.36.0"
|
||||
cropperjs: "npm:1.6.1"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user