From 65b54191a2bd7ce03aaae97835043c4901e72fc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= Date: Tue, 16 Feb 2021 11:14:18 +0000 Subject: [PATCH] fix(color_threshold): Sometimes it would break the card --- .devcontainer/ui-lovelace.yaml | 19 +++++++++++++++++++ src/apexcharts-card.ts | 22 +++++++++++++++------- 2 files changed, 34 insertions(+), 7 deletions(-) diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 882edb3..517fada 100644 --- 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 index 171725d..5a35022 100644 --- 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(); }