feat(experimental): hidden_by_default to toggle series on load (#62)

Fixes #60

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -70,6 +70,7 @@ views:
             stacked: false
             experimental:
               color_threshold: true
+              hidden_by_default: true
               # disable_config_validation: true
             series:
               - entity: sensor.random_0_1000
@@ -90,6 +91,8 @@ views:
               - entity: sensor.random0_100
                 name: test2
                 type: column
+                show:
+                  hidden_by_default: true
                 group_by:
                   duration: 1m
                   func: last

README.md

@@ -45,6 +45,7 @@ However, some things might be broken :grin:
 - [Experimental features](#experimental-features)
   - [Configuration options](#configuration-options)
   - [`color_threshold` experimental feature](#color_threshold-experimental-feature)
+  - [`hidden_by_default` experimental feature](#hidden_by_default-experimental-feature)
 - [Known issues](#known-issues)
 - [Roadmap](#roadmap)
 - [Examples](#examples)
@@ -173,6 +174,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `in_header` | boolean | `true` | v1.4.0 | If `show_states` is enabled, this would show/hide this specific serie in the header |
 | `in_chart` | boolean | `true` | v1.4.0 | If `false`, hides the serie from the chart |
 | `datalabels` | boolean | `false` | v1.5.0 | If `true` will show the value of each point for this serie directly in the chart. Don't use it if you have a lot of points displayed, it will be a mess |
+| `hidden_by_default` | boolean | `false` | NEXT_VERSION | See [experimental](#hidden_by_default-experimental-feature) |
 
 
 ### Main `show` Options
@@ -442,6 +444,7 @@ For code junkies, you'll find the default options I use in [`src/apex-layouts.ts
 | ---- | :--: | :-----: | :---: | ----------- |
 | `color_threshold` | boolean | `false` | NEXT_VERSION | Will enable the color threshold feature. See [color_threshold](#color_threshold-experimental-feature) |
 | `disable_config_validation` | boolean | `false` | NEXT_VERSION | If `true`, will disable the config validation. Useful if you have cards adding parameters to this one. Use at your own risk. |
+| `hidden_by_default` | boolean | `false` | NEXT_VERSION | Will allow you to use the `hidden_by_default` option. See [hidden_by_default](#hidden_by_default-experimental-feature) |
 
 ### `color_threshold` experimental feature
 
@@ -490,6 +493,24 @@ series:
 
 ![color_threshold](docs/color_threshold.png)
 
+### `hidden_by_default` experimental feature
+
+Enabling this experimental feature might/will break the auto-scaling and auto-column width feature. Don't open an issue for that. It only works if all the series have a unique name.
+
+This option is useful if you want to hide a serie from the chart by default when it's loaded as if you had clicked on the legend to disable this serie.
+
+This is how to use it:
+```yaml
+type: custom:apexcharts-card
+experimental:
+  hidden_by_default: true
+series:
+  - entity: sensor.temperature
+    show:
+      hidden_by_default: true
+  - entity: sensor.temperature_office
+```
+
 ## Known issues
 
 * Sometimes, if `smoothing` is used alongside `area` and there is missing data in the chart, the background will be glitchy. See [apexcharts.js/#2180](https://github.com/apexcharts/apexcharts.js/issues/2180)

src/apexcharts-card.ts

@@ -168,7 +168,16 @@ class ChartsCard extends LitElement {
     if (this._updating || this._dataLoaded || !this._apexChart || !this._config || !this._hass) return;
     this._dataLoaded = true;
     this._updating = true;
-    this._updateData();
+    this._updateData().then(() => {
+      if (this._config?.experimental?.hidden_by_default) {
+        this._config.series_in_graph.forEach((serie, index) => {
+          if (serie.show.hidden_by_default) {
+            const name = computeName(index, this._config?.series_in_graph, this._hass?.states);
+            this._apexChart?.hideSeries(name);
+          }
+        });
+      }
+    });
   }
 
   public set hass(hass: HomeAssistant) {

src/types-config-ti.ts

@@ -9,6 +9,7 @@ export const ChartCardExternalConfig = t.iface([], {
   "experimental": t.opt(t.iface([], {
     "color_threshold": t.opt("boolean"),
     "disable_config_validation": t.opt("boolean"),
+    "hidden_by_default": t.opt("boolean"),
   })),
   "chart_type": t.opt(t.union(t.lit('line'), t.lit('scatter'), t.lit('pie'), t.lit('donut'), t.lit('radialBar'))),
   "update_interval": t.opt("string"),
@@ -64,6 +65,7 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
     "in_header": t.opt("boolean"),
     "in_chart": t.opt("boolean"),
     "datalabels": t.opt("boolean"),
+    "hidden_by_default": t.opt("boolean"),
   })),
   "group_by": t.opt(t.iface([], {
     "duration": t.opt("string"),

src/types-config.ts

@@ -3,6 +3,7 @@ export interface ChartCardExternalConfig {
   experimental?: {
     color_threshold?: boolean;
     disable_config_validation?: boolean;
+    hidden_by_default?: boolean;
   };
   chart_type?: 'line' | 'scatter' | 'pie' | 'donut' | 'radialBar';
   update_interval?: string;
@@ -60,6 +61,7 @@ export interface ChartCardSeriesExternalConfig {
     in_header?: boolean;
     in_chart?: boolean;
     datalabels?: boolean;
+    hidden_by_default?: boolean;
   };
   group_by?: {
     duration?: string;

src/types.ts

@@ -29,6 +29,7 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
     in_header: boolean;
     in_chart: boolean;
     datalabels?: boolean;
+    hidden_by_default?: boolean;
   };
 }