feat(yaxis): Set the number of decimals shown on the yaxis. Deprecate y_axis_precision.

Fix #164

Author: RomRider

.devcontainer/ui-lovelace.yaml

@@ -344,14 +344,16 @@ views:
             graph_span: 24h
             span:
               start: day
-            y_axis_precision: 5
+            # y_axis_precision: 5
             now:
               show: true
               color: '#ff0000'
               label: Now
             header:
               show: true
               show_states: true
+            yaxis:
+              - decimals: 5
             series:
               - entity: sensor.pvpc
                 float_precision: 5
@@ -1001,21 +1003,22 @@ views:
                 yaxis_id: second
               - entity: sensor.random0_100
                 yaxis_id: first
-                transform: 'return Number(x) + 30;'
+                transform: 'return Number(x) + 30.12;'
               - entity: sensor.random0_100
                 yaxis_id: first
                 transform: 'return Number(x) + 60;'
             yaxis:
               - id: first
                 apex_config:
-                  tickAmount: 4
+                  tickAmount: 2
               - id: second
                 max: '|+100|'
                 min: ~100
                 opposite: true
+                decimals: 0
                 show: true
                 apex_config:
-                  tickAmount: 4
+                  tickAmount: 6
           - type: custom:apexcharts-card
             header:
               show: true

README.md

@@ -142,7 +142,7 @@ The card stricly validates all the options available (but not for the `apex_conf
 | `layout` | string | | v1.0.0 | See [layouts](#layouts) |
 | `header` | object | | v1.0.0 | See [header](#header-options) |
 | `now` | object | | v1.5.0 | See [now](#now-options) |
-| `y_axis_precision` | number | `1` | v1.2.0 | The float precision used to display numbers on the Y axis. Only works if `yaxis` is undefined. |
+| ~~`y_axis_precision`~~ | ~~number~~ | ~~`1`~~ | ~~v1.2.0~~ | **DEPRECATED since NEXT_VERSION** ~~The float precision used to display numbers on the Y axis. Only works if `yaxis` is undefined.~~ |
 | `yaxis` | array | | v1.9.0 | See [yaxis](#yaxis-options-multi-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) |
 | `experimental` | object | | v1.6.0 | See [experimental](#experimental-features) |
@@ -438,6 +438,7 @@ You can have as many y-axis as there are series defined in your configuration or
 | `opposite` | boolean | `false` | v1.9.0 | If `true`, the axis will be shown on the right side of the chart |
 | `min` | `auto`, number or string | `auto` | v1.9.0 | If undefined or `auto`, the `min` of the yaxis will be automatically calculated based on the min value of all the series associated to this axis. See [below](#minmax-format) for other formats. |
 | `max` | `auto`, number or string | `auto` | v1.9.0 | If undefined or `auto`, the `min` of the yaxis will be automatically calculated based on the max value of all the series associated to this axis. See [below](#minmax-format) for other formats. |
+| `decimals` | number | `1` | NEXT_VERSION | Number of decimals to show on this y-axis |
 | `apex_config` | object | | v1.9.0 | Any configuration from https://apexcharts.com/docs/options/yaxis/, except `min`, `max`, `show` and `opposite` |
 
 #### Min/Max Format
@@ -469,6 +470,7 @@ You can have as many y-axis as there are series defined in your configuration or
       # if the sensor doesn't go above 50, the max of the axis will be 50
       # else the max will be the maximum value of the sensor
       max: ~50
+      decimals: 0
       apex_config:
         tickAmount: 4
   ```
@@ -486,10 +488,12 @@ You can have as many y-axis as there are series defined in your configuration or
   graph_span: 20min
   yaxis:
     - id: first # identification name of the first y-axis
+      decimals: 0
       apex_config:
         tickAmount: 4
     - id: second # identification name of the second y-axis
       opposite: true # make it show on the right side
+      decimals: 0
       apex_config:
         tickAmount: 4
   all_series_config:

src/apex-layouts.ts

@@ -221,7 +221,7 @@ function getYAxis(config: ChartCardConfig) {
   return Array.isArray(config.apex_config?.yaxis) || config.yaxis
     ? undefined
     : {
-        decimalsInFloat: config.y_axis_precision === undefined ? DEFAULT_FLOAT_PRECISION : config.y_axis_precision,
+        decimalsInFloat: DEFAULT_FLOAT_PRECISION,
       };
 }
 

src/apexcharts-card.ts

@@ -45,6 +45,7 @@ import exportedTypeSuite from './types-config-ti';
 import {
   DEFAULT_AREA_OPACITY,
   DEFAULT_FILL_RAW,
+  DEFAULT_FLOAT_PRECISION,
   DEFAULT_SHOW_IN_CHART,
   DEFAULT_SHOW_IN_HEADER,
   DEFAULT_SHOW_LEGEND_VALUE,
@@ -463,11 +464,11 @@ class ChartsCard extends LitElement {
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  private _generateYAxisConfig(config: ChartCardConfig): any {
+  private _generateYAxisConfig(config: ChartCardConfig): ApexYAxis[] | undefined {
     if (!config.yaxis) return undefined;
     const burned: boolean[] = [];
     this._yAxisConfig = JSON.parse(JSON.stringify(config.yaxis));
-    const yaxisConfig = config.series.map((serie, serieIndex) => {
+    const yaxisConfig: ApexYAxis[] = config.series.map((serie, serieIndex) => {
       let idx = -1;
       if (config.yaxis?.length !== 1) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -480,9 +481,13 @@ class ChartsCard extends LitElement {
       if (idx < 0) {
         throw new Error(`yaxis_id: ${serie.yaxis_id} doesn't exist.`);
       }
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      let yAxisDup: ChartCardYAxis = JSON.parse(JSON.stringify(config.yaxis![idx]));
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-explicit-any
+      let yAxisDup: any = JSON.parse(JSON.stringify(config.yaxis![idx]));
       delete yAxisDup.apex_config;
+      delete yAxisDup.decimals;
+      yAxisDup.decimalsInFloat =
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        config.yaxis![idx].decimals === undefined ? DEFAULT_FLOAT_PRECISION : config.yaxis![idx].decimals;
       if (this._yAxisConfig?.[idx].series_id) {
         this._yAxisConfig?.[idx].series_id?.push(serieIndex);
       } else {
@@ -492,7 +497,7 @@ class ChartsCard extends LitElement {
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       if (config.yaxis![idx].apex_config) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        yAxisDup = mergeDeep(JSON.parse(JSON.stringify(config.yaxis![idx])), config.yaxis![idx].apex_config);
+        yAxisDup = mergeDeep(yAxisDup, config.yaxis![idx].apex_config);
         delete yAxisDup.apex_config;
       }
       if (typeof yAxisDup.min !== 'number') delete yAxisDup.min;

src/types-config-ti.ts

@@ -23,7 +23,6 @@ export const ChartCardExternalConfig = t.iface([], {
   "series": t.array("ChartCardSeriesExternalConfig"),
   "graph_span": t.opt("string"),
   "span": t.opt("ChartCardSpanExtConfig"),
-  "y_axis_precision": t.opt("number"),
   "now": t.opt(t.iface([], {
     "show": t.opt("boolean"),
     "color": t.opt("string"),
@@ -136,6 +135,7 @@ export const ChartCardYAxisExternal = t.iface([], {
   "opposite": t.opt("boolean"),
   "min": t.opt(t.union(t.lit('auto'), "number", "string")),
   "max": t.opt(t.union(t.lit('auto'), "number", "string")),
+  "decimals": t.opt("number"),
   "apex_config": t.opt("any"),
 });
 

src/types-config.ts

@@ -17,7 +17,6 @@ export interface ChartCardExternalConfig {
   series: ChartCardSeriesExternalConfig[];
   graph_span?: string;
   span?: ChartCardSpanExtConfig;
-  y_axis_precision?: number;
   now?: {
     show?: boolean;
     color?: string;
@@ -136,6 +135,7 @@ export interface ChartCardYAxisExternal {
   opposite?: boolean;
   min?: 'auto' | number | string;
   max?: 'auto' | number | string;
+  decimals?: number;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   apex_config?: any;
 }