From 95c0433833c197d32914ed11260b4dd08885d9f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20W?= Date: Mon, 1 Feb 2021 19:14:26 +0100 Subject: [PATCH] feat(series): Show/Hide a specific serie from the header or the graph (#36) * feat(series): Show/Hide a specific serie from the header or the graph * fix doc --- .devcontainer/ui-lovelace.yaml | 2 ++ README.md | 2 ++ src/apex-layouts.ts | 1 + src/apexcharts-card.ts | 59 +++++++++++++++++++++------------- src/const.ts | 2 ++ src/types-config-ti.ts | 2 ++ src/types-config.ts | 2 ++ src/types.ts | 2 ++ 8 files changed, 50 insertions(+), 22 deletions(-) diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index ade100c..93e75ae 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.devcontainer/ui-lovelace.yaml @@ -140,6 +140,8 @@ views: type: line show: as_duration: year + in_header: true + in_chart: false group_by: duration: 10min func: diff diff --git a/README.md b/README.md index 9789fd7..e838661 100644 --- a/README.md +++ b/README.md @@ -148,6 +148,8 @@ The card stricly validates all the options available (but not for the `apex_conf | ---- | :--: | :-----: | :---: | ----------- | | `legend_value` | boolean | `true` | v1.3.0 | Show/Hide the state in the legend. Will still display the name | | `as_duration` | string | | v1.3.0 | Will pretty print the states as durations. Doesn't affect the graph, only the tooltip/legend/header display. You provide the source unit of your sensor. Valid values are `millisecond`, `second`, `minute`, `hour`, `day`, `week`, `month`, `year`.
Eg: if the state is `345` and `as_duration` is set to `minute` then it would display `5h 45m` | +| `in_header` | boolean | `true` | NEXT_VERSION |If `show_states` is enabled, this would enable/disable this specific serie in the header | +| `in_chart` | boolean | `true` | NEXT_VERSION |If `false`, hides the series from the chart. Putting this to `false` in any serie will also hide all the series which are completely empty (ie no data at all) from the legend | ### Main `show` Options diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts index befde2d..84f8afc 100644 --- a/src/apex-layouts.ts +++ b/src/apex-layouts.ts @@ -119,6 +119,7 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u : {}, }, legend: { + showForNullSeries: !config.series.some((serie) => serie.show.in_chart === false), position: 'bottom', show: true, formatter: function (_, opts, conf = config, hass2 = hass) { diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts index 9b93190..0714b45 100644 --- a/src/apexcharts-card.ts +++ b/src/apexcharts-card.ts @@ -27,6 +27,8 @@ import { ChartCardExternalConfig, ChartCardSeriesExternalConfig } from './types- import exportedTypeSuite from './types-config-ti'; import { DEFAULT_FLOAT_PRECISION, + DEFAULT_SHOW_IN_CHART, + DEFAULT_SHOW_IN_HEADER, DEFAULT_SHOW_LEGEND_VALUE, DEFAULT_UPDATE_DELAY, moment, @@ -258,10 +260,16 @@ class ChartsCard extends LitElement { serie.group_by.fill = serie.group_by.fill || DEFAULT_GROUP_BY_FILL; } if (!serie.show) { - serie.show = { legend_value: DEFAULT_SHOW_LEGEND_VALUE }; + serie.show = { + legend_value: DEFAULT_SHOW_LEGEND_VALUE, + in_header: DEFAULT_SHOW_IN_HEADER, + in_chart: DEFAULT_SHOW_IN_CHART, + }; } else { serie.show.legend_value = serie.show.legend_value === undefined ? DEFAULT_SHOW_LEGEND_VALUE : serie.show.legend_value; + serie.show.in_chart = serie.show.in_chart === undefined ? DEFAULT_SHOW_IN_CHART : serie.show.in_chart; + serie.show.in_header = serie.show.in_header === undefined ? DEFAULT_SHOW_IN_HEADER : serie.show.in_header; } validateInterval(serie.group_by.duration, `series[${index}].group_by.duration`); if (serie.entity) { @@ -366,27 +374,31 @@ class ChartsCard extends LitElement { return html`
${this._config?.series.map((serie, index) => { - return html` -
-
- ${this._lastState?.[index] === 0 - ? 0 - : (serie.show.as_duration - ? prettyPrintTime(this._lastState?.[index], serie.show.as_duration) - : this._lastState?.[index]) || NO_VALUE} - ${!serie.show.as_duration - ? html`${computeUom(index, this._config, this._entities)}` - : ''} + if (serie.show.in_header) { + return html` +
+
+ ${this._lastState?.[index] === 0 + ? 0 + : (serie.show.as_duration + ? prettyPrintTime(this._lastState?.[index], serie.show.as_duration) + : this._lastState?.[index]) || NO_VALUE} + ${!serie.show.as_duration + ? html`${computeUom(index, this._config, this._entities)}` + : ''} +
+
${computeName(index, this._config, this._entities)}
-
${computeName(index, this._config, this._entities)}
-
- `; + `; + } else { + return html``; + } })}
`; @@ -434,7 +446,9 @@ class ChartsCard extends LitElement { data = graph.history; } data = offsetData(data, this._seriesOffset[index]); - return this._config?.series[index].invert ? { data: this._invertData(data) } : { data }; + if (this._config?.series[index].show.in_chart) + return this._config?.series[index].invert ? { data: this._invertData(data) } : { data }; + return { data: [] }; }), xaxis: { min: start.getTime(), @@ -449,6 +463,7 @@ class ChartsCard extends LitElement { if (!graph || graph.history.length === 0) return; const lastState = graph.history[graph.history.length - 1][1]; this._lastState[index] = this._computeLastState(lastState, index); + if (!this._config?.series[index].show.in_chart) return; if (lastState === null) { return; } else { diff --git a/src/const.ts b/src/const.ts index 81dd9a5..30fe08f 100644 --- a/src/const.ts +++ b/src/const.ts @@ -13,6 +13,8 @@ export const DEFAULT_DURATION = '1h'; export const DEFAULT_FUNC = 'raw'; export const DEFAULT_GROUP_BY_FILL = 'last'; export const DEFAULT_SHOW_LEGEND_VALUE = true; +export const DEFAULT_SHOW_IN_HEADER = true; +export const DEFAULT_SHOW_IN_CHART = true; export const DEFAULT_FLOAT_PRECISION = 1; diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts index 923ff0d..7e14289 100644 --- a/src/types-config-ti.ts +++ b/src/types-config-ti.ts @@ -48,6 +48,8 @@ export const ChartCardSeriesExternalConfig = t.iface([], { "show": t.opt(t.iface([], { "as_duration": t.opt("ChartCardPrettyTime"), "legend_value": t.opt("boolean"), + "in_header": t.opt("boolean"), + "in_chart": 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 802c9d1..19a2bb5 100644 --- a/src/types-config.ts +++ b/src/types-config.ts @@ -44,6 +44,8 @@ export interface ChartCardSeriesExternalConfig { show?: { as_duration?: ChartCardPrettyTime; legend_value?: boolean; + in_header?: boolean; + in_chart?: boolean; }; group_by?: { duration?: string; diff --git a/src/types.ts b/src/types.ts index 539c557..188d7bc 100644 --- a/src/types.ts +++ b/src/types.ts @@ -25,6 +25,8 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig { show: { as_duration?: ChartCardPrettyTime; legend_value: boolean; + in_header: boolean; + in_chart: boolean; }; }