@oliasoft-open-source/charts-library 2.13.4 → 2.13.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.13.4",
+  "version": "2.13.5",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {

package/release-notes.md

@@ -1,5 +1,9 @@
 # Charts Library Release Notes
 
+## 2.13.5
+
+- Fixed reset range when subComponent update data, prevent extra re-renders when range have same deep values but different reference
+
 ## 2.13.4
 
 - Fixed legend state

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

@@ -1,10 +1,4 @@
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useReducer,
-  useRef,
-  useState,
-} from 'react';
+import React, { useReducer, useRef, useState } from 'react';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -29,7 +23,6 @@ import initialState from './state/initial-state';
 import {
   DISABLE_DRAG_OPTIONS,
   RESET_AXES_RANGES,
-  SAVE_INITIAL_AXES_RANGES,
   TOGGLE_ANNOTATION,
   TOGGLE_DRAG_POINTS,
   TOGGLE_LEGEND,
@@ -80,8 +73,7 @@ import {
 import getDraggableData from '../../helpers/get-draggableData';
 import { generateAxisId, generateKey } from './line-chart-utils';
 import { autoScale } from './axis-scales/axis-scales';
-import useChartState from './state/use-chart-state';
-import { getAxesRangesFromChart } from './get-axes-ranges-from-chart';
+import { useChartState } from './state/use-chart-state';
 
 ChartJS.register(
   LinearScale,
@@ -134,36 +126,8 @@ const LineChart = (props) => {
     initialState,
   );
 
-  useLayoutEffect(() => {
-    const { range } = props.chart.options.additionalAxesOptions;
-    if (range?.x && range?.y) {
-      const axes = Object.entries(range).map(([key, { min, max }]) => {
-        return {
-          id: key,
-          min: min ?? 0,
-          max: max ?? 0,
-        };
-      });
-
-      dispatch({
-        type: UPDATE_AXES_RANGES,
-        payload: { axes },
-      });
-    }
-  }, [props.chart.options]);
-
-  useEffect(() => {
-    if (chartRef) {
-      //save the initial axis ranges in state (we need this for resetting ranges)
-      dispatch({
-        type: SAVE_INITIAL_AXES_RANGES,
-        payload: { initialAxesRanges: getAxesRangesFromChart(chartRef, axes) },
-      });
-    }
-  }, []);
-
   // Call the custom hook.
-  useChartState(options, state, persistenceId);
+  useChartState({ chartRef, options, state, dispatch, persistenceId });
 
   const generateLineChartDatasets = (datasets) => {
     const copyDataset = [...datasets];

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

@@ -1,5 +1,8 @@
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { isEqual } from 'lodash';
 import { storeChartStateInStorage } from './manage-state-in-local-storage';
+import { SAVE_INITIAL_AXES_RANGES, UPDATE_AXES_RANGES } from './action-types';
+import { getAxesRangesFromChart } from '../get-axes-ranges-from-chart';
 
 /**
  * Hook for toggling the visibility of the custom legend.
@@ -42,25 +45,82 @@ const useStoreChartStateInStorage = (memoState, persistenceId) => {
   ]);
 };
 
+/**
+ * Hook for updating the axes ranges in the chart state.
+ *
+ * @param range - The range to the chart.
+ * @param dispatch - The dispatch function for state management.
+ */
+const useUpdateAxesRanges = (range, dispatch) => {
+  const prevRange = useRef();
+
+  const updateAxesRanges = useCallback(() => {
+    if (range && range.x && range.y && !isEqual(range, prevRange.current)) {
+      const axes = Object.entries(range).map(([key, { min, max }]) => ({
+        id: key,
+        min: min ?? 0,
+        max: max ?? 0,
+      }));
+      dispatch({
+        type: UPDATE_AXES_RANGES,
+        payload: { axes },
+      });
+      prevRange.current = range;
+    }
+  }, [range]);
+
+  useEffect(() => {
+    updateAxesRanges();
+  }, [updateAxesRanges]);
+};
+
+/**
+ * Hook for saving the initial axes ranges in the chart state.
+ *
+ * @param chartRef - The reference to the chart.
+ * @param axes - The axes data.
+ * @param dispatch - The dispatch function for state management.
+ */
+const useSaveInitialAxesRanges = (chartRef, axes, dispatch) => {
+  const saveInitialAxesRanges = useCallback(() => {
+    if (chartRef) {
+      const initialAxesRanges = getAxesRangesFromChart(chartRef, axes);
+      dispatch({
+        type: SAVE_INITIAL_AXES_RANGES,
+        payload: { initialAxesRanges },
+      });
+    }
+  }, [chartRef]);
+
+  useEffect(() => {
+    saveInitialAxesRanges();
+  }, [saveInitialAxesRanges]);
+};
+
 /**
  * Hook for managing the state of the chart.
  *
+ * @param chartRef - The reference to the chart.
  * @param options - The chart options.
  * @param state - The chart state.
  * @param persistenceId - The chart persistenceId.
  */
-const useChartState = (options, state, persistenceId) => {
-  const memoized = useMemo(() => {
-    return {
-      state,
-      options,
-    };
-  }, [state, options]);
-
-  const { state: memoState, options: memoOptions } = memoized ?? {};
+export const useChartState = ({
+  chartRef,
+  options,
+  state,
+  dispatch,
+  persistenceId,
+}) => {
+  const memoState = useMemo(() => state, [state]);
+  const memoOptions = useMemo(() => options, [options]);
+  const {
+    additionalAxesOptions: { range },
+    axes,
+  } = memoOptions;
 
   useStoreChartStateInStorage(memoState, persistenceId);
   useToggleCustomLegendVisibility(memoState, memoOptions);
+  useUpdateAxesRanges(range, dispatch);
+  useSaveInitialAxesRanges(chartRef, axes, dispatch);
 };
-
-export default useChartState;