modularization and ha_theme unaffected by raw plotly config

dbuezas · dbuezas · commit c53da6c4e050 · 2023-01-27T19:29:48.000+01:00
diff --git a/readme.md b/readme.md
@@ -791,20 +791,19 @@ Anything from https://plotly.com/javascript/reference/layout/.
 
 ### Home Assistant theming:
 
-Disables Home Assistant theme colors
+Toggle Home Assistant theme colors
 
 ```yaml
 type: custom:plotly-graph
 entities:
   - entity: sensor.temperature_in_celsius
-ha_theme: false #defaults to true unless raw_plotly_config is true
+ha_theme: false #defaults to true
 ```
 
 ### Raw plotly config:
 
-Disables all in-built defaults for layout and entitites. Useful when using histograms, 3d plots, etc.
-The `x` and `y` properties of the traces won't be automatically filled with entity data, you need to use $fn for that.
-It will also change the default of `ha_theme` to false (you can set it to true manually)
+Toggle all in-built defaults for layout and entitites. Useful when using histograms, 3d plots, etc.
+When true, the `x` and `y` properties of the traces won't be automatically filled with entity data, you need to use $fn for that.
 
 ```yaml
 type: custom:plotly-graph
diff --git a/src/parse-config/defaults.ts b/src/parse-config/defaults.ts
@@ -1,13 +1,16 @@
+import { merge } from "lodash";
+import { Config, InputConfig } from "../types";
 import { parseColorScheme } from "./parse-color-scheme";
 import { getEntityIndex } from "./parse-config";
+import getThemedLayout, { defaultLayout, HATheme } from "./themed-layout";
 
-export const defaultEntityRequired = {
+const defaultEntityRequired = {
   entity: "",
   show_value: false,
   internal: false,
   time_offset: "0s",
 };
-export const defaultEntityOptional = {
+const defaultEntityOptional = {
   mode: "lines",
   line: {
     width: 1,
@@ -41,22 +44,22 @@ export const defaultEntityOptional = {
   },
 };
 
-export const defaultYamlRequired = {
+const defaultYamlRequired = {
   title: "",
   hours_to_show: 1,
   refresh_interval: "auto",
   color_scheme: "category10",
   time_offset: "0s",
   raw_plotly_config: false,
-  ha_theme: ({ getFromConfig }) => !getFromConfig(".raw_plotly_config"),
+  ha_theme: true,
   disable_pinch_to_zoom: false,
   raw_plotly: false,
   defaults: {
     entity: {},
     yaxes: {},
   },
 };
-export const defaultYamlOptional = {
+const defaultYamlOptional = {
   config: {
     displaylogo: false,
     scrollZoom: true,
@@ -74,3 +77,84 @@ export const defaultYamlOptional = {
     },
   },
 };
+
+export function addPreParsingDefaults(yaml: InputConfig): InputConfig {
+  const out = merge(
+    {},
+    yaml,
+    { layout: {} },
+    defaultYamlRequired,
+    yaml.raw_plotly_config ? {} : defaultYamlOptional,
+    yaml
+  );
+  for (let i = 1; i < 31; i++) {
+    const yaxis = "yaxis" + (i == 1 ? "" : i);
+    out.layout[yaxis] = merge(
+      {},
+      out.layout[yaxis],
+      out.defaults?.yaxes,
+      out.layout[yaxis]
+    );
+  }
+  out.entities = out.entities.map((entity) => {
+    if (typeof entity === "string") entity = { entity };
+    entity.entity ??= "";
+    const [oldAPI_entity, oldAPI_attribute] = entity.entity.split("::");
+    if (oldAPI_attribute) {
+      entity.entity = oldAPI_entity;
+      entity.attribute = oldAPI_attribute;
+    }
+    entity = merge(
+      {},
+      entity,
+      defaultEntityRequired,
+      out.raw_plotly_config ? {} : defaultEntityOptional,
+      out.defaults?.entity,
+      entity
+    );
+    return entity;
+  });
+  return out;
+}
+
+export function addPostParsingDefaults({
+  yaml,
+  isBrowsing,
+  old_uirevision,
+  css_vars,
+}: {
+  yaml: Config;
+  isBrowsing: boolean;
+  old_uirevision: number;
+  css_vars: HATheme;
+}): Config {
+  // 3rd pass: decorate
+  /**
+   * These cannot be done via defaults because they are functions and
+   * functions would be overwritten if the user sets a configuration on a parent
+   *  */
+  const yAxisTitles = Object.fromEntries(
+    yaml.entities.map(({ unit_of_measurement, yaxis }) => [
+      "yaxis" + yaxis?.slice(1),
+      { title: unit_of_measurement },
+    ])
+  );
+  const layout = merge(
+    {},
+    yaml.layout,
+    yaml.raw_plotly_config ? {} : defaultLayout,
+    yaml.ha_theme ? getThemedLayout(css_vars) : {},
+    yaml.raw_plotly_config
+      ? {}
+      : {
+          xaxis: {
+            range: yaml.visible_range,
+          },
+          //changing the uirevision triggers a reset to the axes
+          uirevision: isBrowsing ? old_uirevision : Math.random(),
+        },
+    yaml.raw_plotly_config ? {} : yAxisTitles,
+    yaml.layout
+  );
+  return merge({}, yaml, { layout }, yaml);
+}
diff --git a/src/parse-config/parse-config.ts b/src/parse-config/parse-config.ts
@@ -1,24 +1,19 @@
 import Cache from "../cache/Cache";
-import getThemedLayout, { defaultLayout, HATheme } from "./themed-layout";
+import { HATheme } from "./themed-layout";
 
 import propose from "propose";
 
 import merge from "lodash/merge";
 import get from "lodash/get";
-import {
-  defaultEntityRequired,
-  defaultEntityOptional,
-  defaultYamlRequired,
-  defaultYamlOptional,
-} from "./defaults";
+import { addPreParsingDefaults, addPostParsingDefaults } from "./defaults";
 import { parseTimeDuration } from "../duration/duration";
 import { parseStatistics } from "./parse-statistics";
 import { HomeAssistant } from "custom-card-helpers";
 import filters from "../filters/filters";
 import bounds from "binary-search-bounds";
 import { has } from "lodash";
 import { StatisticValue } from "../recorder-types";
-import { Config, HassEntity, YValue } from "../types";
+import { Config, HassEntity, InputConfig, YValue } from "../types";
 
 class ConfigParser {
   private yaml?: any;
@@ -29,7 +24,7 @@ class ConfigParser {
   private busy = false;
   private fnParam!: FnParam;
 
-  async update(input: { yaml: any; hass: HomeAssistant }) {
+  async update(input: { yaml: any; hass: HomeAssistant; css_vars: HATheme }) {
     if (this.busy) throw new Error("ParseConfig was updated while busy");
     this.busy = true;
     try {
@@ -38,62 +33,30 @@ class ConfigParser {
       this.busy = false;
     }
   }
-  private async _update(input: {
+  private async _update({
+    yaml: input_yaml,
+    hass,
+    css_vars,
+  }: {
     yaml: any;
     hass: HomeAssistant;
+    css_vars: HATheme;
   }): Promise<{ errors: Error[]; parsed: Config }> {
+    const old_uirevision = this.yaml?.layout?.uirevision;
     this.yaml = {};
     this.errors = [];
-
-    this.hass = input.hass;
-    const old_uirevision = this.yaml?.layout?.uirevision;
-    this.yaml_with_defaults = JSON.parse(JSON.stringify(input.yaml));
-
-    // 1st pass: add defaults
-    this.yaml_with_defaults = merge(
-      {},
-      this.yaml_with_defaults,
-      defaultYamlRequired,
-      this.yaml_with_defaults.raw_plotly_config ? {} : defaultYamlOptional,
-      this.yaml_with_defaults
-    );
-    for (let i = 1; i < 31; i++) {
-      const yaxis = "yaxis" + (i == 1 ? "" : i);
-      this.yaml_with_defaults.layout[yaxis] = merge(
-        {},
-        this.yaml_with_defaults.layout[yaxis],
-        this.yaml_with_defaults.defaults?.yaxes,
-        this.yaml_with_defaults.layout[yaxis]
-      );
-    }
-    this.yaml_with_defaults.entities = this.yaml_with_defaults.entities.map(
-      (entity) => {
-        if (typeof entity === "string") entity = { entity };
-        entity.entity ??= "";
-        const [oldAPI_entity, oldAPI_attribute] = entity.entity.split("::");
-        if (oldAPI_attribute) {
-          entity.entity = oldAPI_entity;
-          entity.attribute = oldAPI_attribute;
-        }
-        entity = merge(
-          {},
-          entity,
-          defaultEntityRequired,
-          this.yaml_with_defaults.raw_plotly_config
-            ? {}
-            : defaultEntityOptional,
-          this.yaml_with_defaults.defaults?.entity,
-          entity
-        );
-        return entity;
-      }
-    );
+    this.hass = hass;
+    this.yaml_with_defaults = addPreParsingDefaults(input_yaml);
+    const isBrowsing = !!input_yaml.visible_range;
+    console.log("isBrowsing", isBrowsing);
 
     // 2nd pass: evaluate functions
+
     this.fnParam = {
       vars: {},
       path: "",
-      hass: input.hass,
+      hass,
+      css_vars,
       getFromConfig: () => "",
     };
     for (const [key, value] of Object.entries(this.yaml_with_defaults)) {
@@ -109,35 +72,13 @@ class ConfigParser {
         this.errors?.push(e as Error);
       }
     }
-
-    // 3rd pass: decorate
-    /**
-     * These cannot be done via defaults because they are functions and
-     * functions would be overwritten if the user sets a configuration on a parent
-     *  */
-    const isBrowsing = !!input.yaml.visible_range;
-    const yAxisTitles = Object.fromEntries(
-      this.yaml.entities.map(({ unit_of_measurement, yaxis }) => [
-        "yaxis" + yaxis?.slice(1),
-        { title: unit_of_measurement },
-      ])
-    );
-    merge(
-      this.yaml.layout,
-      this.yaml.raw_plotly_config ? {} : defaultLayout,
-      this.yaml.ha_theme ? getThemedLayout(this.yaml.css_vars) : {},
-      this.yaml.raw_plotly_config
-        ? {}
-        : {
-            xaxis: {
-              range: this.yaml.visible_range,
-            },
-            //changing the uirevision triggers a reset to the axes
-            uirevision: isBrowsing ? old_uirevision : Math.random(),
-          },
-      this.yaml.raw_plotly_config ? {} : yAxisTitles,
-      this.yaml.layout
-    );
+    //TODO: mutates
+    this.yaml = addPostParsingDefaults({
+      yaml: this.yaml,
+      isBrowsing,
+      old_uirevision,
+      css_vars,
+    });
 
     return { errors: this.errors, parsed: this.yaml };
   }
@@ -158,11 +99,11 @@ class ConfigParser {
       this.getEvaledPath(pathQuery, path /* caller */);
 
     if (
-      path.match(/^entities\.\d+\./) && //isInsideEntity
+      !this.fnParam.xs && // hasn't fetched yet
+      path.match(/^entities\.\d+\./) &&
       !path.match(
         /^entities\.\d+\.(entity|attribute|time_offset|statistic|period)/
       ) && //isInsideFetchParamNode
-      !this.fnParam.xs && // alreadyFetchedData
       (is$fn(value) || path.match(/^entities\.\d+\.filters\.\d+$/)) // if function of filter
     )
       await this.fetchDataForEntity(path);
@@ -430,6 +371,7 @@ type FnParam = {
   hass: HomeAssistant;
   vars: Record<string, any>;
   path: string;
+  css_vars: HATheme;
   xs?: Date[];
   ys?: YValue[];
   statistics?: StatisticValue[];
diff --git a/src/parse-config/themed-layout.ts b/src/parse-config/themed-layout.ts
@@ -1,4 +1,3 @@
-import merge from "lodash/merge";
 export type HATheme = {
   "--card-background-color": string;
   "--primary-background-color": string;
diff --git a/src/plotly-graph-card.ts b/src/plotly-graph-card.ts
@@ -319,7 +319,6 @@ export class PlotlyGraph extends HTMLElement {
     const yaml = merge(
       {},
       this.config,
-      { css_vars: this.getCSSVars() },
       { layout: this.size },
       { fetch_mask },
       this.isBrowsing ? { visible_range: this.getVisibleRange() } : {},
@@ -328,6 +327,7 @@ export class PlotlyGraph extends HTMLElement {
     const { errors, parsed } = await this.configParser.update({
       yaml,
       hass: this.hass,
+      css_vars: this.getCSSVars(),
     });
     this.errorMsgEl.style.display = errors.length ? "block" : "none";
     this.errorMsgEl.innerHTML = errors

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import merge from "lodash/merge";`
`2`	`1`	`export type HATheme = {`
`3`	`2`	`"--card-background-color": string;`
`4`	`3`	`"--primary-background-color": string;`