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

package/src/components/line-chart/hooks/use-chart-functions.js

@@ -0,0 +1,257 @@
+import { useCallback } from 'react';
+import { triggerBase64Download } from 'react-base64-downloader';
+import { AxisType, Key, PanZoomMode } from '../../../helpers/enums';
+import { getChartFileName } from '../../../helpers/chart-utils';
+import { generateAxisId } from '../utils/line-chart-utils';
+import { RESET_AXES_RANGES, UPDATE_AXES_RANGES } from '../state/action-types';
+
+/**
+ * Custom hook that encapsulates the chart-related functions and their dependencies
+ * @param {Object} chartRef - Chart reference
+ * @param {Object} state - The component state
+ * @param {Object} options - Chart options
+ * @param {Function} dispatch - Dispatch function from useReducer
+ * @param {Array} generatedDatasets - Chart datasets
+ * @returns {Object} An object containing the chart-related functions
+ */
+export const useChartFunctions = ({
+  chartRef,
+  state,
+  options,
+  dispatch,
+  generatedDatasets,
+}) => {
+  const {
+    annotations,
+    interactions: { onLegendClick, onPointHover, onPointUnhover },
+    additionalAxesOptions,
+    axes,
+  } = options;
+
+  /**
+   * Handles legend click events
+   * @param {Event} e - Click event
+   * @param {Object} legendItem - Legend item data
+   */
+  const legendClick = useCallback(
+    (e, legendItem) => {
+      const { datasetIndex } = legendItem;
+      const chartInstance = chartRef.current;
+      const { datasets } = chartInstance.data;
+      const dataset = datasets[datasetIndex];
+      const meta = chartInstance.getDatasetMeta(datasetIndex);
+      meta.hidden = meta.hidden === null ? !dataset.hidden : null;
+
+      if (annotations.controlAnnotation && dataset.isAnnotation) {
+        const { annotationIndex } = dataset;
+        dispatch({ type: 'TOGGLE_ANNOTATION', payload: { annotationIndex } });
+      }
+
+      // Show/hide entire display group
+      if (dataset.displayGroup) {
+        datasets.forEach((ds, ix) => {
+          if (ds.displayGroup !== dataset.displayGroup) return;
+          chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
+        });
+      }
+
+      if (onLegendClick) {
+        onLegendClick(legendItem?.text, legendItem.hidden);
+      }
+
+      chartInstance.update();
+    },
+    [onLegendClick, annotations],
+  );
+
+  /**
+   * Resets the chart zoom and updates the axes ranges
+   * @returns {Function} Memoized resetZoom function
+   */
+  const resetZoom = useCallback(() => {
+    const chartInstance = chartRef.current;
+    chartInstance.resetZoom();
+    dispatch({ type: 'RESET_AXES_RANGES' });
+  }, [chartRef]);
+
+  /**
+   * Handles the hover event on chart points
+   * @param {Object} hoveredPoint - Currently hovered point
+   * @param {Function} setHoveredPoint - Setter function for hoveredPoint state
+   * @returns {Function} Memoized onHover function
+   */
+  const onHover = useCallback((hoveredPoint, setHoveredPoint) => {
+    return (evt, hoveredItems) => {
+      if (!hoveredItems?.length && onPointUnhover && hoveredPoint) {
+        setHoveredPoint(null);
+        onPointUnhover(evt);
+      }
+
+      if (hoveredItems?.length && onPointHover) {
+        const { index, datasetIndex } = hoveredItems[0];
+        const dataset = generatedDatasets[datasetIndex];
+        const point = dataset?.data[index];
+
+        if (point && hoveredPoint !== point) {
+          setHoveredPoint(point);
+          onPointHover(evt, datasetIndex, index, generatedDatasets);
+        }
+      }
+    };
+  }, []);
+
+  /**
+   * Handles the download of the chart as an image
+   * @returns {Function} Memoized handleDownload function
+   */
+  const handleDownload = useCallback(() => {
+    const chart = chartRef.current;
+
+    // Add temporary canvas background
+    const { ctx } = chart;
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+
+    const base64Image = chart.toBase64Image();
+    const fileName = getChartFileName(state.axes);
+
+    triggerBase64Download(base64Image, fileName);
+  }, [chartRef, state.axes]);
+
+  /**
+   * Handles the key down event for the chart
+   * @returns {Function} Memoized handleKeyDown function
+   */
+  const handleKeyDown = useCallback(
+    (evt) => {
+      if (evt.key === Key.Shift) {
+        const chart = chartRef.current;
+        chart.config.options.plugins.zoom.zoom.mode = PanZoomMode.Y;
+        chart.config.options.plugins.zoom.pan.mode = PanZoomMode.Y;
+        chart.update();
+      }
+    },
+    [chartRef],
+  );
+
+  /**
+   * Handles the key up event for the chart
+   * @returns {Function} Memoized handleKeyUp function
+   */
+  const handleKeyUp = useCallback(
+    (evt) => {
+      if (evt.key === Key.Shift) {
+        const chart = chartRef.current;
+        chart.config.options.plugins.zoom.zoom.mode = PanZoomMode.Z;
+        chart.config.options.plugins.zoom.pan.mode = PanZoomMode.Z;
+        chart.update();
+      }
+    },
+    [chartRef],
+  );
+
+  /**
+   * Get the controls axes based on the state and additionalAxesOptions.
+   * @returns {Array} Array of controls axes.
+   */
+  const controlsAxes = state.axes.map((axis, i) => {
+    const axisType = i ? AxisType.Y : AxisType.X; // only first element is 'x' - rest is 'y'
+    const min = axis.min ?? additionalAxesOptions?.range?.[axisType]?.min;
+    const max = axis.max ?? additionalAxesOptions?.range?.[axisType]?.max;
+    return {
+      ...axis,
+      // only add min and max properties if they are defined:
+      ...(min ? { min } : {}),
+      ...(max ? { max } : {}),
+    };
+  });
+
+  /**
+   * Get the controls axes labels based on the propsAxes.
+   * @param {Object} propsAxes - Props axes object.
+   * @returns {Array} Array of controls axes labels.
+   */
+  const getControlsAxesLabels = useCallback(
+    (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;
+    },
+    [axes],
+  );
+
+  /**
+   * Update axes ranges from the chart.
+   * @param {Object} chart - Chart instance.
+   */
+  const updateAxesRangesFromChart = useCallback(() => {
+    const { scales = {} } = chartRef?.current || {};
+    const axes = Object.entries(scales).map(([key, { min, max }]) => {
+      return {
+        id: key,
+        min: min ?? 0,
+        max: max ?? 0,
+      };
+    });
+    dispatch({
+      type: UPDATE_AXES_RANGES,
+      payload: { axes },
+    });
+  }, [axes]);
+
+  /**
+   * Handler for resetting axes ranges.
+   * @type {Function}
+   */
+  const onResetAxes = useCallback(() => {
+    // Dispatch the RESET_AXES_RANGES action
+    dispatch({ type: RESET_AXES_RANGES });
+  }, []);
+
+  /**
+   * Handler for updating axes ranges.
+   * @param {Object} axesInfo - Object containing axes information.
+   * @param {Array} axesInfo.axes - Array of axes to update.
+   * @type {Function}
+   */
+  const onUpdateAxes = useCallback(({ axes }) => {
+    // Dispatch the UPDATE_AXES_RANGES action with payload
+    dispatch({ type: UPDATE_AXES_RANGES, payload: { axes } });
+  }, []);
+
+  return {
+    legendClick,
+    resetZoom,
+    onHover,
+    handleDownload,
+    handleKeyDown,
+    handleKeyUp,
+    controlsAxes,
+    controlsAxesLabels: getControlsAxesLabels(axes),
+    updateAxesRangesFromChart,
+    onResetAxes,
+    onUpdateAxes,
+  };
+};

package/src/components/line-chart/hooks/use-chart-options.js

@@ -0,0 +1,155 @@
+import { useMemo, useState } from 'react';
+import {
+  ANIMATION_DURATION,
+  BORDER_COLOR,
+  CUSTOM_LEGEND_PLUGIN_NAME,
+} from '../../../helpers/chart-consts';
+import {
+  ChartHoverMode,
+  Events,
+  PanZoomMode,
+  PointStyle,
+} from '../../../helpers/enums';
+import { autoScale } from '../utils/axis-scales/axis-scales';
+import getLineChartDataLabels from '../utils/get-line-chart-data-labels';
+import getAnnotation from '../../../helpers/get-chart-annotation';
+import { ZOOM_BOX_BACKGROUND_COLOR } from '../constants/line-chart-consts';
+import getLineChartToolTips from '../utils/get-line-chart-tooltips';
+import { getLegend } from '../../../helpers/chart-utils';
+import getDraggableData from '../../../helpers/get-draggableData';
+import { useChartFunctions } from './use-chart-functions';
+
+/**
+ * Custom hook to generate chart options.
+ * @function
+ * @param {Object} chartRef - The chart reference.
+ * @param {Object} state - The chart state.
+ * @param {Object} options - The chart options.
+ * @param {Function} dispatch - The dispatch function for state management.
+ * @param {Array} generatedDatasets - The generated datasets.
+ * @returns {Object} The chart options object.
+ */
+export const useChartOptions = ({
+  chartRef,
+  state,
+  options,
+  dispatch,
+  generatedDatasets,
+}) => {
+  const {
+    interactions: { onAnimationComplete },
+  } = options;
+
+  const {
+    enableDragPoints,
+    zoomEnabled,
+    panEnabled,
+    lineEnabled,
+    showAnnotationLineIndex,
+    legendEnabled,
+  } = state;
+
+  const [hoveredPoint, setHoveredPoint] = useState(null);
+  const { legendClick, updateAxesRangesFromChart, onHover } = useChartFunctions(
+    {
+      chartRef,
+      state,
+      options,
+      dispatch,
+      generatedDatasets,
+    },
+  );
+
+  const datalabels = getLineChartDataLabels(options);
+  const tooltip = getLineChartToolTips(options);
+  const annotation = useMemo(
+    () => getAnnotation(options, state),
+    [showAnnotationLineIndex, legendClick],
+  );
+  const legend = useMemo(
+    () => getLegend(options, legendClick, state),
+    [legendEnabled],
+  );
+
+  const scales = useMemo(
+    () => autoScale(options, state, generatedDatasets),
+    [options, state, generatedDatasets],
+  );
+
+  const dragData = useMemo(
+    () => enableDragPoints && getDraggableData(options),
+    [enableDragPoints, options],
+  );
+
+  const panOptions = useMemo(
+    () => ({
+      enabled: panEnabled,
+      mode: PanZoomMode.XY,
+      onPanComplete({ chart }) {
+        updateAxesRangesFromChart(chart);
+      },
+    }),
+    [panEnabled],
+  );
+
+  const zoomOptions = useMemo(
+    () => ({
+      mode: PanZoomMode.XY,
+      drag: {
+        enabled: zoomEnabled,
+        threshold: 3,
+        backgroundColor: ZOOM_BOX_BACKGROUND_COLOR,
+        borderColor: BORDER_COLOR,
+        borderWidth: 1,
+      },
+      onZoomComplete({ chart }) {
+        updateAxesRangesFromChart(chart);
+      },
+    }),
+    [zoomEnabled],
+  );
+
+  const plugins = {
+    datalabels,
+    annotation,
+    zoom: { pan: panOptions, zoom: zoomOptions },
+    tooltip,
+    legend,
+    [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
+      .customLegendPlugin && {
+      containerID: options.legend.customLegend.customLegendContainerID,
+    },
+    chartAreaBorder: {
+      borderColor: BORDER_COLOR,
+    },
+    ...dragData,
+  };
+
+  return useMemo(
+    () => ({
+      onHover: onHover(hoveredPoint, setHoveredPoint),
+      maintainAspectRatio: options.chartStyling.maintainAspectRatio,
+      aspectRatio: options.chartStyling.squareAspectRatio ? 1 : null,
+      animation: options.chartStyling.performanceMode
+        ? false
+        : {
+            duration: ANIMATION_DURATION.FAST,
+            onComplete: onAnimationComplete,
+          },
+      hover: {
+        mode: ChartHoverMode.Nearest,
+        intersect: true,
+      },
+      elements: {
+        line: {
+          pointStyle: PointStyle.Circle,
+          showLine: lineEnabled,
+        },
+      },
+      scales,
+      plugins,
+      events: Events,
+    }),
+    [state, options],
+  );
+};

package/src/components/line-chart/hooks/use-chart-plugins.js

@@ -0,0 +1,26 @@
+import { useCallback, useMemo } from 'react';
+import { getPlugins } from '../../../helpers/chart-utils';
+import { DOUBLE_CLICK } from '../constants/line-chart-consts';
+
+export const useChartPlugins = ({ options, resetZoom }) => {
+  const { graph, legend } = options;
+  const handleDoubleClick = useCallback(
+    (chart, args) => {
+      const { event } = args;
+      if (event.type === DOUBLE_CLICK) {
+        resetZoom();
+      }
+    },
+    [resetZoom],
+  );
+
+  return useMemo(() => {
+    return [
+      ...getPlugins(graph, legend),
+      {
+        id: 'customEventCatcher',
+        beforeEvent: handleDoubleClick,
+      },
+    ];
+  }, [handleDoubleClick]);
+};

package/src/components/line-chart/hooks/use-toggle-handler.js

@@ -0,0 +1,33 @@
+import { useCallback } from 'react';
+import {
+  DISABLE_DRAG_OPTIONS,
+  TOGGLE_DRAG_POINTS,
+  TOGGLE_LEGEND,
+  TOGGLE_LINE,
+  TOGGLE_PAN,
+  TOGGLE_POINTS,
+  TOGGLE_TABLE,
+  TOGGLE_ZOOM,
+} from '../state/action-types';
+
+export const useToggleHandlers = (dispatch) => {
+  const createToggleHandler = useCallback(
+    (type) => () => {
+      dispatch({ type });
+    },
+    [dispatch],
+  );
+
+  const toggleHandlers = {
+    onToggleLegend: createToggleHandler(TOGGLE_LEGEND),
+    onToggleLine: createToggleHandler(TOGGLE_LINE),
+    onTogglePan: createToggleHandler(TOGGLE_PAN),
+    onTogglePoints: createToggleHandler(TOGGLE_POINTS),
+    onToggleTable: createToggleHandler(TOGGLE_TABLE),
+    onToggleZoom: createToggleHandler(TOGGLE_ZOOM),
+    onToggleDragPoints: createToggleHandler(TOGGLE_DRAG_POINTS),
+    onDisableDragOptions: createToggleHandler(DISABLE_DRAG_OPTIONS),
+  };
+
+  return toggleHandlers;
+};