Added color schemes, defaults entity, yaxis and show_value for entities

Author: David Buezas

readme.md

@@ -12,9 +12,6 @@
 <img src="https://user-images.githubusercontent.com/52346449/142386216-dfc22660-b053-495d-906f-0ebccbdf985f.png" width="300" align="right" >
 <br clear="left"/>
 
-
-
-
 ## [Post in HomeAssistant community forum](https://community.home-assistant.io/t/plotly-interactive-graph-card/347746)
 
 You may find some extra info there in this link
@@ -133,12 +130,26 @@ entities:
   - entity: sensor.humidity
 ```
 
+## Color schemes
+
+Changes default line colors.
+See more here: https://github.com/dbuezas/lovelace-plotly-graph-card/blob/master/src/color-schemes.ts
+
+```yaml
+type: custom:plotly-graph
+entities:
+  - sensor.temperature1
+  - sensor.temperature2
+color_scheme: dutch_field
+# color_scheme: 1 # or use numbers instead 0 to 24 available
+```
+
 ### Attribute values
 
 Plot the attributes of an entity by adding `::atribute_name` to the entity name
 
 ```yaml
-entities: 
+entities:
   - entity: climate.living::temperature
   - entity: climate.kitchen::temperature
 ```
@@ -152,6 +163,7 @@ entities:
     lambda: |- # Transforms the data
       (ys) => ys.map(y => (y × 9/5) + 32)
     unit_of_measurement: °F # Overrides the unit
+    show_value: true # shows the last known value of each entity in the graph
 ```
 
 ### `lambda:` transforms
@@ -257,15 +269,21 @@ note: `ys[0]` represents the first "known" value, which is the value furthest to
     })
 ```
 
-## Default trace styling
+## Default trace & axis styling
+
+default configurations for all entities and all yaxes (e.g yaxis, yaxis2, yaxis3, etc).
 
 ```yaml
-entities: sensor.temperature1
-  sensor.temperature2
-default_trace:
-  fill: tozeroy
-  line:
-    width: 2
+entities:
+  - sensor.temperature1
+  - sensor.temperature2
+defaults:
+  entity:
+    fill: tozeroy
+    line:
+      width: 2
+  yaxis:
+    fixedrange: true # disables vertical zoom & scroll
 ```
 
 ## layout:

src/color-schemes.ts

@@ -0,0 +1,41 @@
+/*
+r=Array.from(document.querySelectorAll(".scheme")).slice(0,14).map(el=>{
+  const name= el.querySelector("a").name
+  const list = Array.from(el.querySelectorAll(".swatch div")).map(el=>`"${el.title}"`)
+  return `${name}: [${list}]`
+}).join(',\n')
+copy(r)
+*/
+
+
+const colorSchemes = {
+  // https://vega.github.io/vega/docs/schemes/#categorical
+  accent: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"],
+  category10: ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"],
+  category20: ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"],
+  category20b: ["#393b79","#5254a3","#6b6ecf","#9c9ede","#637939","#8ca252","#b5cf6b","#cedb9c","#8c6d31","#bd9e39","#e7ba52","#e7cb94","#843c39","#ad494a","#d6616b","#e7969c","#7b4173","#a55194","#ce6dbd","#de9ed6"],
+  category20c: ["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b","#fdd0a2","#31a354","#74c476","#a1d99b","#c7e9c0","#756bb1","#9e9ac8","#bcbddc","#dadaeb","#636363","#969696","#bdbdbd","#d9d9d9"],
+  dark2: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"],
+  paired: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"],
+  pastel1: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"],
+  pastel2: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"],
+  set1: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"],
+  set2: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"],
+  set3: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"],
+  tableau10: ["#4c78a8","#f58518","#e45756","#72b7b2","#54a24b","#eeca3b","#b279a2","#ff9da6","#9d755d","#bab0ac"],
+  tableau20: ["#4c78a8","#9ecae9","#f58518","#ffbf79","#54a24b","#88d27a","#b79a20","#f2cf5b","#439894","#83bcb6","#e45756","#ff9d98","#79706e","#bab0ac","#d67195","#fcbfd2","#b279a2","#d6a5c9","#9e765f","#d8b5a5"],
+  // https://www.omnisci.com/blog/12-color-palettes-for-telling-better-stories-with-your-data
+  retro_metro: ["#ea5545", "#f46a9b", "#ef9b20", "#edbf33", "#ede15b", "#bdcf32", "#87bc45", "#27aeef", "#b33dc6"],
+  dutch_field: ["#e60049", "#0bb4ff", "#50e991", "#e6d800", "#9b19f5", "#ffa300", "#dc0ab4", "#b3d4ff", "#00bfa0"],
+  river_nights: ["#b30000", "#7c1158", "#4421af", "#1a53ff", "#0d88e6", "#00b7c7", "#5ad45a", "#8be04e", "#ebdc78"],
+  spring_pastels: ["#fd7f6f", "#7eb0d5", "#b2e061", "#bd7ebe", "#ffb55a", "#ffee65", "#beb9db", "#fdcce5", "#8bd3c7"],
+  blue_to_yellow: ["#115f9a", "#1984c5", "#22a7f0", "#48b5c4", "#76c68f", "#a6d75b", "#c9e52f", "#d0ee11", "#d0f400"],
+  grey_to_red: ["#d7e1ee", "#cbd6e4", "#bfcbdb", "#b3bfd1", "#a4a2a8", "#df8879", "#c86558", "#b04238", "#991f17"],
+  black_to_pink: ["#2e2b28", "#3b3734", "#474440", "#54504c", "#6b506b", "#ab3da9", "#de25da", "#eb44e8", "#ff80ff"],
+  blue_to_red: ["#1984c5", "#22a7f0", "#63bff0", "#a7d5ed", "#e2e2e2", "#e1a692", "#de6e56", "#e14b31", "#c23728"],
+  orange_to_purple: ["#ffb400", "#d2980d", "#a57c1b", "#786028", "#363445", "#48446e", "#5e569b", "#776bcd", "#9080ff"],
+  pink_foam: ["#54bebe", "#76c8c8", "#98d1d1", "#badbdb", "#dedad2", "#e4bcad", "#df979e", "#d7658b", "#c80064"],
+  salmon_to_aqua: ["#e27c7c", "#a86464", "#6d4b4b", "#503f3f", "#333333", "#3c4e4b", "#466964", "#599e94", "#6cd4c5"],
+}
+export default colorSchemes
+export type ColorSchemeNames = keyof typeof colorSchemes

src/plotly-graph-card.ts

@@ -13,6 +13,7 @@ import getThemedLayout from "./themed-layout";
 import isProduction from "./is-production";
 import { sleep } from "./utils";
 import { Datum } from "plotly.js";
+import colorSchemes from "./color-schemes";
 
 const componentName = isProduction ? "plotly-graph" : "plotly-graph-dev";
 
@@ -261,7 +262,7 @@ export class PlotlyGraph extends HTMLElement {
 
     const units = this.getAllUnitsOfMeasurement();
 
-    return entities.map((trace) => {
+    return entities.flatMap((trace, traceIdx) => {
       const entity_id = trace.entity;
       const history = histories[entity_id] || {};
       const attribute = attributes[entity_id] || {};
@@ -284,11 +285,17 @@ export class PlotlyGraph extends HTMLElement {
             if (r.x) xs = r.x;
             if (r.y) ys = r.y;
           }
-        } catch (e){
-          console.error(e)
+        } catch (e) {
+          console.error(e);
         }
       }
-      return merge(
+
+      const schemeName = this.config.color_scheme ?? "category10" 
+      let colorScheme = 
+        colorSchemes[schemeName] ||
+        colorSchemes[Object.keys(colorSchemes)[schemeName]]||
+        colorSchemes.category10;
+      const mergedTrace = merge(
         {
           entity_id,
           name,
@@ -297,14 +304,37 @@ export class PlotlyGraph extends HTMLElement {
           line: {
             width: 1,
             shape: "hv",
+            color: colorScheme[traceIdx % colorScheme.length],
           },
+          legendgroup: "group" + traceIdx,
           x: xs,
           y: ys,
           yaxis: "y" + (yaxis_idx == 0 ? "" : yaxis_idx + 1),
         },
-        this.config.default_trace,
+        this.config.defaults?.entity,
         trace
       );
+      const traces: Plotly.Data[] = [mergedTrace];
+      if (mergedTrace.show_value) {
+        traces.push({
+          ...mergedTrace,
+          mode: "text+markers",
+          // @ts-expect-error (texttemplate missing in plotly typings)
+          texttemplate: `%{y}${unit}`,
+          legendgroup: "group" + traceIdx,
+          showlegend: false,
+          textposition: "middle right",
+          marker: {
+            color: mergedTrace.line.color,
+          },
+          textfont: {
+            color: mergedTrace.line.color,
+          },
+          x: mergedTrace.x.slice(-1),
+          y: mergedTrace.y.slice(-1),
+        });
+      }
+      return traces;
     });
   }
 
@@ -318,6 +348,17 @@ export class PlotlyGraph extends HTMLElement {
 
     const layout = merge(
       { uirevision: true },
+      {
+        yaxis: this.config.defaults?.yaxis,
+        yaxis2: this.config.defaults?.yaxis,
+        yaxis3: this.config.defaults?.yaxis,
+        yaxis4: this.config.defaults?.yaxis,
+        yaxis5: this.config.defaults?.yaxis,
+        yaxis6: this.config.defaults?.yaxis,
+        yaxis7: this.config.defaults?.yaxis,
+        yaxis8: this.config.defaults?.yaxis,
+        yaxis9: this.config.defaults?.yaxis,
+      },
       this.config.no_default_layout ? {} : yAxisTitles,
       this.getThemedLayout(),
       this.size,

src/types.ts

@@ -1,15 +1,21 @@
 import { Datum } from "plotly.js";
+import { ColorSchemeNames } from "./color-schemes";
 
 export type Config = {
   type: "custom:plotly-graph-card";
   hours_to_show?: number;
   refresh_interval?: number; // in seconds
+  color_scheme?: ColorSchemeNames;
   entities: (Partial<Plotly.PlotData> & {
     entity: string;
     unit_of_measurement?: string;
     lambda?: (y: Datum[], x: Date[], raw_entity: History) => Datum[] | {x?:Datum[], y?:Datum[]};
+    show_value?: boolean;
   })[];
-  default_trace?: Partial<Plotly.PlotData>,
+  defaults?: {
+    entity?: Partial<Plotly.PlotData>,
+    yaxis?: Partial<Plotly.Layout["yaxis"]>,
+  }
   layout?: Partial<Plotly.Layout>;
   config?: Partial<Plotly.Config>;
   no_theme?: boolean;