@oliasoft-open-source/charts-library 3.3.6-beta-5 → 3.3.6

package/src/components/line-chart/controls/drag-options.jsx

@@ -1,124 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import {
-  Button,
-  Flex,
-  Menu,
-  Text,
-} from '@oliasoft-open-source/react-ui-library';
-import { RiDragMove2Line, RiForbidLine, RiZoomInLine } from 'react-icons/ri';
-import { TbHandStop } from 'react-icons/tb';
-
-export const DragOptions = ({
-  onTogglePan,
-  onToggleZoom,
-  panEnabled,
-  zoomEnabled,
-  enableDragPoints,
-  isDragDataAllowed,
-  onToggleDragPoints,
-  onDisableDragOptions,
-  translations: {
-    dragToZoom,
-    doubleClickToReset,
-    dragToPan,
-    orDoubleClickToCanvas,
-    dragToMovePoints,
-    dragDisabled,
-  },
-}) => {
-  const options = useMemo(
-    () => [
-      {
-        buttonLabel: dragToZoom,
-        label: (
-          <Flex direction="column">
-            <Text>Drag to zoom</Text>
-            <Text small muted>
-              {doubleClickToReset}
-            </Text>
-          </Flex>
-        ),
-        icon: <RiZoomInLine />,
-        selected: zoomEnabled,
-        onClick: onToggleZoom,
-      },
-      {
-        buttonLabel: dragToPan,
-        label: (
-          <Flex direction="column">
-            <Text>Drag to pan</Text>
-            <Text small muted>
-              {orDoubleClickToCanvas}
-            </Text>
-          </Flex>
-        ),
-        icon: <RiDragMove2Line />,
-        selected: panEnabled,
-        onClick: onTogglePan,
-      },
-      ...(isDragDataAllowed
-        ? [
-            {
-              label: dragToMovePoints,
-              icon: <TbHandStop />,
-              selected: enableDragPoints,
-              type: 'Option',
-              onClick: onToggleDragPoints,
-            },
-          ]
-        : []),
-      {
-        label: dragDisabled,
-        icon: <RiForbidLine />,
-        selected: !zoomEnabled && !panEnabled && !enableDragPoints,
-        onClick: onDisableDragOptions,
-      },
-    ],
-    [zoomEnabled, panEnabled, enableDragPoints, isDragDataAllowed],
-  );
-
-  const selectedOption = options.find((option) => option.selected);
-  const optionsWithDragPoints = options.map(
-    ({ icon, label, onClick, selected }) => ({
-      icon,
-      label,
-      type: 'Option',
-      onClick,
-      disabled: selected,
-    }),
-  );
-
-  return (
-    <Menu
-      menu={{
-        sections: optionsWithDragPoints,
-        trigger: 'Component',
-        component: (
-          <Button
-            colored="muted"
-            basic
-            small
-            label={selectedOption.buttonLabel || selectedOption.label}
-            icon={selectedOption.icon}
-          />
-        ),
-      }}
-    />
-  );
-};
-
-DragOptions.defaultProps = {
-  enableDragPoints: false,
-};
-
-DragOptions.propTypes = {
-  onTogglePan: PropTypes.func.isRequired,
-  onToggleZoom: PropTypes.func.isRequired,
-  panEnabled: PropTypes.bool.isRequired,
-  zoomEnabled: PropTypes.bool.isRequired,
-  enableDragPoints: PropTypes.bool,
-  isDragDataAllowed: PropTypes.bool.isRequired,
-  onToggleDragPoints: PropTypes.func.isRequired,
-  onDisableDragOptions: PropTypes.func.isRequired,
-};

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

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
-import PropTypes from 'prop-types';
-import lineOnlyIcon from '../../../assets/icons/line-only.svg';
-import pointOnlyIcon from '../../../assets/icons/point-only.svg';
-import lineAndPointIcon from '../../../assets/icons/line-and-point.svg';
-
-export const LineOptions = ({
-  lineEnabled,
-  onToggleLine,
-  onTogglePoints,
-  pointsEnabled,
-  translations,
-}) => {
-  const options = [
-    {
-      label: translations.pointsLines,
-      icon: <Icon icon={lineAndPointIcon} />,
-      selected: pointsEnabled && lineEnabled,
-      onClick: () => {
-        onTogglePoints();
-      },
-    },
-    {
-      label: translations.linesOnly,
-      icon: <Icon icon={lineOnlyIcon} />,
-      selected: !pointsEnabled && lineEnabled,
-      onClick: () => {
-        onTogglePoints();
-        onToggleLine();
-      },
-    },
-    {
-      label: translations.pointsOnly,
-      icon: <Icon icon={pointOnlyIcon} />,
-      selected: pointsEnabled && !lineEnabled,
-      onClick: () => {
-        onToggleLine();
-      },
-    },
-  ];
-
-  const selectedOption = options.find((option) => option.selected);
-
-  return (
-    <Tooltip text={selectedOption.label} placement="bottom">
-      <Button
-        small
-        basic
-        colored="muted"
-        round
-        icon={selectedOption.icon}
-        onClick={selectedOption.onClick}
-      />
-    </Tooltip>
-  );
-};
-
-LineOptions.propTypes = {
-  lineEnabled: PropTypes.bool.isRequired,
-  onToggleLine: PropTypes.func.isRequired,
-  onTogglePoints: PropTypes.func.isRequired,
-  pointsEnabled: PropTypes.bool.isRequired,
-};

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

@@ -1,261 +0,0 @@
-import { useCallback } from 'react';
-import * as htmlToImage from 'html-to-image';
-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;
-    // Get the parent element that includes the legend
-    const canvasElement = chart?.canvas?.parentElement;
-    if (!canvasElement) return;
-
-    // Add temporary canvas background
-    const { ctx } = chart;
-    ctx.save();
-    ctx.globalCompositeOperation = 'destination-over';
-    const isDark = document.body.dataset.theme === 'dark';
-    ctx.fillStyle = isDark ? 'black' : 'white';
-    ctx.fillRect(0, 0, chart.width, chart.height);
-    ctx.restore();
-    const fileName = getChartFileName(state.axes);
-    htmlToImage.toPng(canvasElement).then((dataUrl) => {
-      triggerBase64Download(dataUrl, 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

@@ -1,181 +0,0 @@
-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 },
-    annotations: {
-      labelAnnotation: {
-        showLabel,
-        text,
-        position,
-        fontSize,
-        xOffset,
-        yOffset,
-        maxWidth,
-        lineHeight,
-      },
-    },
-    chartStyling: { layoutPadding },
-  } = 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: { ...legend, display: false }, // hide default legend for line chart only
-    [CUSTOM_LEGEND_PLUGIN_NAME]: options.legend.customLegend
-      .customLegendPlugin && {
-      containerID: options.legend.customLegend.customLegendContainerID,
-    },
-    chartAreaBorder: {
-      borderColor: BORDER_COLOR,
-    },
-    chartAreaText: {
-      showLabel,
-      text,
-      position,
-      fontSize,
-      xOffset,
-      yOffset,
-      maxWidth,
-      lineHeight,
-    },
-    ...dragData,
-  };
-
-  return useMemo(
-    () => ({
-      layout: {
-        padding: layoutPadding,
-      },
-      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

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

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

@@ -1,33 +0,0 @@
-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;
-};