@oliasoft-open-source/charts-library 2.5.21 → 2.5.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.21",
+  "version": "2.5.22",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "scripts": {
@@ -90,6 +90,7 @@
     "chartjs-plugin-zoom": "^1.2.1",
     "classnames": "^2.3.1",
     "fraction.js": "^4.2.0",
+    "immer": "^9.0.17",
     "less-vars-to-js": "^1.3.0",
     "prop-types": "^15.8.1",
     "react-base64-downloader": "^2.1.7",

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.5.22
+
+- Improve UX and input validation for axes range inputs ([OW-10305](https://oliasoft.atlassian.net/browse/OW-10305))
+
 ## 2.5.21
 
 - Revert changes from `2.5.12` / [OW-10320](https://oliasoft.atlassian.net/browse/OW-10320) 

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

@@ -0,0 +1,95 @@
+import { produce } from 'immer';
+import {
+  isGreaterThanMin,
+  isLessThanMax,
+  validNumber,
+} from '../../line-chart/line-chart-utils';
+
+export const actionTypes = Object.freeze({
+  reset: 'reset',
+  valueUpdated: 'valueUpdated',
+});
+
+/**
+ * Initialize local component form state for a custom loads density table
+ *
+ * @param {Object} args
+ * @param {Object} args.initialAxesRanges
+ * @param {Array} [args.axes]
+ * @returns {Object} formState
+ */
+export const initializeFormState = ({ initialAxesRanges, axes = [] }) => {
+  return initialAxesRanges.map((initialAxisRange) => {
+    const currentAxisRange = axes.find((a) => a.id === initialAxisRange.id);
+    return {
+      id: initialAxisRange.id,
+      min: currentAxisRange?.min ?? initialAxisRange?.min,
+      max: currentAxisRange?.max ?? initialAxisRange?.max,
+    };
+  });
+};
+
+/**
+ * @typedef {Object} Action
+ * @property {String} type Action type
+ * @property {Object} [payload] Action payload (optional)
+ */
+
+const isEmptyString = (value) => value === '';
+
+export const validateAxes = (formState) => {
+  return formState.reduce(
+    (acc, { id, min, max }) => {
+      return produce(acc, (draft) => {
+        const errors = {
+          min: [
+            ...(isEmptyString(min) ? ['Must have a value'] : []),
+            ...(!validNumber(min) ? ['Must be a number'] : []),
+            ...(!isLessThanMax(min, max) ? ['Must be less than max'] : []),
+          ],
+          max: [
+            ...(isEmptyString(max) ? ['Must have a value'] : []),
+            ...(!validNumber(max) ? ['Must be a number'] : []),
+            ...(!isGreaterThanMin(max, min)
+              ? ['Must be greater than min']
+              : []),
+          ],
+        };
+        draft.errors.push({
+          id,
+          ...errors,
+        });
+        draft.valid = !(
+          !acc.valid ||
+          !!errors.min.length ||
+          !!errors.max.length
+        );
+      });
+    },
+    { errors: [], valid: true },
+  );
+};
+
+/**
+ * Local component form state reducer for a axes options form
+ *
+ * @param {Object} state Local component form state
+ * @param {Action} action Action with type and payload
+ * @returns {Object} FormState
+ */
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case actionTypes.reset: {
+      const { initialAxesRanges } = action.payload;
+      return initializeFormState({ initialAxesRanges });
+    }
+    case actionTypes.valueUpdated:
+      return produce(state, (draft) => {
+        const { name, value, id } = action.payload;
+        const axis = draft.find((a) => a.id === id);
+        axis[name] = value;
+      });
+    default:
+      return state;
+  }
+};

package/src/components/controls/{axes-options.jsx → axes-options/axes-options.jsx}

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useReducer } from 'react';
 import {
   Button,
   Field,
@@ -11,101 +11,122 @@ import {
   Tooltip,
 } from '@oliasoft-open-source/react-ui-library';
 import { RiRuler2Line } from 'react-icons/ri';
+import { toNum } from '../../line-chart/line-chart-utils';
+import {
+  actionTypes,
+  reducer,
+  initializeFormState,
+  validateAxes,
+} from './axes-options-form-state';
 
 const AxesOptionsPopover = ({
-  onResetAxes,
+  initialAxesRanges,
   axes,
   controlsAxesLabels,
-  onSetAxisValue,
-  panEnabled,
-  scalesMaxMin,
-  zoomEnabled,
+  onUpdateAxes,
+  onResetAxes,
   close,
 }) => {
-  const isCustomValue =
-    axes.filter((axis) => axis.max.displayValue || axis.min.displayValue)
-      .length > 0;
+  const [formState, dispatch] = useReducer(
+    reducer,
+    {
+      axes,
+      initialAxesRanges,
+    },
+    initializeFormState,
+  );
+
+  const { errors, valid } = validateAxes(formState);
+
+  const onEditValue = ({ name, value, id }) => {
+    dispatch({
+      type: actionTypes.valueUpdated,
+      payload: { name, value, id },
+    });
+  };
+
+  const onDone = () => {
+    if (valid) {
+      const sanitizedFormState = formState.map((axis) => ({
+        ...axis,
+        min: toNum(axis.min),
+        max: toNum(axis.max),
+      }));
+      onUpdateAxes({
+        axes: sanitizedFormState,
+      });
+    }
+    close();
+  };
+
+  const onReset = () => {
+    //reset local form
+    dispatch({
+      type: actionTypes.reset,
+      payload: { axes, initialAxesRanges },
+    });
+    //reset parent state
+    onResetAxes();
+  };
+
+  const isCustomValue = axes.filter((axis) => axis.max || axis.min).length > 0;
   const handleInputFocus = (e) => e.target.select();
-  const zoomOrPanEnabled = zoomEnabled || panEnabled;
   return (
     <>
       {axes.map((axis, i) => {
-        // TODO: Translate strings
-        if (!axis.min || !axis.max) return null;
-
         const axisLabel = controlsAxesLabels.find(
           (el) => el.id === axis.id,
         )?.label;
 
+        const min = formState.find((a) => a.id === axis.id)?.min;
+        const max = formState.find((a) => a.id === axis.id)?.max;
+        const minError = errors?.find((a) => a.id === axis.id)?.min?.[0];
+        const maxError = errors?.find((a) => a.id === axis.id)?.max?.[0];
         return (
           <Field key={i} label={axisLabel || axis.id || ''}>
             <InputGroup small>
               <Input
                 name="min"
-                // TODO: Fix input values not updating first time when scales reset
-                value={
-                  (zoomOrPanEnabled
-                    ? axis.min.displayValue
-                    : axis.min.inputValue) || scalesMaxMin[axis?.id]?.min
-                }
-                error={
-                  !axis.min.valid
-                    ? 'Invalid value' //t(InputWarningType.MustBeNumericAndLessThanMax)
-                    : undefined
-                }
+                value={min}
+                error={minError}
                 size={5}
                 width="100%"
                 onChange={(evt) =>
-                  onSetAxisValue({
+                  onEditValue({
                     name: evt.target.name,
                     value: evt.target.value,
                     id: axis.id,
                   })
                 }
                 onFocus={handleInputFocus}
-                disabled={zoomEnabled || panEnabled}
               />
-              <InputGroupAddon>
-                to
-                {/*t(translations.to)*/}
-              </InputGroupAddon>
+              <InputGroupAddon>to</InputGroupAddon>
               <Input
                 name="max"
-                // TODO: Fix input values not updating first time when scales reset
-                value={
-                  (zoomOrPanEnabled
-                    ? axis.max.displayValue
-                    : axis.max.inputValue) || scalesMaxMin[axis?.id]?.max
-                }
-                error={
-                  !axis.max.valid
-                    ? 'Invalid value' //t(InputWarningType.MustBeNumericAndGreaterThanMin)
-                    : undefined
-                }
+                value={max}
+                error={maxError}
                 size={5}
                 width="100%"
                 onChange={(evt) =>
-                  onSetAxisValue({
+                  onEditValue({
                     name: evt.target.name,
                     value: evt.target.value,
                     id: axis.id,
                   })
                 }
                 onFocus={handleInputFocus}
-                disabled={zoomEnabled || panEnabled}
               />
             </InputGroup>
-            {/* TODO: Add units */}
           </Field>
         );
       })}
       <Flex gap="8px" alignItems="center">
-        <Button small colored label="Done" onClick={close} />
+        <Button small colored label="Done" onClick={onDone} disabled={!valid} />
         <Button
           small
           name="resetAxes"
           label="Reset Axes"
-          onClick={onResetAxes}
+          onClick={onReset}
           disabled={!isCustomValue}
         />
         <Text small muted>
@@ -117,13 +138,11 @@ const AxesOptionsPopover = ({
 };
 
 export const AxesOptions = ({
-  onResetAxes,
+  initialAxesRanges,
   axes,
   controlsAxesLabels,
-  onSetAxisValue,
-  panEnabled,
-  scalesMaxMin,
-  zoomEnabled,
+  onUpdateAxes,
+  onResetAxes,
 }) => {
   return (
     <Popover
@@ -131,13 +150,11 @@ export const AxesOptions = ({
       overflowContainer
       content={
         <AxesOptionsPopover
-          onResetAxes={onResetAxes}
+          initialAxesRanges={initialAxesRanges}
           axes={axes}
           controlsAxesLabels={controlsAxesLabels}
-          onSetAxisValue={onSetAxisValue}
-          panEnabled={panEnabled}
-          scalesMaxMin={scalesMaxMin}
-          zoomEnabled={zoomEnabled}
+          onUpdateAxes={onUpdateAxes}
+          onResetAxes={onResetAxes}
         />
       }
     >

package/src/components/controls/controls.jsx

@@ -7,7 +7,7 @@ import {
 } from 'react-icons/ri';
 import { LineOptions } from './line-options';
 import { DragOptions } from './drag-options';
-import { AxesOptions } from './axes-options';
+import { AxesOptions } from './axes-options/axes-options';
 import { LegendOptions } from './legend-options';
 import styles from './controls.module.less';
 
@@ -20,7 +20,7 @@ const Controls = ({
   lineEnabled,
   onDownload,
   onResetAxes,
-  onSetAxisValue,
+  onUpdateAxes,
   onToggleLegend,
   onToggleLine,
   onTogglePan,
@@ -29,7 +29,7 @@ const Controls = ({
   onToggleZoom,
   panEnabled,
   pointsEnabled,
-  scalesMaxMin,
+  initialAxesRanges,
   showTable,
   subheaderComponent,
   table,
@@ -44,13 +44,11 @@ const Controls = ({
           {!showTable && (
             <>
               <AxesOptions
-                onResetAxes={onResetAxes}
+                initialAxesRanges={initialAxesRanges}
                 axes={axes}
                 controlsAxesLabels={controlsAxesLabels}
-                onSetAxisValue={onSetAxisValue}
-                panEnabled={panEnabled}
-                scalesMaxMin={scalesMaxMin}
-                zoomEnabled={zoomEnabled}
+                onUpdateAxes={onUpdateAxes}
+                onResetAxes={onResetAxes}
               />
               <LineOptions
                 lineEnabled={lineEnabled}
@@ -68,7 +66,6 @@ const Controls = ({
                 onTogglePan={onTogglePan}
                 onToggleZoom={onToggleZoom}
               />
-              {/* TODO: implement usetranslation */}
               <Tooltip text="Download as PNG" placement="bottom-end">
                 <Button
                   small
@@ -87,7 +84,6 @@ const Controls = ({
               text={showTable ? 'Show chart' : 'Show table'}
               placement="bottom-end"
             >
-              {/* TODO: implement usetranslation */}
               <Button
                 small
                 basic

package/src/components/line-chart/get-axes-ranges-from-chart.js

@@ -0,0 +1,10 @@
+export const getAxesRangesFromChart = (chartRef) => {
+  const { scales = {} } = chartRef.current || {};
+  return Object.entries(scales).map(([key, { min, max }]) => {
+    return {
+      id: key,
+      min,
+      max,
+    };
+  });
+};

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

@@ -3,11 +3,7 @@ import {
   getAxisPosition,
 } from '../../helpers/chart-utils';
 import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
-import {
-  generateAxisId,
-  truncateDecimals,
-  validNumber,
-} from './line-chart-utils';
+import { generateAxisId, truncateDecimals } from './line-chart-utils';
 import { AxisType, ScaleType } from '../../helpers/enums';
 
 /**
@@ -66,14 +62,8 @@ 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 && 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,
+    min: Number(stateAxis.min) ?? additionalAxesOptions?.range?.[axisType]?.min,
+    max: Number(stateAxis.max) ?? additionalAxesOptions?.range?.[axisType]?.max,
     title: {
       display: axisData.label?.length,
       text: axisData.label,

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

@@ -16,13 +16,10 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 import dataLabelsPlugin from 'chartjs-plugin-datalabels';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { triggerBase64Download } from 'react-base64-downloader';
-
 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,
   TOGGLE_LEGEND,
@@ -31,7 +28,9 @@ import {
   TOGGLE_POINTS,
   TOGGLE_TABLE,
   TOGGLE_ZOOM,
-  UNSET_AXES_VALUES,
+  SAVE_INITIAL_AXES_RANGES,
+  UPDATE_AXES_RANGES,
+  RESET_AXES_RANGES,
 } from './state/action-types';
 import Controls from '../controls/controls';
 import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
@@ -51,12 +50,10 @@ import {
 import getAnnotation from '../../helpers/get-chart-annotation';
 import {
   generateRandomColor,
-  getAxisValue,
   getChartFileName,
   getClassName,
   getLegend,
   getPlugins,
-  getTitle,
   setDefaultTheme,
 } from '../../helpers/chart-utils';
 import {
@@ -73,7 +70,7 @@ import {
   PanZoomMode,
   PointStyle,
 } from '../../helpers/enums';
-import { getScalesMinMax } from './get-scales-min-max';
+import { getAxesRangesFromChart } from './get-axes-ranges-from-chart';
 import { generateAxisId } from './line-chart-utils';
 
 ChartJS.register(
@@ -128,6 +125,7 @@ const LineChart = (props) => {
       showLine: chartOptions.showLine,
       legendDisplay: legend.display,
       annotationsData: annotations.annotationsData,
+      customAxesRange: additionalAxesOptions?.range,
     },
     initialState,
   );
@@ -137,7 +135,11 @@ const LineChart = (props) => {
       dispatch({ type: TOGGLE_PAN });
     }
     if (chartRef) {
-      dispatch({ type: SET_AXIS_MIN_MAX, payload: getScalesMinMax(chartRef) });
+      //save the initial axis ranges in state (we need this for resetting ranges)
+      dispatch({
+        type: SAVE_INITIAL_AXES_RANGES,
+        payload: { initialAxesRanges: getAxesRangesFromChart(chartRef) },
+      });
     }
   }, []);
 
@@ -190,8 +192,8 @@ const LineChart = (props) => {
 
     const generatedDatasets = copyDataset.map((line, i) => {
       if (line.formation) {
-        const axesMin = state.axes[0]?.min?.value;
-        const axesMax = state.axes[0]?.max?.value;
+        const axesMin = state.axes[0]?.min;
+        const axesMax = state.axes[0]?.max;
         // line with formation flag has 3 points: start point, mid-point with label, and end point.
         const [startPoint, midPointWithLabel, endPoint] = line.data;
 
@@ -278,10 +280,10 @@ const LineChart = (props) => {
 
   const onClick = (evt, elements, chartInstance) => {
     chartInstance.resetZoom();
-    dispatch({ type: UNSET_AXES_VALUES });
+    dispatch({ type: RESET_AXES_RANGES });
   };
 
-  const onHover = (evt, hoveredItems, chartInstance) => {
+  const onHover = (evt, hoveredItems) => {
     if (!hoveredItems?.length && interactions.onPointUnhover && hoveredPoint) {
       setHoveredPoint(null);
       interactions.onPointUnhover(evt);
@@ -336,13 +338,13 @@ const LineChart = (props) => {
   const getControlsAxes = () => {
     return state.axes.map((axis, i) => {
       const axisType = i ? AxisType.Y : AxisType.X; // only first element is 'x' - rest is 'y'
-      const min = additionalAxesOptions?.range?.[axisType]?.min;
-      const max = additionalAxesOptions?.range?.[axisType]?.max;
-
+      const min = axis.min ?? additionalAxesOptions?.range?.[axisType]?.min;
+      const max = axis.max ?? additionalAxesOptions?.range?.[axisType]?.max;
       return {
         ...axis,
-        min: axis.min ?? getAxisValue(min, true),
-        max: axis.max ?? getAxisValue(max, true),
+        //only add min and max properties if they are defined:
+        ...(min ? { min } : {}),
+        ...(max ? { max } : {}),
       };
     });
   };
@@ -375,29 +377,18 @@ const LineChart = (props) => {
 
   const controlsAxesLabels = getControlsAxesLabels(props.chart.options.axes);
 
-  const setAxisValuesInSettings = (chart) => {
+  const updateAxesRangesFromChart = (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,
-          },
-        ];
-      }, []);
-    };
-
+    const axes = Object.entries(scales).map(([key, { min, max }]) => {
+      return {
+        id: key,
+        min: min ?? 0,
+        max: max ?? 0,
+      };
+    });
     dispatch({
-      type: SET_AXIS_VALUE,
-      payload: getPayload(scales),
+      type: UPDATE_AXES_RANGES,
+      payload: { axes },
     });
   };
 
@@ -422,11 +413,11 @@ const LineChart = (props) => {
         lineEnabled={state.lineEnabled}
         onDownload={handleDownload}
         onResetAxes={() => {
-          dispatch({ type: UNSET_AXES_VALUES });
+          dispatch({ type: RESET_AXES_RANGES });
+        }}
+        onUpdateAxes={({ axes }) => {
+          dispatch({ type: UPDATE_AXES_RANGES, payload: { axes } });
         }}
-        onSetAxisValue={(evt) =>
-          dispatch({ type: SET_AXIS_VALUE, payload: evt })
-        }
         onToggleLegend={() => dispatch({ type: TOGGLE_LEGEND })}
         onToggleLine={() => dispatch({ type: TOGGLE_LINE })}
         onTogglePan={() => dispatch({ type: TOGGLE_PAN })}
@@ -435,7 +426,7 @@ const LineChart = (props) => {
         onToggleZoom={() => dispatch({ type: TOGGLE_ZOOM })}
         panEnabled={state.panEnabled}
         pointsEnabled={state.pointsEnabled}
-        scalesMaxMin={state.scalesMinMax}
+        initialAxesRanges={state.initialAxesRanges}
         showTable={state.showTable}
         subheaderComponent={subheaderComponent}
         table={table}
@@ -480,7 +471,7 @@ const LineChart = (props) => {
                     enabled: state.panEnabled,
                     mode: PanZoomMode.XY,
                     onPanComplete({ chart }) {
-                      setAxisValuesInSettings(chart);
+                      updateAxesRangesFromChart(chart);
                     },
                   },
                   zoom: {
@@ -493,7 +484,7 @@ const LineChart = (props) => {
                       borderWidth: 1,
                     },
                     onZoomComplete({ chart }) {
-                      setAxisValuesInSettings(chart);
+                      updateAxesRangesFromChart(chart);
                     },
                   },
                 },

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

@@ -3,9 +3,9 @@ export const TOGGLE_PAN = 'TOGGLE_PAN';
 export const TOGGLE_POINTS = 'TOGGLE_POINTS';
 export const TOGGLE_LINE = 'TOGGLE_LINE';
 export const TOGGLE_LEGEND = 'TOGGLE_LEGEND';
-export const UNSET_AXES_VALUES = 'UNSET_AXES_VALUES';
-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';
+export const SAVE_INITIAL_AXES_RANGES = 'SAVE_INITIAL_AXES_RANGES';
+export const RESET_AXES_RANGES = 'RESET_AXES_RANGES';
+export const UPDATE_AXES_RANGES = 'UPDATE_AXES_RANGES';

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

@@ -10,34 +10,48 @@ const initialState = ({
   showLine,
   legendDisplay,
   annotationsData,
+  customAxesRange,
 }) => {
   /**
    * getStateAxesByType
    * @param {'x'|'y'} axisType
+   * @param {Object} customAxesRange
    * @return {{id: string}[] | []} returns array of objects describing all chart axis or empty array
    */
-  const getStateAxesByType = (axisType) => {
+  const getStateAxesByType = (axisType, customAxesRange) => {
     if (!axes[axisType]) {
       return [];
     }
 
     if (axes[axisType]?.length > 1) {
       return axes[axisType].map((axisObj, index) => {
+        const id = generateAxisId(axisType, index, axes[axisType].length > 1);
+        const customMin = customAxesRange?.[id]?.min;
+        const customMax = customAxesRange?.[id]?.max;
         return {
-          id: generateAxisId(axisType, index, axes[axisType].length > 1),
+          id,
+          //only add custom axis ranges if defined:
+          ...(customMin ? { min: customMin } : {}),
+          ...(customMax ? { max: customMax } : {}),
         };
       });
     } else {
+      const id = generateAxisId(axisType);
+      const customMin = customAxesRange?.[id]?.min;
+      const customMax = customAxesRange?.[id]?.max;
       return [
         {
-          id: generateAxisId(axisType),
+          id,
+          //only add custom axis ranges if defined:
+          ...(customMin ? { min: customMin } : {}),
+          ...(customMax ? { max: customMax } : {}),
         },
       ];
     }
   };
 
-  const xStateAxes = getStateAxesByType(AxisType.X);
-  const yStateAxes = getStateAxesByType(AxisType.Y);
+  const xStateAxes = getStateAxesByType(AxisType.X, customAxesRange);
+  const yStateAxes = getStateAxesByType(AxisType.Y, customAxesRange);
   const stateAxes = [...xStateAxes, ...yStateAxes];
 
   return {

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

@@ -1,26 +1,17 @@
-import {
-  cleanNumStr,
-  isGreaterThanMin,
-  isLessThanMax,
-  toNum,
-  validNumber,
-} from '../line-chart-utils';
+import { produce } from 'immer';
 import {
   TOGGLE_PAN,
   TOGGLE_ZOOM,
   TOGGLE_POINTS,
   TOGGLE_LINE,
   TOGGLE_LEGEND,
-  UNSET_AXES_VALUES,
-  SET_AXIS_VALUE,
   SET_POINTS_ZOOM_DEFAULTS,
   TOGGLE_ANNOTATION,
   TOGGLE_TABLE,
-  SET_AXIS_MIN_MAX,
+  SAVE_INITIAL_AXES_RANGES,
+  UPDATE_AXES_RANGES,
+  RESET_AXES_RANGES,
 } from './action-types';
-import { getAxisValue } from '../../../helpers/chart-utils';
-
-const unsetAxisValues = (axes) => axes.map(({ min, max, ...axis }) => axis);
 
 export const reducer = (state, action) => {
   const newState = { ...state };
@@ -30,11 +21,6 @@ export const reducer = (state, action) => {
       if (newState.panEnabled) {
         newState.panEnabled = false;
       }
-      // TODO: find out if this logic is needed once panning and zomming works properly
-      // if (!newState.zoomEnabled) {
-      //   //reset the axes when enabling zoom (zoom plugin and manual ranges aren't compatible together yet)
-      //   newState.axes = unsetAxisValues(newState.axes);
-      // }
       return newState;
     }
     case TOGGLE_PAN: {
@@ -42,10 +28,6 @@ export const reducer = (state, action) => {
       if (newState.zoomEnabled) {
         newState.zoomEnabled = false;
       }
-      // if (!newState.panEnabled) {
-      //   //reset the axes when enabling pan (zoom plugin and manual ranges aren't compatible together yet)
-      //   newState.axes = unsetAxisValues(newState.axes);
-      // }
       return newState;
     }
     case TOGGLE_POINTS: {
@@ -72,50 +54,25 @@ export const reducer = (state, action) => {
         showTable: !newState.showTable,
       };
     }
-    case UNSET_AXES_VALUES: {
-      return {
-        ...newState,
-        axes: unsetAxisValues(newState.axes),
-      };
+    case SAVE_INITIAL_AXES_RANGES: {
+      return produce(state, (draft) => {
+        const { initialAxesRanges } = action.payload;
+        draft.initialAxesRanges = initialAxesRanges;
+      });
     }
-    case SET_AXIS_VALUE: {
-      const validateElement = (name, nextInputValue, id) => {
-        const nextValue = cleanNumStr(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);
-        axis.min.valid =
-          validNumber(axis.min.inputValue ?? '') &&
-          isLessThanMax(axis.min.value, axis.max.value);
-        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
-            ? Number(axis.max.value).toFixed(1)
-            : undefined;
-
-        const elementValue = axis[name];
-        if (elementValue.valid) {
-          elementValue.value = nextValue;
-        }
-      };
-      if (Array.isArray(action.payload)) {
-        action.payload.forEach((element) => {
-          const { name, value: nextInputValue, id } = element;
-          validateElement(name, nextInputValue, id);
-        });
-      } else {
-        const { name, value: nextInputValue, id } = action.payload;
-        validateElement(name, nextInputValue, id);
-      }
-
-      return newState;
+    case UPDATE_AXES_RANGES: {
+      return produce(state, (draft) => {
+        const { axes } = action.payload;
+        draft.axes = axes;
+      });
+    }
+    case RESET_AXES_RANGES: {
+      return produce(state, (draft) => {
+        const { axes } = state;
+        draft.axes = axes.map((axis) => ({
+          id: axis.id,
+        }));
+      });
     }
     case SET_POINTS_ZOOM_DEFAULTS:
       const { showPoints, enableZoom, enablePan, showLine } = action.payload;
@@ -137,11 +94,6 @@ export const reducer = (state, action) => {
         ...newState,
         showAnnotationLineIndex: updatedIndexes,
       };
-    case SET_AXIS_MIN_MAX:
-      return {
-        ...newState,
-        scalesMinMax: action.payload,
-      };
     default: {
       return newState;
     }

package/src/helpers/chart-utils.js

@@ -40,30 +40,6 @@ export const getPlugins = (graph, legend, state = null) => {
   return plugins;
 };
 
-export const getAxisValue = (value, setValue = false) => {
-  if (value !== undefined) {
-    if (value === '-') {
-      return {
-        inputValue: value,
-        displayValue: '',
-        value: '',
-        valid: false,
-      };
-    } else {
-      return {
-        inputValue: value.toString(),
-        displayValue: value,
-        value: setValue ? undefined : value,
-        valid: true,
-      };
-    }
-  } else {
-    return {
-      valid: true /* default always valid, for unknowable reasons */,
-    };
-  }
-};
-
 /**
  * @param {string[]} colors - color schema
  * @return {string} - random color

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

@@ -1,12 +0,0 @@
-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,
-      },
-    };
-  }, {});
-};