Implement autorange_after_scroll (#227)

Author: dbuezas

readme.md

@@ -928,14 +928,26 @@ Exactly the same as the history card, but more powerful
 ### Fixed Relative Time
 
 - Decimal values (e.g `hours_to_show: 0.5`)
-- Duration strings (e.g `hours_to_show: 2h`, `3d`, `1w`, `1M`). See #Duration
+- Duration strings (e.g `hours_to_show: 2h`, `3d`, `1w`, `1M`). See [Durations](#Duration)
 
 ### Dynamic Relative Time
 
 Shows the current day, hour, etc from beginning to end.
 The options are: `current_minute`, `current_hour`, `current_day`, `current_week`, `current_month`, `current_quarter`, `current_year`
 It can be combined with the global `time_offset`.
 
+## autorange_after_scroll:
+
+Removes all data out of the visible range, and autoscales after each replot.
+Particularly useful when combined with [Range Selector Buttons](#Range-Selector-buttons)
+
+```yaml
+type: custom:plotly-graph
+entities:
+  - entity: sensor.garden_temperature
+autorange_after_scroll: true
+```
+
 ## refresh_interval:
 
 Update data every `refresh_interval` seconds.

src/parse-config/defaults.ts

@@ -63,6 +63,7 @@ const defaultYamlRequired = {
   },
   layout: {},
   on_dblclick: noop$fn,
+  autorange_after_scroll: false,
 };
 
 //

src/parse-config/parse-config.ts

@@ -240,6 +240,9 @@ class ConfigParser {
       }
       this.yaml.visible_range = visible_range;
     }
+    if (this.fnParam.getFromConfig("autorange_after_scroll")) {
+      this.observed_range = visible_range.slice();
+    }
     this.observed_range[0] = Math.min(this.observed_range[0], visible_range[0]);
     this.observed_range[1] = Math.max(this.observed_range[1], visible_range[1]);
     const statisticsParams = parseStatistics(

src/plotly-graph-card.ts

@@ -391,7 +391,13 @@ export class PlotlyGraph extends HTMLElement {
       .join("\n<br />\n");
     this.parsed_config = parsed;
 
-    const { entities, layout, config, refresh_interval } = this.parsed_config;
+    const {
+      entities,
+      layout,
+      config,
+      refresh_interval,
+      autorange_after_scroll,
+    } = this.parsed_config;
     clearTimeout(this.handles.refreshTimeout!);
     if (refresh_interval !== "auto" && refresh_interval > 0) {
       this.handles.refreshTimeout = window.setTimeout(
@@ -405,6 +411,11 @@ export class PlotlyGraph extends HTMLElement {
     }
     await this.withoutRelayout(async () => {
       await Plotly.react(this.contentEl, entities, layout, config);
+      if (autorange_after_scroll) {
+        await Plotly.relayout(this.contentEl, {
+          "yaxis.autorange": true,
+        });
+      }
       this.contentEl.style.visibility = "";
     });
     // this.handles.dataClick?.off("plotly_click", this.onDataClick)!;

src/types.ts

@@ -53,6 +53,7 @@ export type InputConfig = {
   significant_changes_only?: boolean; // defaults to false
   minimal_response?: boolean; // defaults to true
   disable_pinch_to_zoom?: boolean; // defaults to false
+  autorange_after_scroll?: boolean; // defaults to false
 };
 
 export type EntityConfig = EntityIdConfig & {
@@ -86,6 +87,7 @@ export type Config = {
   disable_pinch_to_zoom: boolean;
   visible_range: [number, number];
   on_dblclick: Function;
+  autorange_after_scroll: boolean;
 };
 export type EntityIdStateConfig = {
   entity: string;