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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.4.1",
+  "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,13 @@
 # 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
+
 ## 2.4.1
 
 - Remove dependency on http-server (moved to dev dependencies)

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/line-chart.jsx

@@ -383,14 +383,10 @@ const LineChart = (props) => {
   return (
     <div
       className={getClassName(chartStyling, styles)}
-      style={
-        chartStyling.squareAspectRatio
-          ? {}
-          : {
-              width: chartStyling.width || AUTO,
-              height: chartStyling.height || AUTO,
-            }
-      }
+      style={{
+        width: chartStyling.width || AUTO,
+        height: chartStyling.height || AUTO,
+      }}
       tabIndex={0} //eslint-disable-line jsx-a11y/no-noninteractive-tabindex
       onKeyDown={handleKeyDown}
       onKeyUp={handleKeyUp}
@@ -428,7 +424,8 @@ const LineChart = (props) => {
         options={{
           onClick,
           onHover,
-          maintainAspectRatio: chartStyling.maintainAspectRatio,
+          maintainAspectRatio:
+            chartStyling.squareAspectRatio || chartStyling.maintainAspectRatio,
           aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
           animation: {
             duration: chartStyling.performanceMode

package/src/components/line-chart/line-chart.module.less

@@ -27,10 +27,10 @@ html[data-theme='dark'] .chart canvas {
     height: 100%;
   }
 
-  // TODO: fix square plot scaling
   &.squareAspectRatio {
-    max-height: 450px;
-    max-width: 450px;
+    aspect-ratio: 1;
+    min-height: 0;
+    min-width: 0;
   }
 
   &:focus {

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

@@ -149,6 +149,26 @@ const TemplateWithCustomLegendContainer = (args) => {
 
 export const Default = Template.bind({});
 
+export const FillContainer = Template.bind({});
+FillContainer.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      chartStyling: {
+        height: '100%',
+      },
+    },
+  },
+};
+FillContainer.decorators = [
+  (Story) => (
+    <div style={{ height: 400, width: 500 }}>
+      <Story />
+    </div>
+  ),
+];
+
 export const DataGaps = Template.bind({});
 DataGaps.args = {
   chart: {
@@ -422,3 +442,26 @@ SquareAspectRatio.args = {
     },
   },
 };
+
+export const SquareAspectRatioFillContainer = Template.bind({});
+SquareAspectRatioFillContainer.args = {
+  chart: {
+    ...basicChart,
+    options: {
+      ...basicChart.options,
+      title: 'Square aspect ratio',
+      chartStyling: {
+        squareAspectRatio: true,
+        maintainAspectRatio: true,
+        height: '100%',
+      },
+    },
+  },
+};
+SquareAspectRatioFillContainer.decorators = [
+  (Story) => (
+    <div style={{ display: 'flex', height: 400, width: 600 }}>
+      <Story />
+    </div>
+  ),
+];

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,
       };
     }