@oliasoft-open-source/charts-library 2.13.4 → 2.14.0-beta-1

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

@@ -15,104 +15,86 @@ import {
 } from './action-types';
 
 export const reducer = (state, action) => {
-  const newState = { ...state };
-  switch (action.type) {
-    case TOGGLE_ZOOM: {
-      newState.zoomEnabled = !newState.zoomEnabled;
-      if (newState.panEnabled) {
-        newState.panEnabled = false;
+  return produce(state, (draft) => {
+    switch (action.type) {
+      case TOGGLE_ZOOM: {
+        draft.zoomEnabled = !draft.zoomEnabled;
+        if (draft.panEnabled) {
+          draft.panEnabled = false;
+        }
+        if (draft.enableDragPoints) {
+          draft.enableDragPoints = false;
+        }
+        break;
       }
-      if (newState.enableDragPoints) {
-        newState.enableDragPoints = false;
+      case TOGGLE_PAN: {
+        draft.panEnabled = !draft.panEnabled;
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        break;
       }
-      return newState;
-    }
-    case TOGGLE_PAN: {
-      newState.panEnabled = !newState.panEnabled;
-      if (newState.zoomEnabled) {
-        newState.zoomEnabled = false;
+      case TOGGLE_POINTS: {
+        draft.pointsEnabled = !draft.pointsEnabled;
+        break;
       }
-      return newState;
-    }
-    case TOGGLE_POINTS: {
-      return {
-        ...newState,
-        pointsEnabled: !newState.pointsEnabled,
-      };
-    }
-    case TOGGLE_LINE: {
-      return {
-        ...newState,
-        lineEnabled: !newState.lineEnabled,
-      };
-    }
-    case TOGGLE_LEGEND: {
-      return {
-        ...newState,
-        legendEnabled: !newState.legendEnabled,
-      };
-    }
-    case TOGGLE_TABLE: {
-      return {
-        ...newState,
-        showTable: !newState.showTable,
-      };
-    }
-    case SAVE_INITIAL_AXES_RANGES: {
-      return produce(state, (draft) => {
+      case TOGGLE_LINE: {
+        draft.lineEnabled = !draft.lineEnabled;
+        break;
+      }
+      case TOGGLE_LEGEND: {
+        draft.legendEnabled = !draft.legendEnabled;
+        break;
+      }
+      case TOGGLE_TABLE: {
+        draft.showTable = !draft.showTable;
+        break;
+      }
+      case SAVE_INITIAL_AXES_RANGES: {
         const { initialAxesRanges } = action.payload;
         draft.initialAxesRanges = initialAxesRanges;
-      });
-    }
-    case UPDATE_AXES_RANGES: {
-      return produce(state, (draft) => {
+        break;
+      }
+      case UPDATE_AXES_RANGES: {
         const { axes } = action.payload;
         draft.axes = axes;
-      });
-    }
-    case RESET_AXES_RANGES: {
-      return produce(state, (draft) => {
-        const { axes } = state;
+        break;
+      }
+      case RESET_AXES_RANGES: {
+        const { axes } = draft;
         draft.axes = axes.map((axis) => ({
           id: axis.id,
         }));
-      });
-    }
-    case TOGGLE_ANNOTATION:
-      const { annotationIndex } = action.payload;
-      const updatedIndexes = newState.showAnnotationLineIndex.includes(
-        annotationIndex,
-      )
-        ? newState.showAnnotationLineIndex.filter((v) => v !== annotationIndex)
-        : [...newState.showAnnotationLineIndex, annotationIndex];
-      return {
-        ...newState,
-        showAnnotationLineIndex: updatedIndexes,
-      };
-    case TOGGLE_DRAG_POINTS: {
-      newState.enableDragPoints = !newState.enableDragPoints;
-      if (newState.panEnabled) {
-        newState.panEnabled = false;
+        break;
       }
-      if (newState.zoomEnabled) {
-        newState.zoomEnabled = false;
+      case TOGGLE_ANNOTATION: {
+        const { annotationIndex } = action.payload;
+        const updatedIndexes = draft.showAnnotationLineIndex.includes(
+          annotationIndex,
+        )
+          ? draft.showAnnotationLineIndex.filter((v) => v !== annotationIndex)
+          : [...draft.showAnnotationLineIndex, annotationIndex];
+        draft.showAnnotationLineIndex = updatedIndexes;
+        break;
       }
-      return newState;
-    }
-    case DISABLE_DRAG_OPTIONS: {
-      if (
-        newState.enableDragPoints ||
-        newState.panEnabled ||
-        newState.zoomEnabled
-      ) {
-        newState.enableDragPoints = false;
-        newState.panEnabled = false;
-        newState.zoomEnabled = false;
+      case TOGGLE_DRAG_POINTS: {
+        draft.enableDragPoints = !draft.enableDragPoints;
+        if (draft.panEnabled) {
+          draft.panEnabled = false;
+        }
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        break;
+      }
+      case DISABLE_DRAG_OPTIONS: {
+        if (draft.enableDragPoints || draft.panEnabled || draft.zoomEnabled) {
+          draft.enableDragPoints = false;
+          draft.panEnabled = false;
+          draft.zoomEnabled = false;
+        }
+        break;
       }
-      return newState;
-    }
-    default: {
-      return newState;
     }
-  }
+  });
 };

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 '../utils/get-axes-ranges-from-chart';
 
 /**
  * Hook for toggling the visibility of the custom legend.
@@ -42,25 +45,83 @@ 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 dispatch - The dispatch function for state management.
  * @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;

package/src/components/line-chart/{axis-scales → utils/axis-scales}/axis-scales.js

@@ -1,8 +1,8 @@
 import getLineChartScales from '../get-line-chart-scales';
-import { AxisType } from '../../../helpers/enums';
+import { AxisType } from '../../../../helpers/enums';
 import { getAxisTypeFromKey } from '../line-chart-utils';
-import { estimateDataSeriesHaveCloseValues } from '../../../helpers/range/estimate-data-series-have-close-values';
-import { getSuggestedAxisRange } from '../../../helpers/range/range';
+import { estimateDataSeriesHaveCloseValues } from '../../../../helpers/range/estimate-data-series-have-close-values';
+import { getSuggestedAxisRange } from '../../../../helpers/range/range';
 
 /**
  Function that counts the number of occurences of "x" and "y" in an array and returns the one with the highest count.

package/src/components/line-chart/{datalabels-alignment → utils/datalabels-alignment}/get-datalabels-position.js

@@ -1,6 +1,6 @@
 import { getCondition } from './get-alignment-condition';
 import { getAlignmentData } from './get-alignment-data';
-import { AlignOptions } from '../../../helpers/enums';
+import { AlignOptions } from '../../../../helpers/enums';
 
 /** returning position depends on condition
  *

package/src/components/line-chart/utils/generate-line-chart-datasets.js

@@ -0,0 +1,114 @@
+import { COLORS } from '../../../helpers/chart-consts';
+import {
+  BORDER_JOIN_STYLE,
+  DEFAULT_BACKGROUND_COLOR,
+  DEFAULT_BORDER_WIDTH,
+  DEFAULT_HOVER_RADIUS,
+  DEFAULT_LINE_POINT_RADIUS,
+  DEFAULT_POINT_RADIUS,
+} from '../constants/line-chart-consts';
+import { generateRandomColor } from '../../../helpers/chart-utils';
+
+/**
+ * Generates line chart datasets based on the provided datasets, state, and options.
+ *
+ * @param {Array} datasets - The initial datasets for the line chart.
+ * @param {Object} state - The state object containing chart settings (e.g., lineEnabled, pointsEnabled, axes).
+ * @param {Object} options - The options object containing additional settings (e.g., annotations, graph).
+ * @param {Object} translations - The translations object containing translations string
+ * @returns {Array} - The generated line chart datasets with applied settings and configurations.
+ */
+export const generateLineChartDatasets = (
+  datasets,
+  state,
+  options,
+  translations,
+) => {
+  const copyDataset = [...datasets];
+  const { annotations, graph } = options;
+  const {
+    controlAnnotation,
+    showAnnotations,
+    annotationsData = [],
+  } = annotations;
+  // Add annotations to dataset to have them appear in legend.
+  if (controlAnnotation && showAnnotations) {
+    const annotationDatasets = annotationsData.map((annotation, index) => {
+      const color = annotation.color ?? COLORS[index];
+
+      // Create an annotation dataset
+      return {
+        isAnnotation: true,
+        label: annotation.label,
+        annotationIndex: index,
+        backgroundColor: color,
+        pointBackgroundColor: color,
+        borderColor: color,
+        data: [{}],
+      };
+    });
+
+    // Add annotation datasets to the copyDataset array
+    copyDataset.push(...annotationDatasets);
+  }
+
+  // Map over the copyDataset array and generate line chart datasets with applied settings and configurations
+  return copyDataset.map((line, i) => {
+    // Destructure properties from the line, state, and graph objects
+    const {
+      formation,
+      data = [],
+      pointRadius,
+      pointHoverRadius,
+      borderWidth,
+      borderColor,
+      backgroundColor,
+      pointBackgroundColor,
+      borderDash,
+    } = line ?? {};
+    const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
+    const { lineTension, spanGaps } = graph ?? {};
+
+    // Adjust the start and end points of the line if it has a formation flag
+    if (formation) {
+      const axesMin = axes[0]?.min;
+      const axesMax = axes[0]?.max;
+      const [startPoint, midPointWithLabel, endPoint] = data;
+
+      if (axesMin && startPoint?.x) {
+        data[0].x = Math.max(axesMin, startPoint.x);
+      }
+
+      if (axesMax && endPoint?.x) {
+        data[2].x = Math.min(axesMax, endPoint.x);
+      }
+    }
+
+    // Remove invalid falsy data points (OW-9855)
+    const filteredData = data.filter(Boolean) || [];
+
+    const linePointRadius = parseFloat(pointRadius) || DEFAULT_POINT_RADIUS;
+    const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
+    const indexedColor = COLORS[i];
+
+    // Return the dataset with applied settings and configurations
+    return {
+      ...line,
+      label: line.label || `${translations.label} ${i + 1}`,
+      data: filteredData,
+      showLine: lineEnabled,
+      lineTension,
+      spanGaps,
+      borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
+      borderDash: borderDash || [],
+      borderJoinStyle: BORDER_JOIN_STYLE,
+      borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
+      backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
+      pointBackgroundColor:
+        pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
+      pointRadius: pointsEnabled ? linePointRadius : DEFAULT_LINE_POINT_RADIUS,
+      pointHoverRadius: hoverRadius,
+      pointHitRadius: line.pointHitRadius ?? hoverRadius,
+    };
+  });
+};

package/src/components/line-chart/{get-line-chart-data-labels.js → utils/get-line-chart-data-labels.js}

@@ -1,10 +1,10 @@
-import { AUTO } from '../../helpers/chart-consts';
+import { AUTO } from '../../../helpers/chart-consts';
 import { getPosition } from './datalabels-alignment/get-datalabels-position';
 
 /**
  * adjusts the position of the label depends on chart area
  *
- * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
  * @return {object} - returning position, if label exist in datasets item
  */
 const getLineChartDataLabels = (options) => {

package/src/components/line-chart/{get-line-chart-scales.js → utils/get-line-chart-scales.js}

@@ -1,16 +1,16 @@
 import {
   generateRandomColor,
   getAxisPosition,
-} from '../../helpers/chart-utils';
-import { COLORS, LOGARITHMIC_STEPS } from '../../helpers/chart-consts';
+} from '../../../helpers/chart-utils';
+import { COLORS, LOGARITHMIC_STEPS } from '../../../helpers/chart-consts';
 import { generateAxisId, truncateDecimals } from './line-chart-utils';
-import { AxisType, ScaleType } from '../../helpers/enums';
+import { AxisType, ScaleType } from '../../../helpers/enums';
 
 /**
- * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @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').ILineChartAxis[]} [currentScales]
+ * @param {import('../../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ * @param {import('../line-chart.interface').ILineChartAxis[]} [currentScales]
  * @param {number} [i]
  */
 const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
@@ -19,7 +19,7 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
     i
   ];
 
-  const { additionalAxesOptions, chartStyling } = options;
+  const { additionalAxesOptions } = options;
 
   const getTicks = () => {
     const truncateAxisNumbersToDigitsCallback = Number.isInteger(
@@ -77,9 +77,9 @@ const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
 };
 
 /**
- * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @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('../../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
  */
 const getLineChartAxes = (options, axisType, state) => {
   const axesData = options.axes[axisType];
@@ -97,8 +97,8 @@ const getLineChartAxes = (options, axisType, state) => {
 
 /**
  *
- * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
- * @param {import('../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
+ * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {import('../../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
  */
 const getLineChartScales = (options, state) => {
   const hasMultipleXAxes = options.axes.x?.length > 1;

package/src/components/line-chart/{get-line-chart-tooltips.js → utils/get-line-chart-tooltips.js}

@@ -1,8 +1,11 @@
-import { ChartHoverMode, Position, TooltipLabel } from '../../helpers/enums';
-import { afterLabelCallback, getTooltipLabel } from '../../helpers/chart-utils';
+import { ChartHoverMode, Position, TooltipLabel } from '../../../helpers/enums';
+import {
+  afterLabelCallback,
+  getTooltipLabel,
+} from '../../../helpers/chart-utils';
 
 /**
- * @param {import('./line-chart.interface').ILineChartOptions} options - line chart options object
+ * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
  */
 const getLineChartToolTips = (options) => {
   const getTooltipLabels = (dataset) => {

package/src/components/line-chart/utils/get-translations/get-translations.js

@@ -0,0 +1,17 @@
+import { defaultTranslations } from '../../constants/default-translations';
+
+/**
+ * Merges custom translations with the default translations.
+ * If a custom translation is provided for a key, it will override the default one.
+ * @param {object} translations - Custom translations.
+ * @returns {object} - The resulting translations object, containing both default and custom translations.
+ */
+export const getTranslations = (translations = {}) => {
+  return Object.keys(defaultTranslations).reduce(
+    (acc, key) => ({
+      ...acc,
+      [key]: translations[key] || defaultTranslations[key],
+    }),
+    {},
+  );
+};

package/src/helpers/chart-utils.js

@@ -3,8 +3,8 @@ import { defaults } from 'chart.js';
 import cx from 'classnames';
 import { chartMinorGridlinesPlugin } from '../components/line-chart/line-chart.minor-gridlines-plugin';
 import {
-  CUSTOM_LEGEND_PLUGIN_NAME,
   BORDER_COLOR,
+  CUSTOM_LEGEND_PLUGIN_NAME,
   DEFAULT_CHART_NAME,
   DEFAULT_COLOR,
   DEFAULT_FONT_FAMILY,
@@ -19,10 +19,9 @@ import { chartAreaBorderPlugin } from './chart-border-plugin';
  * @param {import('../components/bar-chart/bar-chart.interface').IBarChartGraph |
  * import('../components/line-chart/line-chart.interface').ILineChartGraph } graph - graph data from chart options
  * @param {import('../helpers/chart-interface').IChartLegend} legend
- * @param {import('./chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
  * @return {[]}
  */
-export const getPlugins = (graph, legend, state = null) => {
+export const getPlugins = (graph, legend) => {
   let plugins = [];
   if (graph.showMinorGridlines) {
     plugins.push(chartMinorGridlinesPlugin);
@@ -131,7 +130,7 @@ export const getClassName = (chartStyling, styles) => {
  * @returns {*}
  */
 export const getLegend = (options, clickHandler, state = null) => {
-  const { legend, chartStyling } = options;
+  const { legend } = options;
   return {
     position: legend.position || Position.Top,
     display: !legend?.customLegend?.customLegendPlugin
@@ -144,7 +143,6 @@ export const getLegend = (options, clickHandler, state = null) => {
       boxHeight: LEGEND_LABEL_BOX_SIZE,
       boxWidth: LEGEND_LABEL_BOX_SIZE,
       usePointStyle: true,
-      filter: (item, data) => !data.datasets[item.datasetIndex].hideLegend,
     },
     onClick: clickHandler,
   };

package/src/helpers/enums.js

@@ -85,3 +85,12 @@ export const PanZoomMode = Object.freeze({
 export const Key = Object.freeze({
   Shift: 'Shift',
 });
+
+export const Events = Object.freeze([
+  'mousemove',
+  'mouseout',
+  'click',
+  'touchstart',
+  'touchmove',
+  'dblclick',
+]);