fix(color_threshold): Sometimes it would break the card

ka0n · Feb 16, 2021 · 65b5419 · 65b5419
1 parent 35eb8df
commit 65b5419
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -642,3 +642,22 @@ views:
             series:
               - entity: sensor.temperature
               - entity: sensor.temperature
+
+          - type: custom:apexcharts-card
+            experimental:
+              color_threshold: true
+            series:
+              - entity: sensor.temperature
+                fill_raw: last
+                type: area
+                color_threshold:
+                  - value: -10
+                    color: blue
+                    opacity: 1
+                  - value: 0
+                    color: cyan
+                  - value: 15
+                    color: green
+                    opacity: 1
+                  - value: 25
+                    color: orange
diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -730,7 +730,13 @@ class ChartsCard extends LitElement {
     if (!serie.color_threshold) return undefined;
     const scale = max - min;
 
-    const result = serie.color_threshold.map((thres, index, arr) => {
+    const result = serie.color_threshold.flatMap((thres, index, arr) => {
+      if (
+        (thres.value > max && arr[index - 1] && arr[index - 1].value > max) ||
+        (thres.value < min && arr[index + 1] && arr[index + 1].value < min)
+      ) {
+        return [];
+      }
       let color: string | undefined = undefined;
       const defaultOp = serie.opacity !== undefined ? serie.opacity : serie.type === 'area' ? DEFAULT_AREA_OPACITY : 1;
       let opacity = thres.opacity === undefined ? defaultOp : thres.opacity;
@@ -772,12 +778,14 @@ class ChartsCard extends LitElement {
       }
       color = color || tinycolor(thres.color || defColor).toHexString();
       if ([undefined, 'line'].includes(serie.type)) color = tinycolor(color).setAlpha(opacity).toHex8String();
-      return {
-        color: color || tinycolor(thres.color || defColor).toHexString(),
-        offset:
-          scale <= 0 ? 0 : invert ? 100 - (max - thres.value) * (100 / scale) : (max - thres.value) * (100 / scale),
-        opacity,
-      };
+      return [
+        {
+          color: color || tinycolor(thres.color || defColor).toHexString(),
+          offset:
+            scale <= 0 ? 0 : invert ? 100 - (max - thres.value) * (100 / scale) : (max - thres.value) * (100 / scale),
+          opacity,
+        },
+      ];
     });
     return invert ? result : result.reverse();
   }