Attributes and disabling layout defaults and default trace style

Author: David Buezas

readme.md

@@ -122,6 +122,15 @@ entities:
   - entity: sensor.humidity
 ```
 
+### Attribute values
+
+Plot the attributes of an entity by adding `::atribute_name` to the entity name
+
+```yaml
+entities: climate.living::temperature
+  climate.kitchen::temperature
+```
+
 ## Extra entity attributes:
 
 ```yaml
@@ -212,11 +221,52 @@ note: `ys[0]` represents the first "known" value, which is the value furthest to
         }
 ```
 
+#### Access all entity attributes inside lambda
+
+```yaml
+- entity: climate.wintergarten_floor::valve
+  unit_of_measurement: °C
+  lambda: |-
+    (ys, xs, entity) => 
+      entity.map(({attributes}) => 
+        return +attributes.temperature - (+attributes.valve / 100) * 2
+      )
+```
+
+## Default trace styling
+
+```yaml
+entities: sensor.temperature1
+  sensor.temperature2
+default_trace:
+  fill: tozeroy
+  line:
+    width: 2
+```
+
 ## layout:
 
 To define layout aspects, like margins, title, axes names, ...
 Anything from https://plotly.com/javascript/reference/layout/.
 
+### disable default layout:
+
+Use this if you want to use plotly default layout instead. Very useful for heavy customization while following pure plotly examples.
+
+```yaml
+entities:
+  - entity: sensor.temperature_in_celsius
+no_default_layout: true
+```
+
+### disable Home Assistant themes:
+
+```yaml
+entities:
+  - entity: sensor.temperature_in_celsius
+no_theme: true
+```
+
 ## config:
 
 To define general configurations like enabling scroll to zoom, disabling the modebar, etc.

src/Cache.ts

@@ -2,6 +2,7 @@ import { HomeAssistant } from "custom-card-helpers";
 import { compactRanges, subtractRanges } from "./date-ranges";
 import { isTruthy } from "./style-hack";
 import { TimestampRange, History } from "./types";
+import { sleep } from "./utils";
 
 type Histories = Record<string, History>;
 
@@ -13,28 +14,47 @@ export function mapValues<T, S>(
 }
 async function fetchSingleRange(
   hass: HomeAssistant,
-  entityId: string,
+  entityIdWithAttribute: string,
   [startT, endT]: number[]
 ) {
   const start = new Date(startT);
   const end = new Date(endT);
+  const [entityId2, attribute] = entityIdWithAttribute.split("::");
+  const minimal_response = !!attribute ? "&minimal_response" : "";
   const uri =
     `history/period/${start.toISOString()}?` +
-    `filter_entity_id=${entityId}&` +
-    `significant_changes_only=1&` +
-    `minimal_response&end_time=${end.toISOString()}`;
-  let [list]: History[] = (await hass.callApi("GET", uri)) || [];
+    `filter_entity_id=${entityId2}&` +
+    `significant_changes_only=1` +
+    minimal_response +
+    `&end_time=${end.toISOString()}`;
+  let list: History | undefined;
+  let succeeded = false;
+  let retries = 0;
+  while (!succeeded) {
+    try {
+      const lists: History[] = (await hass.callApi("GET", uri)) || [];
+      list = lists[0];
+      succeeded = true;
+    } catch (e) {
+      console.error(e);
+      retries++;
+      if (retries > 10) return null;
+    }
+  }
   if (!list) return null;
   return {
-    entityId,
+    entityId: entityIdWithAttribute,
     range: [startT, Math.min(+new Date(), endT)], // cap range to now
     attributes: {
       unit_of_measurement: "",
       ...list[0].attributes,
     },
     history: list.map((entry) => ({
       ...entry,
-      last_changed: +new Date(entry.last_changed),
+      state: attribute ? entry.attributes[attribute] : entry.state,
+      last_changed: +new Date(
+        attribute ? entry.last_updated : entry.last_changed
+      ),
     })),
   };
 }

src/plotly-graph-card.ts

@@ -11,8 +11,7 @@ import { TimestampRange } from "./types";
 import Cache from "./Cache";
 import getThemedLayout from "./themed-layout";
 import isProduction from "./is-production";
-
-const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+import { sleep } from "./utils";
 
 const componentName = isProduction ? "plotly-graph" : "plotly-graph-dev";
 
@@ -89,9 +88,9 @@ export class PlotlyGraph extends HTMLElement {
       );
     }
     this.setupListeners();
-    this.fetch(this.getAutoFetchRange()).then(() => {
-      this.contentEl.style.visibility = "";
-    });
+    this.fetch(this.getAutoFetchRange())
+      .then(() => this.fetch(this.getAutoFetchRange())) // again so home assistant extends until end of time axis
+      .then(() => (this.contentEl.style.visibility = ""));
   }
   async withoutRelayout(fn: Function) {
     this.isInternalRelayout++;
@@ -210,7 +209,7 @@ export class PlotlyGraph extends HTMLElement {
     if (is.hours_to_show !== was.hours_to_show) {
       this.exitBrowsingMode();
     }
-    this.fetch(this.getAutoFetchRange());
+    await this.fetch(this.getAutoFetchRange());
   }
   fetch = async (range: TimestampRange) => {
     let entityNames = this.config.entities.map(({ entity }) => entity) || [];
@@ -248,7 +247,11 @@ export class PlotlyGraph extends HTMLElement {
       "--secondary-text-color": "red",
     };
     haTheme = mapValues(haTheme, (_, key) => styles.getPropertyValue(key));
-    return getThemedLayout(haTheme);
+    return getThemedLayout(
+      haTheme,
+      this.config.no_theme,
+      this.config.no_default_layout
+    );
   }
 
   getData(): Plotly.Data[] {
@@ -279,9 +282,10 @@ export class PlotlyGraph extends HTMLElement {
             shape: "hv",
           },
           x: xs,
-          y: trace.lambda(ys, xs),
+          y: trace.lambda(ys, xs, history),
           yaxis: "y" + (yaxis_idx == 0 ? "" : yaxis_idx + 1),
         },
+        this.config.default_trace,
         trace
       );
     });

src/themed-layout.ts

@@ -46,31 +46,41 @@ const defaultLayout: Partial<Plotly.Layout> = {
   },
 };
 
+const themeAxisStyle = {
+  tickcolor: "rgba(127,127,127,.3)",
+  gridcolor: "rgba(127,127,127,.3)",
+  linecolor: "rgba(127,127,127,.3)",
+  zerolinecolor: "rgba(127,127,127,.3)",
+  // automargin: true,
+};
+
 export default function getThemedLayout(
-  haTheme: HATheme
+  haTheme: HATheme,
+  no_theme?: boolean,
+  no_default_layout?: boolean
 ): 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)",
-    // automargin: true,
+  const theme = {
+    paper_bgcolor: haTheme["--card-background-color"],
+    plot_bgcolor: haTheme["--card-background-color"],
+    font: {
+      color: haTheme["--secondary-text-color"],
+      size: 11,
+    },
+    xaxis: { ...themeAxisStyle },
+    yaxis1: { ...themeAxisStyle },
+    yaxis2: { ...themeAxisStyle },
+    yaxis3: { ...themeAxisStyle },
+    yaxis4: { ...themeAxisStyle },
+    yaxis5: { ...themeAxisStyle },
+    yaxis6: { ...themeAxisStyle },
+    yaxis7: { ...themeAxisStyle },
+    yaxis8: { ...themeAxisStyle },
+    yaxis9: { ...themeAxisStyle },
   };
+
   return merge(
-    {
-      paper_bgcolor: haTheme["--card-background-color"],
-      plot_bgcolor: haTheme["--card-background-color"],
-      xaxis: { ...axisStyle },
-      yaxis: { ...axisStyle },
-      yaxis2: { ...axisStyle },
-      yaxis3: { ...axisStyle },
-      yaxis4: { ...axisStyle },
-      yaxis5: { ...axisStyle },
-      font: {
-        color: haTheme["--secondary-text-color"],
-        size: 11,
-      },
-    },
-    defaultLayout
+    {},
+    no_theme ? {} : theme,
+    no_default_layout ? {} : defaultLayout
   );
 }

src/types.ts

@@ -5,15 +5,19 @@ export type Config = {
   entities: (Partial<Plotly.PlotData> & {
     entity: string;
     unit_of_measurement?: string;
-    lambda: (y: any[], x: Date[]) => number[];
+    lambda: (y: any[], x: Date[], raw_entity: History) => number[];
   })[];
+  default_trace?: Partial<Plotly.PlotData>,
   layout?: Partial<Plotly.Layout>;
   config?: Partial<Plotly.Config>;
+  no_theme?: boolean;
+  no_default_layout?: boolean;
 };
 export type Timestamp = number;
 export type History = {
   entity_id: string;
   last_changed: Timestamp;
+  last_updated: Timestamp;
   state: string;
   attributes: {
     friendly_name?: string;

src/utils.ts

@@ -0,0 +1 @@
+export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));