feat(series): Hide the value of a serie in the legend (RomRider#22)

Fixes RomRider#20
georgepauna · Jan 30, 2021 · 1e8f748 · 1e8f748
1 parent 227f0ea
commit 1e8f748
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 43 deletions.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -80,47 +80,53 @@ views:
             name: AVG
             curve: smooth
             type: line
-            as_duration: millisecond
+            show:
+              as_duration: millisecond
             group_by:
               duration: 10min
               func: avg
           - entity: sensor.random0_100
             name: AVG
             curve: smooth
             type: line
-            as_duration: minute
+            show:
+              as_duration: minute
             group_by:
               duration: 10min
               func: avg
           - entity: sensor.random0_100
             curve: smooth
             name: MIN
             type: line
-            as_duration: hour
+            show:
+              as_duration: hour
             group_by:
               duration: 10min
               func: min
           - entity: sensor.random0_100
             curve: smooth
             name: MAX
             type: line
-            as_duration: day
+            show:
+              as_duration: day
             group_by:
               duration: 10min
               func: max
           - entity: sensor.random0_100
             curve: smooth
             name: LAST
             type: line
-            as_duration: month
+            show:
+              as_duration: month
             group_by:
               duration: 10min
               func: last
           - entity: sensor.random0_100
             curve: smooth
             name: FIRST
             type: line
-            as_duration: year
+            show:
+              as_duration: year
             group_by:
               duration: 10min
               func: first
@@ -215,6 +221,8 @@ views:
             group_by:
               func: avg
               fill: 'last'
+            show:
+              legend_value: false
           - entity: sensor.random0_100
             extend_to_end: false
             type: column

diff --git a/README.md b/README.md
@@ -21,7 +21,8 @@ However, some things might be broken :grin:
 - [Using the card](#using-the-card)
   - [Main Options](#main-options)
   - [`series` Options](#series-options)
-  - [`show` Options](#show-options)
+  - [`series.show` Options](#seriesshow-options)
+  - [Main `show` Options](#main-show-options)
   - [`header` Options](#header-options)
   - [`group_by` Options](#group_by-options)
   - [`func` Options](#func-options)
@@ -97,7 +98,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `update_interval` | string | | v1.1.0 | By default the card updates on every state change. Setting this overrides the behaviour. Valid values are any time string, eg: `1h`, `12min`, `1d`, `1h25`, `10sec`, ... |
 | `graph_span` | string | `24h` | v1.1.0 | The span of the graph as a time interval. Valid values are any time string, eg: `1h`, `12min`, `1d`, `1h25`, `10sec`, ... |
 | `span` | object | | v1.2.0 | See [span](#span-options) |
-| `show` | object | | v1.0.0 | See [show](#show-options) |
+| `show` | object | | v1.0.0 | See [show](#main-show-options) |
 | `cache` | boolean | `true` | v1.0.0 | Use in-browser data caching to reduce the load on Home Assistant's server |
 | `stacked` | boolean | `false` | v1.0.0 | Enable if you want the data to be stacked on the graph |
 | `layout` | string | | v1.0.0 | See [layouts](#layouts) |
@@ -123,10 +124,17 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `invert` | boolean | `false` | v1.2.0 | Negates the data (`1` -> `-1`). Usefull to display opposites values like network in (standard)/out (inverted) |
 | `data_generator` | string | | v1.2.0 | See [data_generator](#data_generator-option) |
 | `offset` | string | | NEXT_VERSION | This is different from the main `offset` parameter. This is at the series level. It is only usefull if you want to display data from for eg. yesterday on top of the data from today for the same sensor and compare the data. The time displayed in the tooltip will be wrong as will the x axis information. Valid values are any negative time string, eg: `-1h`, `-12min`, `-1d`, `-1h25`, `-10sec`, ... |
-| `to_duration` | string | | NEXT_VERSION | 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 `to_duration` is set to `minute` then it would display `5h45m` |
 
 
-### `show` Options
+### `series.show` Options
+
+| Name | Type | Default | Since | Description |
+| ---- | :--: | :-----: | :---: | ----------- |
+| `legend_value` | boolean | `true` | NEXT_VERSION | Show/Hide the state in the legend. Will still display the name |
+| `as_duration` | string | | NEXT_VERSION | 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` |
+
+
+### Main `show` Options
 
 | Name | Type | Default | Since | Description |
 | ---- | :--: | :-----: | :---: | ----------- |

diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts
@@ -63,7 +63,7 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
             value !== null &&
             typeof value === 'number' &&
             !Number.isInteger(value) &&
-            !conf.series[opts.seriesIndex]?.as_duration
+            !conf.series[opts.seriesIndex]?.show.as_duration
           ) {
             value = (value as number).toFixed(
               conf.series[opts.seriesIndex].float_precision === undefined
@@ -77,9 +77,9 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
             undefined,
             hass2?.states[conf.series[opts.seriesIndex].entity],
           );
-          return conf.series[opts.seriesIndex]?.as_duration
+          return conf.series[opts.seriesIndex]?.show.as_duration
             ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              [`<strong>${prettyPrintTime(value, conf.series[opts.seriesIndex].as_duration!)}</strong>`]
+              [`<strong>${prettyPrintTime(value, conf.series[opts.seriesIndex].show.as_duration!)}</strong>`]
             : [`<strong>${value} ${uom}</strong>`];
         },
       },
@@ -100,34 +100,50 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u
     },
     legend: {
       formatter: function (_, opts, conf = config, hass2 = hass) {
-        const name =
-          computeName(opts.seriesIndex, conf, undefined, hass2?.states[conf.series[opts.seriesIndex].entity]) + ':';
-        let value = opts.w.globals.series[opts.seriesIndex].slice(-1)[0];
-        if (
-          value !== null &&
-          typeof value === 'number' &&
-          !Number.isInteger(value) &&
-          !conf.series[opts.seriesIndex]?.as_duration
-        ) {
-          value = (value as number).toFixed(
-            conf.series[opts.seriesIndex].float_precision === undefined
-              ? DEFAULT_FLOAT_PRECISION
-              : conf.series[opts.seriesIndex].float_precision,
-          );
-        }
-        const uom = computeUom(opts.seriesIndex, conf, undefined, hass2?.states[conf.series[opts.seriesIndex].entity]);
-        let valueString = '';
-        if (value === undefined || value === null) {
-          valueString = `<strong>${NO_VALUE} ${uom}</strong>`;
+        const name = computeName(
+          opts.seriesIndex,
+          conf,
+          undefined,
+          hass2?.states[conf.series[opts.seriesIndex].entity],
+        );
+        if (!conf.series[opts.seriesIndex].show.legend_value) {
+          return [name];
         } else {
-          if (conf.series[opts.seriesIndex]?.as_duration) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            valueString = `<strong>${prettyPrintTime(value, conf.series[opts.seriesIndex].as_duration!)}</strong>`;
+          let value = opts.w.globals.series[opts.seriesIndex].slice(-1)[0];
+          if (
+            value !== null &&
+            typeof value === 'number' &&
+            !Number.isInteger(value) &&
+            !conf.series[opts.seriesIndex]?.show.as_duration
+          ) {
+            value = (value as number).toFixed(
+              conf.series[opts.seriesIndex].float_precision === undefined
+                ? DEFAULT_FLOAT_PRECISION
+                : conf.series[opts.seriesIndex].float_precision,
+            );
+          }
+          const uom = computeUom(
+            opts.seriesIndex,
+            conf,
+            undefined,
+            hass2?.states[conf.series[opts.seriesIndex].entity],
+          );
+          let valueString = '';
+          if (value === undefined || value === null) {
+            valueString = `<strong>${NO_VALUE} ${uom}</strong>`;
           } else {
-            valueString = `<strong>${value} ${uom}</strong>`;
+            if (conf.series[opts.seriesIndex]?.show.as_duration) {
+              valueString = `<strong>${prettyPrintTime(
+                value,
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                conf.series[opts.seriesIndex].show.as_duration!,
+              )}</strong>`;
+            } else {
+              valueString = `<strong>${value} ${uom}</strong>`;
+            }
           }
+          return [name + ':', valueString];
         }
-        return [name, valueString];
       },
     },
     stroke: {

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -24,7 +24,7 @@ import GraphEntry from './graphEntry';
 import { createCheckers } from 'ts-interface-checker';
 import { ChartCardExternalConfig } from './types-config';
 import exportedTypeSuite from './types-config-ti';
-import { DEFAULT_FLOAT_PRECISION, moment, NO_VALUE } from './const';
+import { DEFAULT_FLOAT_PRECISION, DEFAULT_SHOW_LEGEND_VALUE, moment, NO_VALUE } from './const';
 import {
   DEFAULT_COLORS,
   DEFAULT_DURATION,
@@ -230,6 +230,12 @@ class ChartsCard extends LitElement {
           serie.group_by.func = serie.group_by.func || DEFAULT_FUNC;
           serie.group_by.fill = serie.group_by.fill || DEFAULT_GROUP_BY_FILL;
         }
+        if (!serie.show) {
+          serie.show = { legend_value: DEFAULT_SHOW_LEGEND_VALUE };
+        } else {
+          serie.show.legend_value =
+            serie.show.legend_value === undefined ? DEFAULT_SHOW_LEGEND_VALUE : serie.show.legend_value;
+        }
         validateInterval(serie.group_by.duration, `series[${index}].group_by.duration`);
         if (serie.entity) {
           return new GraphEntry(
@@ -326,8 +332,8 @@ class ChartsCard extends LitElement {
                     : ''}"
                   >${this._lastState?.[index] === 0
                     ? 0
-                    : (serie.as_duration
-                        ? prettyPrintTime(this._lastState?.[index], serie.as_duration)
+                    : (serie.show.as_duration
+                        ? prettyPrintTime(this._lastState?.[index], serie.show.as_duration)
                         : this._lastState?.[index]) || NO_VALUE}</span
                 >
                 <span id="uom">${computeUom(index, this._config, this._entities)}</span>

diff --git a/src/const.ts b/src/const.ts
@@ -12,6 +12,7 @@ export const DEFAULT_SERIE_TYPE = 'line';
 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_FLOAT_PRECISION = 1;
 

diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
@@ -40,7 +40,10 @@ export const ChartCardSeriesExternalConfig = t.iface([], {
   "data_generator": t.opt("string"),
   "float_precision": t.opt("number"),
   "offset": t.opt("string"),
-  "as_duration": t.opt("ChartCardPrettyTime"),
+  "show": t.opt(t.iface([], {
+    "as_duration": t.opt("ChartCardPrettyTime"),
+    "legend_value": t.opt("boolean"),
+  })),
   "group_by": t.opt(t.iface([], {
     "duration": t.opt("string"),
     "func": t.opt("GroupByFunc"),

diff --git a/src/types-config.ts b/src/types-config.ts
@@ -36,7 +36,10 @@ export interface ChartCardSeriesExternalConfig {
   data_generator?: string;
   float_precision?: number;
   offset?: string;
-  as_duration?: ChartCardPrettyTime;
+  show?: {
+    as_duration?: ChartCardPrettyTime;
+    legend_value?: boolean;
+  };
   group_by?: {
     duration?: string;
     func?: GroupByFunc;

diff --git a/src/types.ts b/src/types.ts
@@ -1,5 +1,11 @@
 import { ApexOptions } from 'apexcharts';
-import { ChartCardExternalConfig, ChartCardSeriesExternalConfig, GroupByFill, GroupByFunc } from './types-config';
+import {
+  ChartCardExternalConfig,
+  ChartCardPrettyTime,
+  ChartCardSeriesExternalConfig,
+  GroupByFill,
+  GroupByFunc,
+} from './types-config';
 
 export interface ChartCardConfig extends ChartCardExternalConfig {
   series: ChartCardSeriesConfig[];
@@ -16,6 +22,10 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
     func: GroupByFunc;
     fill: GroupByFill;
   };
+  show: {
+    as_duration?: ChartCardPrettyTime;
+    legend_value: boolean;
+  };
 }
 
 export interface EntityEntryCache {