follows home assistant theme

Author: David Buezas

package-lock.json

@@ -21,7 +21,9 @@
     "ts-jest": "^27.0.6"
   },
   "dependencies": {
+    "@types/lodash": "^4.14.175",
     "custom-card-helpers": "^1.8.0",
+    "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "plotly.js": "^2.5.1"
   }

package.json

@@ -4,7 +4,7 @@ import { TimestampRange, History } from "./types";
 
 type Histories = Record<string, History>;
 
-function mapValues<T, S>(
+export function mapValues<T, S>(
   o: Record<string, T>,
   fn: (value: T, key: string) => S
 ) {

src/Cache.ts

@@ -1,15 +1,14 @@
 import { version } from "../package.json";
 import { HomeAssistant } from "custom-card-helpers";
-import insertStyleHack from "./styleHack";
+import insertStyleHack from "./style-hack";
 import Plotly from "./plotly";
 import { Config } from "./types";
 import { TimestampRange } from "./types";
 import Cache from "./Cache";
 import merge from "lodash-es/merge";
-import * as themes from "./themes";
+import getThemedLayout from "./themed-layout";
 import EventEmitter from "events";
-
-import autorange from "./autorange";
+import mapValues from "lodash/mapValues";
 
 console.info(
   `%c PLOTLY-GRAPH-CARD %c ${version} `,
@@ -28,6 +27,7 @@ export class PlotlyGraph extends HTMLElement {
   hass!: HomeAssistant; // set externally
   isBrowsing = false;
   isInternalRelayout = false;
+
   handles: {
     resizeObserver?: ResizeObserver;
     relayoutListener?: EventEmitter;
@@ -42,18 +42,25 @@ export class PlotlyGraph extends HTMLElement {
     if (!this.contentEl) {
       this.innerHTML = `
         <style>
+          ha-card{
+            padding: 5px;
+          }
           button#reset.hidden{
             display: none;
           }
           button#reset {
             position: absolute;
-            top: 10px;
+            top: 15px;
+            left: 15px;
             display: block;
           }
         </style>
-        <div> </div>
+        <ha-card>
+          <div id="plotly"> </div>
+        </ha-card>
         <button id="reset" class="hidden">reset</button>`;
-      this.contentEl = this.querySelector("div")!;
+
+      this.contentEl = this.querySelector("div#plotly")!;
       this.buttonEl = this.querySelector("button#reset")!;
       this.buttonEl.addEventListener("click", this.exitBrowsingMode);
       insertStyleHack(this.querySelector("style")!);
@@ -145,6 +152,18 @@ export class PlotlyGraph extends HTMLElement {
 
     await this.plot();
   };
+  getThemedLayout() {
+    const styles = window.getComputedStyle(this.contentEl);
+    let haTheme = {
+      "--card-background-color": "red",
+      "--primary-background-color": "red",
+      "--primary-color": "red",
+      "--primary-text-color": "red",
+      "--secondary-text-color": "red",
+    };
+    haTheme = mapValues(haTheme, (_, key) => styles.getPropertyValue(key));
+    return getThemedLayout(haTheme);
+  }
   async plot() {
     if (!this.config) return;
     if (!this.hass) return;
@@ -162,10 +181,16 @@ export class PlotlyGraph extends HTMLElement {
       ({ unit_of_measurement }) => unit_of_measurement
     )[0];
     const { layout, config, width, contentEl, data } = this;
-    const themeLayout = themes[config.theme!] || themes.dark;
-    merge(layout, { yaxis: { title: unit } }, themeLayout, config.layout, {
-      width,
-    });
+
+    merge(
+      layout,
+      { yaxis: { title: unit } },
+      this.getThemedLayout(),
+      config.layout,
+      {
+        width,
+      }
+    );
     const plotlyConfig: Partial<Plotly.Config> = {
       displaylogo: false,
       modeBarButtonsToRemove: ["resetScale2d", "toImage"],
@@ -178,7 +203,7 @@ export class PlotlyGraph extends HTMLElement {
   // The height of your card. Home Assistant uses this to automatically
   // distribute all cards over the available columns.
   getCardSize() {
-    return 3;
+    return 30;
   }
 }
 

src/plotly-graph-card.ts

@@ -0,0 +1,58 @@
+import merge from "lodash/merge";
+import { HATheme } from "./types";
+const defaultLayout: Partial<Plotly.Layout> = {
+  height: 250,
+  yaxis: {
+    zeroline: false,
+    showline: true,
+    // fixedrange: true,
+  },
+  xaxis: {
+    zeroline: false,
+    showline: true,
+  },
+  margin: {
+    b: 50,
+    t: 10,
+    l: 60,
+    r: 10,
+  },
+  legend: {
+    orientation: "h",
+    x: 0,
+    y: 1.3,
+  },
+};
+
+export default function getThemedLayout(
+  haTheme: HATheme
+): Partial<Plotly.Layout> {
+  const axisStyle = {
+    tickcolor: "rgba(127,127,127,.3)",
+    gridcolor: "rgba(127,127,127,.3)",
+    linecolor: "rgba(127,127,127,.3)",
+    zerolinecolor: "rgba(127,127,127,.3)",
+  };
+  return merge(
+    {
+      paper_bgcolor: haTheme["--card-background-color"],
+      plot_bgcolor: haTheme["--card-background-color"],
+      xaxis: axisStyle,
+      xaxis2: axisStyle,
+      xaxis3: axisStyle,
+      xaxis4: axisStyle,
+      xaxis5: axisStyle,
+
+      yaxis: axisStyle,
+      yaxis2: axisStyle,
+      yaxis3: axisStyle,
+      yaxis4: axisStyle,
+      yaxis5: axisStyle,
+      font: {
+        color: haTheme["--secondary-text-color"],
+        size: 11,
+      },
+    },
+    defaultLayout
+  );
+}

src/styleHack.ts renamed to src/style-hack.ts

@@ -1,7 +1,6 @@
 export type Config = {
   type: "custom:plotly-graph-card";
   hours_to_show?: number;
-  theme?: string;
   refresh_interval?: number; // in seconds
   entities: (Partial<Plotly.PlotData> & {
     entity: string;
@@ -20,3 +19,11 @@ export type History = {
   };
 }[];
 export type TimestampRange = Timestamp[]; // [Timestamp, Timestamp];
+
+export type HATheme = {
+  "--card-background-color": string;
+  "--primary-background-color": string;
+  "--primary-color": string;
+  "--primary-text-color": string;
+  "--secondary-text-color": string;
+};