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

package/src/components/line-chart/state/action-types.js

@@ -1,12 +0,0 @@
-export const TOGGLE_ZOOM = 'TOGGLE_ZOOM';
-export const TOGGLE_PAN = 'TOGGLE_PAN';
-export const TOGGLE_POINTS = 'TOGGLE_POINTS';
-export const TOGGLE_LINE = 'TOGGLE_LINE';
-export const TOGGLE_LEGEND = 'TOGGLE_LEGEND';
-export const TOGGLE_ANNOTATION = 'TOGGLE_ANNOTATION';
-export const TOGGLE_TABLE = 'TOGGLE_TABLE';
-export const SAVE_INITIAL_AXES_RANGES = 'SAVE_INITIAL_AXES_RANGES';
-export const RESET_AXES_RANGES = 'RESET_AXES_RANGES';
-export const UPDATE_AXES_RANGES = 'UPDATE_AXES_RANGES';
-export const TOGGLE_DRAG_POINTS = 'TOGGLE_DRAG_POINTS';
-export const DISABLE_DRAG_OPTIONS = 'DISABLE_DRAG_OPTIONS';

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

@@ -1,89 +0,0 @@
-import { AxisType } from '../../../helpers/enums';
-import { setAnnotations } from '../../../helpers/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: { annotationsData },
-    axes,
-    chartOptions: { enableZoom, enablePan, showPoints, showLine },
-    legend: { display },
-    dragData,
-  } = options;
-  /**
-   * getStateAxesByType
-   * @param {'x'|'y'} axisType
-   * @param {Object} customAxesRange
-   * @return {{id: string}[] | []} returns array of objects describing all chart axis or empty array
-   */
-  const getStateAxesByType = (axisType, customAxesRange) => {
-    if (!axes[axisType]) {
-      return [];
-    }
-
-    if (axes[axisType]?.length > 1) {
-      return axes[axisType].map((axisObj, index) => {
-        const id = generateAxisId(axisType, index, axes[axisType].length > 1);
-        const customMin = customAxesRange?.[id]?.min;
-        const customMax = customAxesRange?.[id]?.max;
-        const { unit } = axisObj;
-        return {
-          id,
-          //only add custom axis ranges if defined:
-          ...(customMin ? { min: customMin } : {}),
-          ...(customMax ? { max: customMax } : {}),
-          ...(unit ? { unit } : {}),
-        };
-      });
-    } else {
-      const id = generateAxisId(axisType);
-      const customMin = customAxesRange?.[id]?.min;
-      const customMax = customAxesRange?.[id]?.max;
-      const unit = axes?.[id][0].unit;
-      return [
-        {
-          id,
-          //only add custom axis ranges if defined:
-          ...(customMin ? { min: customMin } : {}),
-          ...(customMax ? { max: customMax } : {}),
-          ...(unit ? { unit } : {}),
-        },
-      ];
-    }
-  };
-
-  const xStateAxes = getStateAxesByType(AxisType.X, customAxesRange);
-  const yStateAxes = getStateAxesByType(AxisType.Y, customAxesRange);
-  const stateAxes = [...xStateAxes, ...yStateAxes];
-
-  const {
-    zoomEnabled,
-    panEnabled,
-    pointsEnabled,
-    lineEnabled,
-    legendEnabled,
-    enableDragPoints,
-  } = getChartStateFromStorage(persistenceId) || {};
-
-  return {
-    zoomEnabled: zoomEnabled ?? enableZoom,
-    panEnabled: panEnabled ?? enablePan,
-    pointsEnabled: pointsEnabled ?? showPoints,
-    lineEnabled: lineEnabled ?? showLine,
-    legendEnabled: legendEnabled ?? display,
-    axes: stateAxes,
-    showAnnotationLineIndex: setAnnotations(annotationsData),
-    showTable: false,
-    enableDragPoints: dragData.enableDragData && enableDragPoints,
-  };
-};
-
-export default initialState;

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

@@ -1,100 +0,0 @@
-import { produce } from 'immer';
-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 './action-types';
-
-export const reducer = (state, action) => {
-  return produce(state, (draft) => {
-    switch (action.type) {
-      case TOGGLE_ZOOM: {
-        draft.zoomEnabled = !draft.zoomEnabled;
-        if (draft.panEnabled) {
-          draft.panEnabled = false;
-        }
-        if (draft.enableDragPoints) {
-          draft.enableDragPoints = false;
-        }
-        break;
-      }
-      case TOGGLE_PAN: {
-        draft.panEnabled = !draft.panEnabled;
-        if (draft.zoomEnabled) {
-          draft.zoomEnabled = false;
-        }
-        break;
-      }
-      case TOGGLE_POINTS: {
-        draft.pointsEnabled = !draft.pointsEnabled;
-        break;
-      }
-      case TOGGLE_LINE: {
-        draft.lineEnabled = !draft.lineEnabled;
-        break;
-      }
-      case TOGGLE_LEGEND: {
-        draft.legendEnabled = !draft.legendEnabled;
-        break;
-      }
-      case TOGGLE_TABLE: {
-        draft.showTable = !draft.showTable;
-        break;
-      }
-      case SAVE_INITIAL_AXES_RANGES: {
-        const { initialAxesRanges } = action.payload;
-        draft.initialAxesRanges = initialAxesRanges;
-        break;
-      }
-      case UPDATE_AXES_RANGES: {
-        const { axes } = action.payload;
-        draft.axes = axes;
-        break;
-      }
-      case RESET_AXES_RANGES: {
-        const { axes } = draft;
-        draft.axes = axes.map((axis) => ({
-          id: axis.id,
-        }));
-        break;
-      }
-      case TOGGLE_ANNOTATION: {
-        const { annotationIndex } = action.payload;
-        const updatedIndexes = draft.showAnnotationLineIndex.includes(
-          annotationIndex,
-        )
-          ? draft.showAnnotationLineIndex.filter((v) => v !== annotationIndex)
-          : [...draft.showAnnotationLineIndex, annotationIndex];
-        draft.showAnnotationLineIndex = updatedIndexes;
-        break;
-      }
-      case TOGGLE_DRAG_POINTS: {
-        draft.enableDragPoints = !draft.enableDragPoints;
-        if (draft.panEnabled) {
-          draft.panEnabled = false;
-        }
-        if (draft.zoomEnabled) {
-          draft.zoomEnabled = false;
-        }
-        break;
-      }
-      case DISABLE_DRAG_OPTIONS: {
-        if (draft.enableDragPoints || draft.panEnabled || draft.zoomEnabled) {
-          draft.enableDragPoints = false;
-          draft.panEnabled = false;
-          draft.zoomEnabled = false;
-        }
-        break;
-      }
-    }
-  });
-};

package/src/components/line-chart/state/manage-state-in-local-storage.js

@@ -1,86 +0,0 @@
-/**
- * Retrieves the chart state from local storage.
- *
- * @param {string|''} persistenceId - The chart persistenceId.
- * @returns {object|null} The chart state object or null if not found.
- */
-export const getChartStateFromStorage = (persistenceId) => {
-  if (!persistenceId) return null;
-
-  // Retrieve the chart state object from local storage
-  const chartStateKey = `line-chart-state-${persistenceId}`;
-  const chartStateObjectJSON = localStorage.getItem(chartStateKey);
-
-  if (chartStateObjectJSON) {
-    // If the chart state object was found, parse it
-    const chartStateObject = JSON.parse(chartStateObjectJSON);
-
-    // Return the state property of the parsed chart state object
-    return chartStateObject.state;
-  }
-
-  // If the chart state object was not found, return null
-  return null;
-};
-
-/**
- * Remove expired chart states from local storage.
- *
- * @param {number} maxAgeInHours - The maximum age of chart states to keep in local storage (in hours). Default is 72 hours.
- */
-const removeExpiredChartStates = (maxAgeInHours = 72) => {
-  const currentTime = new Date().getTime();
-  const maxAgeInMilliseconds = maxAgeInHours * 60 * 60 * 1000;
-
-  // Iterate through all keys in local storage
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
-
-    // Check if the key is related to a line-chart-state
-    if (key.includes('line-chart-state-')) {
-      const chartStateObjectJSON = localStorage.getItem(key);
-
-      // If a valid chart state object JSON is found
-      if (chartStateObjectJSON) {
-        const chartStateObject = JSON.parse(chartStateObjectJSON);
-        const storedTime = chartStateObject.timestamp;
-
-        // If a valid timestamp is found
-        if (storedTime) {
-          const ageInMilliseconds = currentTime - storedTime;
-
-          // If the age of the chart state is older than the specified maxAgeInHours
-          if (ageInMilliseconds > maxAgeInMilliseconds) {
-            // Remove the expired chart state from local storage
-            localStorage.removeItem(key);
-          }
-        }
-      }
-    }
-  }
-};
-
-/**
- * Stores the chart state in local storage.
- *
- * @param {object} state - The chart state object to store.
- * @param {string|''} persistenceId - The chart persistenceId.
- */
-export const storeChartStateInStorage = (state, persistenceId) => {
-  if (!persistenceId) return;
-
-  const currentTime = new Date().getTime();
-  const chartStateKey = `line-chart-state-${persistenceId}`;
-
-  // Create an object containing the chart state and the timestamp
-  const chartStateObject = {
-    state,
-    timestamp: currentTime,
-  };
-
-  // Serialize the chart state object as a JSON string and store it in local storage
-  localStorage.setItem(chartStateKey, JSON.stringify(chartStateObject));
-
-  // Remove expired chart states from local storage
-  removeExpiredChartStates();
-};

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
-    );
-  };
-};