Allow theme colors for individual sets in energy-usage-graph-card (#17527)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

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

@@ -44,6 +44,11 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceCard } from "../../types";
 import { EnergyUsageGraphCardConfig } from "../types";
 
+interface ColorSet {
+  base: string;
+  overrides?: Record<string, string>;
+}
+
 @customElement("hui-energy-usage-graph-card")
 export class HuiEnergyUsageGraphCard
   extends SubscribeMixin(LitElement)
@@ -354,26 +359,68 @@ export class HuiEnergyUsageGraphCard
     }
 
     const computedStyles = getComputedStyle(this);
-    const colors = {
+
-      to_grid: computedStyles
+    const colorPropertyMap = {
-        .getPropertyValue("--energy-grid-return-color")
+      to_grid: "--energy-grid-return-color",
-        .trim(),
+      to_battery: "--energy-battery-in-color",
-      to_battery: computedStyles
+      from_grid: "--energy-grid-consumption-color",
-        .getPropertyValue("--energy-battery-in-color")
+      used_grid: "--energy-grid-consumption-color",
-        .trim(),
+      used_solar: "--energy-solar-color",
-      from_grid: computedStyles
+      used_battery: "--energy-battery-out-color",
-        .getPropertyValue("--energy-grid-consumption-color")
-        .trim(),
-      used_grid: computedStyles
-        .getPropertyValue("--energy-grid-consumption-color")
-        .trim(),
-      used_solar: computedStyles
-        .getPropertyValue("--energy-solar-color")
-        .trim(),
-      used_battery: computedStyles
-        .getPropertyValue("--energy-battery-out-color")
-        .trim(),
     };
+
+    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 (
+        key === "used_grid" ||
+        key === "used_solar" ||
+        key === "used_battery"
+      ) {
+        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;
+          }
+        });
+      }
+    });
+
     const labels = {
       used_grid: this.hass.localize(
         "ui.panel.lovelace.cards.energy.energy_usage_graph.combined_from_grid"
@@ -443,12 +490,12 @@ export class HuiEnergyUsageGraphCard
       from_battery?: string[] | undefined;
     },
     colors: {
-      to_grid: string;
+      to_grid: ColorSet;
-      to_battery: string;
+      to_battery: ColorSet;
-      from_grid: string;
+      from_grid: ColorSet;
-      used_grid: string;
+      used_grid: ColorSet;
-      used_solar: string;
+      used_solar: ColorSet;
-      used_battery: string;
+      used_battery: ColorSet;
     },
     labels: {
       used_grid: string;
@@ -598,15 +645,18 @@ export class HuiEnergyUsageGraphCard
 
     Object.entries(combinedData).forEach(([type, sources]) => {
       Object.entries(sources).forEach(([statId, source], idx) => {
-        const modifiedColor =
+        let borderColor = colors[type].overrides?.[statId];
-          idx > 0
+        if (!borderColor) {
-            ? this.hass.themes.darkMode
+          const modifiedColor =
-              ? labBrighten(rgb2lab(hex2rgb(colors[type])), idx)
+            idx > 0
-              : labDarken(rgb2lab(hex2rgb(colors[type])), idx)
+              ? this.hass.themes.darkMode
-            : undefined;
+                ? labBrighten(rgb2lab(hex2rgb(colors[type].base)), idx)
-        const borderColor = modifiedColor
+                : labDarken(rgb2lab(hex2rgb(colors[type].base)), idx)
-          ? rgb2hex(lab2rgb(modifiedColor))
+              : undefined;
-          : colors[type];
+          borderColor = modifiedColor
+            ? rgb2hex(lab2rgb(modifiedColor))
+            : colors[type].base;
+        }
 
         const points: ScatterDataPoint[] = [];
         // Process chart data.