feat(yaxis): Align the extremas to the closest align_to value.

Fix RomRider#170
ka0n · Jul 4, 2021 · a46c812 · a46c812
1 parent a082420
commit a46c812
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 7 deletions.
diff --git a/.devcontainer/ui-lovelace.yaml b/.devcontainer/ui-lovelace.yaml
@@ -1006,8 +1006,9 @@ views:
             all_series_config:
               stroke_width: 2
             series:
-              - entity: sensor.random_0_1000
+              - entity: sensor.random0_100
                 yaxis_id: second
+                invert: true
               - entity: sensor.random0_100
                 yaxis_id: first
                 transform: 'return Number(x) + 30.12;'
@@ -1016,11 +1017,13 @@ views:
                 transform: 'return Number(x) + 60;'
             yaxis:
               - id: first
+                align_to: 10
                 apex_config:
                   tickAmount: 2
               - id: second
                 max: '|+100|'
                 min: ~100
+                align_to: 200
                 opposite: true
                 decimals: 0
                 show: true

diff --git a/README.md b/README.md
@@ -507,6 +507,7 @@ You can have as many y-axis as there are series defined in your configuration or
 | `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` |
+| `align_to` | number | | NEXT_VERSION | Aligns the yaxis extremas to the closest `align_to` value. Only valid if `min` or `max` are not fixed values. |
 
 #### Min/Max Format
 

diff --git a/src/apexcharts-card.ts b/src/apexcharts-card.ts
@@ -1076,11 +1076,15 @@ class ChartsCard extends LitElement {
             this._seriesOffset[id] ? new Date(end.getTime() + this._seriesOffset[id]).getTime() : end.getTime(),
           );
           if (!lMinMax) return undefined;
-          if (this._config?.series[id].invert && lMinMax.min[1] !== null) {
-            lMinMax.min[1] = -lMinMax.min[1];
-          }
-          if (this._config?.series[id].invert && lMinMax.max[1] !== null) {
-            lMinMax.min[1] = -lMinMax.max[1];
+          if (this._config?.series[id].invert) {
+            const cmin = lMinMax.min[1];
+            const cmax = lMinMax.max[1];
+            if (cmin !== null) {
+              lMinMax.max[1] = -cmin;
+            }
+            if (cmax !== null) {
+              lMinMax.min[1] = -cmax;
+            }
           }
           return lMinMax;
         });
@@ -1099,6 +1103,18 @@ class ChartsCard extends LitElement {
             max = elt.max[1];
           }
         });
+        if (yaxis.align_to !== undefined) {
+          if (min !== null && yaxis.min_type !== minmax_type.FIXED) {
+            if (min % yaxis.align_to !== 0) {
+              min = min >= 0 ? min - (min % yaxis.align_to) : -(yaxis.align_to + (min % yaxis.align_to) - min);
+            }
+          }
+          if (max !== null && yaxis.max_type !== minmax_type.FIXED) {
+            if (max % yaxis.align_to !== 0) {
+              max = max >= 0 ? yaxis.align_to - (max % yaxis.align_to) + max : (max % yaxis.align_to) - max;
+            }
+          }
+        }
         yaxis.series_id?.forEach((id) => {
           if (min !== null && yaxis.min_type !== minmax_type.FIXED) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

diff --git a/src/graphEntry.ts b/src/graphEntry.ts
@@ -309,7 +309,7 @@ export default class GraphEntry {
         }
 
         if (this._cache) {
-          this._setCache(this._entityID, history, this._useCompress).catch((err) => {
+          await this._setCache(this._entityID, history, this._useCompress).catch((err) => {
             log(err);
             localForage.clear();
           });

diff --git a/src/types-config-ti.ts b/src/types-config-ti.ts
@@ -145,6 +145,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")),
+  "align_to": t.opt("number"),
   "decimals": t.opt("number"),
   "apex_config": t.opt("any"),
 });

diff --git a/src/types-config.ts b/src/types-config.ts
@@ -145,6 +145,7 @@ export interface ChartCardYAxisExternal {
   opposite?: boolean;
   min?: 'auto' | number | string;
   max?: 'auto' | number | string;
+  align_to?: number;
   decimals?: number;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   apex_config?: any;