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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.5.13",
+  "version": "2.5.15",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "main": "index.js",
   "files": [
@@ -90,7 +90,7 @@
     "react-dom": "^17.0"
   },
   "dependencies": {
-    "@oliasoft-open-source/react-ui-library": "^3.1.7",
+    "@oliasoft-open-source/react-ui-library": "^3.1",
     "chart.js": "^3.9.1",
     "chartjs-plugin-annotation": "^1.4.0",
     "chartjs-plugin-datalabels": "^2.1.0",

package/release-notes.md

@@ -1,5 +1,13 @@
 # Charts Library Release Notes
 
+## 2.5.15
+
+- Changed GUI library version to `^3.1`
+
+## 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

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/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

@@ -72,6 +72,7 @@ import {
   PointStyle,
 } from '../../helpers/enums';
 import { getScalesMinMax } from './get-scales-min-max';
+import { generateAxisId } from './line-chart-utils';
 
 ChartJS.register(
   LinearScale,
@@ -343,7 +344,34 @@ 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 || {};
@@ -385,6 +413,7 @@ const LineChart = (props) => {
     >
       <Controls
         axes={controlsAxes}
+        controlsAxesLabels={controlsAxesLabels}
         chart={chart}
         headerComponent={headerComponent}
         legendEnabled={state.legendEnabled}

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 + 1}`,
-          label: axisObj.label,
+          id: generateAxisId(axisType, index, axes[axisType].length > 1),
         };
       });
     } else {
       return [
         {
-          id: axisType,
-          label: axes[axisType][0].label,
+          id: generateAxisId(axisType),
         },
       ];
     }