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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.8",
+  "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,13 @@
 # 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
+
 ## 2.5.8
 
 - Disable tooltip animations in `performanceMode`

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/get-line-chart-scales.js

@@ -3,7 +3,7 @@ import {
   getAxisPosition,
 } from '../../helpers/chart-utils';
 import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
-import { truncateDecimals } from './line-chart-utils';
+import { truncateDecimals, validNumber } from './line-chart-utils';
 import { AxisType, ScaleType } from '../../helpers/enums';
 
 /**
@@ -57,12 +57,14 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
     reverse: axisType === AxisType.Y ? additionalAxesOptions.reverse : false,
     suggestedMax: additionalAxesOptions.suggestedMax,
     suggestedMin: additionalAxesOptions.suggestedMin,
-    min: stateAxis.min?.valid
-      ? stateAxis.min?.value
-      : additionalAxesOptions?.range?.[axisType]?.min,
-    max: stateAxis.max?.valid
-      ? stateAxis.max?.value
-      : additionalAxesOptions?.range?.[axisType]?.max,
+    min:
+      stateAxis.min?.valid && validNumber(stateAxis.min?.value)
+        ? Number(stateAxis.min?.value)
+        : additionalAxesOptions?.range?.[axisType]?.min,
+    max:
+      stateAxis.max?.valid && validNumber(stateAxis.max?.value)
+        ? Number(stateAxis.max?.value)
+        : additionalAxesOptions?.range?.[axisType]?.max,
     title: {
       display: axisData.label?.length,
       text: axisData.label,

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

@@ -144,11 +144,15 @@ export const toNum = (value) => {
 };
 
 export const isLessThanMax = (value, max) => {
-  return value === undefined || max === undefined || value < max;
+  return (
+    value === undefined || max === undefined || Number(value) < Number(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

@@ -79,9 +79,7 @@ export const reducer = (state, action) => {
     }
     case SET_AXIS_VALUE: {
       const valiateElement = (name, nextInputValue, id) => {
-        const nextValue = isNaN(nextInputValue)
-          ? cleanNumStr(nextInputValue)
-          : toNum(nextInputValue);
+        const nextValue = cleanNumStr(nextInputValue);
 
         const axis = newState.axes.find((a) => a.id === id);
         axis.min = getAxisValue(name === 'min' ? nextValue : axis.min?.value);
@@ -89,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) {