feat(#224): Support "random" as a color value

Author: MindFreeze

README.md

@@ -75,7 +75,7 @@ Install through [HACS](https://hacs.xyz/)
 | name              | string  | **Optional** | entity name from HA | Custom label for this entity
 | icon              | string  | **Optional** | entity icon from HA | Custom icon for this entity
 | unit_of_measurement| string  | **Optional** | unit_of_measurement from HA | Custom unit_of_measurement for this entity. Useful when using attribute. If it contains a unit prefix, that must be in latin. Ex GВт, not ГВт
-| color             | string  | **Optional** | var(--primary-color)| Color of the box. Example values: 'red', '#FFAA2C', 'rgb(255, 170, 44)'
+| color             | string  | **Optional** | var(--primary-color)| Color of the box. Example values: 'red', '#FFAA2C', 'rgb(255, 170, 44)', 'random' (assigns a random RGB color)
 | color_on_state    | boolean | **Optional** | false               | Color the box based on state value
 | color_limit       | string  | **Optional** | 1                   | State value for coloring the box based on state value
 | color_above       | string  | **Optional** | var(--paper-item-icon-color)| Color for state value above color_limit

src/chart.ts

@@ -9,7 +9,7 @@ import { HomeAssistant } from 'custom-card-helpers'; // This is a community main
 import type { Config, SectionState, Box, ConnectionState, EntityConfigInternal, NormalizedState } from './types';
 import { localize } from './localize/localize';
 import styles from './styles';
-import { getEntityId, normalizeStateValue, renderError, sortBoxes } from './utils';
+import { getEntityId, normalizeStateValue, renderError, sortBoxes, generateRandomRGBColor } from './utils';
 import { HassEntities, HassEntity } from 'home-assistant-js-websocket';
 import { handleAction } from './handle-actions';
 import { filterConfigByZoomEntity } from './zoom';
@@ -40,6 +40,8 @@ export class Chart extends LitElement {
   @state() public zoomEntity?: EntityConfigInternal;
   @state() public error?: Error;
 
+  private randomColors = new Map<string, string>();
+
   // https://lit.dev/docs/components/lifecycle/#reactive-update-cycle-performing
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (!this.config) {
@@ -339,7 +341,13 @@ export class Chart extends LitElement {
           total += state;
 
           let finalColor = entityConf.color || 'var(--primary-color)';
-          if (entityConf.color_on_state) {
+          if (entityConf.color === 'random') {
+            const entityId = getEntityId(entityConf);
+            if (!this.randomColors.has(entityId)) {
+              this.randomColors.set(entityId, generateRandomRGBColor());
+            }
+            finalColor = this.randomColors.get(entityId)!;
+          } else if (entityConf.color_on_state) {
             let state4color = state;
             if (entityConf.type === 'passthrough') {
               // passthrough color is based on the child state

src/utils.ts

@@ -34,6 +34,13 @@ import {
   startOfYear,
 } from 'date-fns';
 
+export function generateRandomRGBColor(): string {
+  const r = Math.floor(Math.random() * 256);
+  const g = Math.floor(Math.random() * 256);
+  const b = Math.floor(Math.random() * 256);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
 export function cloneObj<T extends Record<string, unknown>>(obj: T): T {
   return JSON.parse(JSON.stringify(obj));
 }