@oliasoft-open-source/charts-library 4.8.0-beta-3 → 4.8.0-beta-5

package/dist/index.js

@@ -6,10 +6,10 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
 import { produce } from "immer";
-import { round as round$2, displayNumber, roundByMagnitude } from "@oliasoft-open-source/units";
+import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
 import { Portal, Icon, Menu, Tooltip as Tooltip$2, Button, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Flex, Text } from "@oliasoft-open-source/react-ui-library";
-import { cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1, noop as noop$2 } from "lodash";
+import { isEmpty, isArray as isArray$2, some, has, isNil, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, map as map$3, find, get as get$1, noop as noop$2 } from "lodash";
 /*!
  * @kurkle/color v0.3.2
  * https://github.com/kurkle/color#readme
@@ -22723,6 +22723,8 @@ const ANIMATION_DURATION = {
 };
 const DEFAULT_CHART_NAME = "new_chart";
 const CUSTOM_LEGEND_PLUGIN_NAME = "htmlLegend";
+const DECIMAL_POINT_TOLERANCE = 9;
+const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;
 const GRADIENT_COLORS = [
   { offset: 0, color: "rgba(144,238,144,0.8)" },
   // Light green
@@ -22854,18 +22856,6 @@ const setDefaultTheme = () => {
   defaults$2.color = DEFAULT_COLOR;
   defaults$2.borderColor = BORDER_COLOR;
 };
-const isNilOrEmpty = (value) => {
-  if (value === null || value === void 0 || value === "") {
-    return true;
-  }
-  if (Array.isArray(value) && value.length === 0) {
-    return true;
-  }
-  if (typeof value === "object" && Object.keys(value).length === 0) {
-    return true;
-  }
-  return false;
-};
 const isLessThanMax = (value, max) => {
   return value === void 0 || max === void 0 || Number(value) < Number(max);
 };
@@ -22876,15 +22866,15 @@ const generateAxisId = (axisType, index2 = 0, hasMultiAxes = false) => {
   const i2 = hasMultiAxes && index2 !== 0 ? index2 + 1 : "";
   return `${axisType}${i2}`;
 };
+const getAxisTypeFromKey = (string) => {
+  var _a2;
+  return ((_a2 = string == null ? void 0 : string.match(/[^0-9/]+/gi)) == null ? void 0 : _a2[0]) ?? "";
+};
 const generateKey = (values) => {
   const key = values.join("");
   return key;
 };
 const isPrimitiveValue = (value) => typeof value === "string" || typeof value === "number" || typeof value === "boolean" || value === null;
-const isRangeValid = (r2) => {
-  if (!r2) return false;
-  return Object.values(r2).some((value) => !isNilOrEmpty(value));
-};
 const getChartStateFromStorage = (persistenceId) => {
   if (!persistenceId) return null;
   const chartStateKey = `line-chart-state-${persistenceId}`;
@@ -22895,37 +22885,6 @@ const getChartStateFromStorage = (persistenceId) => {
   }
   return null;
 };
-const removeExpiredChartStates = (maxAgeInHours = 72) => {
-  const currentTime = (/* @__PURE__ */ new Date()).getTime();
-  const maxAgeInMilliseconds = maxAgeInHours * 60 * 60 * 1e3;
-  for (let i2 = 0; i2 < localStorage.length; i2++) {
-    const key = localStorage.key(i2);
-    if (key == null ? void 0 : key.includes("line-chart-state-")) {
-      const chartStateObjectJSON = localStorage.getItem(key);
-      if (chartStateObjectJSON) {
-        const chartStateObject = JSON.parse(chartStateObjectJSON);
-        const storedTime = chartStateObject.timestamp;
-        if (storedTime) {
-          const ageInMilliseconds = currentTime - storedTime;
-          if (ageInMilliseconds > maxAgeInMilliseconds) {
-            localStorage.removeItem(key);
-          }
-        }
-      }
-    }
-  }
-};
-const storeChartStateInStorage = (state, persistenceId) => {
-  if (!persistenceId) return;
-  const currentTime = (/* @__PURE__ */ new Date()).getTime();
-  const chartStateKey = `line-chart-state-${persistenceId}`;
-  const chartStateObject = {
-    state,
-    timestamp: currentTime
-  };
-  localStorage.setItem(chartStateKey, JSON.stringify(chartStateObject));
-  removeExpiredChartStates();
-};
 const initialState = ({ options, persistenceId }) => {
   const {
     additionalAxesOptions: { range: customAxesRange = {} },
@@ -25029,7 +24988,11 @@ const getDefaultProps$3 = (props) => {
     }
   };
 };
+const DEFAULT_POINT_RADIUS = 2;
+const DEFAULT_HOVER_RADIUS = 5;
 const DEFAULT_BORDER_WIDTH = 1;
+const BORDER_JOIN_STYLE = "round";
+const DEFAULT_BACKGROUND_COLOR = "transparent";
 const ZOOM_BOX_BACKGROUND_COLOR = "rgba(0, 0, 0, 0.1)";
 const DOUBLE_CLICK = "dblclick";
 const INIT_KEYS = {
@@ -25038,6 +25001,153 @@ const INIT_KEYS = {
 };
 const LOWER_BOUND = 1e-4;
 const UPPER_BOUND = 1e7;
+const checkCustomOption = (data, customOptions) => {
+  if (isEmpty(data) || isEmpty(customOptions)) return false;
+  const checkOption = (dataset) => {
+    if (typeof customOptions === "string") {
+      return dataset && has(dataset, customOptions);
+    } else if (isArray$2(customOptions)) {
+      return dataset && some(customOptions, (option) => dataset && has(dataset, option));
+    } else {
+      return dataset && some(
+        Object.values(customOptions),
+        (option) => dataset && has(dataset, option)
+      );
+    }
+  };
+  if (isArray$2(data)) {
+    return some(data, checkOption);
+  } else {
+    return checkOption(data);
+  }
+};
+var CUSTOM_OPTION = /* @__PURE__ */ ((CUSTOM_OPTION2) => {
+  CUSTOM_OPTION2["showLine"] = "showLine";
+  CUSTOM_OPTION2["showPoints"] = "showPoints";
+  return CUSTOM_OPTION2;
+})(CUSTOM_OPTION || {});
+const generateLineChartDatasets = (datasets, state, options, { label }) => {
+  const copyDataset = [...datasets ?? []];
+  const { annotations, graph } = options ?? {};
+  const {
+    controlAnnotation,
+    showAnnotations,
+    annotationsData = []
+  } = annotations ?? {};
+  if (controlAnnotation && showAnnotations) {
+    const annotationDatasets = annotationsData.map((ann, index2) => {
+      const { type, ...annotation2 } = ann;
+      const color2 = annotation2.color ?? COLORS[index2];
+      const borderDash = ANNOTATION_DASH;
+      const borderWidth = BORDER_WIDTH.INITIAL;
+      return {
+        ...annotation2,
+        isAnnotation: true,
+        annotationType: type,
+        label: annotation2.label,
+        annotationIndex: index2,
+        backgroundColor: color2,
+        pointBackgroundColor: color2,
+        borderColor: color2,
+        borderDash,
+        borderWidth,
+        data: [{}]
+      };
+    });
+    copyDataset.push(...annotationDatasets);
+  }
+  return copyDataset == null ? void 0 : copyDataset.map((line, i2) => {
+    var _a2, _b2;
+    const {
+      formation,
+      data = [],
+      pointRadius: pointRadiusProp,
+      pointHoverRadius,
+      borderWidth,
+      borderColor,
+      backgroundColor,
+      pointBackgroundColor,
+      borderDash,
+      showPoints: customShowPoints,
+      showLine: customShowLine
+    } = line ?? {};
+    const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
+    const { lineTension, spanGaps } = graph ?? {};
+    if (formation) {
+      const axesMin = (_a2 = axes[0]) == null ? void 0 : _a2.min;
+      const axesMax = (_b2 = axes[0]) == null ? void 0 : _b2.max;
+      const [startPoint, endPoint] = data;
+      if (axesMin && (startPoint == null ? void 0 : startPoint.x)) {
+        data[0].x = Math.max(axesMin, startPoint.x);
+      }
+      if (axesMax && (endPoint == null ? void 0 : endPoint.x)) {
+        data[2].x = Math.min(axesMax, endPoint.x);
+      }
+    }
+    const hasCustomOpt = checkCustomOption(line, CUSTOM_OPTION);
+    const filteredData = data.filter(Boolean) || [];
+    const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
+    let pointState, lineState;
+    if (customShowPoints !== void 0) {
+      pointState = customShowPoints;
+    } else if (customShowLine === false) {
+      pointState = true;
+    } else {
+      pointState = pointsEnabled || isSinglePoint;
+    }
+    if (customShowLine !== void 0) {
+      lineState = customShowLine;
+    } else if (customShowPoints === false) {
+      lineState = true;
+    } else {
+      lineState = lineEnabled;
+    }
+    const linePointRadius = parseFloat(pointRadiusProp) || DEFAULT_POINT_RADIUS;
+    const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
+    const indexedColor = COLORS[i2];
+    return {
+      ...line,
+      label: (line == null ? void 0 : line.label) ?? `${label} ${i2 + 1}`,
+      data: filteredData,
+      showLine: lineState,
+      lineTension: (line == null ? void 0 : line.lineTension) ?? 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: pointState ? linePointRadius : 0,
+      pointHoverRadius: hoverRadius,
+      pointHitRadius: (line == null ? void 0 : line.pointHitRadius) ?? hoverRadius,
+      ...hasCustomOpt ? { hasCustomOpt } : {}
+    };
+  });
+};
+const getAnnotationsData = (data) => {
+  return data == null ? void 0 : data.reduce((acc, obj) => {
+    return {
+      ...acc,
+      [obj.annotationAxis]: [...acc[obj.annotationAxis] || [], +obj.value]
+    };
+  }, {});
+};
+const getAxisRangeByType = (chartRef, axesType, annotationsData) => {
+  if (!chartRef || !chartRef.current) return null;
+  const metasets = chartRef.current.getSortedVisibleDatasetMetas();
+  const annotDataByType = getAnnotationsData(annotationsData)[axesType] ?? [];
+  let allData = [];
+  metasets.forEach((metaset) => {
+    const data = metaset._parsed.map((parsedData) => parsedData[axesType]).filter((value) => value != null && !isNaN(value));
+    allData = allData.concat(data);
+  });
+  allData = allData.concat(annotDataByType);
+  if (allData.length === 0) return null;
+  const min = Math.min(...allData);
+  const max = Math.max(...allData);
+  return { min, max };
+};
 const calculateDelta$1 = (tickValue, ticks) => {
   let delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
   if (Math.abs(delta) >= 1 && tickValue !== Math.floor(Number(tickValue))) {
@@ -25144,9 +25254,142 @@ const getLineChartScales = (options, state) => {
     ...yAxes
   };
 };
-const autoScale = (options, state) => {
+const estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
+  var _a2;
+  if (!Array.isArray(generatedDatasets) || !(generatedDatasets == null ? void 0 : generatedDatasets.length)) {
+    return false;
+  }
+  const axesFirstLast = generatedDatasets == null ? void 0 : generatedDatasets.reduce((acc, dataset) => {
+    var _a3, _b2, _c2, _d2;
+    const xAxisId = (dataset == null ? void 0 : dataset.xAxisID) ?? "defaultX";
+    const yAxisId = (dataset == null ? void 0 : dataset.yAxisID) ?? "defaultY";
+    const data = (dataset == null ? void 0 : dataset.data) ?? [];
+    if (data && (data == null ? void 0 : data.length)) {
+      const { x: xFirstCurrent, y: yFirstCurrent } = (data == null ? void 0 : data[0]) ?? {};
+      const { x: xLastCurrent = 0, y: yLastCurrent = 0 } = (data == null ? void 0 : data.at(-1)) ?? {};
+      const xFirstAcc = ((_a3 = acc == null ? void 0 : acc[xAxisId]) == null ? void 0 : _a3.xFirst) ?? xFirstCurrent;
+      const xLastAcc = ((_b2 = acc == null ? void 0 : acc[xAxisId]) == null ? void 0 : _b2.xLast) ?? xLastCurrent;
+      const yFirstAcc = ((_c2 = acc == null ? void 0 : acc[yAxisId]) == null ? void 0 : _c2.yFirst) ?? yFirstCurrent;
+      const yLastAcc = ((_d2 = acc == null ? void 0 : acc[yAxisId]) == null ? void 0 : _d2.yLast) ?? yLastCurrent;
+      const xFirst = Math.min(xFirstCurrent, xFirstAcc);
+      const xLast = Math.max(xLastCurrent, xLastAcc);
+      const yFirst = Math.min(yFirstCurrent, yFirstAcc);
+      const yLast = Math.max(yLastCurrent, yLastAcc);
+      acc = {
+        ...acc,
+        [xAxisId]: {
+          ...acc[xAxisId],
+          xFirst,
+          xLast
+        },
+        [yAxisId]: {
+          yFirst,
+          yLast
+        }
+      };
+    }
+    return acc;
+  }, {});
+  return (_a2 = Object.values(axesFirstLast)) == null ? void 0 : _a2.some(({ xFirst, xLast, yFirst, yLast }) => {
+    return isCloseTo(xFirst, xLast, { absoluteDiff: MAX_DECIMAL_DIFF }) || isCloseTo(yFirst, yLast, { absoluteDiff: MAX_DECIMAL_DIFF });
+  });
+};
+const whiteSpacePercentage = 0.05;
+const defaultRange = { min: -1, max: 1 };
+const getSuggestedAxisRange = ({
+  data,
+  beginAtZero = false,
+  autoAxisPadding = false
+}) => {
+  const dataMin = Math.min(
+    ...data.filter((v2) => v2 !== null && v2 !== void 0 && !isNaN(v2))
+  );
+  const dataMax = Math.max(
+    ...data.filter((v2) => v2 !== null && v2 !== void 0 && !isNaN(v2))
+  );
+  const isNegative = Math.sign(dataMin) === -1 || Math.sign(dataMax) === -1;
+  const isCloseToZeroWithTolerance = isCloseTo(dataMin, 0, { absoluteDiff: MAX_DECIMAL_DIFF }) && isCloseTo(dataMax, 0, { absoluteDiff: MAX_DECIMAL_DIFF });
+  if (!(data == null ? void 0 : data.length) || isCloseToZeroWithTolerance) {
+    return defaultRange;
+  }
+  if (isCloseTo(dataMin, dataMax, { absoluteDiff: MAX_DECIMAL_DIFF })) {
+    const point = dataMax;
+    const padding2 = point * whiteSpacePercentage;
+    const minAxisValue2 = beginAtZero && !isNegative ? 0 : point - padding2;
+    const maxAxisValue2 = beginAtZero && isNegative ? 0 : point + padding2;
+    const roundedMinAxisValue = round$2(maxAxisValue2, DECIMAL_POINT_TOLERANCE);
+    const roundedMaxAxisValue = round$2(minAxisValue2, DECIMAL_POINT_TOLERANCE);
+    return {
+      min: roundedMinAxisValue < 0 ? roundedMinAxisValue : roundedMaxAxisValue,
+      max: roundedMaxAxisValue < 0 ? roundedMaxAxisValue : roundedMinAxisValue
+    };
+  }
+  if (!autoAxisPadding) {
+    return {
+      min: void 0,
+      max: void 0
+    };
+  }
+  const rangeBeginAtZero = dataMin === 0 || dataMax === 0 || beginAtZero;
+  const positiveAndNegative = Math.sign(dataMin) === -1 && Math.sign(dataMax) === 1;
+  const range = Math.abs(dataMax - dataMin);
+  const padding = autoAxisPadding ? range * whiteSpacePercentage : 0;
+  const minAxisValue = !positiveAndNegative && rangeBeginAtZero && beginAtZero && !isNegative ? 0 : dataMin - padding;
+  const maxAxisValue = !positiveAndNegative && rangeBeginAtZero && beginAtZero && isNegative ? 0 : dataMax + padding;
+  return {
+    min: round$2(minAxisValue, DECIMAL_POINT_TOLERANCE),
+    max: round$2(maxAxisValue, DECIMAL_POINT_TOLERANCE)
+  };
+};
+const getAxesDataFromMetasets = (chartRef, scalesKeys, annotationsData) => {
+  var _a2;
+  if (!chartRef || !scalesKeys) return {};
+  const metasets = ((_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.getSortedVisibleDatasetMetas()) ?? [];
+  const annotData = getAnnotationsData(annotationsData);
+  return metasets && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
+    const data = metasets.filter((dataset) => Object.values(dataset).includes(key)).flatMap((dataset) => dataset._parsed).map((parsedData) => parsedData[getAxisTypeFromKey(key)]).concat((annotData == null ? void 0 : annotData[key]) ?? []);
+    return {
+      ...acc,
+      [key]: [...new Set(data)]
+    };
+  }, {}));
+};
+const shouldCalculate = (min, max) => !isNil(min) || !isNil(max);
+const autoScale = (options, state, generatedDatasets, chartRef) => {
+  const {
+    additionalAxesOptions,
+    annotations: { annotationsData = [], controlAnnotation = false } = {}
+  } = options || {};
   const scales = getLineChartScales(options, state) || {};
-  return scales;
+  const datasets = controlAnnotation ? generatedDatasets.filter(({ isAnnotation }) => !isAnnotation) : generatedDatasets;
+  if (!(additionalAxesOptions == null ? void 0 : additionalAxesOptions.autoAxisPadding) && !estimateDataSeriesHaveCloseValues(datasets)) {
+    return scales;
+  }
+  const scalesKeys = Object.keys(scales) ?? [];
+  const data = getAxesDataFromMetasets(
+    chartRef,
+    scalesKeys,
+    annotationsData
+  );
+  const adjustedScales = data && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
+    const scale = scales[key];
+    const { min: propMin = void 0, max: propMax = void 0 } = scale;
+    const { min: calcMin, max: calcMax } = getAxisRangeByType(chartRef, key, annotationsData) ?? {};
+    const { min: suggestedMin, max: suggestedMax } = getSuggestedAxisRange({
+      data: data[key],
+      beginAtZero: additionalAxesOptions == null ? void 0 : additionalAxesOptions.beginAtZero,
+      autoAxisPadding: additionalAxesOptions == null ? void 0 : additionalAxesOptions.autoAxisPadding
+    });
+    const res = {
+      [key]: {
+        ...scale,
+        min: propMin ?? (shouldCalculate(propMin, propMax) ? calcMin : suggestedMin),
+        max: propMax ?? (shouldCalculate(propMin, propMax) ? calcMax : suggestedMax)
+      }
+    };
+    return { ...acc, ...res };
+  }, {}));
+  return adjustedScales ?? scales;
 };
 const getCondition = (x2, y2, left2, right2, bottom2) => {
   const threshold = 100;
@@ -25696,7 +25939,7 @@ const useChartOptions = ({
   const datalabels = getLineChartDataLabels(options);
   const tooltip = getLineChartToolTips(options);
   const scales = useMemo(
-    () => autoScale(options, state),
+    () => autoScale(options, state, generatedDatasets, chartRef),
     [options, state, generatedDatasets, chartRef]
   );
   const dragData = useMemo(
@@ -25816,145 +26059,6 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     ];
   }, [handleDoubleClick]);
 };
-const getAnnotationsData = (data) => {
-  return data == null ? void 0 : data.reduce((acc, obj) => {
-    return {
-      ...acc,
-      [obj.annotationAxis]: [...acc[obj.annotationAxis] || [], +obj.value]
-    };
-  }, {});
-};
-const getAxisRangeByType = (chartRef, axesType, annotationsData) => {
-  if (!chartRef || !chartRef.current) return null;
-  const metasets = chartRef.current.getSortedVisibleDatasetMetas();
-  const annotDataByType = getAnnotationsData(annotationsData)[axesType] ?? [];
-  let allData = [];
-  metasets.forEach((metaset) => {
-    const data = metaset._parsed.map((parsedData) => parsedData[axesType]).filter((value) => value != null && !isNaN(value));
-    allData = allData.concat(data);
-  });
-  allData = allData.concat(annotDataByType);
-  if (allData.length === 0) return null;
-  const min = Math.min(...allData);
-  const max = Math.max(...allData);
-  return { min, max };
-};
-const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
-  var _a2, _b2;
-  useEffect(() => {
-    var _a3, _b3;
-    if ((_b3 = (_a3 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a3.customLegend) == null ? void 0 : _b3.customLegendPlugin) {
-      const parent = document.getElementById(
-        memoOptions.legend.customLegend.customLegendContainerID
-      );
-      if (parent !== null) {
-        parent.style.visibility = memoState.legendEnabled ? "visible" : "hidden";
-      }
-    }
-  }, [
-    (_b2 = (_a2 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendPlugin,
-    memoState.legendEnabled
-  ]);
-};
-const useStoreChartStateInStorage = (memoState, persistenceId) => {
-  useEffect(() => {
-    storeChartStateInStorage(memoState, persistenceId);
-  }, [
-    memoState.panEnabled,
-    memoState.lineEnabled,
-    memoState.pointsEnabled,
-    memoState.legendEnabled,
-    memoState.enableDragPoints,
-    memoState.zoomEnabled
-  ]);
-};
-const useUpdateAxesRanges = ({
-  chartRef,
-  range,
-  state,
-  dispatch,
-  annotationsData
-}) => {
-  const prevAxes = useRef(state.axes);
-  useEffect(() => {
-    if (range && isRangeValid(range)) {
-      const newAxes = Object.entries(range).map(([key, { min, max }]) => {
-        const { min: minFromData = 0, max: maxFromData = 0 } = getAxisRangeByType(chartRef, key, annotationsData) ?? {};
-        return {
-          id: key,
-          min: min ?? minFromData,
-          max: max ?? maxFromData
-        };
-      });
-      const mergedAxes = [...prevAxes.current ?? []].map((axis) => {
-        const newAxis = newAxes.find((a2) => a2.id === axis.id);
-        return newAxis ? { ...axis, ...newAxis } : axis;
-      });
-      if (!isEqual(mergedAxes, prevAxes.current)) {
-        dispatch({
-          type: UPDATE_AXES_RANGES,
-          payload: { axes: mergedAxes }
-        });
-        prevAxes.current = mergedAxes;
-      }
-    }
-  }, [range]);
-};
-const useSaveInitialAxesRanges = (chartRef, dispatch, generatedDatasets) => {
-  var _a2;
-  const prevDatasets = useRef(null);
-  useEffect(() => {
-    var _a3, _b2;
-    if (((_a3 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a3.scales) && !isEqual(prevDatasets.current, generatedDatasets)) {
-      const scales = ((_b2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _b2.scales) ?? {};
-      const initialAxesRanges = Object.entries(scales).map(
-        ([id, { min, max, _range: range }]) => ({
-          id,
-          min: (range == null ? void 0 : range.min) ?? min,
-          max: (range == null ? void 0 : range.max) ?? max
-        })
-      );
-      dispatch({
-        type: SAVE_INITIAL_AXES_RANGES,
-        payload: { initialAxesRanges }
-      });
-      prevDatasets.current = generatedDatasets;
-    }
-  }, [(_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.scales, generatedDatasets]);
-};
-const useChartState = ({
-  chartRef,
-  options,
-  state,
-  dispatch,
-  persistenceId,
-  generatedDatasets
-}) => {
-  useEffect(() => {
-    return () => {
-      if (chartRef == null ? void 0 : chartRef.current) {
-        const chart2 = chartRef == null ? void 0 : chartRef.current;
-        chart2 == null ? void 0 : chart2.destroy();
-      }
-    };
-  }, []);
-  const memoState = useMemo(() => state, [state]);
-  const memoOptions = useMemo(() => options, [options]);
-  const {
-    additionalAxesOptions: { range = void 0 },
-    annotations: { annotationsData = [] } = {}
-  } = memoOptions;
-  useStoreChartStateInStorage(memoState, persistenceId);
-  useToggleCustomLegendVisibility(memoState, memoOptions);
-  useUpdateAxesRanges({
-    range,
-    state: memoState,
-    dispatch,
-    chartRef,
-    annotationsData
-  });
-  useSaveInitialAxesRanges(chartRef, dispatch, generatedDatasets);
-};
 const WORD_SEPARATOR = " ";
 const SEMI_TRANSPARENT = "rgba(0, 0, 0, 0.5)";
 const getWords = (text) => {
@@ -27019,7 +27123,7 @@ const LineChart = (props) => {
   const { translations, languageKey } = getConfig();
   const chart2 = getDefaultProps$3(props);
   const {
-    // data: { datasets } = { datasets: [] },
+    data: { datasets } = { datasets: [] },
     options,
     testId,
     persistenceId,
@@ -27027,7 +27131,6 @@ const LineChart = (props) => {
   } = chart2;
   const { annotations, axes, chartStyling, graph } = options ?? {};
   const showCustomLegend = !((_b2 = (_a2 = options == null ? void 0 : options.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendContainerID);
-  console.time("useReducer");
   const [state, dispatch] = useReducer(
     reducer$1,
     {
@@ -27036,23 +27139,20 @@ const LineChart = (props) => {
     },
     initialState
   );
-  console.timeEnd("useReducer");
-  console.time("generatedDatasets");
   const generatedDatasets = useMemo(() => {
-    return [];
+    const startTimeStamp = performance.now();
+    const result = generateLineChartDatasets(
+      datasets,
+      state,
+      options,
+      translations
+    );
+    const endTimeStamp = performance.now();
+    console.log(
+      `generateLineChartDatasets execution time: ${(endTimeStamp - startTimeStamp).toFixed(5)} ms`
+    );
+    return result;
   }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
-  console.timeEnd("generatedDatasets");
-  console.time("useChartState");
-  useChartState({
-    chartRef,
-    options,
-    state,
-    dispatch,
-    persistenceId,
-    generatedDatasets
-  });
-  console.timeEnd("useChartState");
-  console.time("useChartFunctions");
   const { resetZoom: resetZoom2, handleKeyDown, handleKeyUp } = useChartFunctions({
     chartRef,
     state,
@@ -27060,8 +27160,6 @@ const LineChart = (props) => {
     dispatch,
     generatedDatasets
   });
-  console.timeEnd("useChartFunctions");
-  console.time("useChartOptions");
   const useOptions = useChartOptions({
     chartRef,
     state,
@@ -27069,10 +27167,7 @@ const LineChart = (props) => {
     dispatch,
     generatedDatasets
   });
-  console.timeEnd("useChartOptions");
-  console.time("useChartPlugins");
   const usePlugins = useChartPlugins({ options, resetZoom: resetZoom2 });
-  console.timeEnd("useChartPlugins");
   return /* @__PURE__ */ jsxs(
     "div",
     {