fix: color_threshold would sometimes render weirdly

Fix RomRider#177
georgepauna · Jul 12, 2021 · d7063a5 · d7063a5
1 parent fab37e1
commit d7063a5
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 1 deletion.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -1104,3 +1104,44 @@ views:
                   extremas: true
             yaxis:
               - id: temp
+          - type: custom:apexcharts-card
+            experimental:
+              color_threshold: true
+            graph_span: 4h
+            update_interval: 1h
+            yaxis:
+              - id: one
+                decimals: 0
+                min: -1
+                max: 10
+              - id: two
+                decimals: 0
+                opposite: true
+                min: ~20
+                max: ~65
+            series:
+              - entity: sensor.random0_100
+                transform: return x % 4;
+                yaxis_id: one
+                fill_raw: last
+                color_threshold:
+                  - value: -1
+                    color: yellow
+                  - value: 2
+                    color: green
+                  - value: 5
+                    color: red
+                  - value: 9
+                    color: purple
+                group_by:
+                  func: avg
+                  duration: 3min
+                  fill: last
+              - entity: sensor.random0_100
+                transform: return x % 45 + 20;
+                yaxis_id: two
+                type: area
+                opacity: 0.2
+                group_by:
+                  func: avg
+                  duration: 3min
diff --git a/src/graphEntry.ts b/src/graphEntry.ts
@@ -323,9 +323,13 @@ export default class GraphEntry {
       return false;
     }
     if (this._config.group_by.func !== 'raw') {
-      this._computedHistory = this._dataBucketer(history, moment.range(startHistory, end)).map((bucket) => {
+      const res: EntityCachePoints = this._dataBucketer(history, moment.range(startHistory, end)).map((bucket) => {
         return [bucket.timestamp, this._func(bucket.data)];
       });
+      if ([undefined, 'line', 'area'].includes(this._config.type)) {
+        while (res.length > 0 && res[0][1] === null) res.shift();
+      }
+      this._computedHistory = res;
     } else {
       this._computedHistory = history.data;
     }