From f0182d53a839eb90b4654b156e05c3d41f1a634d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= Date: Sun, 7 Feb 2021 16:41:53 +0000 Subject: [PATCH] feat(experimental): `hidden_by_default` to toggle series on load Fixes #60 --- .devcontainer/ui-lovelace.yaml | 3 +++ README.md | 21 +++++++++++++++++++++ src/apexcharts-card.ts | 11 ++++++++++- src/types-config-ti.ts | 2 ++ src/types-config.ts | 2 ++ src/types.ts | 1 + 6 files changed, 39 insertions(+), 1 deletion(-) diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index ab9aeee..f943a9e 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.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 diff --git a/README.md b/README.md index 46b1359..1305fbf 100644 --- a/README.md +++ b/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) diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts index d17d4b4..274b048 100644 --- a/src/apexcharts-card.ts +++ b/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) { diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts index eb5c191..e7537ab 100644 --- a/src/types-config-ti.ts +++ b/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"), diff --git a/src/types-config.ts b/src/types-config.ts index 9e218f8..e18b84a 100644 --- a/src/types-config.ts +++ b/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; diff --git a/src/types.ts b/src/types.ts index bbf2f09..170eca3 100644 --- a/src/types.ts +++ b/src/types.ts @@ -29,6 +29,7 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig { in_header: boolean; in_chart: boolean; datalabels?: boolean; + hidden_by_default?: boolean; }; }