@oliasoft-open-source/charts-library 3.7.0-beta-2 → 3.7.0-beta-3

package/dist/index.js

@@ -7,11 +7,11 @@ var __publicField = (obj, key, value) => {
 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 React, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
-import { round as round$2, toNum, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
+import { round as round$2, displayNumber, isCloseTo, roundByMagnitude, toNum } from "@oliasoft-open-source/units";
 import cx from "classnames";
 import { produce } from "immer";
 import { Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Portal } from "@oliasoft-open-source/react-ui-library";
-import { debounce as debounce$3, isEqual } from "lodash";
+import { isEmpty, isArray as isArray$2, some, has, debounce as debounce$3, isEqual } from "lodash";
 import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
  * @kurkle/color v0.3.2
@@ -13369,7 +13369,12 @@ const getAxisPosition = (axisType, i2) => {
   return i2 % 2 === 0 ? positionA : positionB;
 };
 const getClassName = (chartStyling, styles2) => {
-  const { width, height, staticChartHeight, squareAspectRatio: squareAspectRatio2 } = chartStyling;
+  const {
+    width,
+    height,
+    staticChartHeight = false,
+    squareAspectRatio: squareAspectRatio2 = 0
+  } = chartStyling;
   const squareAspectRatioStyle = squareAspectRatio2 ? styles2.squareAspectRatio : "";
   let heightStyles = "";
   if (width || height) {
@@ -22766,7 +22771,8 @@ const initialState = ({ options, persistenceId }) => {
     axes: stateAxes,
     showAnnotationLineIndex: setAnnotations(annotationsData),
     showTable: false,
-    enableDragPoints: dragData.enableDragData && enableDragPoints
+    enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
+    initialAxesRanges: []
   };
 };
 var DefaultContext = {
@@ -22871,7 +22877,8 @@ const LineOptions = ({
   onToggleLine,
   onTogglePoints,
   pointsEnabled,
-  translations
+  translations,
+  hasCustomOpt
 }) => {
   const options = [
     {
@@ -22901,17 +22908,26 @@ const LineOptions = ({
     }
   ];
   const selectedOption = options.find((option) => option.selected);
-  return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption == null ? void 0 : selectedOption.label, placement: "bottom", children: /* @__PURE__ */ jsx(
-    Button,
+  return /* @__PURE__ */ jsx(
+    Tooltip$2,
     {
-      small: true,
-      basic: true,
-      colored: "muted",
-      round: true,
-      icon: selectedOption == null ? void 0 : selectedOption.icon,
-      onClick: selectedOption == null ? void 0 : selectedOption.onClick
+      text: selectedOption == null ? void 0 : selectedOption.label,
+      placement: "bottom",
+      enabled: !hasCustomOpt,
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          small: true,
+          basic: true,
+          colored: "muted",
+          round: true,
+          icon: selectedOption == null ? void 0 : selectedOption.icon,
+          onClick: selectedOption == null ? void 0 : selectedOption.onClick,
+          disabled: hasCustomOpt
+        }
+      )
     }
-  ) });
+  );
 };
 function TbHandStop(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M8 13v-7.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M11 5.5v-2a1.5 1.5 0 1 1 3 0v8.5" } }, { "tag": "path", "attr": { "d": "M14 5.5a1.5 1.5 0 0 1 3 0v6.5" } }, { "tag": "path", "attr": { "d": "M17 7.5a1.5 1.5 0 0 1 3 0v8.5a6 6 0 0 1 -6 6h-2h.208a6 6 0 0 1 -5.012 -2.7a69.74 69.74 0 0 1 -.196 -.3c-.312 -.479 -1.407 -2.388 -3.286 -5.728a1.5 1.5 0 0 1 .536 -2.022a1.867 1.867 0 0 1 2.28 .28l1.47 1.47" } }] })(props);
@@ -23982,41 +23998,9 @@ const useChartFunctions = ({
   generatedDatasets
 }) => {
   const {
-    annotations,
-    interactions: {
-      onLegendClick,
-      onHover: onPointHover,
-      onUnhover: onPointUnhover
-    },
-    additionalAxesOptions,
+    interactions: { onHover: onPointHover, onUnhover: onPointUnhover },
     axes
   } = options;
-  const legendClick = useCallback(
-    (_e2, legendItem2) => {
-      const { datasetIndex } = legendItem2;
-      const chartInstance = chartRef == null ? void 0 : chartRef.current;
-      const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
-      const dataset = datasets[datasetIndex];
-      const meta = chartInstance.getDatasetMeta(datasetIndex);
-      meta.hidden = meta.hidden === null ? !dataset.hidden : null;
-      if (annotations.controlAnnotation && dataset.isAnnotation) {
-        const { annotationIndex } = dataset;
-        dispatch({ type: "TOGGLE_ANNOTATION", payload: { annotationIndex } });
-      }
-      if (dataset.displayGroup) {
-        datasets == null ? void 0 : datasets.forEach((ds, ix) => {
-          if (ds.displayGroup !== dataset.displayGroup)
-            return;
-          chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
-        });
-      }
-      if (onLegendClick) {
-        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
-      }
-      chartInstance == null ? void 0 : chartInstance.update();
-    },
-    [onLegendClick, annotations]
-  );
   const resetZoom2 = useCallback(() => {
     const chartInstance = chartRef == null ? void 0 : chartRef.current;
     chartInstance == null ? void 0 : chartInstance.resetZoom();
@@ -24087,18 +24071,6 @@ const useChartFunctions = ({
     },
     [chartRef]
   );
-  const controlsAxes = state.axes.map((axis, i2) => {
-    var _a2, _b2, _c2, _d2;
-    const axisType = i2 ? AxisType.Y : AxisType.X;
-    const min = axis.min ?? ((_b2 = (_a2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _a2[axisType]) == null ? void 0 : _b2.min);
-    const max = axis.max ?? ((_d2 = (_c2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _c2[axisType]) == null ? void 0 : _d2.max);
-    return {
-      ...axis,
-      // only add min and max properties if they are defined:
-      ...min ? { min } : {},
-      ...max ? { max } : {}
-    };
-  });
   const getControlsAxesLabels = useCallback(
     (propsAxes) => {
       var _a2;
@@ -24150,13 +24122,11 @@ const useChartFunctions = ({
     dispatch({ type: UPDATE_AXES_RANGES, payload: { axes: axes2 } });
   }, []);
   return {
-    legendClick,
     resetZoom: resetZoom2,
     onHover,
     handleDownload,
     handleKeyDown,
     handleKeyUp,
-    controlsAxes,
     controlsAxesLabels: getControlsAxesLabels(axes),
     updateAxesRangesFromChart,
     onResetAxes,
@@ -24230,10 +24200,11 @@ const reducer = (state, action) => {
       });
     case actionTypes.UnitUpdated:
       return produce(state, (draft) => {
+        var _a2;
         const { name, value, id } = action.payload;
-        const axis = draft.find((a2) => a2.id === id);
-        if (axis) {
-          axis.unit[name] = value;
+        const unit = (_a2 = draft.find((a2) => a2.id === id)) == null ? void 0 : _a2.unit;
+        if (unit && name) {
+          unit[name] = value;
         }
       });
     default:
@@ -24248,9 +24219,9 @@ const AxesOptionsPopover = (optionsPopover) => {
     controlsAxesLabels,
     onUpdateAxes,
     onResetAxes,
-    close,
     depthType,
-    translations
+    translations,
+    close
   } = optionsPopover;
   const [depthTypeState, setDepthTypeState] = useState(
     depthType == null ? void 0 : depthType.selectedDepthType
@@ -24281,8 +24252,8 @@ const AxesOptionsPopover = (optionsPopover) => {
     if (valid) {
       const sanitizedFormState = formState.map((axis) => ({
         ...axis,
-        min: toNum(axis.min),
-        max: toNum(axis.max)
+        min: typeof axis.min === "string" ? Number(axis.min) : axis.min,
+        max: typeof axis.max === "string" ? Number(axis.max) : axis.max
       }));
       onUpdateAxes({
         axes: sanitizedFormState
@@ -24324,7 +24295,9 @@ const AxesOptionsPopover = (optionsPopover) => {
         (el) => el.id === axis.id
       );
       const axisLabel = axisControl == null ? void 0 : axisControl.label;
-      const axisState = formState.find((a2) => a2.id === axis.id);
+      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;
@@ -24368,7 +24341,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           {
             name: "selectedUnit",
             options: (_c2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _c2.options,
-            value: unit == null ? void 0 : unit.selectedUnit,
+            value: typeof unit !== "string" ? unit == null ? void 0 : unit.selectedUnit : void 0,
             onChange: (e2) => {
               onEditUnit({
                 name: e2.target.name,
@@ -24472,6 +24445,27 @@ const ControlsPortal = ({
   }
   return children;
 };
+const checkCustomOption = (data, customOptions) => {
+  if (isEmpty(data) || isEmpty(customOptions))
+    return false;
+  const checkOption = (dataset) => {
+    if (typeof customOptions === "string") {
+      return has(dataset, customOptions);
+    } else if (isArray$2(customOptions)) {
+      return some(customOptions, (option) => has(dataset, option));
+    } else {
+      return some(
+        Object.values(customOptions),
+        (option) => has(dataset, option)
+      );
+    }
+  };
+  if (isArray$2(data)) {
+    return some(data, (dataset) => checkOption(dataset));
+  } else {
+    return checkOption(data);
+  }
+};
 const Controls = ({
   headerComponent,
   subheaderComponent,
@@ -24503,19 +24497,14 @@ const Controls = ({
     onToggleDragPoints,
     onDisableDragOptions
   } = useToggleHandlers(dispatch);
-  const {
-    handleDownload,
-    controlsAxes,
-    controlsAxesLabels,
-    onResetAxes,
-    onUpdateAxes
-  } = useChartFunctions({
+  const { handleDownload, controlsAxesLabels, onResetAxes, onUpdateAxes } = useChartFunctions({
     chartRef,
     state,
     options,
     dispatch,
     generatedDatasets
   });
+  const hasCustomOpt = checkCustomOption(generatedDatasets, "hasCustomOpt");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: styles$3.controls, children: [
       !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
@@ -24526,7 +24515,7 @@ const Controls = ({
             AxesOptions,
             {
               initialAxesRanges,
-              axes: controlsAxes,
+              axes: state.axes,
               controlsAxesLabels,
               onUpdateAxes,
               onResetAxes,
@@ -24541,7 +24530,8 @@ const Controls = ({
               pointsEnabled,
               onToggleLine,
               onTogglePoints,
-              translations
+              translations,
+              hasCustomOpt
             }
           ),
           /* @__PURE__ */ jsx(
@@ -24570,7 +24560,7 @@ const Controls = ({
               onTogglePan,
               onToggleZoom,
               enableDragPoints,
-              isDragDataAllowed: dragData.enableDragData,
+              isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
               onToggleDragPoints,
               onDisableDragOptions,
               translations
@@ -24772,9 +24762,143 @@ const LegendItem = ({ hidden, dataset, handleClick }) => {
     }
   );
 };
+const useLegendState = ({
+  chartRef,
+  options,
+  state,
+  dispatch
+}) => {
+  const {
+    annotations,
+    interactions: { onLegendClick },
+    legend: { customLegend }
+  } = options;
+  const { legendEnabled } = state;
+  const [hiddenStates, setHiddenStates] = useState([]);
+  const upsertHiddenState = ({ label, datasetIndex, hidden }) => {
+    setHiddenStates((prevStates) => {
+      const existingIndex = prevStates.findIndex(
+        (state2) => state2.label === label
+      );
+      const newStates = [...prevStates];
+      const newState = { label, datasetIndex, hidden };
+      if (existingIndex !== -1) {
+        newStates[existingIndex] = newState;
+      } else {
+        newStates.push(newState);
+      }
+      return newStates;
+    });
+  };
+  const clearNonExistentDatasets = (datasets) => {
+    const existingLabels = datasets.map((ds) => ds.label);
+    setHiddenStates(
+      (prevStates) => prevStates.filter((state2) => existingLabels.includes(state2.label))
+    );
+  };
+  const legendClick = useCallback(
+    (_e2, legendItem2) => {
+      const { datasetIndex } = legendItem2;
+      const chartInstance = chartRef == null ? void 0 : chartRef.current;
+      const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
+      const dataset = datasets == null ? void 0 : datasets[datasetIndex];
+      const meta = chartInstance == null ? void 0 : chartInstance.getDatasetMeta(datasetIndex);
+      const isDatasetVisible = (chartInstance == null ? void 0 : chartInstance.isDatasetVisible(datasetIndex)) ?? true;
+      upsertHiddenState({
+        label: dataset.label,
+        datasetIndex,
+        hidden: isDatasetVisible
+      });
+      chartInstance == null ? void 0 : chartInstance.setDatasetVisibility(datasetIndex, !isDatasetVisible);
+      if (annotations.controlAnnotation && (dataset == null ? void 0 : dataset.isAnnotation)) {
+        const { annotationIndex } = dataset;
+        dispatch({ type: TOGGLE_ANNOTATION, payload: { annotationIndex } });
+      }
+      if (dataset.displayGroup) {
+        datasets == null ? void 0 : datasets.forEach((ds, ix) => {
+          if (ds.displayGroup !== dataset.displayGroup)
+            return;
+          if (chartInstance && meta) {
+            chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
+          }
+        });
+      }
+      if (onLegendClick) {
+        onLegendClick(legendItem2 == null ? void 0 : legendItem2.text, legendItem2.hidden);
+      }
+      chartInstance == null ? void 0 : chartInstance.update();
+    },
+    [chartRef, annotations, onLegendClick, hiddenStates]
+  );
+  const legend2 = useMemo(
+    () => getLegend(options, legendClick),
+    [legendEnabled]
+  );
+  const customLegendPlugin = useMemo(
+    () => ({
+      [CUSTOM_LEGEND_PLUGIN_NAME]: (customLegend == null ? void 0 : customLegend.customLegendPlugin) && {
+        containerID: customLegend == null ? void 0 : customLegend.customLegendContainerID
+      }
+    }),
+    [customLegend]
+  );
+  return {
+    legendClick,
+    hiddenStates,
+    legend: legend2,
+    customLegendPlugin,
+    upsertHiddenState,
+    clearNonExistentDatasets
+  };
+};
 const LEGEND_MARGIN = 4;
+const createLegendStyle = (legendPosition, chart2) => {
+  const { height = 0, width = 0, chartArea } = chart2;
+  const { top: top2, left: left2, bottom: bottom2, right: right2 } = chartArea;
+  return {
+    left: legendPosition.includes("left") ? left2 : void 0,
+    right: legendPosition.includes("right") ? width - right2 : void 0,
+    top: legendPosition.includes("top") ? top2 : void 0,
+    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
+    maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
+    maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
+    margin: LEGEND_MARGIN
+  };
+};
+const getGeneratedLabels = (chart2) => {
+  var _a2, _b2, _c2, _d2, _e2;
+  return ((_e2 = (_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels) == null ? void 0 : _e2.call(_d2, chart2)) ?? [];
+};
+const useGeneratedLabels = (chartRef, generatedDatasets) => {
+  const [items, setItems] = useState([]);
+  useEffect(() => {
+    const chart2 = chartRef.current;
+    if (!chart2)
+      return;
+    const newItems = getGeneratedLabels(chart2);
+    setItems(newItems);
+  }, [generatedDatasets, chartRef]);
+  return items;
+};
+const LegendItems = ({
+  items,
+  hiddenStates,
+  datasets,
+  legendClick
+}) => /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => {
+  var _a2;
+  const hiddenState = ((_a2 = hiddenStates.find((state) => state.label === item.text)) == null ? void 0 : _a2.hidden) ?? false;
+  return /* @__PURE__ */ jsx(
+    LegendItem,
+    {
+      hidden: hiddenState,
+      dataset: datasets[item.datasetIndex],
+      handleClick: (event) => legendClick(event, item)
+    },
+    `${item.datasetIndex}-hidden-${item.hidden}`
+  );
+}) });
 const LegendPanel = forwardRef((props, ref) => {
-  var _a2, _b2, _c2, _d2;
   const {
     legendPosition,
     chartRef,
@@ -24784,32 +24908,25 @@ const LegendPanel = forwardRef((props, ref) => {
     generatedDatasets,
     isDragging: isDragging2
   } = props;
-  const [refresh, setRefresh] = useState(false);
   const { legendEnabled } = state;
-  const { legendClick } = useChartFunctions({
+  const chart2 = chartRef == null ? void 0 : chartRef.current;
+  if (!chart2)
+    return null;
+  const {
+    data: { datasets }
+  } = chart2;
+  const { legendClick, hiddenStates, clearNonExistentDatasets } = useLegendState({
     chartRef,
-    state,
     options,
-    dispatch,
-    generatedDatasets
+    state,
+    dispatch
   });
   const { onToggleLegend } = useToggleHandlers(dispatch);
-  const chart2 = chartRef.current;
-  if (!chart2)
-    return null;
-  const { data, chartArea, height = 0, width = 0 } = chart2;
-  const { datasets } = data;
-  const { top: top2, left: left2, bottom: bottom2, right: right2 } = chartArea;
-  const items = ((_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels(chart2)) ?? [];
-  const style = {
-    left: legendPosition.includes("left") ? left2 : void 0,
-    right: legendPosition.includes("right") ? width - right2 : void 0,
-    top: legendPosition.includes("top") ? top2 : void 0,
-    bottom: legendPosition.includes("bottom") ? height - bottom2 : void 0,
-    maxHeight: 0.5 * (bottom2 - top2 - LEGEND_MARGIN * 2),
-    maxWidth: 0.5 * (right2 - left2 - LEGEND_MARGIN * 2),
-    margin: LEGEND_MARGIN
-  };
+  const items = useGeneratedLabels(chartRef, generatedDatasets);
+  const style = createLegendStyle(legendPosition, chart2);
+  useEffect(() => {
+    clearNonExistentDatasets(generatedDatasets);
+  }, [generatedDatasets]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -24830,18 +24947,15 @@ const LegendPanel = forwardRef((props, ref) => {
             icon: legendEnabled ? /* @__PURE__ */ jsx(TbX, {}) : /* @__PURE__ */ jsx(TbList, {})
           }
         ) }),
-        /* @__PURE__ */ jsx("div", { className: styles$2.legendItems, children: items.map((item) => /* @__PURE__ */ jsx(
-          LegendItem,
+        /* @__PURE__ */ jsx(
+          LegendItems,
           {
-            hidden: item.hidden,
-            dataset: datasets[item.datasetIndex],
-            handleClick: (event) => {
-              legendClick(event, item);
-              setRefresh(!refresh);
-            }
-          },
-          `${item.datasetIndex}-hidden-${item.hidden}`
-        )) })
+            items,
+            hiddenStates,
+            datasets,
+            legendClick
+          }
+        )
       ]
     }
   );
@@ -24974,9 +25088,20 @@ const TextLabelPosition = {
   BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right"
 };
+const defaultAxis = (position) => ({
+  label: "",
+  position,
+  color: "",
+  unit: {
+    options: [],
+    selectedUnit: "",
+    setSelectedUnit: () => {
+    }
+  }
+});
 const defaultAxes$1 = (axes) => ({
-  x: (axes == null ? void 0 : axes.x) || [{}],
-  y: (axes == null ? void 0 : axes.y) || [{}]
+  x: (axes == null ? void 0 : axes.x) || [defaultAxis("bottom")],
+  y: (axes == null ? void 0 : axes.y) || [defaultAxis("left")]
 });
 const defaultAdditionalAxesOptions$1 = (options) => ({
   chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
@@ -25070,7 +25195,7 @@ const getDefaultProps$2 = (props) => {
   return {
     persistenceId: (chart2 == null ? void 0 : chart2.persistenceId) ?? "",
     controlsPortalId: (chart2 == null ? void 0 : chart2.controlsPortalId) ?? "",
-    testId: (chart2 == null ? void 0 : chart2.testId) ?? null,
+    testId: (chart2 == null ? void 0 : chart2.testId) ?? void 0,
     data: chart2 == null ? void 0 : chart2.data,
     options: {
       title: (options == null ? void 0 : options.title) ?? "",
@@ -25104,6 +25229,11 @@ const INIT_KEYS = {
 };
 const LOWER_BOUND = 1e-4;
 const UPPER_BOUND = 1e7;
+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;
@@ -25145,7 +25275,9 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       borderColor,
       backgroundColor,
       pointBackgroundColor,
-      borderDash
+      borderDash,
+      showPoints = true,
+      showLine
     } = line ?? {};
     const { lineEnabled, pointsEnabled, axes = [] } = state ?? {};
     const { lineTension, spanGaps } = graph ?? {};
@@ -25163,14 +25295,15 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     const filteredData = data.filter(Boolean) || [];
     const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
     const linePointRadius = parseFloat(pointRadiusProp) || DEFAULT_POINT_RADIUS;
-    const pointRadius = pointsEnabled || isSinglePoint ? linePointRadius : 0;
+    const pointRadius = (pointsEnabled || isSinglePoint) && showPoints ? linePointRadius : 0;
     const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
     const indexedColor = COLORS[i2];
+    const hasCustomOpt = checkCustomOption(line, CUSTOM_OPTION);
     return {
       ...line,
       label: line.label || `${label} ${i2 + 1}`,
       data: filteredData,
-      showLine: lineEnabled,
+      showLine: showLine ?? lineEnabled,
       lineTension,
       spanGaps,
       borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
@@ -25181,7 +25314,8 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       pointBackgroundColor: pointBackgroundColor ?? indexedColor ?? generateRandomColor(COLORS),
       pointRadius,
       pointHoverRadius: hoverRadius,
-      pointHitRadius: line.pointHitRadius ?? hoverRadius
+      pointHitRadius: line.pointHitRadius ?? hoverRadius,
+      ...hasCustomOpt ? { hasCustomOpt } : {}
     };
   });
 };
@@ -25192,7 +25326,7 @@ const calculateDelta$1 = (tickValue, ticks) => {
   }
   return delta;
 };
-const formatAxisLabelNumbers = (tickValue, ticks, locale = "en-gb") => {
+const formatAxisLabelNumbers = (tickValue, ticks) => {
   if (tickValue === 0 || tickValue === null) {
     return "0";
   }
@@ -25471,23 +25605,29 @@ const getLineChartDataLabels = (options) => {
     formatter: (_value, context) => context.dataset.data[context.dataIndex].label || ""
   } : { display: false };
 };
-const annotationEnter = ({ element }, { chart: chart2 }) => {
+const annotationEnter = (element, chart2) => {
   var _a2;
   if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
     element.options.label.xAdjust = chart2.chartArea.left;
   }
   element.options.borderWidth = BORDER_WIDTH.HOVERED;
-  if (element.options.label)
+  if (element.options.label) {
+    element.label.options.display = true;
     element.options.label.enabled = true;
+  }
   chart2.draw();
   chart2.canvas.style.cursor = CursorStyle.Pointer;
+  return true;
 };
-const annotationLeave = ({ element }, { chart: chart2 }) => {
+const annotationLeave = (element, chart2) => {
   element.options.borderWidth = BORDER_WIDTH.INITIAL;
-  if (element.options.label)
+  if (element.options.label) {
+    element.label.options.display = false;
     element.options.label.enabled = false;
+  }
   chart2.draw();
   chart2.canvas.style.cursor = CursorStyle.Initial;
+  return true;
 };
 const generateAnnotations = (options, state) => {
   const { annotationsData } = (options == null ? void 0 : options.annotations) || {};
@@ -25506,22 +25646,22 @@ const generateAnnotations = (options, state) => {
     const label = type === "line" ? {
       backgroundColor: color2,
       content: curr == null ? void 0 : curr.label,
-      enabled: false,
+      display: false,
       position: Position.Top
     } : {
       content: curr == null ? void 0 : curr.label,
-      enabled: true,
+      display: true,
       font: { weight: "normal" }
     };
-    const enter = (context, event) => {
+    const enter = ({ element }, { chart: chart2 }) => {
       if (type !== "line")
         return;
-      annotationEnter(context, event);
+      annotationEnter(element, chart2);
     };
-    const leave = (context, event) => {
+    const leave = ({ element }, { chart: chart2 }) => {
       if (type !== "line")
         return;
-      annotationLeave(context, event);
+      annotationLeave(element, chart2);
     };
     const annotation2 = {
       ...curr,
@@ -25653,7 +25793,6 @@ const useChartOptions = ({
   dispatch,
   generatedDatasets
 }) => {
-  var _a2, _b2;
   const {
     interactions: { onAnimationComplete },
     annotations: {
@@ -25675,29 +25814,28 @@ const useChartOptions = ({
     zoomEnabled,
     panEnabled,
     lineEnabled,
-    showAnnotationLineIndex,
-    legendEnabled
+    showAnnotationLineIndex
   } = state;
   const [hoveredPoint, setHoveredPoint] = useState(null);
-  const { legendClick, updateAxesRangesFromChart, onHover } = useChartFunctions(
-    {
-      chartRef,
-      state,
-      options,
-      dispatch,
-      generatedDatasets
-    }
-  );
+  const { updateAxesRangesFromChart, onHover } = useChartFunctions({
+    chartRef,
+    state,
+    options,
+    dispatch,
+    generatedDatasets
+  });
+  const { legendClick, legend: legend2, customLegendPlugin } = useLegendState({
+    chartRef,
+    options,
+    state,
+    dispatch
+  });
   const datalabels = getLineChartDataLabels(options);
   const tooltip = getLineChartToolTips(options);
   const annotation2 = useMemo(
     () => getAnnotation(options, state),
     [showAnnotationLineIndex, legendClick]
   );
-  const legend2 = useMemo(
-    () => getLegend(options, legendClick),
-    [legendEnabled]
-  );
   const scales = useMemo(
     () => autoScale(options, state, generatedDatasets, chartRef),
     [options, state, generatedDatasets, chartRef]
@@ -25739,9 +25877,7 @@ const useChartOptions = ({
     tooltip,
     legend: { ...legend2, display: false },
     // hide default legend for line chart only
-    [CUSTOM_LEGEND_PLUGIN_NAME]: ((_a2 = options.legend.customLegend) == null ? void 0 : _a2.customLegendPlugin) && {
-      containerID: (_b2 = options.legend.customLegend) == null ? void 0 : _b2.customLegendContainerID
-    },
+    customLegendPlugin,
     chartAreaBorder: {
       borderColor: BORDER_COLOR
     },
@@ -25796,7 +25932,7 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     [resetZoom2]
   );
   const handleDoubleClick = useCallback(
-    (_chart, args) => {
+    (_2, args) => {
       const { event } = args;
       if (event.type === DOUBLE_CLICK) {
         debouncedResetZoom();
@@ -25828,6 +25964,23 @@ const getAxesRangesFromChart = (chartRef, axes) => {
     };
   });
 };
+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(() => {
@@ -25858,18 +26011,23 @@ const useStoreChartStateInStorage = (memoState, persistenceId) => {
   ]);
 };
 const useUpdateAxesRanges = ({
+  chartRef,
   range,
   state,
-  dispatch
+  dispatch,
+  annotationsData
 }) => {
   const prevAxes = useRef(state.axes);
   useEffect(() => {
     if (range && isRangeValid(range)) {
-      const newAxes = Object.entries(range).map(([key, { min, max }]) => ({
-        id: key,
-        min: min ?? 0,
-        max: max ?? 0
-      }));
+      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;
@@ -25884,27 +26042,21 @@ const useUpdateAxesRanges = ({
     }
   }, [range]);
 };
-const useSaveInitialAxesRanges = (chartRef, axes, generatedDatasets, dispatch) => {
-  const prevGeneratedDatasets = useRef();
-  const saveInitialAxesRanges = useCallback(() => {
-    if (chartRef && !isEqual(generatedDatasets, prevGeneratedDatasets.current)) {
+const useSaveInitialAxesRanges = (chartRef, axes, dispatch) => {
+  useEffect(() => {
+    if (chartRef.current) {
       const initialAxesRanges = getAxesRangesFromChart(chartRef, axes);
       dispatch({
         type: SAVE_INITIAL_AXES_RANGES,
         payload: { initialAxesRanges }
       });
-      prevGeneratedDatasets.current = generatedDatasets;
     }
-  }, [chartRef, generatedDatasets]);
-  useEffect(() => {
-    saveInitialAxesRanges();
-  }, [saveInitialAxesRanges, generatedDatasets]);
+  }, []);
 };
 const useChartState = ({
   chartRef,
   options,
   state,
-  generatedDatasets,
   dispatch,
   persistenceId
 }) => {
@@ -25912,12 +26064,19 @@ const useChartState = ({
   const memoOptions = useMemo(() => options, [options]);
   const {
     additionalAxesOptions: { range = void 0 },
+    annotations: { annotationsData = [] } = {},
     axes
   } = memoOptions;
   useStoreChartStateInStorage(memoState, persistenceId);
   useToggleCustomLegendVisibility(memoState, memoOptions);
-  useUpdateAxesRanges({ range, state: memoState, dispatch });
-  useSaveInitialAxesRanges(chartRef, axes, generatedDatasets, dispatch);
+  useUpdateAxesRanges({
+    range,
+    state: memoState,
+    dispatch,
+    chartRef,
+    annotationsData
+  });
+  useSaveInitialAxesRanges(chartRef, axes, dispatch);
 };
 const WORD_SEPARATOR = " ";
 const SEMI_TRANSPARENT = "rgba(0, 0, 0, 0.5)";
@@ -26123,6 +26282,7 @@ Chart$2.register(
   chartAreaTextPlugin
 );
 const LineChart = (props) => {
+  var _a2, _b2;
   setDefaultTheme();
   const chartRef = useRef(null);
   const { table: table2 } = props;
@@ -26136,7 +26296,7 @@ const LineChart = (props) => {
     controlsPortalId
   } = chart2;
   const { annotations, axes, chartStyling, graph } = options;
-  const showCustomLegend = !options.legend.customLegend.customLegendContainerID;
+  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,
     {
@@ -26152,7 +26312,6 @@ const LineChart = (props) => {
     chartRef,
     options,
     state,
-    generatedDatasets,
     dispatch,
     persistenceId
   });
@@ -39049,7 +39208,7 @@ const defaultInteractions = (interactions) => ({
   onUnhover: interactions == null ? void 0 : interactions.onUnhover
 });
 const defaultDragData = (dragData) => ({
-  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) || false,
+  enableDragData: (dragData == null ? void 0 : dragData.enableDragData) ?? false,
   showTooltip: (dragData == null ? void 0 : dragData.showTooltip) ?? true,
   roundPoints: (dragData == null ? void 0 : dragData.roundPoints) ?? true,
   dragX: (dragData == null ? void 0 : dragData.dragX) ?? true,
@@ -39311,7 +39470,7 @@ const BarChart = (props) => {
   const [pointHover, setPointHover] = useState(false);
   const chart2 = getDefaultProps(props);
   const { options, testId } = chart2;
-  const { annotations, chartStyling, interactions, graph } = chart2.options;
+  const { annotations, chartStyling, interactions, graph, dragData } = chart2.options;
   const [visibleAnnotationsIndices, setVisibleAnnotationsIndices] = useState(
     setAnnotations(annotations.annotationsData)
   );
@@ -39436,9 +39595,6 @@ const BarChart = (props) => {
               mode: ChartHoverMode.Nearest,
               intersect: true
             },
-            // elements: {
-            //   bar: { pointStyle: PointStyle.Circle },
-            // },
             scales: getBarChartScales(chart2),
             plugins: {
               title: getTitle(options),
@@ -39454,7 +39610,7 @@ const BarChart = (props) => {
               chartAreaBorder: {
                 borderColor: BORDER_COLOR
               },
-              dragData: getDraggableData(options)
+              dragData: (dragData == null ? void 0 : dragData.enableDragData) && getDraggableData(options)
             }
           },
           plugins: getPlugins(graph, options.legend)