From 7b0f30f7456ecf6ac7d2dab6b80e8533029bc316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=B4me=20Wiedemann?= Date: Thu, 28 Jan 2021 12:03:21 +0000 Subject: [PATCH] feat: Define your own float precision for legend, tooltip and Y axis --- .devcontainer/ui-lovelace.yaml | 5 +++++ README.md | 2 ++ src/apex-layouts.ts | 16 ++++++++++++---- src/apexcharts-card.ts | 9 +++++++-- src/const.ts | 2 ++ src/types-config-ti.ts | 2 ++ src/types-config.ts | 2 ++ 7 files changed, 32 insertions(+), 6 deletions(-) diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml index 1913a21..b468c45 100644 --- a/.devcontainer/ui-lovelace.yaml +++ b/.devcontainer/ui-lovelace.yaml @@ -215,8 +215,13 @@ views: - type: custom:apexcharts-card span: start: day + y_axis_precision: 5 + header: + show: true + show_states: true series: - entity: sensor.pvpc + float_precision: 5 data_generator: | return [...Array(22).keys()].map((hour) => { const attr = 'price_' + `${hour}`.padStart(2, '0') + 'h'; diff --git a/README.md b/README.md index ac8773a..d71fbd1 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ The card stricly validates all the options available (but not for the `apex_conf | `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) | | `header` | string | | v1.0.0 | See [header](#header-options) | +| `y_axis_precision` | numnber | `1` | NEXT_VERSION | The float precision used to display numbers on the Y axis | | `apex_config`| object | | v1.0.0 | Apexcharts API 1:1 mapping. You call see all the options [here](https://apexcharts.com/docs/installation/) --> `Options (Reference)` in the Menu. See [Apex Charts](#apex-charts-options-example) | @@ -116,6 +117,7 @@ The card stricly validates all the options available (but not for the `apex_conf | `curve` | string | `smooth` | v1.0.0 | `smooth` (nice curve), `straight` (direct line between points) or `stepline` (flat line until next point then straight up or down) | | `extend_to_end` | boolean | `true` | v1.0.0 | If the last data is older than the end time displayed on the graph, setting to true will extend the value until the end of the timeline. Only works for `line` and `area` types. | | `unit` | string | | v1.0.0 | Override the unit of the sensor | +| `float_precision` | number | `1` | NEXT_VERSION | The precision used to display data in the legend and the tooltip. It doesn't impact how the data is displayed on the graph | | `group_by` | object | | v1.0.0 | See [group_by](#group_by-options) | | `invert` | boolean | `false` | NEXT_VERSION | Negates the data (`1` -> `-1`). Usefull to display opposites values like network in (standard)/out (inverted) | | `data_generator` | string | | NEXT_VERSION | See [data_generator](#data_generator-option) | diff --git a/src/apex-layouts.ts b/src/apex-layouts.ts index 77d6406..2b5572f 100644 --- a/src/apex-layouts.ts +++ b/src/apex-layouts.ts @@ -1,6 +1,6 @@ import { HomeAssistant } from 'custom-card-helpers'; import parse from 'parse-duration'; -import { HOUR_24, moment } from './const'; +import { DEFAULT_FLOAT_PRECISION, HOUR_24, moment } from './const'; import { ChartCardConfig } from './types'; import { computeName, computeUom, mergeDeep } from './utils'; @@ -43,7 +43,7 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u yaxis: Array.isArray(config.apex_config?.yaxis) ? undefined : { - decimalsInFloat: 1, + decimalsInFloat: config.y_axis_precision === undefined ? DEFAULT_FLOAT_PRECISION : config.y_axis_precision, }, tooltip: { x: { @@ -60,7 +60,11 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u y: { formatter: function (value, opts, conf = config, hass2 = hass) { if (value !== null && typeof value === 'number' && !Number.isInteger(value)) { - value = (value as number).toFixed(1); + 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, @@ -92,7 +96,11 @@ export function getLayoutConfig(config: ChartCardConfig, hass: HomeAssistant | u 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)) { - value = (value as number).toFixed(1); + 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]); return [name, value === undefined ? `N/A ${uom}` : `${value} ${uom}`]; diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts index 438082a..018b021 100644 --- a/src/apexcharts-card.ts +++ b/src/apexcharts-card.ts @@ -22,7 +22,7 @@ import GraphEntry from './graphEntry'; import { createCheckers } from 'ts-interface-checker'; import { ChartCardExternalConfig } from './types-config'; import exportedTypeSuite from './types-config-ti'; -import { moment } from './const'; +import { DEFAULT_FLOAT_PRECISION, moment } from './const'; import { DEFAULT_COLORS, DEFAULT_DURATION, @@ -357,7 +357,12 @@ class ChartsCard extends LitElement { typeof this._lastState[index] === 'number' && !Number.isInteger(this._lastState[index]) ) { - this._lastState[index] = (this._lastState[index] as number).toFixed(1); + const precision = + this._config?.series[index].float_precision === undefined + ? DEFAULT_FLOAT_PRECISION + : // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + this._config.series[index].float_precision!; + this._lastState[index] = (this._lastState[index] as number).toFixed(precision); } } let data: (number | null)[][] = []; diff --git a/src/const.ts b/src/const.ts index 15754d1..f43d09e 100644 --- a/src/const.ts +++ b/src/const.ts @@ -11,6 +11,8 @@ export const DEFAULT_DURATION = '1h'; export const DEFAULT_FUNC = 'raw'; export const DEFAULT_GROUP_BY_FILL = 'last'; +export const DEFAULT_FLOAT_PRECISION = 1; + export const DEFAULT_COLORS = [ 'var(--accent-color)', '#3498db', diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts index 6ac8fa1..0735db0 100644 --- a/src/types-config-ti.ts +++ b/src/types-config-ti.ts @@ -10,6 +10,7 @@ export const ChartCardExternalConfig = t.iface([], { "series": t.array("ChartCardSeriesExternalConfig"), "graph_span": t.opt("string"), "span": t.opt("ChartCardSpanExtConfig"), + "y_axis_precision": t.opt("number"), "show": t.opt(t.iface([], { "loading": t.opt("boolean"), })), @@ -36,6 +37,7 @@ export const ChartCardSeriesExternalConfig = t.iface([], { "unit": t.opt("string"), "invert": t.opt("boolean"), "data_generator": t.opt("string"), + "float_precision": t.opt("number"), "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 index 0915ddf..d1c46d4 100644 --- a/src/types-config.ts +++ b/src/types-config.ts @@ -4,6 +4,7 @@ export interface ChartCardExternalConfig { series: ChartCardSeriesExternalConfig[]; graph_span?: string; span?: ChartCardSpanExtConfig; + y_axis_precision?: number; show?: { loading?: boolean; }; @@ -30,6 +31,7 @@ export interface ChartCardSeriesExternalConfig { unit?: string; invert?: boolean; data_generator?: string; + float_precision?: number; group_by?: { duration?: string; func?: GroupByFunc;