From 100b6d4e72272127783c65b1132dbefb0b349f95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= <jerome@wnetworks.org>
Date: Thu, 11 Feb 2021 19:03:41 +0000
Subject: [PATCH] fix: color with alpha would render area opaque

---
 src/apexcharts-card.ts |  6 +++++-
 src/utils.ts           | 19 +++++++++++++++----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
index bb569c8..2cc4208 100644
--- a/src/apexcharts-card.ts
+++ b/src/apexcharts-card.ts
@@ -8,6 +8,7 @@ import * as pjson from '../package.json';
 import {
   computeColor,
   computeColors,
+  computeColorsWithAlpha,
   computeName,
   computeTextColor,
   computeUom,
@@ -637,7 +638,10 @@ class ChartsCard extends LitElement {
   }
 
   private _computeChartColors(): (string | (({ value }) => string))[] {
-    const defaultColors: (string | (({ value }) => string))[] = computeColors(this._colors);
+    const defaultColors: (string | (({ value }) => string))[] = computeColorsWithAlpha(
+      this._colors,
+      this._config?.series_in_graph,
+    );
     this._config?.series_in_graph.forEach((serie, index) => {
       if (
         this._config?.experimental?.color_threshold &&
diff --git a/src/utils.ts b/src/utils.ts
index 954ab9e..8215bf0 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -98,15 +98,26 @@ export function computeColors(colors: string[] | undefined): string[] {
   });
 }
 
-export function computeColor(color: string): 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 {
   if (color[0] === '#') {
     return color;
   } else if (color.substring(0, 3) === 'var') {
-    return new TinyColor(
+    const wColor = new TinyColor(
       window.getComputedStyle(document.documentElement).getPropertyValue(color.substring(4).slice(0, -1)).trim(),
-    ).toHex8String();
+    );
+    return withAlpha ? wColor.toHex8String() : wColor.toHexString();
   } else {
-    return new TinyColor(color).toHex8String();
+    return withAlpha ? new TinyColor(color).toHex8String() : new TinyColor(color).toHexString();
   }
 }