corrected height

Author: David Buezas

src/date-ranges.ts

@@ -22,7 +22,7 @@ const subtract_single_single = (
   if (a_start < b_start && b_start <= a_end && a_end <= b_end)
     return [[a_start, b_start - 1]];
   else {
-    console.log("---------");
+    console.log("----ERROR TO REPORT-----");
     console.log([a_start, a_end]);
     console.log([b_start, b_end]);
     throw new Error(

src/plotly-graph-card.ts

@@ -118,6 +118,12 @@ export class PlotlyGraph extends HTMLElement {
   // The user supplied configuration. Throw an exception and Lovelace will
   // render an error card.
   async setConfig(config) {
+    if (typeof config.entities[0] === "string") {
+      config = {
+        ...config,
+        entities: config.entities.map((name) => ({ entity: name })),
+      };
+    }
     const was = this.config;
     this.config = JSON.parse(JSON.stringify(config));
     const is = this.config;
@@ -135,7 +141,7 @@ export class PlotlyGraph extends HTMLElement {
     const { histories, attributes } = this.cache;
 
     const units = Array.from(
-      new Set(Object.values(attributes).map((a) => a.unit_of_measurement))
+      new Set(Object.values(attributes).map((a) => a.unit_of_measurement || ""))
     );
 
     this.data = entities.map((trace) => {
@@ -145,7 +151,11 @@ export class PlotlyGraph extends HTMLElement {
       const yaxis_idx = units.indexOf(attribute.unit_of_measurement);
       return {
         name: trace.name || attribute.friendly_name || entity_id,
-        hovertemplate: `%{y} ${attribute.unit_of_measurement || ""}`,
+        hovertemplate: `<b>%{x} ${attribute.unit_of_measurement}</b><br>%{y}`,
+        line: {
+          width: 1,
+          shape: "hv",
+        },
         ...trace,
         x: history.map(({ last_changed }) => new Date(last_changed)),
         y: history.map(({ state }) => state),
@@ -197,7 +207,6 @@ 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/plotly.ts

@@ -1,3 +1,6 @@
+// import Plotly from "plotly.js-dist";
+// export default Plotly as typeof import("plotly.js");
+
 window.global = window;
 var Plotly = require("plotly.js/lib/core") as typeof import("plotly.js");
 //@ts-ignore

src/themed-layout.ts

@@ -2,7 +2,7 @@ import merge from "lodash/merge";
 import { HATheme } from "./types";
 
 const defaultLayout: Partial<Plotly.Layout> = {
-  height: 260,
+  height: 285,
   xaxis: {
     automargin: true,
   },
@@ -66,7 +66,6 @@ export default function getThemedLayout(
       paper_bgcolor: haTheme["--card-background-color"],
       plot_bgcolor: haTheme["--card-background-color"],
       xaxis: { ...axisStyle },
-
       yaxis: { ...axisStyle },
       yaxis2: { ...axisStyle },
       yaxis3: { ...axisStyle },