diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 8c1aee5..8dd7464 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.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 diff --git a/README.md b/README.md index 45b65f4..e7a986a 100644 --- a/README.md +++ b/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`.
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`) | diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts index 6962f69..0da1f44 100644 --- a/src/apexcharts-card.ts +++ b/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`${computeUom(index, this._config?.series, this._entities)}` : ''} -
${computeName(index, this._config?.series, this._entities)}
+ ${serie.show.name_in_header + ? html`
${computeName(index, this._config?.series, this._entities)}
` + : ''} `; } else { diff --git a/src/const.ts b/src/const.ts index 64c4f0b..dc491ad 100644 --- a/src/const.ts +++ b/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; diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts index 06c6a57..3654c5d 100644 --- a/src/types-config-ti.ts +++ b/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'))), diff --git a/src/types-config.ts b/src/types-config.ts index 432d68c..b67d137 100644 --- a/src/types-config.ts +++ b/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'; diff --git a/src/types.ts b/src/types.ts index 8dcbe22..f51838f 100644 --- a/src/types.ts +++ b/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';