Themed graph color support for energy devices graphs (#19998)

Themed graph color support for energy devices

src/common/color/colors.ts

@@ -1,3 +1,5 @@
+import { theme2hex } from "./convert-color";
+
 export const COLORS = [
   "#44739e",
   "#984ea3",
@@ -65,10 +67,10 @@ export function getColorByIndex(index: number) {
 export function getGraphColorByIndex(
   index: number,
   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.
-  return (
+  const themeColor =
     style.getPropertyValue(`--graph-color-${index + 1}`) ||
-    getColorByIndex(index)
-  );
+    getColorByIndex(index);
+  return theme2hex(themeColor);
 }

src/common/color/convert-color.ts

@@ -1,3 +1,4 @@
+import colors from "color-name";
 import { expandHex } from "./hex";
 
 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] =>
   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);
+}

src/panels/lovelace/cards/energy/common/color.ts

@@ -1,9 +1,9 @@
-import colors from "color-name";
 import {
   hex2rgb,
   lab2rgb,
   rgb2hex,
   rgb2lab,
+  theme2hex,
 } from "../../../../../common/color/convert-color";
 import { labBrighten, labDarken } from "../../../../../common/color/lab";
 
@@ -24,19 +24,7 @@ export function getEnergyColor(
       ? 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);
-  }
+  let hexColor = theme2hex(themeColor);
 
   if (themeIdxColor.length === 0 && idx) {
     // Brighten or darken the color based on set position.

src/panels/lovelace/cards/energy/hui-energy-devices-detail-graph-card.ts

@@ -17,7 +17,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 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 "../../../../components/ha-card";
 import {
@@ -202,6 +202,8 @@ export class HuiEnergyDevicesDetailGraphCard
     const data = energyData.stats;
     const compareData = energyData.statsCompare;
 
+    const computedStyle = getComputedStyle(this);
+
     const growthValues = {};
     energyData.prefs.device_consumption.forEach((device) => {
       const value =
@@ -222,6 +224,7 @@ export class HuiEnergyDevicesDetailGraphCard
 
     const { data: processedData, dataExtras: processedDataExtras } =
       this._processDataSet(
+        computedStyle,
         data,
         energyData.statsMetadata,
         energyData.prefs.device_consumption,
@@ -254,6 +257,7 @@ export class HuiEnergyDevicesDetailGraphCard
         data: processedCompareData,
         dataExtras: processedCompareDataExtras,
       } = this._processDataSet(
+        computedStyle,
         compareData,
         energyData.statsMetadata,
         energyData.prefs.device_consumption,
@@ -278,6 +282,7 @@ export class HuiEnergyDevicesDetailGraphCard
   }
 
   private _processDataSet(
+    computedStyle: CSSStyleDeclaration,
     statistics: Statistics,
     statisticsMetaData: Record<string, StatisticsMetaData>,
     devices: DeviceConsumptionEnergyPreference[],
@@ -288,7 +293,7 @@ export class HuiEnergyDevicesDetailGraphCard
     const dataExtras: ChartDatasetExtra[] = [];
 
     devices.forEach((source, idx) => {
-      const color = getColorByIndex(idx);
+      const color = getGraphColorByIndex(idx, computedStyle);
 
       let prevStart: number | null = null;
 

src/panels/lovelace/cards/energy/hui-energy-devices-graph-card.ts

@@ -18,7 +18,7 @@ import {
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 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 {
   formatNumber,
@@ -253,15 +253,17 @@ export class HuiEnergyDevicesGraphCard
 
     chartData.length = this._config?.max_devices || chartData.length;
 
+    const computedStyle = getComputedStyle(this);
+
     chartData.forEach((d: any) => {
-      const color = getColorByIndex(d.idx);
+      const color = getGraphColorByIndex(d.idx, computedStyle);
 
       borderColor.push(color);
       backgroundColor.push(color + "7F");
     });
 
     chartDataCompare.forEach((d: any) => {
-      const color = getColorByIndex(d.idx);
+      const color = getGraphColorByIndex(d.idx, computedStyle);
 
       borderColorCompare.push(color + "7F");
       backgroundColorCompare.push(color + "32");