feat(series): Support for stack group of columns

Closes #673, Closes #550

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -1348,3 +1348,28 @@ views:
               type: mean
               period: 5minute
           - entity: sensor.temperature
+  - title: Test 3
+    panel: false
+    cards:
+      - type: custom:apexcharts-card
+        stacked: true
+        # cache: false
+        graph_span: 5min
+        series:
+          - entity: sensor.random0_100
+            stack_group: group1
+            group_by:
+              duration: 1min
+            type: column
+            name: tes2t
+            group_by:
+              duration: 1min
+          - entity: sensor.random0_100
+            stack_group: group1
+            type: column
+            # name: pioup
+          - entity: sensor.random_0_1000
+            type: column
+            group_by:
+              duration: 1min
+            # stack_group: group1

README.md

@@ -162,6 +162,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | :white_check_mark: `entity` | string | | v1.0.0 | The `entity_id` of the sensor to display |
 | `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 |
+| `stack_group` | string | | NEXT_VERSION | When `stacked` is `true`, groups the different series with the name `stack_group` together. Only works for `type: column`. All series' names need to be be unique because of a bug in apexcharts.js |
 | `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` | v1.6.0 | The opacity of the line or filled area, between `0` and `1` |
 | `stroke_width` | number | `5` | v1.6.0 | Change the width of the line. Only works for `area` and `line` |

src/apex-layouts.ts

@@ -189,6 +189,7 @@ function getSeries(config: ChartCardConfig, hass: HomeAssistant | undefined, bru
     return series.map((serie, index) => {
       return {
         name: computeName(index, series, undefined, hass?.states[serie.entity]),
+        group: config.stacked && serie.type === 'column' ? serie.stack_group : undefined,
         type: serie.type,
         data: [],
       };

src/types-config-ti.ts

@@ -68,6 +68,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
   "attribute": t.opt("string"),
   "name": t.opt("string"),
   "type": t.opt(t.union(t.lit('line'), t.lit('column'), t.lit('area'))),
+  "stack_group": t.opt("string"),
   "color": t.opt("string"),
   "opacity": t.opt("number"),
   "curve": t.opt(t.union(t.lit('smooth'), t.lit('straight'), t.lit('stepline'), t.lit('monotoneCubic'))),

src/types-config.ts

@@ -68,6 +68,7 @@ export interface ChartCardAllSeriesExternalConfig {
   attribute?: string;
   name?: string;
   type?: 'line' | 'column' | 'area';
+  stack_group?: string;
   color?: string;
   opacity?: number;
   curve?: 'smooth' | 'straight' | 'stepline' | 'monotoneCubic';