fix(color_threshold): opacity for color_threshold

RomRider · Feb 7, 2021 · 5a325f4 · 5a325f4
1 parent fcdfa88
commit 5a325f4
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -526,7 +526,7 @@ views:
                     color: blue
                     # optional opacity, value from 0 to 1.
                     # Default is 1 for 'type: line' and 0.7 for `type: area`
-                    opacity: 1
+                    opacity: 0
                   - value: 0
                     color: cyan
                   - value: 15
@@ -547,10 +547,10 @@ views:
                   - value: -10
                     # color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
                     # default is: the default color of the serie
-                    color: blue
+                    # color: blue
                     # optional opacity, value from 0 to 1.
                     # Default is 1 for 'type: line' and 0.7 for `type: area`
-                    opacity: 1
+                    # opacity: 1
                   - value: 0
                     color: cyan
                   - value: 15
@@ -570,10 +570,10 @@ views:
                   - value: -10
                     # color can be a color name, rgb(r, g, b), '#0000ff' or var(--color-variable)
                     # default is: the default color of the serie
-                    color: blue
+                    # color: blue
                     # optional opacity, value from 0 to 1.
                     # Default is 1 for 'type: line' and 0.7 for `type: area`
-                    opacity: 1
+                    opacity: 0
                   - value: 0
                     color: cyan
                   - value: 15

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -575,7 +575,9 @@ class ChartsCard extends LitElement {
               const min = this._graphs?.[index]?.min;
               const max = this._graphs?.[index]?.max;
               if (min === undefined || max === undefined) return [];
-              return this._computeFillColorStops(serie, min, max, this._colors[index], serie.invert) || [];
+              return (
+                this._computeFillColorStops(serie, min, max, computeColor(this._colors[index]), serie.invert) || []
+              );
             }),
           },
         };
@@ -667,6 +669,8 @@ class ChartsCard extends LitElement {
         }
         opacity = opacity < 0 ? -opacity : opacity;
       }
+      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: