@oliasoft-open-source/charts-library 5.0.0 → 5.0.1

package/dist/index.js.js

@@ -5,11 +5,11 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
 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, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
+import { produce } from "immer";
 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 { 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";
+import { startCase, 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.4
  * https://github.com/kurkle/color#readme
@@ -22424,218 +22424,6 @@ class HTML5BackendImpl {
 const HTML5Backend = function createBackend(manager, context, options) {
   return new HTML5BackendImpl(manager, context, options);
 };
-const chart$3 = "_chart_e3qdd_1";
-const canvas$2 = "_canvas_e3qdd_11";
-const fixedHeight$3 = "_fixedHeight_e3qdd_20";
-const stretchHeight$3 = "_stretchHeight_e3qdd_26";
-const squareAspectRatio$1 = "_squareAspectRatio_e3qdd_32";
-const table = "_table_e3qdd_62";
-const styles$5 = {
-  chart: chart$3,
-  canvas: canvas$2,
-  fixedHeight: fixedHeight$3,
-  stretchHeight: stretchHeight$3,
-  squareAspectRatio: squareAspectRatio$1,
-  table
-};
-const TOGGLE_ZOOM = "TOGGLE_ZOOM";
-const TOGGLE_PAN = "TOGGLE_PAN";
-const TOGGLE_POINTS = "TOGGLE_POINTS";
-const TOGGLE_LINE = "TOGGLE_LINE";
-const TOGGLE_LEGEND = "TOGGLE_LEGEND";
-const TOGGLE_TABLE = "TOGGLE_TABLE";
-const SAVE_INITIAL_AXES_RANGES = "SAVE_INITIAL_AXES_RANGES";
-const RESET_AXES_RANGES = "RESET_AXES_RANGES";
-const UPDATE_AXES_RANGES = "UPDATE_AXES_RANGES";
-const TOGGLE_DRAG_POINTS = "TOGGLE_DRAG_POINTS";
-const TOGGLE_DRAG_ANNOTATION = "TOGGLE_DRAG_ANNOTATION";
-const DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";
-const reducer$1 = (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;
-        }
-        if (draft.enableDragAnnotation) {
-          draft.enableDragAnnotation = false;
-        }
-        break;
-      }
-      case TOGGLE_PAN: {
-        draft.panEnabled = !draft.panEnabled;
-        if (draft.zoomEnabled) {
-          draft.zoomEnabled = false;
-        }
-        if (draft.enableDragPoints) {
-          draft.enableDragPoints = false;
-        }
-        if (draft.enableDragAnnotation) {
-          draft.enableDragAnnotation = 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 { initialAxesRanges } = draft;
-        draft.axes = [...initialAxesRanges];
-        break;
-      }
-      case TOGGLE_DRAG_POINTS: {
-        draft.enableDragPoints = !draft.enableDragPoints;
-        if (draft.panEnabled) {
-          draft.panEnabled = false;
-        }
-        if (draft.zoomEnabled) {
-          draft.zoomEnabled = false;
-        }
-        if (draft.enableDragAnnotation) {
-          draft.enableDragAnnotation = false;
-        }
-        break;
-      }
-      case TOGGLE_DRAG_ANNOTATION: {
-        draft.enableDragAnnotation = !draft.enableDragAnnotation;
-        if (draft.panEnabled) {
-          draft.panEnabled = false;
-        }
-        if (draft.zoomEnabled) {
-          draft.zoomEnabled = false;
-        }
-        break;
-      }
-      case DISABLE_DRAG_OPTIONS: {
-        if (draft.enableDragAnnotation || draft.enableDragPoints || draft.panEnabled || draft.zoomEnabled) {
-          draft.enableDragAnnotation = false;
-          draft.enableDragPoints = false;
-          draft.panEnabled = false;
-          draft.zoomEnabled = false;
-        }
-        break;
-      }
-    }
-  });
-};
-var AxisType = /* @__PURE__ */ ((AxisType2) => {
-  AxisType2["X"] = "x";
-  AxisType2["Y"] = "y";
-  return AxisType2;
-})(AxisType || {});
-var Position = /* @__PURE__ */ ((Position2) => {
-  Position2["Bottom"] = "bottom";
-  Position2["Top"] = "top";
-  Position2["Left"] = "left";
-  Position2["Right"] = "right";
-  Position2["TopRight"] = "top-right";
-  Position2["TopLeft"] = "top-left";
-  Position2["BottomLeft"] = "bottom-left";
-  Position2["BottomRight"] = "bottom-right";
-  return Position2;
-})(Position || {});
-var ChartType$1 = /* @__PURE__ */ ((ChartType2) => {
-  ChartType2["Line"] = "line";
-  ChartType2["Bar"] = "bar";
-  return ChartType2;
-})(ChartType$1 || {});
-var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
-  CursorStyle2["Pointer"] = "pointer";
-  CursorStyle2["Initial"] = "initial";
-  CursorStyle2["Grab"] = "grab";
-  CursorStyle2["Grabbing"] = "grabbing";
-  CursorStyle2["Crosshair"] = "crosshair";
-  CursorStyle2["Move"] = "move";
-  return CursorStyle2;
-})(CursorStyle || {});
-var ScaleType = /* @__PURE__ */ ((ScaleType2) => {
-  ScaleType2["Category"] = "category";
-  ScaleType2["Linear"] = "linear";
-  ScaleType2["Logarithmic"] = "logarithmic";
-  return ScaleType2;
-})(ScaleType || {});
-var ChartDirection$1 = /* @__PURE__ */ ((ChartDirection2) => {
-  ChartDirection2["Vertical"] = "vertical";
-  return ChartDirection2;
-})(ChartDirection$1 || {});
-var TooltipLabel = /* @__PURE__ */ ((TooltipLabel2) => {
-  TooltipLabel2["Y"] = "yLabel";
-  TooltipLabel2["X"] = "xLabel";
-  return TooltipLabel2;
-})(TooltipLabel || {});
-var AlignOptions = /* @__PURE__ */ ((AlignOptions2) => {
-  AlignOptions2["End"] = "end";
-  AlignOptions2["Start"] = "start";
-  AlignOptions2["Center"] = "center";
-  AlignOptions2["Right"] = "right";
-  AlignOptions2["Left"] = "left";
-  return AlignOptions2;
-})(AlignOptions || {});
-var AnnotationType$1 = /* @__PURE__ */ ((AnnotationType2) => {
-  AnnotationType2["Box"] = "box";
-  AnnotationType2["Ellipse"] = "ellipse";
-  AnnotationType2["Line"] = "line";
-  AnnotationType2["Text"] = "text";
-  return AnnotationType2;
-})(AnnotationType$1 || {});
-var PointStyle = /* @__PURE__ */ ((PointStyle2) => {
-  PointStyle2["Circle"] = "circle";
-  PointStyle2["Square"] = "rect";
-  PointStyle2["Diamond"] = "rectRot";
-  PointStyle2["Triangle"] = "triangle";
-  return PointStyle2;
-})(PointStyle || {});
-var ChartHoverMode = /* @__PURE__ */ ((ChartHoverMode2) => {
-  ChartHoverMode2["Nearest"] = "nearest";
-  return ChartHoverMode2;
-})(ChartHoverMode || {});
-var PanZoomMode = /* @__PURE__ */ ((PanZoomMode2) => {
-  PanZoomMode2["X"] = "x";
-  PanZoomMode2["Y"] = "y";
-  PanZoomMode2["XY"] = "xy";
-  PanZoomMode2["Z"] = "z";
-  return PanZoomMode2;
-})(PanZoomMode || {});
-var Key = /* @__PURE__ */ ((Key2) => {
-  Key2["Shift"] = "Shift";
-  return Key2;
-})(Key || {});
-var Events = /* @__PURE__ */ ((Events2) => {
-  Events2["Mousemove"] = "mousemove";
-  Events2["Mouseout"] = "mouseout";
-  Events2["Click"] = "click";
-  Events2["Touchstart"] = "touchstart";
-  Events2["Touchmove"] = "touchmove";
-  Events2["Dblclick"] = "dblclick";
-  return Events2;
-})(Events || {});
 const MINOR_TICKS_PER_MAJOR = 10;
 const getLargestMajorTickWidth = (majorTickPositions) => {
   return majorTickPositions.reduce(
@@ -22767,55 +22555,146 @@ const GRADIENT_COLORS = [
   { offset: 0.99, color: "rgba(255,182,193,0.8)" }
   // Light red
 ];
-const chartAreaBorderPlugin = {
-  id: "chartAreaBorder",
-  beforeDraw(chart2, _2, options) {
-    const {
-      ctx,
-      chartArea: { left: left2, top: top2, width, height }
-    } = chart2;
-    ctx.save();
-    ctx.strokeStyle = options.borderColor;
-    ctx.lineWidth = options.borderWidth;
-    ctx.setLineDash(options.borderDash || []);
-    ctx.lineDashOffset = options.borderDashOffset ?? 0;
-    ctx.strokeRect(left2, top2, width, height);
-    ctx.restore();
-  }
-};
-const getPlugins = (graph, legend2) => {
-  var _a2;
-  let plugins = [];
-  if (graph.showMinorGridlines) {
-    plugins.push(chartMinorGridlinesPlugin);
-  }
-  const customLegend = legend2 == null ? void 0 : legend2.customLegend;
-  if ((customLegend == null ? void 0 : customLegend.customLegendPlugin) && (customLegend == null ? void 0 : customLegend.customLegendContainerID)) {
-    plugins.push({
-      id: CUSTOM_LEGEND_PLUGIN_NAME,
-      ...(_a2 = legend2 == null ? void 0 : legend2.customLegend) == null ? void 0 : _a2.customLegendPlugin
-    });
-  }
-  plugins.push(chartAreaBorderPlugin);
-  return plugins;
-};
-const generateRandomColor = (colors2) => {
-  const color2 = `#${Math.floor(Math.random() * WHITE_COLOR_AS_DECIMAL).toString(
-    16
-  )}`;
-  if (colors2.includes(color2)) {
-    return generateRandomColor(colors2);
-  } else {
-    colors2.push(color2);
-    return colors2;
-  }
-};
-const getTitle = (options) => {
-  return options.title !== "" ? {
-    display: true,
-    text: options.title
-  } : {};
-};
+var AxisType = /* @__PURE__ */ ((AxisType2) => {
+  AxisType2["X"] = "x";
+  AxisType2["Y"] = "y";
+  return AxisType2;
+})(AxisType || {});
+var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["Bottom"] = "bottom";
+  Position2["Top"] = "top";
+  Position2["Left"] = "left";
+  Position2["Right"] = "right";
+  Position2["TopRight"] = "top-right";
+  Position2["TopLeft"] = "top-left";
+  Position2["BottomLeft"] = "bottom-left";
+  Position2["BottomRight"] = "bottom-right";
+  return Position2;
+})(Position || {});
+var ChartType$1 = /* @__PURE__ */ ((ChartType2) => {
+  ChartType2["Line"] = "line";
+  ChartType2["Bar"] = "bar";
+  return ChartType2;
+})(ChartType$1 || {});
+var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
+  CursorStyle2["Pointer"] = "pointer";
+  CursorStyle2["Initial"] = "initial";
+  CursorStyle2["Grab"] = "grab";
+  CursorStyle2["Grabbing"] = "grabbing";
+  CursorStyle2["Crosshair"] = "crosshair";
+  CursorStyle2["Move"] = "move";
+  return CursorStyle2;
+})(CursorStyle || {});
+var ScaleType = /* @__PURE__ */ ((ScaleType2) => {
+  ScaleType2["Category"] = "category";
+  ScaleType2["Linear"] = "linear";
+  ScaleType2["Logarithmic"] = "logarithmic";
+  return ScaleType2;
+})(ScaleType || {});
+var ChartDirection$1 = /* @__PURE__ */ ((ChartDirection2) => {
+  ChartDirection2["Vertical"] = "vertical";
+  return ChartDirection2;
+})(ChartDirection$1 || {});
+var TooltipLabel = /* @__PURE__ */ ((TooltipLabel2) => {
+  TooltipLabel2["Y"] = "yLabel";
+  TooltipLabel2["X"] = "xLabel";
+  return TooltipLabel2;
+})(TooltipLabel || {});
+var AlignOptions = /* @__PURE__ */ ((AlignOptions2) => {
+  AlignOptions2["End"] = "end";
+  AlignOptions2["Start"] = "start";
+  AlignOptions2["Center"] = "center";
+  AlignOptions2["Right"] = "right";
+  AlignOptions2["Left"] = "left";
+  return AlignOptions2;
+})(AlignOptions || {});
+var AnnotationType$1 = /* @__PURE__ */ ((AnnotationType2) => {
+  AnnotationType2["Box"] = "box";
+  AnnotationType2["Ellipse"] = "ellipse";
+  AnnotationType2["Line"] = "line";
+  AnnotationType2["Text"] = "text";
+  return AnnotationType2;
+})(AnnotationType$1 || {});
+var PointStyle = /* @__PURE__ */ ((PointStyle2) => {
+  PointStyle2["Circle"] = "circle";
+  PointStyle2["Square"] = "rect";
+  PointStyle2["Diamond"] = "rectRot";
+  PointStyle2["Triangle"] = "triangle";
+  return PointStyle2;
+})(PointStyle || {});
+var ChartHoverMode = /* @__PURE__ */ ((ChartHoverMode2) => {
+  ChartHoverMode2["Nearest"] = "nearest";
+  return ChartHoverMode2;
+})(ChartHoverMode || {});
+var PanZoomMode = /* @__PURE__ */ ((PanZoomMode2) => {
+  PanZoomMode2["X"] = "x";
+  PanZoomMode2["Y"] = "y";
+  PanZoomMode2["XY"] = "xy";
+  PanZoomMode2["Z"] = "z";
+  return PanZoomMode2;
+})(PanZoomMode || {});
+var Key = /* @__PURE__ */ ((Key2) => {
+  Key2["Shift"] = "Shift";
+  return Key2;
+})(Key || {});
+var Events = /* @__PURE__ */ ((Events2) => {
+  Events2["Mousemove"] = "mousemove";
+  Events2["Mouseout"] = "mouseout";
+  Events2["Click"] = "click";
+  Events2["Touchstart"] = "touchstart";
+  Events2["Touchmove"] = "touchmove";
+  Events2["Dblclick"] = "dblclick";
+  return Events2;
+})(Events || {});
+const chartAreaBorderPlugin = {
+  id: "chartAreaBorder",
+  beforeDraw(chart2, _2, options) {
+    const {
+      ctx,
+      chartArea: { left: left2, top: top2, width, height }
+    } = chart2;
+    ctx.save();
+    ctx.strokeStyle = options.borderColor;
+    ctx.lineWidth = options.borderWidth;
+    ctx.setLineDash(options.borderDash || []);
+    ctx.lineDashOffset = options.borderDashOffset ?? 0;
+    ctx.strokeRect(left2, top2, width, height);
+    ctx.restore();
+  }
+};
+const getPlugins = (graph, legend2) => {
+  var _a2;
+  let plugins = [];
+  if (graph.showMinorGridlines) {
+    plugins.push(chartMinorGridlinesPlugin);
+  }
+  const customLegend = legend2 == null ? void 0 : legend2.customLegend;
+  if ((customLegend == null ? void 0 : customLegend.customLegendPlugin) && (customLegend == null ? void 0 : customLegend.customLegendContainerID)) {
+    plugins.push({
+      id: CUSTOM_LEGEND_PLUGIN_NAME,
+      ...(_a2 = legend2 == null ? void 0 : legend2.customLegend) == null ? void 0 : _a2.customLegendPlugin
+    });
+  }
+  plugins.push(chartAreaBorderPlugin);
+  return plugins;
+};
+const generateRandomColor = (colors2) => {
+  const color2 = `#${Math.floor(Math.random() * WHITE_COLOR_AS_DECIMAL).toString(
+    16
+  )}`;
+  if (colors2.includes(color2)) {
+    return generateRandomColor(colors2);
+  } else {
+    colors2.push(color2);
+    return colors2;
+  }
+};
+const getTitle = (options) => {
+  return options.title !== "" ? {
+    display: true,
+    text: options.title
+  } : {};
+};
 const isVertical = (direction) => {
   return direction === ChartDirection$1.Vertical;
 };
@@ -22898,28 +22777,121 @@ const isNilOrEmpty = (value) => {
   }
   return false;
 };
-const isLessThanMax = (value, max) => {
-  return value === void 0 || max === void 0 || Number(value) < Number(max);
-};
-const isGreaterThanMin = (value, min) => {
-  return value === void 0 || min === void 0 || Number(value) > Number(min);
-};
-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 isEmptyString = (value) => value === "";
+const chart$3 = "_chart_e3qdd_1";
+const canvas$2 = "_canvas_e3qdd_11";
+const fixedHeight$3 = "_fixedHeight_e3qdd_20";
+const stretchHeight$3 = "_stretchHeight_e3qdd_26";
+const squareAspectRatio$1 = "_squareAspectRatio_e3qdd_32";
+const table = "_table_e3qdd_62";
+const styles$5 = {
+  chart: chart$3,
+  canvas: canvas$2,
+  fixedHeight: fixedHeight$3,
+  stretchHeight: stretchHeight$3,
+  squareAspectRatio: squareAspectRatio$1,
+  table
 };
-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 TOGGLE_ZOOM = "TOGGLE_ZOOM";
+const TOGGLE_PAN = "TOGGLE_PAN";
+const TOGGLE_POINTS = "TOGGLE_POINTS";
+const TOGGLE_LINE = "TOGGLE_LINE";
+const TOGGLE_LEGEND = "TOGGLE_LEGEND";
+const TOGGLE_TABLE = "TOGGLE_TABLE";
+const RESET_AXES_RANGES = "RESET_AXES_RANGES";
+const UPDATE_AXES_RANGES = "UPDATE_AXES_RANGES";
+const TOGGLE_DRAG_POINTS = "TOGGLE_DRAG_POINTS";
+const TOGGLE_DRAG_ANNOTATION = "TOGGLE_DRAG_ANNOTATION";
+const DISABLE_DRAG_OPTIONS = "DISABLE_DRAG_OPTIONS";
+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;
+        }
+        if (draft.enableDragAnnotation) {
+          draft.enableDragAnnotation = false;
+        }
+        break;
+      }
+      case TOGGLE_PAN: {
+        draft.panEnabled = !draft.panEnabled;
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        if (draft.enableDragPoints) {
+          draft.enableDragPoints = false;
+        }
+        if (draft.enableDragAnnotation) {
+          draft.enableDragAnnotation = 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 UPDATE_AXES_RANGES: {
+        const { axes } = action.payload;
+        draft.axes = axes;
+        break;
+      }
+      case RESET_AXES_RANGES: {
+        const { axes } = action.payload;
+        draft.axes = axes;
+        break;
+      }
+      case TOGGLE_DRAG_POINTS: {
+        draft.enableDragPoints = !draft.enableDragPoints;
+        if (draft.panEnabled) {
+          draft.panEnabled = false;
+        }
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        if (draft.enableDragAnnotation) {
+          draft.enableDragAnnotation = false;
+        }
+        break;
+      }
+      case TOGGLE_DRAG_ANNOTATION: {
+        draft.enableDragAnnotation = !draft.enableDragAnnotation;
+        if (draft.panEnabled) {
+          draft.panEnabled = false;
+        }
+        if (draft.zoomEnabled) {
+          draft.zoomEnabled = false;
+        }
+        break;
+      }
+      case DISABLE_DRAG_OPTIONS: {
+        if (draft.enableDragAnnotation || draft.enableDragPoints || draft.panEnabled || draft.zoomEnabled) {
+          draft.enableDragAnnotation = false;
+          draft.enableDragPoints = false;
+          draft.panEnabled = false;
+          draft.zoomEnabled = false;
+        }
+        break;
+      }
+    }
+  });
 };
 const getChartStateFromStorage = (persistenceId) => {
   if (!persistenceId) return null;
@@ -22964,8 +22936,6 @@ const storeChartStateInStorage = (state, persistenceId) => {
 };
 const initialState = ({ options, persistenceId }) => {
   const {
-    additionalAxesOptions: { range: customAxesRange = {} },
-    axes,
     chartOptions: {
       enableZoom,
       enablePan,
@@ -22976,45 +22946,6 @@ const initialState = ({ options, persistenceId }) => {
     legend: { display },
     dragData
   } = options;
-  const getStateAxesByType = (axisType, customAxesRange2) => {
-    var _a2, _b2, _c2, _d2, _e2;
-    if (!axes[axisType]) {
-      return [];
-    }
-    if (((_a2 = axes[axisType]) == null ? void 0 : _a2.length) > 1) {
-      return axes[axisType].map((axisObj, index2) => {
-        var _a3, _b3;
-        const id = generateAxisId(axisType, index2, axes[axisType].length > 1);
-        const customMin = (_a3 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _a3.min;
-        const customMax = (_b3 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _b3.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 = (_b2 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _b2.min;
-      const customMax = (_c2 = customAxesRange2 == null ? void 0 : customAxesRange2[id]) == null ? void 0 : _c2.max;
-      const unit = (_e2 = (_d2 = axes == null ? void 0 : axes[id]) == null ? void 0 : _d2[0]) == null ? void 0 : _e2.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,
@@ -23030,11 +22961,10 @@ const initialState = ({ options, persistenceId }) => {
     pointsEnabled: pointsEnabled ?? showPoints,
     lineEnabled: lineEnabled ?? showLine,
     legendEnabled: legendEnabled ?? display,
-    axes: stateAxes,
+    axes: [],
     showTable: false,
     enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
-    enableDragAnnotation: enableDragAnnotation ?? enableDragAnnotationStorage,
-    initialAxesRanges: []
+    enableDragAnnotation: enableDragAnnotation ?? enableDragAnnotationStorage
   };
 };
 const ControlsPortal = ({
@@ -24364,6 +24294,29 @@ const downloadPgn = (chartRef, state) => {
     distExports.triggerBase64Download(dataUrl, fileName);
   });
 };
+const isLessThanMax = (value, max) => {
+  return value === void 0 || max === void 0 || Number(value) < Number(max);
+};
+const isGreaterThanMin = (value, min) => {
+  return value === void 0 || min === void 0 || Number(value) > Number(min);
+};
+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 useChartFunctions = ({
   chartRef,
   state,
@@ -24378,8 +24331,9 @@ const useChartFunctions = ({
   const resetZoom2 = useCallback(() => {
     const chartInstance = chartRef == null ? void 0 : chartRef.current;
     chartInstance == null ? void 0 : chartInstance.resetZoom();
-    dispatch({ type: "RESET_AXES_RANGES" });
-  }, [chartRef]);
+    chartInstance == null ? void 0 : chartInstance.reset();
+    dispatch({ type: "RESET_AXES_RANGES", payload: { axes: [] } });
+  }, [chartRef == null ? void 0 : chartRef.current, dispatch]);
   const onHover = useCallback(
     (hoveredPoint, setHoveredPoint) => {
       return (evt, hoveredItems) => {
@@ -24402,7 +24356,7 @@ const useChartFunctions = ({
   );
   const handleDownload = useCallback(
     () => downloadPgn(chartRef, state),
-    [chartRef, state.axes]
+    [chartRef == null ? void 0 : chartRef.current, state.axes]
   );
   const handleKeyDown = useCallback(
     (event) => {
@@ -24417,7 +24371,7 @@ const useChartFunctions = ({
         }
       }
     },
-    [chartRef]
+    [chartRef == null ? void 0 : chartRef.current]
   );
   const handleKeyUp = useCallback(
     (event) => {
@@ -24432,7 +24386,7 @@ const useChartFunctions = ({
         }
       }
     },
-    [chartRef]
+    [chartRef == null ? void 0 : chartRef.current]
   );
   const getControlsAxesLabels = useCallback(
     (propsAxes) => {
@@ -24453,11 +24407,10 @@ const useChartFunctions = ({
           });
         }
       };
-      const axesLabels = [
+      return [
         ...getAxesLabels(propsAxes, AxisType.X),
         ...getAxesLabels(propsAxes, AxisType.Y)
       ];
-      return axesLabels;
     },
     [axes]
   );
@@ -24477,8 +24430,11 @@ const useChartFunctions = ({
     });
   }, [axes]);
   const onResetAxes = useCallback(() => {
-    dispatch({ type: RESET_AXES_RANGES });
-  }, []);
+    const chartInstance = chartRef == null ? void 0 : chartRef.current;
+    chartInstance == null ? void 0 : chartInstance.resetZoom();
+    chartInstance == null ? void 0 : chartInstance.reset();
+    dispatch({ type: RESET_AXES_RANGES, payload: { axes: [] } });
+  }, [chartRef == null ? void 0 : chartRef.current]);
   const onUpdateAxes = useCallback(({ axes: axes2 }) => {
     dispatch({ type: UPDATE_AXES_RANGES, payload: { axes: axes2 } });
   }, []);
@@ -24494,27 +24450,6 @@ const useChartFunctions = ({
     onUpdateAxes
   };
 };
-var actionTypes = /* @__PURE__ */ ((actionTypes2) => {
-  actionTypes2["Reset"] = "reset";
-  actionTypes2["ValueUpdated"] = "valueUpdated";
-  actionTypes2["UnitUpdated"] = "unitUpdated";
-  return actionTypes2;
-})(actionTypes || {});
-const initializeFormState = ({
-  initialAxesRanges,
-  axes = []
-}) => {
-  return (initialAxesRanges == null ? void 0 : initialAxesRanges.map((initialAxisRange) => {
-    const currentAxisRange = axes.find((a2) => a2.id === initialAxisRange.id);
-    return {
-      id: initialAxisRange.id,
-      min: (currentAxisRange == null ? void 0 : currentAxisRange.min) ?? (initialAxisRange == null ? void 0 : initialAxisRange.min),
-      max: (currentAxisRange == null ? void 0 : currentAxisRange.max) ?? (initialAxisRange == null ? void 0 : initialAxisRange.max),
-      unit: currentAxisRange == null ? void 0 : currentAxisRange.unit
-    };
-  })) || [];
-};
-const isEmptyString = (value) => value === "";
 const createErrorMessages = (value, compareTo, type) => {
   const errors = [];
   if (isEmptyString(value)) errors.push("mustHaveAValue");
@@ -24525,150 +24460,114 @@ const createErrorMessages = (value, compareTo, type) => {
   }
   return errors;
 };
-const validateAxes = (formState) => {
-  return formState.reduce(
-    (acc, { id, min, max }) => {
-      return produce(acc, (draft) => {
-        var _a2;
-        const errors = {
-          min: createErrorMessages(String(min), String(max), "min"),
-          max: createErrorMessages(String(max), String(min), "max")
-        };
-        (_a2 = draft == null ? void 0 : draft.errors) == null ? void 0 : _a2.push({
-          id,
-          ...errors
-        });
-        draft.valid = !(!acc.valid || !!errors.min.length || !!errors.max.length);
-      });
-    },
-    { errors: [], valid: true }
+const validateAxes = (axes) => {
+  const errors = axes.map(({ id, min, max }) => ({
+    id,
+    min: createErrorMessages(String(min), String(max), "min"),
+    max: createErrorMessages(String(max), String(min), "max")
+  }));
+  const valid = errors.every(
+    (error) => error.min.length === 0 && error.max.length === 0
   );
+  return { errors, valid };
 };
-const reducer = (state, action) => {
-  switch (action.type) {
-    case actionTypes.Reset: {
-      const { initialAxesRanges, axes } = action.payload;
-      return initializeFormState({ initialAxesRanges, axes });
-    }
-    case actionTypes.ValueUpdated:
-      return produce(state, (draft) => {
-        const { name, value, id } = action.payload;
-        const axis = draft.find((a2) => a2.id === id);
-        if (axis && value) {
-          axis[name] = value;
-        }
-      });
-    case actionTypes.UnitUpdated:
-      return produce(state, (draft) => {
-        var _a2;
-        const { name, value, id } = action.payload;
-        const unit = (_a2 = draft.find((a2) => a2.id === id)) == null ? void 0 : _a2.unit;
-        if (unit && name) {
-          unit[name] = value;
-        }
-      });
-    default:
-      return state;
-  }
+const RANGE_GAP$1 = 1;
+const getInitAxes = ({ chartRef, state }) => {
+  const chart2 = chartRef == null ? void 0 : chartRef.current;
+  if (!chart2) return [];
+  const initScales = (chart2 == null ? void 0 : chart2.getInitialScaleBounds()) ?? {};
+  return Object.entries(initScales).map(([id, { min = "", max = "" }]) => {
+    var _a2;
+    let adjustedMin = Number(min);
+    let adjustedMax = Number(max);
+    if (isNaN(adjustedMin)) adjustedMin = 0;
+    if (isNaN(adjustedMax)) adjustedMax = adjustedMin + RANGE_GAP$1;
+    if (adjustedMin === adjustedMax) {
+      adjustedMax += RANGE_GAP$1;
+    }
+    const { unit } = ((_a2 = state == null ? void 0 : state.axes) == null ? void 0 : _a2.find((axis) => axis.id === id)) ?? {};
+    return {
+      id,
+      min: adjustedMin,
+      max: adjustedMax,
+      unit
+    };
+  });
 };
 const AxesOptionsPopover = (optionsPopover) => {
   var _a2;
   const {
-    initialAxesRanges,
-    axes,
+    state,
     controlsAxesLabels,
     onUpdateAxes,
     onResetAxes,
     depthType,
     translations,
-    close
-  } = optionsPopover;
-  const [depthTypeState, setDepthTypeState] = useState(
-    depthType == null ? void 0 : depthType.selectedDepthType
-  );
-  const [formState, dispatch] = useReducer(
-    reducer,
-    {
-      axes,
-      initialAxesRanges
-    },
-    initializeFormState
-  );
-  const { errors, valid } = validateAxes(formState);
+    close,
+    chartRef
+  } = optionsPopover ?? {};
+  const [formState, setFormState] = useState({
+    localAxes: getInitAxes({ chartRef, state }),
+    depthType: depthType == null ? void 0 : depthType.selectedDepthType,
+    edited: false
+  });
+  const { errors, valid } = validateAxes(formState.localAxes);
   const onEditValue = ({ name, value, id }) => {
-    dispatch({
-      type: actionTypes.ValueUpdated,
-      payload: { name, value, id }
-    });
+    setFormState((prevState) => ({
+      ...prevState,
+      localAxes: prevState.localAxes.map(
+        (axis) => axis.id === id ? { ...axis, [name]: value } : axis
+      ),
+      edited: true
+    }));
   };
   const onEditUnit = ({ name, value, id }) => {
-    dispatch({
-      type: actionTypes.UnitUpdated,
-      payload: { name, value, id }
-    });
+    setFormState((prevState) => ({
+      ...prevState,
+      localAxes: prevState.localAxes.map(
+        (axis) => axis.id === id && typeof axis.unit === "object" ? {
+          ...axis,
+          unit: {
+            ...axis.unit,
+            [name]: value
+          }
+        } : axis
+      ),
+      edited: true
+    }));
   };
   const onDone = (e2) => {
     e2.preventDefault();
     if (valid) {
-      const sanitizedFormState = formState.map((axis) => ({
-        ...axis,
-        min: typeof axis.min === "string" ? Number(axis.min) : axis.min,
-        max: typeof axis.max === "string" ? Number(axis.max) : axis.max
-      }));
-      onUpdateAxes({
-        axes: sanitizedFormState
-      });
-      sanitizedFormState.map((el, i2) => {
-        var _a3, _b2, _c2;
-        const selectedUnit = (_a3 = el.unit) == null ? void 0 : _a3.selectedUnit;
-        if (selectedUnit) {
-          (_c2 = (_b2 = axes == null ? void 0 : axes[i2]) == null ? void 0 : _b2.unit) == null ? void 0 : _c2.setSelectedUnit(selectedUnit);
-        }
-      });
-      if (depthType && (depthType == null ? void 0 : depthType.setSelectedDepthType)) {
-        depthType == null ? void 0 : depthType.setSelectedDepthType(depthTypeState);
-      }
+      onUpdateAxes({ axes: formState.localAxes });
+      close == null ? void 0 : close();
     }
-    close == null ? void 0 : close();
   };
   const onReset = () => {
-    dispatch({
-      type: actionTypes.Reset,
-      payload: { axes, initialAxesRanges }
-    });
-    initialAxesRanges.map((el, i2) => {
-      var _a3, _b2, _c2;
-      const selectedUnit = (_a3 = el.unit) == null ? void 0 : _a3.selectedUnit;
-      if (selectedUnit) {
-        (_c2 = (_b2 = axes == null ? void 0 : axes[i2]) == null ? void 0 : _b2.unit) == null ? void 0 : _c2.setSelectedUnit(selectedUnit);
-      }
+    setFormState({
+      localAxes: getInitAxes({ chartRef, state }),
+      depthType: depthType == null ? void 0 : depthType.selectedDepthType,
+      edited: false
     });
     onResetAxes();
     close == null ? void 0 : close();
   };
-  const isCustomValue = axes.filter((axis) => axis.max || axis.min).length > 0;
   const handleInputFocus = (e2) => e2.target.select();
   return /* @__PURE__ */ jsxs("form", { onSubmit: onDone, children: [
-    axes.map((axis, i2) => {
-      var _a3, _b2, _c2;
+    formState.localAxes.map((axis) => {
+      var _a3, _b2;
       const axisControl = controlsAxesLabels.find(
         (el) => el.id === axis.id
       );
-      const axisLabel = axisControl == null ? void 0 : axisControl.label;
-      const axisState = formState.find(
-        (a2) => a2.id === axis.id
-      );
-      const axisErrors = errors == null ? void 0 : errors.find((a2) => a2.id === axis.id);
-      const { min, max, unit } = axisState || {};
-      const minErrorMsg = ((_a3 = axisErrors == null ? void 0 : axisErrors.min) == null ? void 0 : _a3[0]) ? translations[axisErrors.min[0]] : null;
-      const maxErrorMsg = ((_b2 = axisErrors == null ? void 0 : axisErrors.max) == null ? void 0 : _b2[0]) ? translations[axisErrors.max[0]] : null;
-      return /* @__PURE__ */ jsx(Field, { label: axisLabel || axis.id || "", children: /* @__PURE__ */ jsxs(InputGroup, { small: true, width: "300px", children: [
+      const axisLabel = (axisControl == null ? void 0 : axisControl.label) || startCase(axis.id);
+      const axisErrors = errors.find((err) => err.id === axis.id);
+      return /* @__PURE__ */ jsx(Field, { label: axisLabel, children: /* @__PURE__ */ jsxs(InputGroup, { small: true, width: "300px", children: [
         /* @__PURE__ */ jsx(
           NumberInput,
           {
             name: "min",
-            value: min,
-            error: minErrorMsg,
+            value: axis.min,
+            error: ((_a3 = axisErrors == null ? void 0 : axisErrors.min) == null ? void 0 : _a3[0]) ? translations[axisErrors.min[0]] : null,
             width: "100%",
             onChange: (evt) => onEditValue({
               name: evt.target.name,
@@ -24683,8 +24582,8 @@ const AxesOptionsPopover = (optionsPopover) => {
           NumberInput,
           {
             name: "max",
-            value: max,
-            error: maxErrorMsg,
+            value: axis.max,
+            error: ((_b2 = axisErrors == null ? void 0 : axisErrors.max) == null ? void 0 : _b2[0]) ? translations[axisErrors.max[0]] : null,
             width: "100%",
             onChange: (evt) => onEditValue({
               name: evt.target.name,
@@ -24698,22 +24597,20 @@ const AxesOptionsPopover = (optionsPopover) => {
           Select,
           {
             name: "selectedUnit",
-            options: (_c2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _c2.options,
-            value: typeof unit !== "string" ? unit == null ? void 0 : unit.selectedUnit : void 0,
-            onChange: (e2) => {
-              onEditUnit({
-                name: e2.target.name,
-                value: e2.target.value,
-                id: axis.id
-              });
-            },
+            options: typeof axis.unit !== "string" ? axis.unit.options : [],
+            value: typeof axis.unit !== "string" ? axis.unit.selectedUnit : void 0,
+            onChange: (e2) => onEditUnit({
+              name: e2.target.name,
+              value: e2.target.value,
+              id: axis.id
+            }),
             autoLayerWidth: true,
             width: "15%"
           }
         ) : null
-      ] }) }, i2);
+      ] }) }, axis.id);
     }),
-    ((_a2 = depthType == null ? void 0 : depthType.options) == null ? void 0 : _a2.length) > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    ((_a2 = depthType == null ? void 0 : depthType.options) == null ? void 0 : _a2.length) > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         ButtonGroup,
         {
@@ -24721,15 +24618,16 @@ const AxesOptionsPopover = (optionsPopover) => {
             key: i2,
             label: depth
           })),
-          onSelected: (key) => {
-            setDepthTypeState(depthType.options[key]);
-          },
+          onSelected: (key) => setFormState((prevState) => ({
+            ...prevState,
+            depthType: depthType.options[key]
+          })),
           small: true,
-          value: depthType.options.indexOf(depthTypeState)
+          value: depthType.options.indexOf(formState.depthType)
         }
       ),
       /* @__PURE__ */ jsx(Spacer, {})
-    ] }) : null,
+    ] }),
     /* @__PURE__ */ jsxs(Flex, { gap: "8px", alignItems: "center", children: [
       /* @__PURE__ */ jsx(
         Button,
@@ -24738,7 +24636,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           small: true,
           colored: true,
           label: translations.done,
-          disabled: !valid
+          disabled: !valid || !formState.edited
         }
       ),
       /* @__PURE__ */ jsx(
@@ -24747,8 +24645,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           small: true,
           name: "resetAxes",
           label: translations.resetAxes,
-          onClick: onReset,
-          disabled: !isCustomValue
+          onClick: onReset
         }
       ),
       /* @__PURE__ */ jsx(Text, { small: true, muted: true, children: translations.orDoubleClickToCanvas })
@@ -24756,36 +24653,16 @@ const AxesOptionsPopover = (optionsPopover) => {
   ] });
 };
 const AxesOptions = (optionsPopover) => {
-  const {
-    initialAxesRanges,
-    axes,
-    controlsAxesLabels,
-    onUpdateAxes,
-    onResetAxes,
-    depthType,
-    translations
-  } = optionsPopover;
   return /* @__PURE__ */ jsx(
     Popover,
     {
       placement: "bottom-start",
       overflowContainer: true,
-      content: /* @__PURE__ */ jsx(
-        AxesOptionsPopover,
-        {
-          initialAxesRanges,
-          axes,
-          controlsAxesLabels,
-          onUpdateAxes,
-          onResetAxes,
-          depthType,
-          translations
-        }
-      ),
+      content: /* @__PURE__ */ jsx(AxesOptionsPopover, { ...optionsPopover }),
       children: /* @__PURE__ */ jsx(
         Tooltip$2,
         {
-          text: translations.axesOptions,
+          text: optionsPopover.translations.axesOptions,
           placement: "bottom-start",
           display: "inline-flex",
           children: /* @__PURE__ */ jsx(Button, { small: true, basic: true, colored: "muted", round: true, icon: /* @__PURE__ */ jsx(TbRuler, {}) })
@@ -24795,9 +24672,9 @@ const AxesOptions = (optionsPopover) => {
   );
 };
 const Controls = ({
+  table: table2,
   headerComponent,
   subheaderComponent,
-  table: table2,
   chartRef,
   state,
   options,
@@ -24808,7 +24685,6 @@ const Controls = ({
 }) => {
   const {
     enableDragPoints,
-    initialAxesRanges,
     lineEnabled,
     panEnabled,
     pointsEnabled,
@@ -24883,8 +24759,8 @@ const Controls = ({
               /* @__PURE__ */ jsx(
                 AxesOptions,
                 {
-                  initialAxesRanges,
-                  axes: state.axes,
+                  chartRef,
+                  state,
                   controlsAxesLabels,
                   onUpdateAxes,
                   onResetAxes,
@@ -25198,8 +25074,8 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     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 axesMin = Number((_a2 = axes[0]) == null ? void 0 : _a2.min);
+      const axesMax = Number((_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);
@@ -26228,7 +26104,7 @@ const useUpdateAxesRanges = ({
   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) ?? {};
+        const { min: minFromData = void 0, max: maxFromData = void 0 } = getAxisRangeByType(chartRef, key, annotationsData) ?? {};
         let finalMin = min ?? minFromData;
         let finalMax = max ?? maxFromData;
         if (finalMin === finalMax) {
@@ -26254,60 +26130,13 @@ const useUpdateAxesRanges = ({
     }
   }, [range]);
 };
-const useSaveInitialAxesRanges = (chartRef, dispatch, generatedDatasets) => {
-  var _a2;
-  const prevDatasets = useRef(null);
-  const getDatasetsSignature = (datasets) => {
-    if (!datasets.length) return "";
-    const datasetSignatures = datasets.map((dataset) => {
-      const data = dataset.data ?? [];
-      if (!data.length) return "empty";
-      const firstDataPoint = data.at(0);
-      const lastDataPoint = data.at(-1);
-      const lengthChecksum = data.length;
-      return firstDataPoint && lastDataPoint ? `${firstDataPoint.x},${firstDataPoint.y}-${lastDataPoint.x},${lastDataPoint.y}-${lengthChecksum}` : "invalid";
-    });
-    return `${datasets.length}-${datasetSignatures.join("|")}`;
-  };
-  useEffect(() => {
-    var _a3;
-    if ((_a3 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a3.scales) {
-      const prevHash = prevDatasets.current ? getDatasetsSignature(prevDatasets.current) : "";
-      const currentHash = getDatasetsSignature(generatedDatasets);
-      if (prevHash !== currentHash) {
-        const scales = chartRef.current.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
+  persistenceId
 }) => {
-  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 {
@@ -26323,7 +26152,6 @@ const useChartState = ({
     chartRef,
     annotationsData
   });
-  useSaveInitialAxesRanges(chartRef, dispatch, generatedDatasets);
 };
 const WORD_SEPARATOR = " ";
 const SEMI_TRANSPARENT = "rgba(0, 0, 0, 0.5)";
@@ -27383,7 +27211,7 @@ const LineChart = (props) => {
   var _a2, _b2;
   setDefaultTheme();
   const chartRef = useRef(null);
-  const { table: table2 } = props ?? {};
+  const { table: table2, headerComponent, subheaderComponent } = props ?? {};
   const { translations, languageKey } = getConfig();
   const chart2 = getDefaultProps$3(props);
   const {
@@ -27396,23 +27224,30 @@ const LineChart = (props) => {
   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);
   const [state, dispatch] = useReducer(
-    reducer$1,
+    reducer,
     {
       options,
-      persistenceId
+      persistenceId,
+      chartRef
     },
     initialState
   );
   const generatedDatasets = useMemo(() => {
     return generateLineChartDatasets(datasets, state, options, translations);
-  }, [state.lineEnabled, state.pointsEnabled, axes, annotations, graph]);
+  }, [
+    state.lineEnabled,
+    state.pointsEnabled,
+    datasets,
+    axes,
+    annotations,
+    graph
+  ]);
   useChartState({
     chartRef,
     options,
     state,
     dispatch,
-    persistenceId,
-    generatedDatasets
+    persistenceId
   });
   const { resetZoom: resetZoom2, handleKeyDown, handleKeyUp } = useChartFunctions({
     chartRef,
@@ -27445,7 +27280,9 @@ const LineChart = (props) => {
         /* @__PURE__ */ jsx(
           Controls,
           {
-            ...props,
+            table: table2,
+            headerComponent,
+            subheaderComponent,
             chartRef,
             state,
             options,