@oliasoft-open-source/charts-library 2.17.6 → 2.18.0-beta-2

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

@@ -1,174 +0,0 @@
-import React from 'react';
-import { Button, Text, Tooltip } from '@oliasoft-open-source/react-ui-library';
-import {
-  RiFileDownloadLine,
-  RiLineChartLine,
-  RiTableLine,
-} from 'react-icons/ri';
-import PropTypes from 'prop-types';
-import { LineOptions } from './line-options';
-import { DragOptions } from './drag-options';
-import { LegendOptions } from './legend-options';
-import styles from './controls.module.less';
-import { useToggleHandlers } from '../hooks/use-toggle-handler';
-import { useChartFunctions } from '../hooks/use-chart-functions';
-import { AxesOptions } from '../../controls/axes-options/axes-options';
-
-const Controls = ({
-  props: { headerComponent, subheaderComponent, table },
-  chartRef,
-  state,
-  options,
-  dispatch,
-  generatedDatasets,
-  translations,
-}) => {
-  const {
-    enableDragPoints,
-    initialAxesRanges,
-    legendEnabled,
-    lineEnabled,
-    panEnabled,
-    pointsEnabled,
-    showTable,
-    zoomEnabled,
-  } = state;
-  const { dragData } = options;
-  const {
-    onToggleLegend,
-    onToggleLine,
-    onTogglePan,
-    onTogglePoints,
-    onToggleTable,
-    onToggleZoom,
-    onToggleDragPoints,
-    onDisableDragOptions,
-  } = useToggleHandlers(dispatch);
-  const {
-    handleDownload,
-    controlsAxes,
-    controlsAxesLabels,
-    onResetAxes,
-    onUpdateAxes,
-  } = useChartFunctions({
-    chartRef,
-    state,
-    options,
-    dispatch,
-    generatedDatasets,
-  });
-
-  return (
-    <>
-      <div className={styles.controls}>
-        {!!options.title && <Text bold>{options.title}</Text>}
-        {headerComponent}
-        <div className={styles.buttons}>
-          {!showTable && (
-            <>
-              <AxesOptions
-                initialAxesRanges={initialAxesRanges}
-                axes={controlsAxes}
-                controlsAxesLabels={controlsAxesLabels}
-                onUpdateAxes={onUpdateAxes}
-                onResetAxes={onResetAxes}
-                depthType={options.depthType}
-                translations={translations}
-              />
-              <LineOptions
-                lineEnabled={lineEnabled}
-                pointsEnabled={pointsEnabled}
-                onToggleLine={onToggleLine}
-                onTogglePoints={onTogglePoints}
-                translations={translations}
-              />
-              <LegendOptions
-                legendEnabled={legendEnabled}
-                onToggleLegend={onToggleLegend}
-                translations={translations}
-              />
-              <Tooltip text={translations.downloadAsPNG} placement="bottom-end">
-                <Button
-                  small
-                  basic
-                  colored="muted"
-                  round
-                  icon={<RiFileDownloadLine />}
-                  onClick={handleDownload}
-                />
-              </Tooltip>
-              <DragOptions
-                panEnabled={panEnabled}
-                zoomEnabled={zoomEnabled}
-                onTogglePan={onTogglePan}
-                onToggleZoom={onToggleZoom}
-                enableDragPoints={enableDragPoints}
-                isDragDataAllowed={dragData.enableDragData}
-                onToggleDragPoints={onToggleDragPoints}
-                onDisableDragOptions={onDisableDragOptions}
-                translations={translations}
-              />
-            </>
-          )}
-
-          {table ? (
-            <Tooltip
-              text={showTable ? translations.showChart : translations.showTable}
-              placement="bottom-end"
-            >
-              <Button
-                small
-                basic
-                colored="muted"
-                round
-                icon={showTable ? <RiLineChartLine /> : <RiTableLine />}
-                onClick={onToggleTable}
-              />
-            </Tooltip>
-          ) : null}
-        </div>
-      </div>
-      {subheaderComponent}
-    </>
-  );
-};
-
-Controls.defaultProps = {
-  props: {
-    headerComponent: null,
-    subheaderComponent: null,
-    table: null,
-  },
-  state: {
-    initialAxesRanges: [],
-  },
-  options: {},
-};
-
-Controls.propTypes = {
-  props: PropTypes.shape({
-    headerComponent: PropTypes.node,
-    subheaderComponent: PropTypes.node,
-    table: PropTypes.node,
-  }),
-  chartRef: PropTypes.object.isRequired,
-  state: PropTypes.shape({
-    enableDragPoints: PropTypes.bool,
-    initialAxesRanges: PropTypes.arrayOf(PropTypes.shape({})),
-    legendEnabled: PropTypes.bool,
-    lineEnabled: PropTypes.bool,
-    panEnabled: PropTypes.bool,
-    pointsEnabled: PropTypes.bool,
-    showTable: PropTypes.bool,
-    zoomEnabled: PropTypes.bool,
-  }),
-  options: PropTypes.shape({
-    dragData: PropTypes.shape({
-      enableDragData: PropTypes.bool,
-    }),
-  }),
-  dispatch: PropTypes.func.isRequired,
-  generatedDatasets: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
-
-export default Controls;

package/src/components/line-chart/controls/controls.module.less

@@ -1,12 +0,0 @@
-.controls {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.buttons {
-  display: flex;
-  margin-left: auto;
-  gap: 4px;
-}

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

@@ -1,112 +0,0 @@
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { 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={{
-        label: selectedOption.buttonLabel || selectedOption.label,
-        sections: optionsWithDragPoints,
-        trigger: 'DropDownButton',
-        small: true,
-      }}
-    />
-  );
-};
-
-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/legend-options.jsx

@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, Icon, Tooltip } from '@oliasoft-open-source/react-ui-library';
-import { RiListUnordered } from 'react-icons/ri';
-import listHideIcon from '../../../assets/icons/list-hide.svg';
-
-export const LegendOptions = ({
-  legendEnabled,
-  onToggleLegend,
-  translations: { hideLegend, showLegend },
-}) => {
-  const tooltipText = legendEnabled ? hideLegend : showLegend;
-  const icon = legendEnabled ? (
-    <RiListUnordered />
-  ) : (
-    <Icon icon={listHideIcon} />
-  );
-
-  return (
-    <Tooltip text={tooltipText} placement="bottom">
-      <Button
-        small
-        basic
-        colored="muted"
-        round
-        icon={icon}
-        onClick={onToggleLegend}
-      />
-    </Tooltip>
-  );
-};
-
-LegendOptions.propTypes = {
-  legendEnabled: PropTypes.bool.isRequired,
-  onToggleLegend: 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,257 +0,0 @@
-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,
-  };
-};