feat(series): Add option to hide null or zero values in the header (#544)

Fixes #543

* Add options to hide null and zero values in header

* Update options naming

---------

Co-authored-by: Jérôme Wiedemann <jerome@wnetworks.org>

Author: TheHolyRoger

README.md

@@ -197,6 +197,8 @@ The card strictly validates all the options available (but not for the `apex_con
 | `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 or string | `true` | v1.4.0 | If `show_states` is enabled, this would show/hide this specific series in the header. If set to `raw` (introduced in v1.7.0), it would display the latest raw state of the entity in the header bypassing any grouping/transformation done by the card. If the graph spans into the future (using `data_generator`): `before_now` would display the value just before the current time and `after_now` would display the value just after the current time (Introduced in v1.8.0) |
 | `name_in_header` | boolean | `true` | v1.8.0 | Only valid if `in_header: true`. If `false`, it will hide the name of the series under its state in the header |
+| `null_in_header` | boolean | `true` | NEXT_VERSION | Only valid if `in_header: true`. If `false`, it will hide the name of the series in the header if the value is null |
+| `zero_in_header` | boolean | `true` | NEXT_VERSION | Only valid if `in_header: true`. If `false`, it will hide the name of the series in the header if the value is zero |
 | `header_color_threshold` | boolean | `false` | v1.7.0 | If `true` and `color_threshold` experimental mode is enabled, it will colorize the header's state based on the threshold (ignoring opacity). |
 | `in_chart` | boolean | `true` | v1.4.0 | If `false`, hides the series from the chart |
 | `datalabels` | boolean or string | `false` | v1.5.0 | If `true` will show the value of each point for this series directly in the chart. Don't use it if you have a lot of points displayed, it will be a mess. If you set it to `total` (introduced in v1.7.0), it will display the stacked total value (only works when `stacked: true`). If you set it to `percent`, it will display the percentage of the series instead of the value in the case of a `pie` or `donut` chart. |

src/apexcharts-card.ts

@@ -64,6 +64,8 @@ import {
   DEFAULT_SHOW_IN_LEGEND,
   DEFAULT_SHOW_LEGEND_VALUE,
   DEFAULT_SHOW_NAME_IN_HEADER,
+  DEFAULT_SHOW_NULL_IN_HEADER,
+  DEFAULT_SHOW_ZERO_IN_HEADER,
   DEFAULT_SHOW_OFFSET_IN_NAME,
   DEFAULT_UPDATE_DELAY,
   moment,
@@ -405,6 +407,8 @@ class ChartsCard extends LitElement {
               in_header: DEFAULT_SHOW_IN_HEADER,
               in_chart: DEFAULT_SHOW_IN_CHART,
               name_in_header: DEFAULT_SHOW_NAME_IN_HEADER,
+              null_in_header: DEFAULT_SHOW_NULL_IN_HEADER,
+              zero_in_header: DEFAULT_SHOW_ZERO_IN_HEADER,
               offset_in_name: DEFAULT_SHOW_OFFSET_IN_NAME,
             };
           } else {
@@ -420,6 +424,10 @@ class ChartsCard extends LitElement {
                 : serie.show.in_header;
             serie.show.name_in_header =
               serie.show.name_in_header === undefined ? DEFAULT_SHOW_NAME_IN_HEADER : serie.show.name_in_header;
+            serie.show.null_in_header =
+              serie.show.null_in_header === undefined ? DEFAULT_SHOW_NULL_IN_HEADER : serie.show.null_in_header;
+            serie.show.zero_in_header =
+              serie.show.zero_in_header === undefined ? DEFAULT_SHOW_ZERO_IN_HEADER : serie.show.zero_in_header;
             serie.show.offset_in_name =
               serie.show.offset_in_name === undefined ? DEFAULT_SHOW_OFFSET_IN_NAME : serie.show.offset_in_name;
           }
@@ -685,7 +693,11 @@ class ChartsCard extends LitElement {
     return html`
       <div id="header__states">
         ${this._config?.series.map((serie, index) => {
-          if (serie.show.in_header) {
+          if (
+            serie.show.in_header &&
+            (serie.show.null_in_header || this._headerState?.[index] !== null) &&
+            (serie.show.zero_in_header || this._headerState?.[index] !== 0)
+          ) {
             return html`
               <div
                 id="states__state"

src/const.ts

@@ -19,6 +19,8 @@ export const DEFAULT_SHOW_IN_HEADER = true;
 export const DEFAULT_SHOW_IN_CHART = true;
 export const DEFAULT_SHOW_NAME_IN_HEADER = true;
 export const DEFAULT_SHOW_OFFSET_IN_NAME = true;
+export const DEFAULT_SHOW_NULL_IN_HEADER = true;
+export const DEFAULT_SHOW_ZERO_IN_HEADER = true;
 export const DEFAULT_STATISTICS_TYPE = 'mean';
 export const DEFAULT_STATISTICS_PERIOD = 'hour';
 

src/types-config-ti.ts

@@ -119,6 +119,8 @@ export const ChartCardSeriesShowConfigExt = t.iface([], {
   "legend_value": t.opt("boolean"),
   "in_header": t.opt(t.union("boolean", t.lit('raw'), t.lit('before_now'), t.lit('after_now'))),
   "name_in_header": t.opt("boolean"),
+  "null_in_header": t.opt("boolean"),
+  "zero_in_header": t.opt("boolean"),
   "header_color_threshold": t.opt("boolean"),
   "in_chart": t.opt("boolean"),
   "datalabels": t.opt(t.union("boolean", t.lit('total'), t.lit('percent'))),

src/types-config.ts

@@ -121,6 +121,8 @@ export interface ChartCardSeriesShowConfigExt {
   legend_value?: boolean;
   in_header?: boolean | 'raw' | 'before_now' | 'after_now';
   name_in_header?: boolean;
+  null_in_header?: boolean;
+  zero_in_header?: boolean;
   header_color_threshold?: boolean;
   in_chart?: boolean;
   datalabels?: boolean | 'total' | 'percent';

src/types.ts

@@ -35,6 +35,8 @@ export interface ChartCardSeriesShowConfig extends ChartCardSeriesShowConfigExt
   legend_value: boolean;
   in_header: boolean | 'raw' | 'before_now' | 'after_now';
   name_in_header: boolean;
+  null_in_header: boolean;
+  zero_in_header: boolean;
   in_chart: boolean;
   offset_in_name: boolean;
 }