fix: Disable support for colors with alpha channel (#91)

* fix: Disable support for colors with alpha channel

* Add more tests

Fixes #90

.devcontainer/ui-lovelace.yaml

@@ -649,7 +649,7 @@ views:
             series:
               - entity: sensor.temperature
                 fill_raw: last
-                type: area
+                type: column
                 color_threshold:
                   - value: -10
                     color: blue
@@ -658,6 +658,150 @@ views:
                     color: cyan
                   - value: 15
                     color: green
-                    opacity: 1
                   - value: 25
                     color: orange
+                data_generator: |
+                  let res = [];
+                  let i = -6;
+                  start = new Date(start.getTime() - 4 * 1000 * 60 * 60);
+                  Array.from(Array(28).keys()).forEach((entry, index) => {
+                    res.push([new Date(start.getTime() + index * 1000 * 60 * 60).getTime(), i]);
+                    i += 2;
+                    if (i >= 28) i = -15;
+                  });
+                  return res;
+
+          - type: 'custom:apexcharts-card'
+            experimental:
+              color_threshold: true
+            graph_span: 12h
+            header:
+              show: true
+              show_states: true
+              colorize_states: true
+            series:
+              - entity: sensor.temperature
+                show:
+                  header_color_threshold: true
+                curve: smooth
+                color_threshold:
+                  - value: 300
+                    color: green
+                  - value: 700
+                    color: '#82ed82'
+                  - value: 1100
+                    color: '#e8e041'
+                  - value: 1600
+                    color: '#e88941'
+                  - value: 2100
+                    color: '#e84141'
+                data_generator: |
+                  let res = [];
+                  let i = 400;
+                  start = new Date(start.getTime() - 4 * 1000 * 60 * 60);
+                  Array.from(Array(28).keys()).forEach((entry, index) => {
+                    res.push([new Date(start.getTime() + index * 1000 * 60 * 60).getTime(), i]);
+                    i += 200;
+                    if (i >= 1401) i = 400;
+                  });
+                  return res;
+            now:
+              show: true
+              label: now
+            apex_config:
+              chart:
+                height: 250px
+          - type: 'custom:apexcharts-card'
+            show:
+              loading: false
+            apex_config:
+              chart:
+                height: 350
+              fill:
+                type: gradient
+                gradient:
+                  type: vertical
+                  fill: dark
+                  shadeIntensity: 0
+                  stops:
+                    - 20
+                    - 100
+                  opacityFrom:
+                    - 0.1
+                    - 0.1
+                    - 1
+                  opacityTo:
+                    - 0.6
+                    - 0.6
+                    - 0.3
+              plotOptions:
+                bar:
+                  columnWidth: 50%
+              yaxis:
+                - show: true
+                  title: Temp
+                  min: -20
+                  max: 30
+                - show: false
+                  title: Temp
+                  min: -20
+                  max: 30
+                - show: true
+                  title: Snow
+                  min: 0
+                  max: 40
+                  opposite: true
+                - show: false
+                  min: 0
+                  max: 40
+            graph_span: 6d
+            span:
+              start: day
+            header:
+              show: true
+              title: Weather Forecast
+            series:
+              - entity: weather.home
+                type: area
+                fill_raw: last
+                extend_to_end: false
+                color: var(--yellowish)
+                name: Max
+                stroke_width: 2
+                data_generator: |
+                  return entity.attributes.forecast.map((entry) => {
+                    return [new Date(entry.datetime).getTime(), entry.temperature];
+                  });
+              - entity: weather.home
+                type: area
+                fill_raw: last
+                extend_to_end: false
+                color: var(--cyanish)
+                name: Min
+                stroke_width: 2
+                data_generator: |
+                  return entity.attributes.forecast.map((entry) => {
+                    return [new Date(entry.datetime).getTime(), entry.templow];
+                  });
+              - entity: weather.home
+                type: column
+                fill_raw: last
+                extend_to_end: false
+                color: 'rgba(255, 255, 255, 1)'
+                name: Snow
+                stroke_width: 0
+                data_generator: |
+                  return entity.attributes.forecast.map((entry) => {
+                    return [new Date(entry.datetime).getTime(), entry.snow];
+                  });
+              - entity: weather.home
+                type: column
+                fill_raw: last
+                extend_to_end: false
+                color: var(--cyanish)
+                name: Rain
+                stroke_width: 0
+                data_generator: |
+                  return entity.attributes.forecast.map((entry) => {
+                    return [new Date(entry.datetime).getTime(), entry.precipitation];
+                  });

src/apexcharts-card.ts

@@ -8,7 +8,6 @@ import * as pjson from '../package.json';
 import {
   computeColor,
   computeColors,
-  computeColorsWithAlpha,
   computeName,
   computeTextColor,
   computeUom,
@@ -694,10 +693,7 @@ class ChartsCard extends LitElement {
   }
 
   private _computeChartColors(): (string | (({ value }) => string))[] {
-    const defaultColors: (string | (({ value }) => string))[] = computeColorsWithAlpha(
-      this._colors,
-      this._config?.series_in_graph,
-    );
+    const defaultColors: (string | (({ value }) => string))[] = computeColors(this._colors);
     this._config?.series_in_graph.forEach((serie, index) => {
       if (
         this._config?.experimental?.color_threshold &&
@@ -813,12 +809,12 @@ class ChartsCard extends LitElement {
           const prev = serie.color_threshold[index - 1];
           const next = serie.color_threshold[index];
           if (serie.type === 'column') {
-            color = computeColor(prev.color || this._headerColors[serie.index], false);
+            color = computeColor(prev.color || this._headerColors[serie.index]);
           } else {
             const factor = (value - prev.value) / (next.value - prev.value);
             color = interpolateColor(
-              computeColor(prev.color || this._headerColors[serie.index], false),
-              computeColor(next.color || this._headerColors[serie.index], false),
+              computeColor(prev.color || this._headerColors[serie.index]),
+              computeColor(next.color || this._headerColors[serie.index]),
               factor,
             );
           }

src/utils.ts

@@ -98,26 +98,15 @@ export function computeColors(colors: string[] | undefined): string[] {
   });
 }
 
-export function computeColorsWithAlpha(
-  colors: string[] | undefined,
-  series: ChartCardSeriesExternalConfig[] | undefined,
-): string[] {
-  if (!colors) return [];
-  return colors.map((color, index) => {
-    return computeColor(color, series?.[index]?.type !== 'area');
-  });
-}
-
-export function computeColor(color: string, withAlpha = true): string {
+export function computeColor(color: string): string {
   if (color[0] === '#') {
-    return color;
+    return new TinyColor(color).toHexString();
   } else if (color.substring(0, 3) === 'var') {
-    const wColor = new TinyColor(
+    return new TinyColor(
       window.getComputedStyle(document.documentElement).getPropertyValue(color.substring(4).slice(0, -1)).trim(),
-    );
-    return withAlpha ? wColor.toHex8String() : wColor.toHexString();
+    ).toHexString();
   } else {
-    return withAlpha ? new TinyColor(color).toHex8String() : new TinyColor(color).toHexString();
+    return new TinyColor(color).toHexString();
   }
 }