@oliasoft-open-source/charts-library 2.4.2 → 2.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "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.4.3
+
+- Fix crashes when type a non-number into the axis range OW-9924
+
 ## 2.4.2
 
 - Square aspect ratio charts can fill height/width

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

@@ -108,7 +108,7 @@ export const Layer = ({
                 value={axis.min.inputValue || scalesMaxMin[axis?.id]?.min}
                 error={
                   !axis.min.valid
-                    ? 'WARNING' //t(InputWarningType.MustBeNumericAndLessThanMax)
+                    ? 'Invalid value' //t(InputWarningType.MustBeNumericAndLessThanMax)
                     : undefined
                 }
                 size={5}
@@ -131,7 +131,7 @@ export const Layer = ({
                 value={axis.max.inputValue || scalesMaxMin[axis?.id].max}
                 error={
                   !axis.max.valid
-                    ? 'Warning' //t(InputWarningType.MustBeNumericAndGreaterThanMin)
+                    ? 'Invalid value' //t(InputWarningType.MustBeNumericAndGreaterThanMin)
                     : undefined
                 }
                 size={5}

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

@@ -9,6 +9,7 @@ const hasDivisor = (str) =>
 export const isEmptyString = (str) => str === '';
 const isTrailingPeriodSeparator = (str) => str && str[str.length - 1] === '.';
 const isTrailingCommaSeparator = (str) => str && str[str.length - 1] === ',';
+const isOnlyNumbers = (str) => /^-?\d*\.?\d+$/.test(str);
 
 export const charCount = (chr, str) => {
   let total = 0,
@@ -80,7 +81,8 @@ export const isValidNum = (input) => {
         isTrailingPeriodSeparator(input) ||
         isTrailingCommaSeparator(input) ||
         isArray(input) ||
-        isObject(input)
+        isObject(input) ||
+        !isOnlyNumbers(input)
       )
     ) {
       let number;
@@ -132,11 +134,13 @@ export const toNumber = (input, defaultValue, minimum) => {
   return result;
 };
 
-export const validNumber = (value) => isValidNum(value);
+export const validNumber = (value) => {
+  return isValidNum(value);
+};
 
 export const toNum = (value) => {
   const asNumber = toNumber(value);
-  return value === '' || isNaN(asNumber) ? undefined : asNumber;
+  return value === '' || isNaN(asNumber) ? '' : asNumber;
 };
 
 export const isLessThanMax = (value, max) => {

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

@@ -75,6 +75,7 @@ export const reducer = (state, action) => {
         const nextValue = isNaN(nextInputValue)
           ? cleanNumStr(nextInputValue)
           : toNum(nextInputValue);
+
         const axis = newState.axes.find((a) => a.id === id);
         axis.min = getAxisValue(name === 'min' ? nextValue : axis.min?.value);
         axis.max = getAxisValue(name === 'max' ? nextValue : axis.max?.value);
@@ -86,6 +87,11 @@ export const reducer = (state, action) => {
           validNumber(axis.max.inputValue ?? '') &&
           isGreaterThanMin(axis.max.value, axis.min.value);
         axis.max.displayValue = axis.max.valid ? axis.max.value : undefined;
+
+        const elementValue = axis[name];
+        if (elementValue.valid) {
+          elementValue.value = nextValue;
+        }
       };
       if (Array.isArray(action.payload)) {
         action.payload.forEach((element) => {

package/src/helpers/chart-utils.js

@@ -51,7 +51,6 @@ export const getAxisValue = (value) => {
       return {
         inputValue: value.toString(),
         displayValue: value,
-        value,
         valid: true,
       };
     }