From 522363aaa681777f53d744330355f46d9fa5042a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20W?= Date: Tue, 16 Feb 2021 19:27:31 +0100 Subject: [PATCH] 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 | 148 ++++++++++++++++++++++++++++++++- src/apexcharts-card.ts | 12 +-- src/utils.ts | 21 ++--- 3 files changed, 155 insertions(+), 26 deletions(-) diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 517fada..5b3ac07 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.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]; + }); diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts index 5a35022..8bca46b 100644 --- a/src/apexcharts-card.ts +++ b/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, ); } diff --git a/src/utils.ts b/src/utils.ts index 51db91b..cb67944 100644 --- a/src/utils.ts +++ b/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(); } }