Added option to set custom color schemes

Author: dbuezas

dist/plotly-graph-card.js

@@ -138,7 +138,10 @@ entities:
   - sensor.temperature1
   - sensor.temperature2
 color_scheme: dutch_field
-# color_scheme: 1 # or use numbers instead 0 to 24 available
+# or use numbers instead 0 to 24 available:
+# color_scheme: 1 
+# or pass your color scheme
+# color_scheme: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","red"]
 ```
 
 ### Attribute values
@@ -335,6 +338,8 @@ Update data every `refresh_interval` seconds. Use `0` or delete the line to disa
 - run `npm start`
 - From a dashboard in edit mode, go to `Manage resources` and add `http://127.0.0.1:8000/plotly-graph-card.js` as url with resource type JavaScript
 - ATTENTION: The development card is `type: custom:plotly-graph-dev`
+- Either use Safari or Disbale [chrome://flags/#block-insecure-private-network-requests](chrome://flags/#block-insecure-private-network-requests): Chrome doesn't allow public network resources from requesting private-network resources - unless the public-network resource is secure (HTTPS) and the private-network resource provides appropriate (yet-undefined) CORS headers. More [here](https://stackoverflow.com/questions/66534759/chrome-cors-error-on-request-to-localhost-dev-server-from-remote-site)
+
 
 # Build
 

readme.md

@@ -4,7 +4,7 @@ Usage example in YAML:
   color_scheme: accent
   color_scheme: 0 # both mean the same
 */
-
+export type ColorSchemeArray = string[]
 const colorSchemes = {
   // https://vega.github.io/vega/docs/schemes/#categorical
   accent: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"],
@@ -34,5 +34,9 @@ const colorSchemes = {
   pink_foam: ["#54bebe", "#76c8c8", "#98d1d1", "#badbdb", "#dedad2", "#e4bcad", "#df979e", "#d7658b", "#c80064"],
   salmon_to_aqua: ["#e27c7c", "#a86464", "#6d4b4b", "#503f3f", "#333333", "#3c4e4b", "#466964", "#599e94", "#6cd4c5"],
 }
+export function isColorSchemeArray(obj: any): obj is ColorSchemeArray{
+  return Array.isArray(obj)
+}
+
 export default colorSchemes
 export type ColorSchemeNames = keyof typeof colorSchemes

src/color-schemes.ts

@@ -12,8 +12,8 @@ import getThemedLayout from "./themed-layout";
 import isProduction from "./is-production";
 import { sleep } from "./utils";
 import { Datum } from "plotly.js";
-import colorSchemes from "./color-schemes";
-import {parseISO} from 'date-fns'
+import colorSchemes, { isColorSchemeArray } from "./color-schemes";
+import { parseISO } from "date-fns";
 
 const componentName = isProduction ? "plotly-graph" : "plotly-graph-dev";
 
@@ -195,10 +195,11 @@ export class PlotlyGraph extends HTMLElement {
         },
       };
     }
-    const colorScheme =
-      colorSchemes[schemeName] ||
-      colorSchemes[Object.keys(colorSchemes)[schemeName]] ||
-      colorSchemes.category10;
+    const colorScheme = isColorSchemeArray(schemeName)
+      ? schemeName
+      : colorSchemes[schemeName] ||
+        colorSchemes[Object.keys(colorSchemes)[schemeName]] ||
+        colorSchemes.category10;
     const newConfig: Config = {
       hours_to_show: config.hours_to_show ?? 1,
       refresh_interval: config.refresh_interval ?? 0,
@@ -347,9 +348,13 @@ export class PlotlyGraph extends HTMLElement {
       );
       const traces: Plotly.Data[] = [mergedTrace];
       if (mergedTrace.show_value) {
-        merge(mergedTrace, {
-          legendgroup: "group" + traceIdx,
-        }, mergedTrace);
+        merge(
+          mergedTrace,
+          {
+            legendgroup: "group" + traceIdx,
+          },
+          mergedTrace
+        );
         traces.push({
           // @ts-expect-error (texttemplate missing in plotly typings)
           texttemplate: `%{y}%{customdata.unit_of_measurement}`, // here so it can be overwritten

src/plotly-graph-card.ts

@@ -1,11 +1,11 @@
 import { Datum } from "plotly.js";
-import { ColorSchemeNames } from "./color-schemes";
+import { ColorSchemeArray, ColorSchemeNames } from "./color-schemes";
 
 export type InputConfig = {
   type: "custom:plotly-graph-card";
   hours_to_show?: number;
   refresh_interval?: number; // in seconds
-  color_scheme?: ColorSchemeNames;
+  color_scheme?: ColorSchemeNames | ColorSchemeArray | number;
   title?: string;
   entities: (Partial<Plotly.PlotData> & {
     entity: string;