feat(series): Define the opacity of the line or area

Fixes #57

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -196,12 +196,14 @@ views:
               - entity: sensor.humidity
                 type: area
                 name: Outside Humidity
+                opacity: 0.3
                 group_by:
                   func: avg
                   duration: 1h
               - entity: sensor.random0_100
                 type: area
                 name: Office Humidity
+                opacity: 0.3
                 group_by:
                   func: avg
                   duration: 1h
@@ -541,6 +543,7 @@ views:
               - entity: sensor.random0_100
                 type: area
                 stroke_width: 0
+                opacity: 0.5
                 transform: return x / 2 - 15;
                 invert: true
                 color_threshold:

README.md

@@ -147,6 +147,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `attribute` | string | | v1.4.0 | Instead of retrieving the state, it will retrieve an `attribute` of the entity. Make sure you increase `update_delay` if the chart doesn't reflect the last value of the attribute |
 | `name` | string | | v1.0.0 | Override the name of the entity |
 | `color` | string | | v1.1.0 | Color of the serie. Supported formats: `yellow`, `#aabbcc`, `rgb(128, 128, 128)` or `var(--css-color-variable)` |
+| `opacity` | number | `0.7` for `area`<br/>else `1` | NEXT_VERSION | The opacity of the line or filled area, between `0` and `1` |
 | `stroke_width` | number | `5` | NEXT_VERSION | Change the width of the line. Only works for `area` and `line` |
 | `type` | string | `line` | v1.0.0 | `line`, `area` or `column` are supported for now |
 | `curve` | string | `smooth` | v1.0.0 | `smooth` (nice curve),  `straight` (direct line between points) or `stepline` (flat line until next point then straight up or down) |

src/apex-layouts.ts

@@ -1,6 +1,7 @@
 import { HomeAssistant } from 'custom-card-helpers';
 import parse from 'parse-duration';
 import {
+  DEFAULT_AREA_OPACITY,
   DEFAULT_FLOAT_PRECISION,
   DEFAULT_SERIE_TYPE,
   HOUR_24,
@@ -89,7 +90,7 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
 
 function getFillOpacity(config: ChartCardConfig): number[] {
   return config.series_in_graph.map((serie) => {
-    return serie.type === 'area' ? 0.7 : 1;
+    return serie.opacity !== undefined ? serie.opacity : serie.type === 'area' ? DEFAULT_AREA_OPACITY : 1;
   });
 }
 

src/apexcharts-card.ts

@@ -631,7 +631,7 @@ class ChartsCard extends LitElement {
 
     const result = serie.color_threshold.map((thres, index, arr) => {
       let color: string | undefined = undefined;
-      const defaultOp = serie.type === 'line' ? 1 : DEFAULT_AREA_OPACITY;
+      const defaultOp = serie.opacity !== undefined ? serie.opacity : serie.type === 'area' ? DEFAULT_AREA_OPACITY : 1;
       let opacity = thres.opacity === undefined ? defaultOp : thres.opacity;
       if (thres.value > max && arr[index - 1]) {
         const factor = (max - arr[index - 1].value) / (thres.value - arr[index - 1].value);

src/types-config-ti.ts

@@ -46,6 +46,7 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
   "name": t.opt("string"),
   "type": t.opt(t.union(t.lit('line'), t.lit('column'), t.lit('area'))),
   "color": t.opt("string"),
+  "opacity": t.opt("number"),
   "curve": t.opt(t.union(t.lit('smooth'), t.lit('straight'), t.lit('stepline'))),
   "stroke_width": t.opt("number"),
   "extend_to_end": t.opt("boolean"),

src/types-config.ts

@@ -42,6 +42,7 @@ export interface ChartCardSeriesExternalConfig {
   name?: string;
   type?: 'line' | 'column' | 'area';
   color?: string;
+  opacity?: number;
   curve?: 'smooth' | 'straight' | 'stepline';
   stroke_width?: number;
   extend_to_end?: boolean;