better styling and axes units

Author: David Buezas

package-lock.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@types/lodash": "^4.14.175",
     "custom-card-helpers": "^1.8.0",
+    "deepmerge": "^4.2.2",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "plotly.js": "^2.5.1"

package.json

@@ -9,6 +9,7 @@ import merge from "lodash-es/merge";
 import getThemedLayout from "./themed-layout";
 import EventEmitter from "events";
 import mapValues from "lodash/mapValues";
+import uniq from "lodash/mapValues";
 
 console.info(
   `%c PLOTLY-GRAPH-CARD %c ${version} `,
@@ -41,24 +42,24 @@ export class PlotlyGraph extends HTMLElement {
   connectedCallback() {
     if (!this.contentEl) {
       this.innerHTML = `
-        <style>
-          ha-card{
-            padding: 5px;
-          }
-          button#reset.hidden{
-            display: none;
-          }
-          button#reset {
-            position: absolute;
-            top: 15px;
-            left: 15px;
-            display: block;
-          }
-        </style>
         <ha-card>
+          <style>
+            ha-card{
+              padding: 15px;
+            }
+            button#reset.hidden{
+              display: none;
+            }
+            button#reset {
+              position: absolute;
+              top: 15px;
+              left: 15px;
+              display: block;
+            }
+          </style>
           <div id="plotly"> </div>
-        </ha-card>
-        <button id="reset" class="hidden">reset</button>`;
+          <button id="reset" class="hidden">reset</button>
+        </ha-card>`;
 
       this.contentEl = this.querySelector("div#plotly")!;
       this.buttonEl = this.querySelector("button#reset")!;
@@ -90,10 +91,6 @@ export class PlotlyGraph extends HTMLElement {
   enterBrowsingMode() {
     this.isBrowsing = true;
     this.buttonEl.classList.remove("hidden");
-    // Plotly.relayout(this.contentEl, {
-    //   "xaxis.autorange": false,
-    //   "yaxis.autorange": false,
-    // });
   }
   exitBrowsingMode = async () => {
     this.isBrowsing = false;
@@ -137,16 +134,21 @@ export class PlotlyGraph extends HTMLElement {
     const entities = this.config.entities;
     const { histories, attributes } = this.cache;
 
+    const units = Array.from(
+      new Set(Object.values(attributes).map((a) => a.unit_of_measurement))
+    );
     this.data = entities.map((trace) => {
       const entity_id = trace.entity;
       const history = histories[entity_id] || {};
       const attribute = attributes[entity_id] || {};
+      const yaxis_idx = units.indexOf(attribute.unit_of_measurement) + 1;
       return {
         name: trace.name || attribute.friendly_name || entity_id,
         hovertemplate: `%{y} ${attribute.unit_of_measurement || ""}`,
         ...trace,
         x: history.map(({ last_changed }) => new Date(last_changed)),
         y: history.map(({ state }) => state),
+        yaxis: "y" + yaxis_idx,
       };
     });
 
@@ -177,20 +179,17 @@ export class PlotlyGraph extends HTMLElement {
       );
     }
     const { attributes } = this.cache;
-    const unit = Object.values(attributes).map(
-      ({ unit_of_measurement }) => unit_of_measurement
-    )[0];
+    const units = Array.from(
+      new Set(Object.values(attributes).map((a) => a.unit_of_measurement))
+    );
+    const yAxisTitles = Object.fromEntries(
+      units.map((unit, i) => ["yaxis" + (i == 0 ? "" : i + 1), { title: unit }])
+    );
     const { layout, config, width, contentEl, data } = this;
 
-    merge(
-      layout,
-      { yaxis: { title: unit } },
-      this.getThemedLayout(),
-      config.layout,
-      {
-        width,
-      }
-    );
+    merge(layout, yAxisTitles, this.getThemedLayout(), config.layout, {
+      width,
+    });
     const plotlyConfig: Partial<Plotly.Config> = {
       displaylogo: false,
       modeBarButtonsToRemove: ["resetScale2d", "toImage"],

src/plotly-graph-card.ts

@@ -1,26 +1,41 @@
 import merge from "lodash/merge";
 import { HATheme } from "./types";
+
 const defaultLayout: Partial<Plotly.Layout> = {
-  height: 250,
-  yaxis: {
+  height: 260,
+  xaxis: {
     zeroline: false,
     showline: true,
-    // fixedrange: true,
+    automargin: true,
   },
-  xaxis: {
+  yaxis: {
     zeroline: false,
     showline: true,
+    // fixedrange: true,
+  },
+  yaxis2: {
+    side: "right",
+    overlaying: "y",
   },
   margin: {
-    b: 50,
-    t: 10,
-    l: 60,
-    r: 10,
+    b: 0, // 50,
+    t: 0, // 10,
+    l: 0, // 60,
+    r: 0, // 10,
   },
   legend: {
     orientation: "h",
+    // xanchor: "left",
+    bgcolor: "transparent",
     x: 0,
-    y: 1.3,
+    y: 1.2,
+  },
+  ...{
+    // modebar is missing from the Layout Typings
+    // vertical so it doesn't occlude the legend
+    modebar: {
+      orientation: "v",
+    },
   },
 };
 
@@ -32,22 +47,23 @@ export default function getThemedLayout(
     gridcolor: "rgba(127,127,127,.3)",
     linecolor: "rgba(127,127,127,.3)",
     zerolinecolor: "rgba(127,127,127,.3)",
+    automargin: true,
   };
   return merge(
     {
       paper_bgcolor: haTheme["--card-background-color"],
       plot_bgcolor: haTheme["--card-background-color"],
-      xaxis: axisStyle,
-      xaxis2: axisStyle,
-      xaxis3: axisStyle,
-      xaxis4: axisStyle,
-      xaxis5: axisStyle,
+      xaxis: { ...axisStyle },
+      xaxis2: { ...axisStyle },
+      xaxis3: { ...axisStyle },
+      xaxis4: { ...axisStyle },
+      xaxis5: { ...axisStyle },
 
-      yaxis: axisStyle,
-      yaxis2: axisStyle,
-      yaxis3: axisStyle,
-      yaxis4: axisStyle,
-      yaxis5: axisStyle,
+      yaxis: { ...axisStyle },
+      yaxis2: { ...axisStyle },
+      yaxis3: { ...axisStyle },
+      yaxis4: { ...axisStyle },
+      yaxis5: { ...axisStyle },
       font: {
         color: haTheme["--secondary-text-color"],
         size: 11,