@oliasoft-open-source/charts-library 2.16.0-beta-1 → 2.16.0-beta-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "2.16.0-beta-1",
+  "version": "2.16.0-beta-2",
   "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

@@ -3,6 +3,9 @@
 ## 2.16.0
 - Added common chart area text plugin
 
+## 2.14.1 
+- Fix save initAxesRange when dataset changed by parent component([OW-11332](https://oliasoft.atlassian.net/browse/OW-11332))
+
 ## 2.14.0
 - Refactored line chart, for better performance, readable and reduce not needed re-renders
 

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

@@ -82,7 +82,14 @@ const LineChart = (props) => {
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
 
   // Call the custom hooks.
-  useChartState({ chartRef, options, state, dispatch, persistenceId });
+  useChartState({
+    chartRef,
+    options,
+    state,
+    generatedDatasets,
+    dispatch,
+    persistenceId,
+  });
 
   const { resetZoom, handleDownload, handleKeyDown, handleKeyUp } =
     useChartFunctions({

package/src/components/line-chart/plugins/chart-area-text-plugin.js

@@ -42,12 +42,41 @@ const countLines = (words, maxWidth, ctx) => {
   return lines;
 };
 
+/**
+ * Renders the lines of text on the canvas context.
+ * It iterates over the array of lines and renders each line with the provided styling.
+ *
+ * @param {CanvasRenderingContext2D} ctx - The canvas rendering context to draw on.
+ * @param {string[]} lines - The array of lines to be rendered.
+ * @param {number} lineHeight - The height of each line.
+ * @param {number} x - The x-coordinate of the starting position.
+ * @param {number} y - The y-coordinate of the starting position.
+ */
 const drawText = (ctx, lines, lineHeight, x, y) => {
   lines.forEach((line, index) => {
     ctx.fillText(line, x, y - (lines.length - 1 - index) * lineHeight);
   });
 };
 
+/**
+ * Calculates the maximum width for the text based on the initial maximum width
+ * and the chart area width.
+ * @param {number} initialMaxWidth - The initial maximum width.
+ * @param {number} chartAreaWidth - The width of the chart area.
+ * @returns {number} The updated maximum width.
+ */
+const calculateMaxWidth = (initialMaxWidth, chartAreaWidth) => {
+  const factorMiddle = 0.5;
+  const factorSmall = 0.7;
+  const maxWidthFactor =
+    chartAreaWidth < 500
+      ? factorMiddle
+      : chartAreaWidth < 700
+      ? factorSmall
+      : 1;
+  return initialMaxWidth * maxWidthFactor;
+};
+
 export const chartAreaTextPlugin = {
   id: 'chartAreaText',
 
@@ -72,18 +101,21 @@ export const chartAreaTextPlugin = {
   },
 
   beforeDraw: (chart, args, options) => {
-    const { showLabel, text, fontSize, xOffset, yOffset, lineHeight } = options;
+    const {
+      showLabel,
+      text,
+      fontSize,
+      xOffset,
+      yOffset,
+      lineHeight,
+      maxWidth: initialMaxWidth,
+    } = options;
     const { ctx, chartArea } = chart;
 
     if (!showLabel || !text) return;
 
     // Determine the maxWidth based on chartArea width
-    const maxWidth =
-      chartArea.width < 500
-        ? 100
-        : chartArea.width < 700
-        ? 200
-        : options.maxWidth;
+    const maxWidth = calculateMaxWidth(initialMaxWidth, chartArea.width);
 
     // Split the text into words and calculate the number of lines
     const words = getWords(text);

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

@@ -75,26 +75,38 @@ const useUpdateAxesRanges = (range, dispatch) => {
 };
 
 /**
- * Hook for saving the initial axes ranges in the chart state.
+ * A custom hook to save the initial axes ranges of a chart when the generated datasets change.
  *
- * @param chartRef - The reference to the chart.
- * @param axes - The axes data.
- * @param dispatch - The dispatch function for state management.
+ * @param {Object} chartRef - A reference to the chart object.
+ * @param {Array} axes - An array of axes configurations.
+ * @param {Array} generatedDatasets - An array of generated datasets for the chart.
+ * @param {Function} dispatch - A dispatch function from the useContext hook for managing the state.
  */
-const useSaveInitialAxesRanges = (chartRef, axes, dispatch) => {
+const useSaveInitialAxesRanges = (
+  chartRef,
+  axes,
+  generatedDatasets,
+  dispatch,
+) => {
+  const prevGeneratedDatasets = useRef();
+
   const saveInitialAxesRanges = useCallback(() => {
-    if (chartRef) {
+    if (
+      chartRef &&
+      !isEqual(generatedDatasets, prevGeneratedDatasets.current)
+    ) {
       const initialAxesRanges = getAxesRangesFromChart(chartRef, axes);
       dispatch({
         type: SAVE_INITIAL_AXES_RANGES,
         payload: { initialAxesRanges },
       });
+      prevGeneratedDatasets.current = generatedDatasets;
     }
-  }, [chartRef]);
+  }, [chartRef, generatedDatasets]);
 
   useEffect(() => {
     saveInitialAxesRanges();
-  }, [saveInitialAxesRanges]);
+  }, [saveInitialAxesRanges, generatedDatasets]);
 };
 
 /**
@@ -103,6 +115,7 @@ const useSaveInitialAxesRanges = (chartRef, axes, dispatch) => {
  * @param chartRef - The reference to the chart.
  * @param options - The chart options.
  * @param state - The chart state.
+ * @param {Array} generatedDatasets - An array of generated datasets for the chart.
  * @param dispatch - The dispatch function for state management.
  * @param persistenceId - The chart persistenceId.
  */
@@ -110,6 +123,7 @@ export const useChartState = ({
   chartRef,
   options,
   state,
+  generatedDatasets,
   dispatch,
   persistenceId,
 }) => {
@@ -123,5 +137,5 @@ export const useChartState = ({
   useStoreChartStateInStorage(memoState, persistenceId);
   useToggleCustomLegendVisibility(memoState, memoOptions);
   useUpdateAxesRanges(range, dispatch);
-  useSaveInitialAxesRanges(chartRef, axes, dispatch);
+  useSaveInitialAxesRanges(chartRef, axes, generatedDatasets, dispatch);
 };