@oliasoft-open-source/charts-library 2.5.9 → 2.5.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.9",
+  "version": "2.5.10",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "files": [

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.5.10
+
+- Fix zoom / pan bug at < 0.1 scale on charts
+
 ## 2.5.9
 
 - Fix validation for two and more decimal places in charts settings

package/src/components/controls/axes-options.jsx

@@ -25,6 +25,7 @@ const AxesOptionsPopover = ({
     axes.filter((axis) => axis.max.displayValue || axis.min.displayValue)
       .length > 0;
   const handleInputFocus = (e) => e.target.select();
+  const zoomOrPanEnabled = zoomEnabled || panEnabled;
   return (
     <>
       {axes.map((axis, i) => {
@@ -36,7 +37,11 @@ const AxesOptionsPopover = ({
               <Input
                 name="min"
                 // TODO: Fix input values not updating first time when scales reset
-                value={axis.min.inputValue || scalesMaxMin[axis?.id]?.min}
+                value={
+                  (zoomOrPanEnabled
+                    ? axis.min.displayValue
+                    : axis.min.inputValue) || scalesMaxMin[axis?.id]?.min
+                }
                 error={
                   !axis.min.valid
                     ? 'Invalid value' //t(InputWarningType.MustBeNumericAndLessThanMax)
@@ -61,7 +66,11 @@ const AxesOptionsPopover = ({
               <Input
                 name="max"
                 // TODO: Fix input values not updating first time when scales reset
-                value={axis.max.inputValue || scalesMaxMin[axis?.id]?.max}
+                value={
+                  (zoomOrPanEnabled
+                    ? axis.max.displayValue
+                    : axis.max.inputValue) || scalesMaxMin[axis?.id]?.max
+                }
                 error={
                   !axis.max.valid
                     ? 'Invalid value' //t(InputWarningType.MustBeNumericAndGreaterThanMin)

package/src/components/line-chart/line-chart-utils.js

@@ -150,7 +150,9 @@ export const isLessThanMax = (value, max) => {
 };
 
 export const isGreaterThanMin = (value, min) => {
-  return value === undefined || min === undefined || value > min;
+  return (
+    value === undefined || min === undefined || Number(value) > Number(min)
+  );
 };
 
 /**

package/src/components/line-chart/line-chart.jsx

@@ -346,22 +346,22 @@ const LineChart = (props) => {
       payload: [
         {
           name: 'min',
-          value: chart.scales?.x?.min ? chart.scales.x.min.toFixed(1) : 0,
+          value: chart.scales?.x?.min ? chart.scales.x.min : 0,
           id: 'x',
         },
         {
           name: 'max',
-          value: chart.scales?.x?.max ? chart.scales.x.max.toFixed(1) : 0,
+          value: chart.scales?.x?.max ? chart.scales.x.max : 0,
           id: 'x',
         },
         {
           name: 'min',
-          value: chart.scales?.y?.min ? chart.scales.y.min.toFixed(1) : 0,
+          value: chart.scales?.y?.min ? chart.scales.y.min : 0,
           id: 'y',
         },
         {
           name: 'max',
-          value: chart.scales?.y?.max ? chart.scales.y.max.toFixed(1) : 0,
+          value: chart.scales?.y?.max ? chart.scales.y.max : 0,
           id: 'y',
         },
       ],

package/src/components/line-chart/state/line-chart-reducer.js

@@ -87,11 +87,18 @@ export const reducer = (state, action) => {
         axis.min.valid =
           validNumber(axis.min.inputValue ?? '') &&
           isLessThanMax(axis.min.value, axis.max.value);
-        axis.min.displayValue = axis.min.valid ? axis.min.value : undefined;
+        axis.min.displayValue =
+          axis.min.valid && axis.min.value
+            ? Number(axis.min.value).toFixed(1)
+            : undefined;
+
         axis.max.valid =
           validNumber(axis.max.inputValue ?? '') &&
           isGreaterThanMin(axis.max.value, axis.min.value);
-        axis.max.displayValue = axis.max.valid ? axis.max.value : undefined;
+        axis.max.displayValue =
+          axis.max.valid && axis.max.value
+            ? Number(axis.max.value).toFixed(1)
+            : undefined;
 
         const elementValue = axis[name];
         if (elementValue.valid) {