fixed multiple axes

Author: David Buezas

src/plotly-graph-card.ts

@@ -137,18 +137,19 @@ export class PlotlyGraph extends HTMLElement {
     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;
+      const yaxis_idx = units.indexOf(attribute.unit_of_measurement);
       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,
+        yaxis: "y" + (yaxis_idx == 0 ? "" : yaxis_idx + 1),
       };
     });
 
@@ -182,6 +183,7 @@ export class PlotlyGraph extends HTMLElement {
     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 }])
     );
@@ -195,6 +197,7 @@ export class PlotlyGraph extends HTMLElement {
       modeBarButtonsToRemove: ["resetScale2d", "toImage"],
       ...config.config,
     };
+    console.log(this.data, layout);
     this.isInternalRelayout = true;
     await Plotly.react(contentEl, data, layout, plotlyConfig);
     this.isInternalRelayout = false;

src/themed-layout.ts

@@ -4,18 +4,30 @@ import { HATheme } from "./types";
 const defaultLayout: Partial<Plotly.Layout> = {
   height: 260,
   xaxis: {
-    zeroline: false,
-    showline: true,
     automargin: true,
   },
   yaxis: {
-    zeroline: false,
-    showline: true,
-    // fixedrange: true,
+    automargin: true,
   },
   yaxis2: {
     side: "right",
     overlaying: "y",
+    showgrid: false,
+  },
+  yaxis3: {
+    side: "right",
+    overlaying: "y",
+    visible: false,
+  },
+  yaxis4: {
+    side: "right",
+    overlaying: "y",
+    visible: false,
+  },
+  yaxis5: {
+    side: "right",
+    overlaying: "y",
+    visible: false,
   },
   margin: {
     b: 0, // 50,
@@ -54,10 +66,6 @@ export default function getThemedLayout(
       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 },