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
RomRider · Feb 1, 2021 · 95c0433 · 95c0433
1 parent 144ce67
commit 95c0433
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 22 deletions.
diff --git 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
@@ -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`.<br/>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
@@ -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
@@ -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`
       <div id="header__states">
         ${this._config?.series.map((serie, index) => {
-          return html`
-            <div id="states__state">
-              <div id="state__value">
-                <span
-                  id="state"
-                  style="${this._config?.header?.colorize_states && this._colors && this._colors.length > 0
-                    ? `color: ${this._colors[index % this._colors?.length]};`
-                    : ''}"
-                  >${this._lastState?.[index] === 0
-                    ? 0
-                    : (serie.show.as_duration
-                        ? prettyPrintTime(this._lastState?.[index], serie.show.as_duration)
-                        : this._lastState?.[index]) || NO_VALUE}</span
-                >
-                ${!serie.show.as_duration
-                  ? html`<span id="uom">${computeUom(index, this._config, this._entities)}</span>`
-                  : ''}
+          if (serie.show.in_header) {
+            return html`
+              <div id="states__state">
+                <div id="state__value">
+                  <span
+                    id="state"
+                    style="${this._config?.header?.colorize_states && this._colors && this._colors.length > 0
+                      ? `color: ${this._colors[index % this._colors?.length]};`
+                      : ''}"
+                    >${this._lastState?.[index] === 0
+                      ? 0
+                      : (serie.show.as_duration
+                          ? prettyPrintTime(this._lastState?.[index], serie.show.as_duration)
+                          : this._lastState?.[index]) || NO_VALUE}</span
+                  >
+                  ${!serie.show.as_duration
+                    ? html`<span id="uom">${computeUom(index, this._config, this._entities)}</span>`
+                    : ''}
+                </div>
+                <div id="state__name">${computeName(index, this._config, this._entities)}</div>
               </div>
-              <div id="state__name">${computeName(index, this._config, this._entities)}</div>
-            </div>
-          `;
+            `;
+          } else {
+            return html``;
+          }
         })}
       </div>
     `;
@@ -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
@@ -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
@@ -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
@@ -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
@@ -25,6 +25,8 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
   show: {
     as_duration?: ChartCardPrettyTime;
     legend_value: boolean;
+    in_header: boolean;
+    in_chart: boolean;
   };
 }