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

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,
-    [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;
-};

package/src/components/line-chart/initialize/config.js

@@ -1,23 +0,0 @@
-import { INIT_KEYS } from '../constants/line-chart-consts';
-import { getTranslations } from '../utils/translations/get-translations';
-
-const config = {
-  [INIT_KEYS.TRANSLATIONS]: getTranslations(),
-  [INIT_KEYS.LANGUAGE_KEY]: 'en',
-};
-
-/**
- * Retrieve the value for the given key from the config object.
- * @param {string} key - The key to access the corresponding value in the config object.
- * @returns {*} - The value associated with the given key in the config object or config.
- */
-export const getConfig = (key) => (key ? config[key] : config);
-
-/**
- * Set a new value for the given key in the config object.
- * @param {string} key - The key to access the corresponding value in the config object.
- * @param {*} newValue - The new value to be set for the given key.
- */
-export const setConfig = (key, newValue) => {
-  config[key] = newValue;
-};

package/src/components/line-chart/initialize/initialize-line-chart.js

@@ -1,25 +0,0 @@
-import { INIT_KEYS } from '../constants/line-chart-consts';
-import { setConfig } from './config';
-import { getTranslations } from '../utils/translations/get-translations';
-import { isPrimitiveValue } from '../utils/line-chart-utils';
-
-/**
- * Initialize the charts library with the provided configurations.
- * This function will store the configuration options in a config object.
- * @param {object} options - An object containing the configuration options for the library.
- * @param {object} options.translations - The translations to be used in the library.
- * @param {string} options.languageKey - The language key to be stored in the config object, used for translations.
- * @param {...object} options - Any additional options to be stored in the config object.
- */
-export const initializeLineChart = ({ languageKey = 'en', ...options }) => {
-  setConfig(INIT_KEYS.LANGUAGE_KEY, languageKey);
-
-  Object.entries(options).forEach(([key, value]) => {
-    if (key === INIT_KEYS.TRANSLATIONS) {
-      setConfig(key, getTranslations(value));
-    } else {
-      const newValue = isPrimitiveValue(value) ? value : { ...value };
-      setConfig(key, newValue);
-    }
-  });
-};

package/src/components/line-chart/line-chart-prop-types.js

@@ -1,292 +0,0 @@
-import PropTypes from 'prop-types';
-import { TextLabelPosition } from './plugins/plugin-constants';
-
-export const LineChartPropTypes = {
-  table: PropTypes.node,
-  chart: PropTypes.shape({
-    persistenceId: PropTypes.string,
-    testId: PropTypes.string,
-    data: PropTypes.object.isRequired,
-    options: PropTypes.shape({
-      title: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string),
-      ]),
-      axes: PropTypes.shape({
-        x: PropTypes.arrayOf(
-          PropTypes.shape({
-            label: PropTypes.string,
-            position: PropTypes.oneOf(['top', 'bottom']),
-            color: PropTypes.string,
-            unit: PropTypes.shape({
-              options: PropTypes.arrayOf(PropTypes.string),
-              selectedUnit: PropTypes.string,
-              setSelectedUnit: PropTypes.func,
-            }),
-          }),
-        ),
-        y: PropTypes.arrayOf(
-          PropTypes.shape({
-            label: PropTypes.string,
-            position: PropTypes.oneOf(['left', 'right']),
-            color: PropTypes.string,
-          }),
-        ),
-      }),
-      additionalAxesOptions: PropTypes.shape({
-        chartScaleType: PropTypes.oneOf(['linear', 'logarithmic']),
-        reverse: PropTypes.bool,
-        beginAtZero: PropTypes.bool,
-        stepSize: PropTypes.number,
-        truncateAxisNumbersToDigitsCallback: PropTypes.number,
-        suggestedMin: PropTypes.number,
-        suggestedMax: PropTypes.number,
-        range: PropTypes.shape({
-          x: PropTypes.shape({
-            min: PropTypes.number,
-            max: PropTypes.number,
-          }),
-          y: PropTypes.shape({
-            min: PropTypes.number,
-            max: PropTypes.number,
-          }),
-        }),
-        autoAxisPadding: PropTypes.bool,
-      }),
-      chartStyling: PropTypes.shape({
-        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        maintainAspectRatio: PropTypes.bool,
-        staticChartHeight: PropTypes.bool,
-        performanceMode: PropTypes.bool,
-        squareAspectRatio: PropTypes.bool,
-        layoutPadding: PropTypes.oneOfType([
-          PropTypes.number,
-          PropTypes.shape({
-            top: PropTypes.number,
-            bottom: PropTypes.number,
-            left: PropTypes.number,
-            right: PropTypes.number,
-          }),
-        ]),
-      }),
-      tooltip: PropTypes.shape({
-        tooltips: PropTypes.bool,
-        showLabelsInTooltips: PropTypes.bool,
-        hideSimulationName: PropTypes.bool,
-      }),
-      graph: PropTypes.shape({
-        lineTension: PropTypes.number,
-        spanGaps: PropTypes.bool,
-        showDataLabels: PropTypes.bool,
-        showMinorGridlines: PropTypes.bool,
-      }),
-      annotations: PropTypes.shape({
-        labelAnnotation: PropTypes.shape({
-          showLabel: PropTypes.bool,
-          text: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.arrayOf(PropTypes.string),
-          ]),
-          position: PropTypes.string,
-          fontSize: PropTypes.number,
-          xOffset: PropTypes.number,
-          yOffset: PropTypes.number,
-          maxWidth: PropTypes.number,
-          lineHeight: PropTypes.number,
-        }),
-        showAnnotations: PropTypes.bool,
-        controlAnnotation: PropTypes.bool,
-        annotationsData: PropTypes.arrayOf(
-          PropTypes.shape({
-            adjustScaleRange: PropTypes.bool,
-            annotationAxis: PropTypes.oneOf(['x', 'y']),
-            color: PropTypes.string,
-            endValue: PropTypes.number,
-            label: PropTypes.string,
-            type: PropTypes.string,
-            value: PropTypes.number,
-            xMin: PropTypes.number,
-            xMax: PropTypes.number,
-            yMin: PropTypes.number,
-            yMax: PropTypes.number,
-          }),
-        ),
-      }),
-      legend: PropTypes.shape({
-        display: PropTypes.bool,
-        position: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
-        align: PropTypes.oneOf(['start', 'center', 'end']),
-        customLegend: PropTypes.shape({
-          customLegendPlugin: PropTypes.object,
-          customLegendContainerID: PropTypes.string,
-        }),
-      }),
-      chartOptions: PropTypes.shape({
-        showPoints: PropTypes.bool,
-        enableZoom: PropTypes.bool,
-        enablePan: PropTypes.bool,
-        closeOnOutsideClick: PropTypes.bool,
-      }),
-      interactions: PropTypes.shape({
-        onLegendClick: PropTypes.func,
-        onPointHover: PropTypes.func,
-        onPointUnhover: PropTypes.func,
-        onAnimationComplete: PropTypes.func,
-      }),
-      depthType: PropTypes.shape({
-        options: PropTypes.arrayOf(PropTypes.string),
-        selectedDepthType: PropTypes.string,
-        setSelectedDepthType: PropTypes.func,
-      }),
-      dragData: PropTypes.shape({
-        enableDragData: PropTypes.bool,
-        showTooltip: PropTypes.bool,
-        roundPoints: PropTypes.bool,
-        dragX: PropTypes.bool,
-        dragY: PropTypes.bool,
-        onDragStart: PropTypes.func,
-        onDrag: PropTypes.func,
-        onDragEnd: PropTypes.func,
-      }),
-    }),
-  }).isRequired,
-};
-
-export const getDefaultProps = (props) => {
-  // Add missing nested objects
-  props.chart.options = props.chart.options || {};
-  props.chart.options.axes = props.chart.options.axes || {};
-  props.chart.options.additionalAxesOptions =
-    props.chart.options.additionalAxesOptions || {};
-  props.chart.options.chartStyling = props.chart.options.chartStyling || {};
-  props.chart.options.tooltip = props.chart.options.tooltip || {};
-  props.chart.options.graph = props.chart.options.graph || {};
-  props.chart.options.annotations = props.chart.options.annotations || {};
-  props.chart.options.legend = props.chart.options.legend || {};
-  props.chart.options.legend.customLegend = props.chart.options.legend
-    .customLegend || { customLegendPlugin: null, customLegendContainerID: '' };
-  props.chart.options.chartOptions = props.chart.options.chartOptions || {};
-  props.chart.options.interactions = props.chart.options.interactions || {};
-  props.chart.options.dragData = props.chart.options.dragData || {};
-  // Set defaults for missing properties
-  const chart = {
-    persistenceId: props.chart.persistenceId ?? '',
-    testId: props.chart.testId ?? null,
-    data: props.chart.data,
-    options: {
-      title: props.chart.options.title || '',
-      axes: {
-        x: props.chart.options.axes.x || [{}],
-        y: props.chart.options.axes.y || [{}],
-      },
-      additionalAxesOptions: {
-        chartScaleType:
-          props.chart.options.additionalAxesOptions.chartScaleType || 'linear',
-        reverse: props.chart.options.additionalAxesOptions.reverse || false,
-        beginAtZero:
-          props.chart.options.additionalAxesOptions.beginAtZero || false,
-        stepSize: props.chart.options.additionalAxesOptions.stepSize,
-        truncateAxisNumbersToDigitsCallback:
-          props.chart.options.additionalAxesOptions
-            .truncateAxisNumbersToDigitsCallback,
-        suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
-        suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
-        range: props.chart.options.additionalAxesOptions.range,
-        autoAxisPadding:
-          props.chart.options.additionalAxesOptions.autoAxisPadding ?? false,
-      },
-      chartStyling: {
-        width: props.chart.options.chartStyling.width,
-        height: props.chart.options.chartStyling.height,
-        maintainAspectRatio:
-          props.chart.options.chartStyling.maintainAspectRatio || false,
-        staticChartHeight:
-          props.chart.options.chartStyling.staticChartHeight || false,
-        performanceMode:
-          props.chart.options.chartStyling.performanceMode ?? true,
-        squareAspectRatio:
-          props.chart.options.chartStyling.squareAspectRatio || false,
-        layoutPadding: props.chart.options.chartStyling.layoutPadding || {
-          top: 0,
-          bottom: 20,
-          left: 0,
-          right: 0,
-        },
-      },
-      tooltip: {
-        tooltips: props.chart.options.tooltip.tooltips ?? true,
-        showLabelsInTooltips:
-          props.chart.options.tooltip.showLabelsInTooltips || false,
-        hideSimulationName:
-          props.chart.options.tooltip.hideSimulationName || false,
-      },
-      graph: {
-        lineTension: props.chart.options.graph.lineTension || 0.01,
-        spanGaps: props.chart.options.graph.spanGaps || false,
-        showDataLabels: props.chart.options.graph.showDataLabels || false,
-        showMinorGridlines:
-          props.chart.options.graph.showMinorGridlines || false,
-      },
-      annotations: {
-        labelAnnotation: {
-          showLabel:
-            props.chart.options.annotations.labelAnnotation?.showLabel ?? false,
-          text: props.chart.options.annotations.labelAnnotation?.text ?? '',
-          position:
-            props.chart.options.annotations.labelAnnotation?.position ??
-            TextLabelPosition.BOTTOM_RIGHT,
-          fontSize:
-            props.chart.options.annotations.labelAnnotation?.fontSize ?? 12,
-          xOffset:
-            props.chart.options.annotations.labelAnnotation?.xOffset ?? 5,
-          yOffset:
-            props.chart.options.annotations.labelAnnotation?.yOffset ?? 5,
-          maxWidth:
-            props.chart.options.annotations.labelAnnotation?.maxWidth ?? 300,
-          lineHeight:
-            props.chart.options.annotations.labelAnnotation?.lineHeight ?? 12,
-        },
-        showAnnotations:
-          props.chart.options.annotations.showAnnotations ?? false,
-        controlAnnotation:
-          props.chart.options.annotations.controlAnnotation || false,
-        annotationsData: props.chart.options.annotations.annotationsData || [],
-      },
-      legend: {
-        display: props.chart.options.legend.display ?? true,
-        position: props.chart.options.legend.position || 'bottom',
-        align: props.chart.options.legend.align || 'center',
-        customLegend: props.chart.options.legend.customLegend,
-        usePointStyle: props.chart.options.legend.usePointStyle ?? true,
-      },
-      chartOptions: {
-        showPoints: props.chart.options.chartOptions.showPoints ?? true,
-        enableZoom: props.chart.options.chartOptions.enableZoom || true,
-        enablePan: props.chart.options.chartOptions.enablePan || false,
-        showLine: props.chart.options.chartOptions.showLine ?? true,
-        closeOnOutsideClick:
-          props.chart.options.chartOptions.closeOnOutsideClick || false,
-      },
-      interactions: {
-        onLegendClick: props.chart.options.interactions.onLegendClick,
-        onPointHover: props.chart.options.interactions.onPointHover,
-        onPointUnhover: props.chart.options.interactions.onPointUnhover,
-        onAnimationComplete:
-          props.chart.options.interactions.onAnimationComplete,
-      },
-      depthType: props.chart.options.depthType,
-      dragData: {
-        enableDragData: props.chart.options.dragData.enableDragData || false,
-        showTooltip: props.chart.options.dragData.showTooltip || true,
-        roundPoints: props.chart.options.dragData.roundPoints || true,
-        dragX: props.chart.options.dragData.dragX || true,
-        dragY: props.chart.options.dragData.dragY || true,
-        onDragStart: props.chart.options.dragData.onDragStart,
-        onDrag: props.chart.options.dragData.onDrag,
-        onDragEnd: props.chart.options.dragData.onDragEnd,
-      },
-    },
-  };
-  return chart;
-};