feat(series.show): Hide the offset from the name of the serie

Fixes #112
RomRider · Mar 2, 2021 · a46c3f0 · a46c3f0
1 parent b20133d
commit a46c3f0
Show file tree

Hide file tree

Showing 8 changed files with 63 additions and 39 deletions.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -908,3 +908,17 @@ views:
                   func: first
                   duration: 10min
                   start_with_last: true
+
+          - type: custom:apexcharts-card
+            graph_span: 1h
+            header:
+              show: true
+              show_states: true
+            series:
+              - entity: sensor.random0_100
+                name: last hour
+              - entity: sensor.random0_100
+                name: previous hour
+                offset: -1h
+                show:
+                  offset_in_name: false
diff --git a/README.md b/README.md
@@ -186,8 +186,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `hidden_by_default` | boolean | `false` | v1.6.0 | See [experimental](#hidden_by_default-experimental-feature) |
 | `extremas` | boolean or string | `false` | v1.7.0 | If `true`, will show the min and the max of the serie in the chart. If the value is `time`, it will display also the time of the min/max value on top of the value. This feature doesn't work with `stacked: true`. |
 | `in_brush` | boolean | `false` | NEXT_VERSION | See [brush](#brush-experimental-feature) |
-| `standard_format` | boolean | `false` | NEXT_VERSION | Display the title using the standard Home-Assistant card format |
-
+| `offset_in_name` | boolean | `true` | NEXT_VERSION | If `true`, appends the offset information to the name of the serie. If `false`, it doesn't |
 
 ### Main `show` Options
 
@@ -204,6 +203,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `floating` | boolean | `false` | v1.0.0 | Makes the header float above the graph. Positionning will be supported later |
 | `show_states` | boolean | `false` | v1.1.0 | Show or hide the states in the header |
 | `colorize_states` | boolean | `false` | v1.1.0 | Colorize the states based on the color of the serie |
+| `standard_format` | boolean | `false` | NEXT_VERSION | Display the title using the standard Home-Assistant card format |
 
 ### `now` Options
 

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -40,6 +40,7 @@ import {
   DEFAULT_SHOW_IN_HEADER,
   DEFAULT_SHOW_LEGEND_VALUE,
   DEFAULT_SHOW_NAME_IN_HEADER,
+  DEFAULT_SHOW_OFFSET_IN_NAME,
   DEFAULT_UPDATE_DELAY,
   moment,
   NO_VALUE,
@@ -354,6 +355,7 @@ class ChartsCard extends LitElement {
               in_header: DEFAULT_SHOW_IN_HEADER,
               in_chart: DEFAULT_SHOW_IN_CHART,
               name_in_header: DEFAULT_SHOW_NAME_IN_HEADER,
+              offset_in_name: DEFAULT_SHOW_OFFSET_IN_NAME,
             };
           } else {
             serie.show.legend_value =
@@ -367,6 +369,8 @@ 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.offset_in_name =
+              serie.show.offset_in_name === undefined ? DEFAULT_SHOW_OFFSET_IN_NAME : serie.show.offset_in_name;
           }
           validateInterval(serie.group_by.duration, `series[${index}].group_by.duration`);
           if (serie.color_threshold && serie.color_threshold.length > 0) {

diff --git a/src/const.ts b/src/const.ts
@@ -17,6 +17,7 @@ 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_SHOW_OFFSET_IN_NAME = true;
 
 export const DEFAULT_FLOAT_PRECISION = 1;
 

diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
@@ -75,18 +75,7 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
   "max": t.opt("number"),
   "offset": t.opt("string"),
   "fill_raw": t.opt("GroupByFill"),
-  "show": t.opt(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'))),
-    "hidden_by_default": t.opt("boolean"),
-    "extremas": t.opt(t.union("boolean", t.lit('time'))),
-    "in_brush": t.opt("boolean"),
-  })),
+  "show": t.opt("ChartCardSeriesShowConfigExt"),
   "group_by": t.opt(t.iface([], {
     "duration": t.opt("string"),
     "func": t.opt("GroupByFunc"),
@@ -97,6 +86,20 @@ export const ChartCardAllSeriesExternalConfig = t.iface([], {
   "color_threshold": t.opt(t.array("ChartCardColorThreshold")),
 });
 
+export const ChartCardSeriesShowConfigExt = 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'))),
+  "hidden_by_default": t.opt("boolean"),
+  "extremas": t.opt(t.union("boolean", t.lit('time'))),
+  "in_brush": t.opt("boolean"),
+  "offset_in_name": t.opt("boolean"),
+});
+
 export const ChartCardSeriesExternalConfig = t.iface(["ChartCardAllSeriesExternalConfig"], {
   "entity": "string",
 });
@@ -129,6 +132,7 @@ const exportedTypeSuite: t.ITypeSuite = {
   ChartCardSpanExtConfig,
   ChartCardStartEnd,
   ChartCardAllSeriesExternalConfig,
+  ChartCardSeriesShowConfigExt,
   ChartCardSeriesExternalConfig,
   ChartCardPrettyTime,
   GroupByFill,

diff --git a/src/types-config.ts b/src/types-config.ts
@@ -74,18 +74,7 @@ export interface ChartCardAllSeriesExternalConfig {
   max?: number;
   offset?: string;
   fill_raw?: GroupByFill;
-  show?: {
-    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';
-    hidden_by_default?: boolean;
-    extremas?: boolean | 'time';
-    in_brush?: boolean;
-  };
+  show?: ChartCardSeriesShowConfigExt;
   group_by?: {
     duration?: string;
     func?: GroupByFunc;
@@ -96,6 +85,20 @@ export interface ChartCardAllSeriesExternalConfig {
   color_threshold?: ChartCardColorThreshold[];
 }
 
+export interface ChartCardSeriesShowConfigExt {
+  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';
+  hidden_by_default?: boolean;
+  extremas?: boolean | 'time';
+  in_brush?: boolean;
+  offset_in_name?: boolean;
+}
+
 export interface ChartCardSeriesExternalConfig extends ChartCardAllSeriesExternalConfig {
   entity: string;
 }

diff --git a/src/types.ts b/src/types.ts
@@ -3,6 +3,7 @@ import {
   ChartCardExternalConfig,
   ChartCardPrettyTime,
   ChartCardSeriesExternalConfig,
+  ChartCardSeriesShowConfigExt,
   GroupByFill,
   GroupByFunc,
 } from './types-config';
@@ -25,18 +26,15 @@ export interface ChartCardSeriesConfig extends ChartCardSeriesExternalConfig {
     fill: GroupByFill;
     start_with_last?: boolean;
   };
-  show: {
-    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';
-    hidden_by_default?: boolean;
-    extremas?: boolean | 'time';
-    in_brush?: boolean;
-  };
+  show: ChartCardSeriesShowConfig;
+}
+
+export interface ChartCardSeriesShowConfig extends ChartCardSeriesShowConfigExt {
+  legend_value: boolean;
+  in_header: boolean | 'raw' | 'before_now' | 'after_now';
+  name_in_header: boolean;
+  in_chart: boolean;
+  offset_in_name: boolean;
 }
 
 export interface EntityEntryCache {

diff --git a/src/utils.ts b/src/utils.ts
@@ -73,7 +73,7 @@ export function computeName(
     name =
       series[index].name || entities[index]?.attributes?.friendly_name || entities[entities[index]]?.entity_id || '';
   }
-  return name + (series[index].offset ? ` (${series[index].offset})` : '');
+  return name + (series[index].show?.offset_in_name && series[index].offset ? ` (${series[index].offset})` : '');
 }
 
 export function computeUom(