feat: Define your own float precision for legend, tooltip and Y axis

.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';

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) |

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 ? `<strong>N/A ${uom}</strong>` : `<strong>${value} ${uom}</strong>`];

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)[][] = [];

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',

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"),

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;