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