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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.12",
+  "version": "2.5.14",
   "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.5.14
+
+- Sync axis labels in chart Controls with props
+
+## 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/controls/axes-options.jsx

@@ -15,6 +15,7 @@ import { RiRuler2Line } from 'react-icons/ri';
 const AxesOptionsPopover = ({
   onResetAxes,
   axes,
+  controlsAxesLabels,
   onSetAxisValue,
   panEnabled,
   scalesMaxMin,
@@ -31,8 +32,13 @@ const AxesOptionsPopover = ({
       {axes.map((axis, i) => {
         // TODO: Translate strings
         if (!axis.min || !axis.max) return null;
+
+        const axisLabel = controlsAxesLabels.find(
+          (el) => el.id === axis.id,
+        )?.label;
+
         return (
-          <Field key={i} label={axis.label || axis.id || ''}>
+          <Field key={i} label={axisLabel || axis.id || ''}>
             <InputGroup small>
               <Input
                 name="min"
@@ -113,6 +119,7 @@ const AxesOptionsPopover = ({
 export const AxesOptions = ({
   onResetAxes,
   axes,
+  controlsAxesLabels,
   onSetAxisValue,
   panEnabled,
   scalesMaxMin,
@@ -126,6 +133,7 @@ export const AxesOptions = ({
         <AxesOptionsPopover
           onResetAxes={onResetAxes}
           axes={axes}
+          controlsAxesLabels={controlsAxesLabels}
           onSetAxisValue={onSetAxisValue}
           panEnabled={panEnabled}
           scalesMaxMin={scalesMaxMin}

package/src/components/controls/controls.jsx

@@ -13,6 +13,7 @@ import styles from './controls.module.less';
 
 const Controls = ({
   axes,
+  controlsAxesLabels,
   chart,
   headerComponent,
   legendEnabled,
@@ -45,6 +46,7 @@ const Controls = ({
               <AxesOptions
                 onResetAxes={onResetAxes}
                 axes={axes}
+                controlsAxesLabels={controlsAxesLabels}
                 onSetAxisValue={onSetAxisValue}
                 panEnabled={panEnabled}
                 scalesMaxMin={scalesMaxMin}

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

@@ -3,14 +3,18 @@ import {
   getAxisPosition,
 } from '../../helpers/chart-utils';
 import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
-import { truncateDecimals, validNumber } from './line-chart-utils';
+import {
+  generateAxisId,
+  truncateDecimals,
+  validNumber,
+} from './line-chart-utils';
 import { AxisType, ScaleType } from '../../helpers/enums';
 
 /**
  * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
  * @param {'x'|'y'} axisType
  * @param {import('../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
- * @param {import('./line-chart.interface').ILineChartAxes[]} [currentScales]
+ * @param {import('./line-chart.interface').ILineChartAxis[]} [currentScales]
  * @param {number} [i]
  */
 const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
@@ -94,7 +98,8 @@ const getLineChartAxes = (options, axisType, state) => {
     axisData.position = curr.position || getAxisPosition(axisType, i);
 
     const axis = getLineChartAxis(options, axisType, state, axisData, i);
-    return { ...acc, [axisType + (i + 1)]: axis };
+    const axisId = generateAxisId(axisType, i, true);
+    return { ...acc, [axisId]: axis };
   }, {});
   return axes;
 };

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-utils.js

@@ -169,3 +169,15 @@ export const truncateDecimals = (number, digits) => {
 
   return truncatedNum / multiplier;
 };
+
+/**
+ *
+ * @param {'x'|'y'} axisType
+ * @param {number} [index] - axis index; optional, 0 by default
+ * @param {boolean} [hasMultiAxes] - optional, false by default
+ * @return {string} - e.g. x if chart has singular axes; x1, x2 - in case of multiple axes
+ */
+export const generateAxisId = (axisType, index = 0, hasMultiAxes = false) => {
+  const i = hasMultiAxes ? index + 1 : '';
+  return `${axisType}${i}`;
+};

package/src/components/line-chart/line-chart.interface.ts

@@ -45,18 +45,20 @@ export interface ILineChartAdditionalAxesOptions {
     };
 }
 
-export interface ILineChartAxes<PositionType> {
+export interface ILineChartAxis<PositionType> {
     label: string;
     position: PositionType;
     color: string;
 }
 
+export interface ILineChartAxes {
+    x: ILineChartAxis<'top' | 'bottom'>[];
+    y: ILineChartAxis<'left' | 'right'>[];
+}
+
 export interface ILineChartOptions {
     title: string | string[];
-    axes: {
-        x: ILineChartAxes<'top' | 'bottom'>[];
-        y: ILineChartAxes<'left' | 'right'>[];
-    };
+    axes: ILineChartAxes;
     additionalAxesOptions: ILineChartAdditionalAxesOptions;
     chartStyling: IChartStyling;
     tooltip: ILineChartTooltip;

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,8 @@ import {
   PanZoomMode,
   PointStyle,
 } from '../../helpers/enums';
+import { getScalesMinMax } from './get-scales-min-max';
+import { generateAxisId } from './line-chart-utils';
 
 ChartJS.register(
   LinearScale,
@@ -131,6 +134,9 @@ const LineChart = (props) => {
     if (chartOptions.enablePan !== true) {
       dispatch({ type: TOGGLE_PAN });
     }
+    if (chartRef) {
+      dispatch({ type: SET_AXIS_MIN_MAX, payload: getScalesMinMax(chartRef) });
+    }
   }, []);
 
   useEffect(() => {
@@ -338,50 +344,61 @@ const LineChart = (props) => {
       };
     });
   };
-  const controlsAxes = getControlsAxes();
+  const controlsAxes = getControlsAxes(axes);
+
+  const getControlsAxesLabels = (propsAxes) => {
+    if (!Object.keys(propsAxes)?.length) {
+      return [];
+    }
+
+    const getAxesLabels = (axes, axisType) => {
+      if (!axes[axisType] || !axes[axisType]?.length) {
+        return [];
+      } else {
+        return axes[axisType].map((axisObj, index) => {
+          return {
+            id: generateAxisId(axisType, index, axes[axisType].length > 1),
+            label: axisObj?.label || '',
+          };
+        });
+      }
+    };
+
+    const axesLabels = [
+      ...getAxesLabels(propsAxes, AxisType.X),
+      ...getAxesLabels(propsAxes, AxisType.Y),
+    ];
+    return axesLabels;
+  };
+
+  const controlsAxesLabels = getControlsAxesLabels(props.chart.options.axes);
 
   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)}
@@ -396,6 +413,7 @@ const LineChart = (props) => {
     >
       <Controls
         axes={controlsAxes}
+        controlsAxesLabels={controlsAxesLabels}
         chart={chart}
         headerComponent={headerComponent}
         legendEnabled={state.legendEnabled}
@@ -415,7 +433,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

@@ -1,5 +1,6 @@
 import { AxisType } from '../../../helpers/enums';
 import { setAnnotations } from '../../../helpers/chart-utils';
+import { generateAxisId } from '../line-chart-utils';
 
 const initialState = ({
   axes,
@@ -11,23 +12,25 @@ const initialState = ({
   annotationsData,
 }) => {
   /**
-   * getAxis
+   * getStateAxesByType
    * @param {'x'|'y'} axisType
-   * @return {{id: string, label: string}[] | []} returns array of objects describing all chart axis or empty array
+   * @return {{id: string}[] | []} returns array of objects describing all chart axis or empty array
    */
   const getStateAxesByType = (axisType) => {
-    if (axes[axisType].length > 1) {
+    if (!axes[axisType]) {
+      return [];
+    }
+
+    if (axes[axisType]?.length > 1) {
       return axes[axisType].map((axisObj, index) => {
         return {
-          id: `${axisType}${index}`,
-          label: axisObj.label,
+          id: generateAxisId(axisType, index, axes[axisType].length > 1),
         };
       });
     } else {
       return [
         {
-          id: axisType,
-          label: axes[axisType][0].label,
+          id: generateAxisId(axisType),
         },
       ];
     }

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