feat: extend_to replaces extend_to_end with new options

BREAKING CHANGE: `extend_to_end` has been removed and replaced by `extend_to` with support for `now` and `end`. Fix RomRider#318
georgepauna · Apr 20, 2022 · 4bb1dd2 · 4bb1dd2
1 parent 5d08853
commit 4bb1dd2
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 20 deletions.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -289,7 +289,7 @@ views:
               start: day
             series:
               - entity: sensor.random0_100
-                extend_to_end: false
+                extend_to: false
                 type: column
                 show:
                   datalabels: true
@@ -318,7 +318,7 @@ views:
                   decimalsInFloat: 1
             series:
               - entity: sensor.random0_100
-                extend_to_end: false
+                extend_to: false
                 type: column
                 invert: true
                 float_precision: 3
@@ -329,15 +329,15 @@ views:
                   legend_value: true
                   datalabels: true
               - entity: sensor.random0_100
-                extend_to_end: false
+                extend_to: false
                 type: column
                 group_by:
                   func: avg
                   fill: 'last'
                 show:
                   datalabels: true
               - entity: sensor.random0_100
-                extend_to_end: false
+                extend_to: false
                 type: column
                 group_by:
                   func: avg
@@ -394,13 +394,13 @@ views:
                 unit: °C
                 attribute: temperature
                 fill_raw: last
-                extend_to_end: false
+                extend_to: false
                 group_by:
                   func: avg
                   duration: 1h
               - entity: weather.openweathermap
                 type: line
-                extend_to_end: false
+                extend_to: false
                 unit: °C
                 show:
                   in_header: after_now
@@ -544,7 +544,7 @@ views:
                   duration: 1h
                   func: last
               - entity: sensor.random0_100
-                extend_to_end: false
+                extend_to: false
                 group_by:
                   duration: 1h
                   func: last
@@ -558,7 +558,7 @@ views:
             series:
               - entity: sensor.outside_temperature
                 curve: stepline
-                extend_to_end: true
+                extend_to: end
 
           - type: custom:apexcharts-card
             update_delay: 3s
@@ -797,7 +797,7 @@ views:
               - entity: weather.home
                 type: area
                 fill_raw: last
-                extend_to_end: false
+                extend_to: false
                 color: var(--yellowish)
                 name: Max
                 stroke_width: 2
@@ -808,7 +808,7 @@ views:
               - entity: weather.home
                 type: area
                 fill_raw: last
-                extend_to_end: false
+                extend_to: false
                 color: var(--cyanish)
                 name: Min
                 stroke_width: 2
@@ -819,7 +819,7 @@ views:
               - entity: weather.home
                 type: column
                 fill_raw: last
-                extend_to_end: false
+                extend_to: false
                 color: 'rgba(255, 255, 255, 1)'
                 name: Snow
                 stroke_width: 0
@@ -830,7 +830,7 @@ views:
               - entity: weather.home
                 type: column
                 fill_raw: last
-                extend_to_end: false
+                extend_to: false
                 color: var(--cyanish)
                 name: Rain
                 stroke_width: 0
@@ -909,7 +909,7 @@ views:
               end: week
             all_series_config:
               type: column
-              extend_to_end: false
+              extend_to: false
               group_by:
                 fill: 'null'
             series:
@@ -1254,3 +1254,35 @@ views:
                 group_by:
                   duration: 2min
                   func: avg
+          - type: custom:apexcharts-card
+            graph_span: 1h
+            span:
+              start: hour
+            series:
+              - entity: sensor.random0_100
+                name: no extend
+                extend_to: false
+                data_generator: |
+                  const now_minus10 = new Date(start.getTime() + 10 * 1000 * 60);
+                  return [
+                    [start.getTime(), 10],
+                    [now_minus10.getTime(), 10]
+                  ];
+              - entity: sensor.random0_100
+                name: extend to now
+                extend_to: now
+                data_generator: |
+                  const now_minus10 = new Date(start.getTime() + 10 * 1000 * 60);
+                  return [
+                    [start.getTime(), 20],
+                    [now_minus10.getTime(), 20]
+                  ];
+              - entity: sensor.random0_100
+                name: extend to end
+                extend_to: end
+                data_generator: |
+                  const now_minus10 = new Date(start.getTime() + 10 * 1000 * 60);
+                  return [
+                    [start.getTime(), 30],
+                    [now_minus10.getTime(), 30]
+                  ];
diff --git a/README.md b/README.md
@@ -166,7 +166,8 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `stroke_width` | number | `5` | v1.6.0 | Change the width of the line. Only works for `area` and `line` |
 | `type` | string | `line` | v1.0.0 | `line`, `area` or `column` are supported for now |
 | `curve` | string | `smooth` | v1.0.0 | `smooth` (nice curve),  `straight` (direct line between points) or `stepline` (flat line until next point then straight up or down) |
-| `extend_to_end` | boolean | `true` | v1.0.0 | If the last data is older than the end time displayed on the graph, setting to true will extend the value until the end of the timeline. Only works for `line` and `area` types. |
+| ~~`extend_to_end`~~ | ~~boolean~~ | ~~`true`~~ | ~~v1.0.0~~ | **DEPRECATED since NEXT_VERSION** ~~If the last data is older than the end time displayed on the graph, setting to true will extend the value until the end of the timeline. Only works for `line` and `area` types.~~ |
+| `extend_to` | boolean or string | `end` | NEXT_VERSION | If value is `end`, it will extend the line/area to the end of the chart. With `now`, it will extend it to the current time (usefull for chart showing current and future data). If `false` it will not do anything. Only available for `line` and `area` types. |
 | `unit` | string | | v1.0.0 | Override the unit of the sensor |
 | `float_precision` | number | `1` | v1.2.0 | The precision used to display data in the legend and the tooltip. It doesn't impact how the data is displayed on the graph |
 | `fill_raw` | string | `'null'` | v1.5.0 | If there is any missing value in the history, `last` will replace them with the last non-empty state, `zero` will fill missing values with `0`, `'null'` will fill missing values with `null`. This is applied before `group_by` options |

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -405,7 +405,7 @@ class ChartsCard extends LitElement {
             this._headerColors[index] = serie.color;
           }
           serie.fill_raw = serie.fill_raw || DEFAULT_FILL_RAW;
-          serie.extend_to_end = serie.extend_to_end !== undefined ? serie.extend_to_end : true;
+          serie.extend_to = serie.extend_to !== undefined ? serie.extend_to : 'end';
           serie.type = this._config?.chart_type ? undefined : serie.type || DEFAULT_SERIE_TYPE;
           if (!serie.group_by) {
             serie.group_by = { duration: DEFAULT_DURATION, func: DEFAULT_FUNC, fill: DEFAULT_GROUP_BY_FILL };
@@ -769,9 +769,14 @@ class ChartsCard extends LitElement {
             return;
           }
           let data: EntityCachePoints = [];
-          if (this._config?.series[index].extend_to_end && this._config?.series[index].type !== 'column') {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            data = [...graph.history, ...([[end.getTime(), graph.history.slice(-1)[0]![1]]] as EntityCachePoints)];
+          if (this._config?.series[index].type !== 'column' && this._config?.series[index].extend_to) {
+            if (this._config?.series[index].extend_to === 'end') {
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              data = [...graph.history, ...([[end.getTime(), graph.history.slice(-1)[0]![1]]] as EntityCachePoints)];
+            } else if (this._config?.series[index].extend_to === 'now') {
+              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+              data = [...graph.history, ...([[now.getTime(), graph.history.slice(-1)[0]![1]]] as EntityCachePoints)];
+            }
           } else {
             data = graph.history;
           }

diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
@@ -70,7 +70,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
   "opacity": t.opt("number"),
   "curve": t.opt(t.union(t.lit('smooth'), t.lit('straight'), t.lit('stepline'))),
   "stroke_width": t.opt("number"),
-  "extend_to_end": t.opt("boolean"),
+  "extend_to": t.opt(t.union(t.lit(false), t.lit('end'), t.lit('now'))),
   "unit": t.opt("string"),
   "invert": t.opt("boolean"),
   "data_generator": t.opt("string"),

diff --git a/src/types-config.ts b/src/types-config.ts
@@ -70,7 +70,7 @@ export interface ChartCardAllSeriesExternalConfig {
   opacity?: number;
   curve?: 'smooth' | 'straight' | 'stepline';
   stroke_width?: number;
-  extend_to_end?: boolean;
+  extend_to?: false | 'end' | 'now';
   unit?: string;
   invert?: boolean;
   data_generator?: string;