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

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

@@ -1,10 +1,4 @@
-import React, {
-  useEffect,
-  useLayoutEffect,
-  useReducer,
-  useRef,
-  useState,
-} from 'react';
+import React, { useMemo, useReducer, useRef } from 'react';
 import {
   CategoryScale,
   Chart as ChartJS,
@@ -22,66 +16,21 @@ import zoomPlugin from 'chartjs-plugin-zoom';
 import dataLabelsPlugin from 'chartjs-plugin-datalabels';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import dragDataPlugin from 'chartjs-plugin-dragdata';
-import { triggerBase64Download } from 'react-base64-downloader';
 import styles from './line-chart.module.less';
 import { reducer } from './state/line-chart-reducer';
 import initialState from './state/initial-state';
-import {
-  DISABLE_DRAG_OPTIONS,
-  RESET_AXES_RANGES,
-  SAVE_INITIAL_AXES_RANGES,
-  TOGGLE_ANNOTATION,
-  TOGGLE_DRAG_POINTS,
-  TOGGLE_LEGEND,
-  TOGGLE_LINE,
-  TOGGLE_PAN,
-  TOGGLE_POINTS,
-  TOGGLE_TABLE,
-  TOGGLE_ZOOM,
-  UPDATE_AXES_RANGES,
-} from './state/action-types';
-import Controls from '../controls/controls';
+import Controls from './controls/controls';
 import { getDefaultProps, LineChartPropTypes } from './line-chart-prop-types';
-import getLineChartToolTips from './get-line-chart-tooltips';
-import getLineChartDataLabels from './get-line-chart-data-labels';
-import {
-  BORDER_JOIN_STYLE,
-  DEFAULT_BACKGROUND_COLOR,
-  DEFAULT_BORDER_WIDTH,
-  DEFAULT_HOVER_RADIUS,
-  DEFAULT_LINE_POINT_RADIUS,
-  DEFAULT_POINT_RADIUS,
-  ZOOM_BOX_BACKGROUND_COLOR,
-} from './line-chart-consts';
-
-import getAnnotation from '../../helpers/get-chart-annotation';
-import {
-  generateRandomColor,
-  getChartFileName,
-  getClassName,
-  getLegend,
-  getPlugins,
-  setDefaultTheme,
-} from '../../helpers/chart-utils';
-import {
-  ANIMATION_DURATION,
-  AUTO,
-  BORDER_COLOR,
-  COLORS,
-  CUSTOM_LEGEND_PLUGIN_NAME,
-} from '../../helpers/chart-consts';
-import {
-  AxisType,
-  ChartHoverMode,
-  Key,
-  PanZoomMode,
-  PointStyle,
-} from '../../helpers/enums';
-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 { getClassName, setDefaultTheme } from '../../helpers/chart-utils';
+import { AUTO } from '../../helpers/chart-consts';
+import { generateLineChartDatasets } from './utils/generate-line-chart-datasets';
+import { useChartFunctions } from './hooks/use-chart-functions';
+import { useChartOptions } from './hooks/use-chart-options';
+import { useChartPlugins } from './hooks/use-chart-plugins';
+import { generateKey } from './utils/line-chart-utils';
+import { useChartState } from './state/use-chart-state';
+import { defaultTranslations } from './constants/default-translations';
+import { getTranslations } from './utils/get-translations/get-translations';
 
 ChartJS.register(
   LinearScale,
@@ -106,21 +55,16 @@ ChartJS.register(
 const LineChart = (props) => {
   setDefaultTheme();
   const chartRef = useRef(null);
-  const [hoveredPoint, setHoveredPoint] = useState(null);
+  const { table, translations: translationsRaw } = props;
+  const translations = getTranslations(translationsRaw);
   const chart = getDefaultProps(props);
-  const { options, testId, persistenceId } = chart;
-  const { headerComponent, subheaderComponent, table } = props;
   const {
-    additionalAxesOptions,
-    annotations,
-    axes,
-    chartStyling,
-    graph,
-    interactions,
-    legend,
-    depthType,
-    dragData,
-  } = options;
+    data: { datasets },
+    options,
+    testId,
+    persistenceId,
+  } = chart;
+  const { annotations, axes, chartStyling, graph } = options;
 
   /**
    * @type {[object, import('react').Dispatch<{type: String, payload: any}>]}  useReducer
@@ -134,269 +78,39 @@ 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);
-
-  const generateLineChartDatasets = (datasets) => {
-    const copyDataset = [...datasets];
-
-    // Add annotations to dataset to have them appear in legend.
-    if (
-      annotations.controlAnnotation &&
-      annotations.showAnnotations &&
-      annotations.annotationsData?.length
-    ) {
-      annotations.annotationsData.forEach((annotation, index) => {
-        const color = annotation.color || COLORS[index];
-        copyDataset.push({
-          isAnnotation: true,
-          label: annotation.label,
-          annotationIndex: index,
-          backgroundColor: color,
-          pointBackgroundColor: color,
-          borderColor: color,
-          data: [{}],
-        });
-      });
-    }
-
-    const generatedDatasets = copyDataset.map((line, i) => {
-      if (line.formation) {
-        const axesMin = state.axes[0]?.min;
-        const axesMax = state.axes[0]?.max;
-        // line with formation flag has 3 points: start point, mid-point with label, and end point.
-        const [startPoint, midPointWithLabel, endPoint] = line.data;
-
-        if (axesMin && startPoint?.x) {
-          line.data[0].x = axesMin < startPoint?.x ? axesMin : startPoint?.x;
-        }
-
-        if (axesMax && endPoint?.x) {
-          line.data[2].x = axesMax > endPoint?.x ? axesMax : endPoint?.x;
-        }
-      }
-      /*
-        Remove invalid falsy data points OW-9855
-        Points should be an object of {x, y} pairs
-        This is an extra guard to prevent crashes if parent apps pass bad inputs
-      */
-      line.data = line?.data?.filter(Boolean) || [];
-
-      line.showLine = state.lineEnabled;
-      const linePointRadius = line.pointRadius
-        ? parseFloat(line.pointRadius)
-        : DEFAULT_POINT_RADIUS;
-      const pointHoverRadius = line.pointHoverRadius
-        ? parseFloat(line.pointHoverRadius)
-        : DEFAULT_HOVER_RADIUS;
-      const indexedColor = COLORS[i];
-
-      return {
-        ...line,
-        lineTension: graph.lineTension,
-        spanGaps: graph.spanGaps,
-        borderWidth: parseFloat(line.borderWidth) || DEFAULT_BORDER_WIDTH,
-        borderDash: line.borderDash || [],
-        borderJoinStyle: BORDER_JOIN_STYLE,
-        borderColor:
-          line.borderColor || indexedColor || generateRandomColor(COLORS),
-        backgroundColor: line.backgroundColor || DEFAULT_BACKGROUND_COLOR,
-        pointBackgroundColor:
-          line.pointBackgroundColor ||
-          indexedColor ||
-          generateRandomColor(COLORS),
-        pointRadius:
-          state.pointsEnabled === true
-            ? linePointRadius
-            : DEFAULT_LINE_POINT_RADIUS,
-        pointHoverRadius,
-        pointHitRadius: line.pointHitRadius || pointHoverRadius,
-      };
-    });
-    return generatedDatasets;
-  };
-
-  const generatedDatasets = generateLineChartDatasets(chart.data.datasets);
-
-  const legendClick = (e, legendItem) => {
-    const index = legendItem.datasetIndex;
-    const chartInstance = chartRef.current;
-    const { datasets } = chartInstance.data;
-    const dataset = datasets[index];
-    const meta = chartInstance.getDatasetMeta(index);
-    meta.hidden = meta.hidden === null ? !dataset.hidden : null;
+  const generatedDatasets = useMemo(() => {
+    return generateLineChartDatasets(datasets, state, options, translations);
+  }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
 
-    if (annotations.controlAnnotation && dataset.isAnnotation) {
-      const { annotationIndex } = dataset;
-      dispatch({ type: TOGGLE_ANNOTATION, payload: { annotationIndex } });
-    }
+  // Call the custom hooks.
+  useChartState({ chartRef, options, state, dispatch, persistenceId });
 
-    // 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 (interactions.onLegendClick) {
-      interactions.onLegendClick(legendItem?.text, legendItem.hidden);
-    }
-
-    chartInstance.update();
-  };
-
-  const resetZoom = () => {
-    const chartInstance = chartRef.current;
-    chartInstance.resetZoom();
-    dispatch({ type: RESET_AXES_RANGES });
-  };
-
-  const onHover = (evt, hoveredItems) => {
-    if (!hoveredItems?.length && interactions.onPointUnhover && hoveredPoint) {
-      setHoveredPoint(null);
-      interactions.onPointUnhover(evt);
-    }
-
-    if (hoveredItems?.length && interactions.onPointHover) {
-      const { index, datasetIndex } = hoveredItems[0];
-      const dataset = generatedDatasets[datasetIndex];
-      const point = dataset?.data[index];
-
-      if (point && hoveredPoint !== point) {
-        setHoveredPoint(point);
-        interactions.onPointHover(evt, datasetIndex, index, generatedDatasets);
-      }
-    }
-  };
-
-  const handleDownload = () => {
-    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);
-  };
-
-  const handleKeyDown = (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();
-    }
-  };
-
-  const handleKeyUp = (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();
-    }
-  };
-
-  const getControlsAxes = () => {
-    return 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;
-      // we need to get all axes element to array to set unit.
-      const axesArray = axes.x.concat(axes.y);
-      const unit = axesArray?.[i]?.unit;
-      return {
-        ...axis,
-        //only add min and max properties if they are defined:
-        ...(min ? { min } : {}),
-        ...(max ? { max } : {}),
-        ...(unit ? { unit } : {}),
-      };
+  const { resetZoom, handleDownload, handleKeyDown, handleKeyUp } =
+    useChartFunctions({
+      chartRef,
+      state,
+      options,
+      dispatch,
+      generatedDatasets,
     });
-  };
-  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 useOptions = useChartOptions({
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets,
+  });
 
-  const controlsAxesLabels = getControlsAxesLabels(props.chart.options.axes);
-
-  const updateAxesRangesFromChart = (chart) => {
-    const { scales = {} } = chart || {};
-    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 },
-    });
-  };
+  const usePlugins = useChartPlugins({ options, resetZoom });
 
   return (
     <div
+      key={generateKey([
+        state.enableDragPoints,
+        state.zoomEnabled,
+        state.panEnabled,
+      ])}
       className={getClassName(chartStyling, styles)}
       style={{
         width: chartStyling.width || AUTO,
@@ -408,132 +122,25 @@ const LineChart = (props) => {
       data-testid={testId}
     >
       <Controls
-        axes={controlsAxes}
-        controlsAxesLabels={controlsAxesLabels}
-        chart={chart}
-        headerComponent={headerComponent}
-        legendEnabled={state.legendEnabled}
-        lineEnabled={state.lineEnabled}
-        onDownload={handleDownload}
-        onResetAxes={() => {
-          dispatch({ type: RESET_AXES_RANGES });
-        }}
-        onUpdateAxes={({ axes }) => {
-          dispatch({ type: UPDATE_AXES_RANGES, payload: { axes } });
-        }}
-        onToggleLegend={() => dispatch({ type: TOGGLE_LEGEND })}
-        onToggleLine={() => dispatch({ type: TOGGLE_LINE })}
-        onTogglePan={() => dispatch({ type: TOGGLE_PAN })}
-        onTogglePoints={() => dispatch({ type: TOGGLE_POINTS })}
-        onToggleTable={() => dispatch({ type: TOGGLE_TABLE })}
-        onToggleZoom={() => dispatch({ type: TOGGLE_ZOOM })}
-        panEnabled={state.panEnabled}
-        pointsEnabled={state.pointsEnabled}
-        initialAxesRanges={state.initialAxesRanges}
-        showTable={state.showTable}
-        subheaderComponent={subheaderComponent}
-        table={table}
-        zoomEnabled={state.zoomEnabled}
-        depthType={depthType}
-        enableDragPoints={state.enableDragPoints}
-        isDragDataAllowed={dragData.enableDragData}
-        onToggleDragPoints={() => dispatch({ type: TOGGLE_DRAG_POINTS })}
-        onDisableDragOptions={() => dispatch({ type: DISABLE_DRAG_OPTIONS })}
+        props={props}
+        chartRef={chartRef}
+        state={state}
+        options={options}
+        dispatch={dispatch}
+        generatedDatasets={generatedDatasets}
+        translations={translations}
       />
       {table && state.showTable ? (
         <div className={styles.table}>{table}</div>
       ) : (
         <div className={styles.canvas}>
           <Line
-            key={generateKey([
-              state.enableDragPoints,
-              state.zoomEnabled,
-              state.panEnabled,
-            ])}
             ref={chartRef}
             data={{
               datasets: generatedDatasets,
             }}
-            options={{
-              onHover,
-              maintainAspectRatio: chartStyling.maintainAspectRatio,
-              aspectRatio: chartStyling.squareAspectRatio ? 1 : null, // 1 equals square aspect ratio
-              animation: chartStyling.performanceMode
-                ? false
-                : {
-                    duration: ANIMATION_DURATION.FAST,
-                    onComplete: interactions.onAnimationComplete,
-                  },
-              hover: {
-                mode: ChartHoverMode.Nearest,
-                intersect: true,
-              },
-              elements: {
-                line: {
-                  pointStyle: PointStyle.Circle,
-                  showLine: state.lineEnabled,
-                },
-              },
-              scales: autoScale(options, state, generatedDatasets),
-              plugins: {
-                // title: getTitle(options),
-                datalabels: getLineChartDataLabels(options),
-                annotation: getAnnotation(options, state),
-                zoom: {
-                  pan: {
-                    enabled: state.panEnabled,
-                    mode: PanZoomMode.XY,
-                    onPanComplete({ chart }) {
-                      updateAxesRangesFromChart(chart);
-                    },
-                  },
-                  zoom: {
-                    mode: PanZoomMode.XY,
-                    drag: {
-                      enabled: state.zoomEnabled,
-                      threshold: 3,
-                      backgroundColor: ZOOM_BOX_BACKGROUND_COLOR,
-                      borderColor: BORDER_COLOR,
-                      borderWidth: 1,
-                    },
-                    onZoomComplete({ chart }) {
-                      updateAxesRangesFromChart(chart);
-                    },
-                  },
-                },
-                tooltip: getLineChartToolTips(options),
-                legend: getLegend(options, legendClick, state),
-                [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
-                  .customLegendPlugin && {
-                  containerID:
-                    options.legend.customLegend.customLegendContainerID,
-                },
-                chartAreaBorder: {
-                  borderColor: BORDER_COLOR,
-                },
-                ...(state.enableDragPoints ? getDraggableData(options) : {}),
-              },
-              events: [
-                'mousemove',
-                'mouseout',
-                'click',
-                'touchstart',
-                'touchmove',
-                'dblclick',
-              ],
-            }}
-            plugins={[
-              ...getPlugins(graph, legend, state),
-              {
-                id: 'customEventCatcher',
-                beforeEvent(chart, args, pluginOptions) {
-                  const { event } = args;
-                  if (event.type === 'dblclick') {
-                    resetZoom();
-                  }
-                },
-              },
-            ]}
+            options={useOptions}
+            plugins={usePlugins}
           />
         </div>
       )}

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

@@ -1,24 +1,23 @@
 import { AxisType } from '../../../helpers/enums';
 import { setAnnotations } from '../../../helpers/chart-utils';
-import { generateAxisId } from '../line-chart-utils';
+import { generateAxisId } from '../utils/line-chart-utils';
 import { getChartStateFromStorage } from './manage-state-in-local-storage';
 
 /**
-
  Initial chart state for the line chart.
+
  @param {Object} options - The chart options.
  @return {Object} The initial chart state.
  */
 const initialState = ({ options, persistenceId }) => {
   const {
     additionalAxesOptions: { range: customAxesRange },
-    annotations,
+    annotations: { annotationsData },
     axes,
-    chartOptions,
-    legend,
+    chartOptions: { enableZoom, enablePan, showPoints, showLine },
+    legend: { display },
     dragData,
   } = options;
-  const { enableZoom, enablePan, showPoints, showLine } = chartOptions;
   /**
    * getStateAxesByType
    * @param {'x'|'y'} axisType
@@ -79,9 +78,9 @@ const initialState = ({ options, persistenceId }) => {
     panEnabled: panEnabled ?? enablePan,
     pointsEnabled: pointsEnabled ?? showPoints,
     lineEnabled: lineEnabled ?? showLine,
-    legendEnabled: legendEnabled ?? legend.display,
+    legendEnabled: legendEnabled ?? display,
     axes: stateAxes,
-    showAnnotationLineIndex: setAnnotations(annotations.annotationsData),
+    showAnnotationLineIndex: setAnnotations(annotationsData),
     showTable: false,
     enableDragPoints: dragData.enableDragData && enableDragPoints,
   };