@oliasoft-open-source/charts-library 2.17.2 → 2.17.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.17.2",
+  "version": "2.17.4",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {
@@ -49,8 +49,8 @@
     "@babel/eslint-parser": "^7.18.9",
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
-    "@oliasoft-open-source/react-ui-library": "3.3.12",
-    "@oliasoft-open-source/units": "2.1.0",
+    "@oliasoft-open-source/react-ui-library": "^3.4.2",
+    "@oliasoft-open-source/units": "^2.6.1",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-docs": "^6.5.10",
     "@storybook/addon-links": "^6.5.10",
@@ -95,8 +95,8 @@
     "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
-    "@oliasoft-open-source/react-ui-library": "^3",
-    "@oliasoft-open-source/units": "^2.1",
+    "@oliasoft-open-source/react-ui-library": "^3.4.2",
+    "@oliasoft-open-source/units": "^2.6.1",
     "immer": "^9",
     "prop-types": "^15",
     "react": "^17",

package/release-notes.md

@@ -1,5 +1,13 @@
 # Charts Library Release Notes
 
+## 2.17.4
+
+- Use new `<NumberInput>` component from GUI Library in charts controls, to simplify validation ([OW-11773](https://oliasoft.atlassian.net/browse/OW-11773))
+
+## 2.17.3
+
+- Replace legacy internal implementation of `isEqualWithTolerance` with `isCloseTo` from units package ([OW-11767](https://oliasoft.atlassian.net/browse/OW-11767))
+
 ## 2.17.2
 
 - Fix release CI/CD pipeline ([OW-11691](https://oliasoft.atlassian.net/browse/OW-11691))

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

@@ -4,7 +4,7 @@ import {
   ButtonGroup,
   Field,
   Flex,
-  Input,
+  NumberInput,
   InputGroup,
   InputGroupAddon,
   Popover,
@@ -122,7 +122,7 @@ const AxesOptionsPopover = ({
         return (
           <Field key={i} label={axisLabel || axis.id || ''}>
             <InputGroup small>
-              <Input
+              <NumberInput
                 name="min"
                 value={min}
                 error={translations[minError]}
@@ -138,7 +138,7 @@ const AxesOptionsPopover = ({
                 onFocus={handleInputFocus}
               />
               <InputGroupAddon>to</InputGroupAddon>
-              <Input
+              <NumberInput
                 name="max"
                 value={max}
                 error={translations[maxError]}

package/src/components/line-chart/controls/axes-options/axes-options-form-state.js

@@ -1,9 +1,5 @@
 import { produce } from 'immer';
-import {
-  isGreaterThanMin,
-  isLessThanMax,
-  validNumber,
-} from '../../utils/line-chart-utils';
+import { isGreaterThanMin, isLessThanMax } from '../../utils/line-chart-utils';
 import { actionTypes } from './action-types';
 
 /**
@@ -37,7 +33,6 @@ const isEmptyString = (value) => value === '';
 const createErrorMessages = (value, compareTo, type) => {
   const errors = [];
   if (isEmptyString(value)) errors.push('mustHaveAValue');
-  if (!validNumber(value)) errors.push('mustBeANumber');
 
   if (type === 'min' && !isLessThanMax(value, compareTo)) {
     errors.push('mustBeLessThanMax');

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

@@ -1,8 +1,4 @@
-import { toNum as toNumber, isValidNum } from '@oliasoft-open-source/units';
-
-const isOnlyNumbers = (str) => /^-?\d*\.?\d+$/.test(str);
-
-export const validNumber = (input) => isValidNum(input) && isOnlyNumbers(input);
+import { toNum as toNumber } from '@oliasoft-open-source/units';
 
 export const toNum = (value) => {
   const asNumber = toNumber(value);

package/src/helpers/chart-consts.js

@@ -59,4 +59,6 @@ export const DEFAULT_CHART_NAME = 'new_chart';
 
 export const CUSTOM_LEGEND_PLUGIN_NAME = 'htmlLegend';
 
-export const DECIMAL_POINT_TOLERANCE = 9; //ignore decimal points beyond this
+export const DECIMAL_POINT_TOLERANCE = 9;
+
+export const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;

package/src/helpers/range/estimate-data-series-have-close-values.js

@@ -1,5 +1,5 @@
-import { isEqualWithTolerance } from '../numbers/numbers';
-
+import { isCloseTo } from '@oliasoft-open-source/units';
+import { MAX_DECIMAL_DIFF } from '../chart-consts';
 /**
  * Estimates whether any of the data series has values that are all close together
  * - checks only the first and last values in each series (i.e. assumes they are ordered)
@@ -46,8 +46,8 @@ export const estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
   return Object.values(axesFirstLast).some(
     ({ xFirst, xLast, yFirst, yLast }) => {
       return (
-        isEqualWithTolerance(xFirst, xLast) ||
-        isEqualWithTolerance(yFirst, yLast)
+        isCloseTo(xFirst, xLast, { absoluteDiff: MAX_DECIMAL_DIFF }) ||
+        isCloseTo(yFirst, yLast, { absoluteDiff: MAX_DECIMAL_DIFF })
       );
     },
   );

package/src/helpers/range/range.js

@@ -1,6 +1,5 @@
-import { round } from '@oliasoft-open-source/units';
-import { isEqualWithTolerance } from '../numbers/numbers';
-import { DECIMAL_POINT_TOLERANCE } from '../chart-consts';
+import { round, isCloseTo } from '@oliasoft-open-source/units';
+import { DECIMAL_POINT_TOLERANCE, MAX_DECIMAL_DIFF } from '../chart-consts';
 
 const whiteSpacePercentage = 0.05; // relative amount of white space on each "side" of the data points
 
@@ -39,7 +38,8 @@ export const getSuggestedAxisRange = ({
   );
   const isNegative = Math.sign(dataMin) === -1 || Math.sign(dataMax) === -1;
   const isCloseToZeroWithTolerance =
-    isEqualWithTolerance(dataMin, 0) && isEqualWithTolerance(dataMax, 0);
+    isCloseTo(dataMin, 0, { absoluteDiff: MAX_DECIMAL_DIFF }) &&
+    isCloseTo(dataMax, 0, { absoluteDiff: MAX_DECIMAL_DIFF });
 
   /*
     Use default range upon no data or when all values are close to 0
@@ -51,7 +51,8 @@ export const getSuggestedAxisRange = ({
   /*
     When all values are close to the same, always add some padding OW-4327
   */
-  if (isEqualWithTolerance(dataMin, dataMax)) {
+
+  if (isCloseTo(dataMin, dataMax, { absoluteDiff: MAX_DECIMAL_DIFF })) {
     const point = dataMax;
     const padding = point * whiteSpacePercentage;
     const minAxisValue = beginAtZero && !isNegative ? 0 : point - padding;

package/src/helpers/numbers/numbers.js

@@ -1,25 +0,0 @@
-import { round } from '@oliasoft-open-source/units';
-import { DECIMAL_POINT_TOLERANCE } from '../chart-consts';
-
-/**
- * Determines whether two numbers are close in value with a tolerance
- * (mitigates excess JavaScript floating point precision quirks)
- *
- * Inspired by WellDesign implementations:
- * - isCloseTo in rounding.js
- * - isEqual in TDHYDutils.js (recommended by Truls, but quirks comparing values close to 0 need testing)
- * - TODO: replace this with a universal Oliasoft implementation when ready
- *
- * @param {number} a
- * @param {number} b
- * @returns {boolean}
- */
-export const isEqualWithTolerance = (a, b) => {
-  if (typeof a == 'number' && typeof b === typeof a) {
-    const tolerance = 10 ** -DECIMAL_POINT_TOLERANCE;
-    const difference = Math.abs(b - a);
-    const roundedDifference = round(difference, DECIMAL_POINT_TOLERANCE);
-    return roundedDifference <= tolerance;
-  }
-  return false;
-};