From a46c3f06982056f5349a0f4f31427b246401b407 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= Date: Tue, 2 Mar 2021 16:35:45 +0000 Subject: [PATCH] feat(series.show): Hide the offset from the name of the serie Fixes #112 --- .devcontainer/ui-lovelace.yaml | 14 ++++++++++++++ README.md | 4 ++-- src/apexcharts-card.ts | 4 ++++ src/const.ts | 1 + src/types-config-ti.ts | 28 ++++++++++++++++------------ src/types-config.ts | 27 +++++++++++++++------------ src/types.ts | 22 ++++++++++------------ src/utils.ts | 2 +- 8 files changed, 63 insertions(+), 39 deletions(-) diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 8dd7464..9c73b91 100644 --- 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 index e7a986a..168b803 100644 --- 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 index 0da1f44..65f7cb5 100644 --- 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 index dc491ad..4eadf62 100644 --- 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 index 3654c5d..5eea300 100644 --- 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 index b67d137..fd24d7c 100644 --- 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 index f51838f..a653d0a 100644 --- 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 index cb67944..4349ef7 100644 --- 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(