Themed graph color support for energy devices graphs (#19998)
Themed graph color support for energy devices
This commit is contained in:
parent
d5de435f06
commit
707520c15c
|
@ -1,3 +1,5 @@
|
||||||
|
import { theme2hex } from "./convert-color";
|
||||||
|
|
||||||
export const COLORS = [
|
export const COLORS = [
|
||||||
"#44739e",
|
"#44739e",
|
||||||
"#984ea3",
|
"#984ea3",
|
||||||
|
@ -65,10 +67,10 @@ export function getColorByIndex(index: number) {
|
||||||
export function getGraphColorByIndex(
|
export function getGraphColorByIndex(
|
||||||
index: number,
|
index: number,
|
||||||
style: CSSStyleDeclaration
|
style: CSSStyleDeclaration
|
||||||
) {
|
): string {
|
||||||
// The CSS vars for the colors use range 1..n, so we need to adjust the index from the internal 0..n color index range.
|
// The CSS vars for the colors use range 1..n, so we need to adjust the index from the internal 0..n color index range.
|
||||||
return (
|
const themeColor =
|
||||||
style.getPropertyValue(`--graph-color-${index + 1}`) ||
|
style.getPropertyValue(`--graph-color-${index + 1}`) ||
|
||||||
getColorByIndex(index)
|
getColorByIndex(index);
|
||||||
);
|
return theme2hex(themeColor);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
import colors from "color-name";
|
||||||
import { expandHex } from "./hex";
|
import { expandHex } from "./hex";
|
||||||
|
|
||||||
const rgb_hex = (component: number): string => {
|
const rgb_hex = (component: number): string => {
|
||||||
|
@ -126,3 +127,18 @@ export const rgb2hs = (rgb: [number, number, number]): [number, number] =>
|
||||||
|
|
||||||
export const hs2rgb = (hs: [number, number]): [number, number, number] =>
|
export const hs2rgb = (hs: [number, number]): [number, number, number] =>
|
||||||
hsv2rgb([hs[0], hs[1], 255]);
|
hsv2rgb([hs[0], hs[1], 255]);
|
||||||
|
|
||||||
|
export function theme2hex(themeColor: string): string {
|
||||||
|
if (themeColor.startsWith("#")) {
|
||||||
|
return themeColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
return rgb2hex(rgbFromColorName);
|
||||||
|
}
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import colors from "color-name";
|
|
||||||
import {
|
import {
|
||||||
hex2rgb,
|
hex2rgb,
|
||||||
lab2rgb,
|
lab2rgb,
|
||||||
rgb2hex,
|
rgb2hex,
|
||||||
rgb2lab,
|
rgb2lab,
|
||||||
|
theme2hex,
|
||||||
} from "../../../../../common/color/convert-color";
|
} from "../../../../../common/color/convert-color";
|
||||||
import { labBrighten, labDarken } from "../../../../../common/color/lab";
|
import { labBrighten, labDarken } from "../../../../../common/color/lab";
|
||||||
|
|
||||||
|
@ -24,19 +24,7 @@ export function getEnergyColor(
|
||||||
? themeIdxColor
|
? themeIdxColor
|
||||||
: computedStyles.getPropertyValue(propertyName).trim();
|
: computedStyles.getPropertyValue(propertyName).trim();
|
||||||
|
|
||||||
let hexColor;
|
let hexColor = theme2hex(themeColor);
|
||||||
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) {
|
if (themeIdxColor.length === 0 && idx) {
|
||||||
// Brighten or darken the color based on set position.
|
// Brighten or darken the color based on set position.
|
||||||
|
|
|
@ -17,7 +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 { getColorByIndex } from "../../../../common/color/colors";
|
import { getGraphColorByIndex } from "../../../../common/color/colors";
|
||||||
import { ChartDatasetExtra } from "../../../../components/chart/ha-chart-base";
|
import { ChartDatasetExtra } from "../../../../components/chart/ha-chart-base";
|
||||||
import "../../../../components/ha-card";
|
import "../../../../components/ha-card";
|
||||||
import {
|
import {
|
||||||
|
@ -202,6 +202,8 @@ export class HuiEnergyDevicesDetailGraphCard
|
||||||
const data = energyData.stats;
|
const data = energyData.stats;
|
||||||
const compareData = energyData.statsCompare;
|
const compareData = energyData.statsCompare;
|
||||||
|
|
||||||
|
const computedStyle = getComputedStyle(this);
|
||||||
|
|
||||||
const growthValues = {};
|
const growthValues = {};
|
||||||
energyData.prefs.device_consumption.forEach((device) => {
|
energyData.prefs.device_consumption.forEach((device) => {
|
||||||
const value =
|
const value =
|
||||||
|
@ -222,6 +224,7 @@ export class HuiEnergyDevicesDetailGraphCard
|
||||||
|
|
||||||
const { data: processedData, dataExtras: processedDataExtras } =
|
const { data: processedData, dataExtras: processedDataExtras } =
|
||||||
this._processDataSet(
|
this._processDataSet(
|
||||||
|
computedStyle,
|
||||||
data,
|
data,
|
||||||
energyData.statsMetadata,
|
energyData.statsMetadata,
|
||||||
energyData.prefs.device_consumption,
|
energyData.prefs.device_consumption,
|
||||||
|
@ -254,6 +257,7 @@ export class HuiEnergyDevicesDetailGraphCard
|
||||||
data: processedCompareData,
|
data: processedCompareData,
|
||||||
dataExtras: processedCompareDataExtras,
|
dataExtras: processedCompareDataExtras,
|
||||||
} = this._processDataSet(
|
} = this._processDataSet(
|
||||||
|
computedStyle,
|
||||||
compareData,
|
compareData,
|
||||||
energyData.statsMetadata,
|
energyData.statsMetadata,
|
||||||
energyData.prefs.device_consumption,
|
energyData.prefs.device_consumption,
|
||||||
|
@ -278,6 +282,7 @@ export class HuiEnergyDevicesDetailGraphCard
|
||||||
}
|
}
|
||||||
|
|
||||||
private _processDataSet(
|
private _processDataSet(
|
||||||
|
computedStyle: CSSStyleDeclaration,
|
||||||
statistics: Statistics,
|
statistics: Statistics,
|
||||||
statisticsMetaData: Record<string, StatisticsMetaData>,
|
statisticsMetaData: Record<string, StatisticsMetaData>,
|
||||||
devices: DeviceConsumptionEnergyPreference[],
|
devices: DeviceConsumptionEnergyPreference[],
|
||||||
|
@ -288,7 +293,7 @@ export class HuiEnergyDevicesDetailGraphCard
|
||||||
const dataExtras: ChartDatasetExtra[] = [];
|
const dataExtras: ChartDatasetExtra[] = [];
|
||||||
|
|
||||||
devices.forEach((source, idx) => {
|
devices.forEach((source, idx) => {
|
||||||
const color = getColorByIndex(idx);
|
const color = getGraphColorByIndex(idx, computedStyle);
|
||||||
|
|
||||||
let prevStart: number | null = null;
|
let prevStart: number | null = null;
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,7 @@ import {
|
||||||
import { customElement, property, query, state } from "lit/decorators";
|
import { customElement, property, query, 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 { getColorByIndex } from "../../../../common/color/colors";
|
import { getGraphColorByIndex } from "../../../../common/color/colors";
|
||||||
import { fireEvent } from "../../../../common/dom/fire_event";
|
import { fireEvent } from "../../../../common/dom/fire_event";
|
||||||
import {
|
import {
|
||||||
formatNumber,
|
formatNumber,
|
||||||
|
@ -253,15 +253,17 @@ export class HuiEnergyDevicesGraphCard
|
||||||
|
|
||||||
chartData.length = this._config?.max_devices || chartData.length;
|
chartData.length = this._config?.max_devices || chartData.length;
|
||||||
|
|
||||||
|
const computedStyle = getComputedStyle(this);
|
||||||
|
|
||||||
chartData.forEach((d: any) => {
|
chartData.forEach((d: any) => {
|
||||||
const color = getColorByIndex(d.idx);
|
const color = getGraphColorByIndex(d.idx, computedStyle);
|
||||||
|
|
||||||
borderColor.push(color);
|
borderColor.push(color);
|
||||||
backgroundColor.push(color + "7F");
|
backgroundColor.push(color + "7F");
|
||||||
});
|
});
|
||||||
|
|
||||||
chartDataCompare.forEach((d: any) => {
|
chartDataCompare.forEach((d: any) => {
|
||||||
const color = getColorByIndex(d.idx);
|
const color = getGraphColorByIndex(d.idx, computedStyle);
|
||||||
|
|
||||||
borderColorCompare.push(color + "7F");
|
borderColorCompare.push(color + "7F");
|
||||||
backgroundColorCompare.push(color + "32");
|
backgroundColorCompare.push(color + "32");
|
||||||
|
|
Loading…
Reference in New Issue