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

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

@@ -1,141 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { isEqual } from 'lodash';
-import { storeChartStateInStorage } from './manage-state-in-local-storage';
-import { SAVE_INITIAL_AXES_RANGES, UPDATE_AXES_RANGES } from './action-types';
-import { getAxesRangesFromChart } from '../utils/get-axes-ranges-from-chart';
-
-/**
- * Hook for toggling the visibility of the custom legend.
- *
- * @param memoState - The memoized state object.
- * @param memoOptions - The memoized options object.
- */
-const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
-  useEffect(() => {
-    if (memoOptions.legend.customLegend.customLegendPlugin) {
-      // Get the parent element of the custom legend container and toggle its visibility based on the state.
-      const parent = document.getElementById(
-        memoOptions.legend.customLegend.customLegendContainerID,
-      );
-      parent.style.visibility = memoState.legendEnabled ? 'visible' : 'hidden';
-    }
-  }, [
-    memoOptions.legend.customLegend.customLegendPlugin,
-    memoState.legendEnabled,
-  ]);
-};
-
-/**
- * Hook for storing the chart state in local storage.
- *
- * @param memoState - The memoized state object.
- * @param persistenceId - The chart persistenceId.
- */
-const useStoreChartStateInStorage = (memoState, persistenceId) => {
-  useEffect(() => {
-    // Store the chart state in local storage.
-    storeChartStateInStorage(memoState, persistenceId);
-  }, [
-    memoState.panEnabled,
-    memoState.lineEnabled,
-    memoState.pointsEnabled,
-    memoState.legendEnabled,
-    memoState.enableDragPoints,
-    memoState.zoomEnabled,
-  ]);
-};
-
-/**
- * Hook for updating the axes ranges in the chart state.
- *
- * @param range - The range to the chart.
- * @param dispatch - The dispatch function for state management.
- */
-const useUpdateAxesRanges = (range, dispatch) => {
-  const prevRange = useRef();
-
-  const updateAxesRanges = useCallback(() => {
-    if (range && range.x && range.y && !isEqual(range, prevRange.current)) {
-      const axes = Object.entries(range).map(([key, { min, max }]) => ({
-        id: key,
-        min: min ?? 0,
-        max: max ?? 0,
-      }));
-      dispatch({
-        type: UPDATE_AXES_RANGES,
-        payload: { axes },
-      });
-      prevRange.current = range;
-    }
-  }, [range]);
-
-  useEffect(() => {
-    updateAxesRanges();
-  }, [updateAxesRanges]);
-};
-
-/**
- * A custom hook to save the initial axes ranges of a chart when the generated datasets change.
- *
- * @param {Object} chartRef - A reference to the chart object.
- * @param {Array} axes - An array of axes configurations.
- * @param {Array} generatedDatasets - An array of generated datasets for the chart.
- * @param {Function} dispatch - A dispatch function from the useContext hook for managing the state.
- */
-const useSaveInitialAxesRanges = (
-  chartRef,
-  axes,
-  generatedDatasets,
-  dispatch,
-) => {
-  const prevGeneratedDatasets = useRef();
-
-  const saveInitialAxesRanges = useCallback(() => {
-    if (
-      chartRef &&
-      !isEqual(generatedDatasets, prevGeneratedDatasets.current)
-    ) {
-      const initialAxesRanges = getAxesRangesFromChart(chartRef, axes);
-      dispatch({
-        type: SAVE_INITIAL_AXES_RANGES,
-        payload: { initialAxesRanges },
-      });
-      prevGeneratedDatasets.current = generatedDatasets;
-    }
-  }, [chartRef, generatedDatasets]);
-
-  useEffect(() => {
-    saveInitialAxesRanges();
-  }, [saveInitialAxesRanges, generatedDatasets]);
-};
-
-/**
- * Hook for managing the state of the chart.
- *
- * @param chartRef - The reference to the chart.
- * @param options - The chart options.
- * @param state - The chart state.
- * @param {Array} generatedDatasets - An array of generated datasets for the chart.
- * @param dispatch - The dispatch function for state management.
- * @param persistenceId - The chart persistenceId.
- */
-export const useChartState = ({
-  chartRef,
-  options,
-  state,
-  generatedDatasets,
-  dispatch,
-  persistenceId,
-}) => {
-  const memoState = useMemo(() => state, [state]);
-  const memoOptions = useMemo(() => options, [options]);
-  const {
-    additionalAxesOptions: { range },
-    axes,
-  } = memoOptions;
-
-  useStoreChartStateInStorage(memoState, persistenceId);
-  useToggleCustomLegendVisibility(memoState, memoOptions);
-  useUpdateAxesRanges(range, dispatch);
-  useSaveInitialAxesRanges(chartRef, axes, generatedDatasets, dispatch);
-};

package/src/components/line-chart/utils/axis-scales/axis-scales.js

@@ -1,165 +0,0 @@
-import getLineChartScales from '../get-line-chart-scales';
-import { AxisType } from '../../../../helpers/enums';
-import { getAxisTypeFromKey } from '../line-chart-utils';
-import { estimateDataSeriesHaveCloseValues } from '../../../../helpers/range/estimate-data-series-have-close-values';
-import { getSuggestedAxisRange } from '../../../../helpers/range/range';
-
-/**
- Function that counts the number of occurences of "x" and "y" in an array and returns the one with the highest count.
- @param {Array} scalesKeys - An array of strings that may contain "x" or "y".
- @return {string} - Returns "x" if "x" occurs more times, "y" if "y" occurs more times, or null if they occur the same number of times.
- */
-const checkMultiAxis = (scalesKeys) => {
-  let counts = {
-    x: 0,
-    y: 0,
-  };
-
-  scalesKeys.forEach((axeKey) => {
-    const key = getAxisTypeFromKey(axeKey);
-    counts[key]++;
-  });
-  const res =
-    (counts.x > counts.y && AxisType.X) ||
-    (counts.y > counts.x && AxisType.Y) ||
-    (counts.x === counts.y && null);
-
-  return res;
-};
-
-/**
- Function that returns an object containing all the values for a specific key in an array of objects,
- grouped by the unique values of another key in the same objects.
- @param {Array} data - An array of objects to search for the keys.
- @return {Object} - Returns an object with keys representing the unique values for the annotationAxis key in the data array,
- and values representing an array of all values for the value key in the data array.
- */
-const getAnnotationsData = (data) => {
-  return data.reduce((acc, obj) => {
-    return {
-      ...acc,
-      [obj.annotationAxis]: [...(acc[obj.annotationAxis] || []), obj.value],
-    };
-  }, {});
-};
-
-/**
- * return data for each axes
- * @function getAxesData
- * @return {object}
- */
-const getAxesData = (scalesKeys, datasets, annotationsData) => {
-  const allData =
-    datasets?.reduce((acc, item) => [...acc, ...item.data], []) ?? [];
-
-  /**
-   * return data by key and depends on axes count
-   * @function getData
-   * @return {object}
-   */
-  const getData = () => {
-    return scalesKeys.reduce((acc, axeKey) => {
-      const key = getAxisTypeFromKey(axeKey);
-      const data = getAnnotationsData(annotationsData);
-      const formData = allData
-        ?.map((val) => val?.[key])
-        .concat(data[key] || []);
-
-      return {
-        ...acc,
-        [axeKey]: [...new Set(formData)],
-      };
-    }, {});
-  };
-
-  /**
-   Function that returns an object containing the unique values for a multi axis key in an array of objects.
-   @return {Object} - Returns an object with key representing the found key in the scalesKeys array,
-   and values representing an array of unique values for that key in the datasets array. If no key is found, an empty object is returned.
-   */
-  const getDataForMultiAxes = () => {
-    const multiAxesKey = checkMultiAxis(scalesKeys);
-    const axes = scalesKeys?.filter((key) => key?.includes(multiAxesKey)) ?? [];
-    const data = getAnnotationsData(annotationsData);
-    const [first, second] = axes;
-
-    /**
-     * Reduces an array of objects and returns an array of values from the specified key
-     * @param {Array} arr - The array of objects to be reduced
-     * @param {string} key - The key to extract the values from
-     * @returns {Array} - An array of values from the specified key
-     */
-    const reduceData = (arr, key) =>
-      arr.reduce((acc, { [key]: value }) => [...acc, value], []);
-
-    return datasets.reduce(
-      (acc, obj) => {
-        const include = Object.values(obj).some((val) => axes.includes(val));
-        const key = include ? second : first;
-
-        return {
-          ...acc,
-          [key]: [
-            ...new Set([
-              ...acc[key],
-              ...reduceData(obj?.data, multiAxesKey),
-              ...((!include && data?.[multiAxesKey]) || []),
-            ]),
-          ],
-        };
-      },
-      { [first]: [], [second]: [] },
-    );
-  };
-
-  return {
-    ...getData(),
-    ...getDataForMultiAxes(),
-  };
-};
-
-/**
- * Auto scales axis ranges (mix, max) if no explicit range is set
- * - overrides some edge cases not handled well by default chart.js
- * - supports optional padding when `autoAxisPadding` is set
- * - otherwise does not set min/max (falls back to chart.js default)
- *
- * @function autoScale
- * @return {object} scales
- */
-export const autoScale = (options, state, generatedDatasets) => {
-  const { additionalAxesOptions = {}, annotations = {} } = options || {};
-  const { annotationsData = [] } = annotations || {};
-  const scales = getLineChartScales(options, state) || {};
-
-  if (
-    !additionalAxesOptions?.autoAxisPadding &&
-    !estimateDataSeriesHaveCloseValues(generatedDatasets)
-  ) {
-    return scales;
-  }
-  const scalesKeys = Object.keys(scales) ?? [];
-  const data =
-    getAxesData(scalesKeys, generatedDatasets, annotationsData) ?? {};
-
-  const adjustedScales = scalesKeys?.reduce((acc, key) => {
-    const { min: propMin = undefined, max: propMax = undefined } = scales[key];
-    const { min, max } = getSuggestedAxisRange({
-      data: data[key],
-      beginAtZero: additionalAxesOptions?.beginAtZero,
-      autoAxisPadding: additionalAxesOptions?.autoAxisPadding,
-    });
-
-    const res = {
-      [key]: {
-        ...scales[key],
-        min: propMin ?? min,
-        max: propMax ?? max,
-      },
-    };
-
-    return { ...acc, ...res };
-  }, {});
-
-  return adjustedScales ?? scales;
-};

package/src/components/line-chart/utils/datalabels-alignment/get-alignment-condition.js

@@ -1,13 +0,0 @@
-/** returning boolean condition depends on label position and chart area
- *
- * @return {object} - returning object with boolean props
- */
-export const getCondition = (x, y, left, right, bottom) => {
-  const threshold = 100;
-  const overLeftSide = x - threshold <= left;
-  const overRightSide = x + threshold >= right;
-  const overBottomSide =
-    x + threshold >= left && x + threshold < right && y + threshold >= bottom;
-
-  return { overLeftSide, overRightSide, overBottomSide };
-};

package/src/components/line-chart/utils/datalabels-alignment/get-alignment-data.js

@@ -1,20 +0,0 @@
-/** returning destructured data from context
- *
- * @return {object}
- */
-export const getAlignmentData = (context) => {
-  const { chart = {}, dataIndex = 0, datasetIndex = 0 } = context || {};
-  const { chartArea = {} } = chart;
-  const { left = null, right = null, bottom = null } = chartArea;
-
-  const meta = chart.getDatasetMeta(datasetIndex);
-  const { x = null, y = null } = meta?.data?.[dataIndex] || {};
-
-  return {
-    x,
-    y,
-    left,
-    right,
-    bottom,
-  };
-};

package/src/components/line-chart/utils/datalabels-alignment/get-datalabels-position.js

@@ -1,25 +0,0 @@
-import { getCondition } from './get-alignment-condition';
-import { getAlignmentData } from './get-alignment-data';
-import { AlignOptions } from '../../../../helpers/enums';
-
-/** returning position depends on condition
- *
- * @return {string} - position
- */
-export const getPosition = () => {
-  return (context) => {
-    const { x, y, left, right, bottom } = getAlignmentData(context);
-    const {
-      overLeftSide = false,
-      overRightSide = false,
-      overBottomSide = false,
-    } = getCondition(x, y, left, right, bottom);
-
-    return (
-      (overLeftSide && AlignOptions.Right) ||
-      (overRightSide && AlignOptions.Left) ||
-      (overBottomSide && AlignOptions.End) ||
-      AlignOptions.Start
-    );
-  };
-};

package/src/components/line-chart/utils/generate-line-chart-datasets.js

@@ -1,114 +0,0 @@
-import { COLORS } from '../../../helpers/chart-consts';
-import {
-  BORDER_JOIN_STYLE,
-  DEFAULT_BACKGROUND_COLOR,
-  DEFAULT_BORDER_WIDTH,
-  DEFAULT_HOVER_RADIUS,
-  DEFAULT_LINE_POINT_RADIUS,
-  DEFAULT_POINT_RADIUS,
-} from '../constants/line-chart-consts';
-import { generateRandomColor } from '../../../helpers/chart-utils';
-
-/**
- * Generates line chart datasets based on the provided datasets, state, and options.
- *
- * @param {Array} datasets - The initial datasets for the line chart.
- * @param {Object} state - The state object containing chart settings (e.g., lineEnabled, pointsEnabled, axes).
- * @param {Object} options - The options object containing additional settings (e.g., annotations, graph).
- * @param {Object} translations - The getTranslations object with the label property
- * @returns {Array} - The generated line chart datasets with applied settings and configurations.
- */
-export const generateLineChartDatasets = (
-  datasets,
-  state,
-  options,
-  { label },
-) => {
-  const copyDataset = [...datasets];
-  const { annotations, graph } = options;
-  const {
-    controlAnnotation,
-    showAnnotations,
-    annotationsData = [],
-  } = annotations;
-  // Add annotations to dataset to have them appear in legend.
-  if (controlAnnotation && showAnnotations) {
-    const annotationDatasets = annotationsData.map((annotation, index) => {
-      const color = annotation.color ?? COLORS[index];
-
-      // Create an annotation dataset
-      return {
-        isAnnotation: true,
-        label: annotation.label,
-        annotationIndex: index,
-        backgroundColor: color,
-        pointBackgroundColor: color,
-        borderColor: color,
-        data: [{}],
-      };
-    });
-
-    // Add annotation datasets to the copyDataset array
-    copyDataset.push(...annotationDatasets);
-  }
-
-  // Map over the copyDataset array and generate line chart datasets with applied settings and configurations
-  return copyDataset.map((line, i) => {
-    // Destructure properties from the line, state, and graph objects
-    const {
-      formation,
-      data = [],
-      pointRadius,
-      pointHoverRadius,
-      borderWidth,
-      borderColor,
-      backgroundColor,
-      pointBackgroundColor,
-      borderDash,
-    } = line ?? {};
-    const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
-    const { lineTension, spanGaps } = graph ?? {};
-
-    // Adjust the start and end points of the line if it has a formation flag
-    if (formation) {
-      const axesMin = axes[0]?.min;
-      const axesMax = axes[0]?.max;
-      const [startPoint, midPointWithLabel, endPoint] = data;
-
-      if (axesMin && startPoint?.x) {
-        data[0].x = Math.max(axesMin, startPoint.x);
-      }
-
-      if (axesMax && endPoint?.x) {
-        data[2].x = Math.min(axesMax, endPoint.x);
-      }
-    }
-
-    // Remove invalid falsy data points (OW-9855)
-    const filteredData = data.filter(Boolean) || [];
-
-    const linePointRadius = parseFloat(pointRadius) || DEFAULT_POINT_RADIUS;
-    const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
-    const indexedColor = COLORS[i];
-
-    // Return the dataset with applied settings and configurations
-    return {
-      ...line,
-      label: line.label || `${label} ${i + 1}`,
-      data: filteredData,
-      showLine: lineEnabled,
-      lineTension,
-      spanGaps,
-      borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
-      borderDash: borderDash || [],
-      borderJoinStyle: BORDER_JOIN_STYLE,
-      borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
-      backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
-      pointBackgroundColor:
-        pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
-      pointRadius: pointsEnabled ? linePointRadius : DEFAULT_LINE_POINT_RADIUS,
-      pointHoverRadius: hoverRadius,
-      pointHitRadius: line.pointHitRadius ?? hoverRadius,
-    };
-  });
-};

package/src/components/line-chart/utils/get-axes-ranges-from-chart.js

@@ -1,13 +0,0 @@
-export const getAxesRangesFromChart = (chartRef, axes) => {
-  const { scales = {} } = chartRef.current || {};
-  return Object.entries(scales).map(([key, { min, max }], i) => {
-    const axesArray = axes.x.concat(axes.y);
-    const unit = axesArray?.[i]?.unit;
-    return {
-      id: key,
-      min,
-      max,
-      ...(unit ? { unit } : {}),
-    };
-  });
-};

package/src/components/line-chart/utils/get-line-chart-data-labels.js

@@ -1,21 +0,0 @@
-import { AUTO } from '../../../helpers/chart-consts';
-import { getPosition } from './datalabels-alignment/get-datalabels-position';
-
-/**
- * adjusts the position of the label depends on chart area
- *
- * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
- * @return {object} - returning position, if label exist in datasets item
- */
-const getLineChartDataLabels = (options) => {
-  return options.graph.showDataLabels
-    ? {
-        display: AUTO,
-        align: getPosition(),
-        formatter: (value, context) =>
-          context.dataset.data[context.dataIndex].label || '',
-      }
-    : { display: false };
-};
-
-export default getLineChartDataLabels;

package/src/components/line-chart/utils/get-line-chart-scales.js

@@ -1,120 +0,0 @@
-import {
-  generateRandomColor,
-  getAxisPosition,
-} from '../../../helpers/chart-utils';
-import { COLORS, LOGARITHMIC_STEPS } from '../../../helpers/chart-consts';
-import { generateAxisId, truncateDecimals } from './line-chart-utils';
-import { AxisType, ScaleType } from '../../../helpers/enums';
-
-/**
- * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
- * @param {'x'|'y'} axisType
- * @param {import('../../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
- * @param {import('../line-chart.interface').ILineChartAxis[]} [currentScales]
- * @param {number} [i]
- */
-const getLineChartAxis = (options, axisType, state, currentScales, i = 0) => {
-  const axisData = currentScales || options.axes[axisType][0];
-  const stateAxis = state.axes.filter((axis) => axis.id.startsWith(axisType))[
-    i
-  ];
-
-  const { additionalAxesOptions } = options;
-
-  const getTicks = () => {
-    const truncateAxisNumbersToDigitsCallback = Number.isInteger(
-      additionalAxesOptions.truncateAxisNumbersToDigitsCallback,
-    )
-      ? {
-          callback: (tick) =>
-            truncateDecimals(
-              tick,
-              additionalAxesOptions.truncateAxisNumbersToDigitsCallback,
-            ),
-        }
-      : {};
-
-    const ticks =
-      additionalAxesOptions.chartScaleType === ScaleType.Logarithmic
-        ? {
-            callback: (tick) => {
-              return LOGARITHMIC_STEPS.includes(tick)
-                ? tick.toLocaleString()
-                : '';
-            },
-          }
-        : {
-            stepSize:
-              axisData.stepSize ||
-              (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
-            ...truncateAxisNumbersToDigitsCallback,
-          };
-    return {
-      ...ticks,
-      includeBounds: false, //OW-10088 disable irregular axis ticks
-    };
-  };
-
-  return {
-    type: additionalAxesOptions.chartScaleType,
-    position: axisData.position,
-    beginAtZero: additionalAxesOptions.beginAtZero,
-    reverse: axisType === AxisType.Y ? additionalAxesOptions.reverse : false,
-    suggestedMax: additionalAxesOptions.suggestedMax,
-    suggestedMin: additionalAxesOptions.suggestedMin,
-    min: stateAxis?.min ?? additionalAxesOptions?.range?.[axisType]?.min,
-    max: stateAxis?.max ?? additionalAxesOptions?.range?.[axisType]?.max,
-    title: {
-      display: axisData.label?.length,
-      text: axisData.label,
-      padding: 0,
-    },
-    ticks: getTicks(),
-    grid: {
-      ...axisData.gridLines,
-    },
-  };
-};
-
-/**
- * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
- * @param {'x'|'y'} axisType
- * @param {import('../../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
- */
-const getLineChartAxes = (options, axisType, state) => {
-  const axesData = options.axes[axisType];
-  const axes = axesData.reduce((acc, curr, i) => {
-    const axisData = curr;
-    axisData.color = curr.color || COLORS[i] || generateRandomColor(COLORS);
-    axisData.position = curr.position || getAxisPosition(axisType, i);
-
-    const axis = getLineChartAxis(options, axisType, state, axisData, i);
-    const axisId = generateAxisId(axisType, i, true);
-    return { ...acc, [axisId]: axis };
-  }, {});
-  return axes;
-};
-
-/**
- *
- * @param {import('../line-chart.interface').ILineChartOptions} options - line chart options object
- * @param {import('../../../helpers/chart-interface').IInitialState} state - chart state object controlled by useReducer or similar
- */
-const getLineChartScales = (options, state) => {
-  const hasMultipleXAxes = options.axes.x?.length > 1;
-  const hasMultipleYAxes = options.axes.y?.length > 1;
-
-  const xAxes = hasMultipleXAxes
-    ? getLineChartAxes(options, AxisType.X, state)
-    : { x: getLineChartAxis(options, AxisType.X, state) };
-  const yAxes = hasMultipleYAxes
-    ? getLineChartAxes(options, AxisType.Y, state)
-    : { y: getLineChartAxis(options, AxisType.Y, state) };
-
-  return {
-    ...xAxes,
-    ...yAxes,
-  };
-};
-
-export default getLineChartScales;