feat(series.show): Hide the name of a serie in the header

Fixes #111

.devcontainer/ui-lovelace.yaml

@@ -158,6 +158,7 @@ views:
                   as_duration: millisecond
                   in_header: true
                   in_chart: false
+                  name_in_header: false
                 group_by:
                   duration: 10min
                   func: avg

README.md

@@ -179,6 +179,7 @@ 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 or string | `true` | v1.4.0 | If `show_states` is enabled, this would show/hide this specific serie 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 NEXT_VERSION) |
+| `name_in_header` | boolean | `true` | NEXT_VERSION | Only valid if `in_header: true`. If `false`, it will hide the name of the serie under the its state in the header |
 | `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 serie from the chart |
 | `datalabels` | boolean or string | `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. If you set it to `total` (introduced in v1.7.0), it will display the stacked total value (only works when `stacked: true`) |

src/apexcharts-card.ts

@@ -39,6 +39,7 @@ import {
   DEFAULT_SHOW_IN_CHART,
   DEFAULT_SHOW_IN_HEADER,
   DEFAULT_SHOW_LEGEND_VALUE,
+  DEFAULT_SHOW_NAME_IN_HEADER,
   DEFAULT_UPDATE_DELAY,
   moment,
   NO_VALUE,
@@ -352,6 +353,7 @@ class ChartsCard extends LitElement {
               legend_value: DEFAULT_SHOW_LEGEND_VALUE,
               in_header: DEFAULT_SHOW_IN_HEADER,
               in_chart: DEFAULT_SHOW_IN_CHART,
+              name_in_header: DEFAULT_SHOW_NAME_IN_HEADER,
             };
           } else {
             serie.show.legend_value =
@@ -363,6 +365,8 @@ class ChartsCard extends LitElement {
                   ? false
                   : DEFAULT_SHOW_IN_HEADER
                 : 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;
           }
           validateInterval(serie.group_by.duration, `series[${index}].group_by.duration`);
           if (serie.color_threshold && serie.color_threshold.length > 0) {
@@ -504,7 +508,9 @@ class ChartsCard extends LitElement {
                     ? html`<span id="uom">${computeUom(index, this._config?.series, this._entities)}</span>`
                     : ''}
                 </div>
-                <div id="state__name">${computeName(index, this._config?.series, this._entities)}</div>
+                ${serie.show.name_in_header
+                  ? html`<div id="state__name">${computeName(index, this._config?.series, this._entities)}</div>`
+                  : ''}
               </div>
             `;
           } else {

src/const.ts

@@ -16,6 +16,7 @@ export const DEFAULT_FILL_RAW = 'null';
 export const DEFAULT_SHOW_LEGEND_VALUE = true;
 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_FLOAT_PRECISION = 1;
 

src/types-config-ti.ts

@@ -79,6 +79,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
     "as_duration": t.opt("ChartCardPrettyTime"),
     "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"),
     "header_color_threshold": t.opt("boolean"),
     "in_chart": t.opt("boolean"),
     "datalabels": t.opt(t.union("boolean", t.lit('total'))),

src/types-config.ts

@@ -78,6 +78,7 @@ export interface ChartCardAllSeriesExternalConfig {
     as_duration?: ChartCardPrettyTime;
     legend_value?: boolean;
     in_header?: boolean | 'raw' | 'before_now' | 'after_now';
+    name_in_header?: boolean;
     header_color_threshold?: boolean;
     in_chart?: boolean;
     datalabels?: boolean | 'total';

src/types.ts

@@ -29,6 +29,7 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
     as_duration?: ChartCardPrettyTime;
     legend_value: boolean;
     in_header: boolean | 'raw' | 'before_now' | 'after_now';
+    name_in_header: boolean;
     header_color_threshold?: boolean;
     in_chart: boolean;
     datalabels?: boolean | 'total';