@oliasoft-open-source/charts-library 2.5.12 → 2.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.12",
+  "version": "2.5.13",
   "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.13
+
+- fixed custom range inputs reset, multi-axis range placeholder values missing
+
 ## 2.5.12
 
 - change thousand separators in axis label from comma to space

package/src/components/line-chart/get-scales-min-max.js

@@ -0,0 +1,12 @@
+export const getScalesMinMax = (chartRef) => {
+  const { scales = {} } = chartRef.current || {};
+  return Object.keys(scales).reduce((acc, key) => {
+    return {
+      ...acc,
+      [key]: {
+        min: scales[key]?.min,
+        max: scales[key]?.max,
+      },
+    };
+  }, {});
+};

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

@@ -21,6 +21,7 @@ import styles from './line-chart.module.less';
 import { reducer } from './state/line-chart-reducer';
 import initialState from './state/initial-state';
 import {
+  SET_AXIS_MIN_MAX,
   SET_AXIS_VALUE,
   SET_POINTS_ZOOM_DEFAULTS,
   TOGGLE_ANNOTATION,
@@ -70,6 +71,7 @@ import {
   PanZoomMode,
   PointStyle,
 } from '../../helpers/enums';
+import { getScalesMinMax } from './get-scales-min-max';
 
 ChartJS.register(
   LinearScale,
@@ -131,6 +133,9 @@ const LineChart = (props) => {
     if (chartOptions.enablePan !== true) {
       dispatch({ type: TOGGLE_PAN });
     }
+    if (chartRef) {
+      dispatch({ type: SET_AXIS_MIN_MAX, payload: getScalesMinMax(chartRef) });
+    }
   }, []);
 
   useEffect(() => {
@@ -341,47 +346,31 @@ const LineChart = (props) => {
   const controlsAxes = getControlsAxes();
 
   const setAxisValuesInSettings = (chart) => {
+    const { scales = {} } = chart || {};
+    const getPayload = (scales) => {
+      return Object.keys(scales).reduce((acc, key) => {
+        return [
+          ...acc,
+          {
+            name: 'min',
+            value: scales[key]?.min ? scales[key].min : 0,
+            id: key,
+          },
+          {
+            name: 'max',
+            value: scales[key]?.max ? scales[key].max : 0,
+            id: key,
+          },
+        ];
+      }, []);
+    };
+
     dispatch({
       type: SET_AXIS_VALUE,
-      payload: [
-        {
-          name: 'min',
-          value: chart.scales?.x?.min ? chart.scales.x.min : 0,
-          id: 'x',
-        },
-        {
-          name: 'max',
-          value: chart.scales?.x?.max ? chart.scales.x.max : 0,
-          id: 'x',
-        },
-        {
-          name: 'min',
-          value: chart.scales?.y?.min ? chart.scales.y.min : 0,
-          id: 'y',
-        },
-        {
-          name: 'max',
-          value: chart.scales?.y?.max ? chart.scales.y.max : 0,
-          id: 'y',
-        },
-      ],
+      payload: getPayload(scales),
     });
   };
 
-  const getScalesMaxMin = () => {
-    const chart = chartRef.current;
-    return {
-      x: {
-        min: chart?.scales?.x?.min,
-        max: chart?.scales?.x?.max,
-      },
-      y: {
-        min: chart?.scales?.y?.min,
-        max: chart?.scales?.y?.max,
-      },
-    };
-  };
-
   return (
     <div
       className={getClassName(chartStyling, styles)}
@@ -415,7 +404,7 @@ const LineChart = (props) => {
         onToggleZoom={() => dispatch({ type: TOGGLE_ZOOM })}
         panEnabled={state.panEnabled}
         pointsEnabled={state.pointsEnabled}
-        scalesMaxMin={getScalesMaxMin()}
+        scalesMaxMin={state.scalesMinMax}
         showTable={state.showTable}
         subheaderComponent={subheaderComponent}
         table={table}

package/src/components/line-chart/state/action-types.js

@@ -8,3 +8,4 @@ export const SET_AXIS_VALUE = 'SET_AXIS_VALUE';
 export const SET_POINTS_ZOOM_DEFAULTS = 'SET_POINTS_ZOOM_DEFAULTS';
 export const TOGGLE_ANNOTATION = 'TOGGLE_ANNOTATION';
 export const TOGGLE_TABLE = 'TOGGLE_TABLE';
+export const SET_AXIS_MIN_MAX = 'SET_AXIS_MIN_MAX';

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

@@ -19,7 +19,7 @@ const initialState = ({
     if (axes[axisType].length > 1) {
       return axes[axisType].map((axisObj, index) => {
         return {
-          id: `${axisType}${index}`,
+          id: `${axisType}${index + 1}`,
           label: axisObj.label,
         };
       });

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

@@ -16,6 +16,7 @@ import {
   SET_POINTS_ZOOM_DEFAULTS,
   TOGGLE_ANNOTATION,
   TOGGLE_TABLE,
+  SET_AXIS_MIN_MAX,
 } from './action-types';
 import { getAxisValue } from '../../../helpers/chart-utils';
 
@@ -137,6 +138,11 @@ export const reducer = (state, action) => {
         ...newState,
         showAnnotationLineIndex: updatedIndexes,
       };
+    case SET_AXIS_MIN_MAX:
+      return {
+        ...newState,
+        scalesMinMax: action.payload,
+      };
     default: {
       return newState;
     }