@oliasoft-open-source/charts-library 4.1.11 → 4.3.0-beta-1

package/dist/index.js

@@ -22080,6 +22080,7 @@ 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) => {
@@ -22148,6 +22149,16 @@ const reducer$1 = (state, action) => {
         }
         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.enableDragPoints || draft.panEnabled || draft.zoomEnabled) {
           draft.enableDragPoints = false;
@@ -22208,13 +22219,13 @@ var AlignOptions = /* @__PURE__ */ ((AlignOptions2) => {
   AlignOptions2["Left"] = "left";
   return AlignOptions2;
 })(AlignOptions || {});
-var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
+var AnnotationType$1 = /* @__PURE__ */ ((AnnotationType2) => {
   AnnotationType2["Box"] = "box";
   AnnotationType2["Ellipse"] = "ellipse";
   AnnotationType2["Line"] = "line";
   AnnotationType2["Text"] = "text";
   return AnnotationType2;
-})(AnnotationType || {});
+})(AnnotationType$1 || {});
 var PointStyle = /* @__PURE__ */ ((PointStyle2) => {
   PointStyle2["Circle"] = "circle";
   return PointStyle2;
@@ -22567,7 +22578,8 @@ const initialState = ({ options, persistenceId }) => {
     axes,
     chartOptions: { enableZoom, enablePan, showPoints, showLine },
     legend: { display },
-    dragData
+    dragData,
+    annotations: { enableDragAnnotation }
   } = options;
   const getStateAxesByType = (axisType, customAxesRange2) => {
     var _a2, _b2, _c2, _d2, _e2;
@@ -22614,7 +22626,8 @@ const initialState = ({ options, persistenceId }) => {
     pointsEnabled,
     lineEnabled,
     legendEnabled,
-    enableDragPoints
+    enableDragPoints,
+    enableDragAnnotation: enableDragAnnotationStorage
   } = getChartStateFromStorage(persistenceId) || {};
   return {
     zoomEnabled: zoomEnabled ?? enableZoom,
@@ -22625,6 +22638,7 @@ const initialState = ({ options, persistenceId }) => {
     axes: stateAxes,
     showTable: false,
     enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
+    enableDragAnnotation: enableDragAnnotation && enableDragAnnotationStorage,
     initialAxesRanges: []
   };
 };
@@ -22757,6 +22771,9 @@ function TbArrowsMove(props) {
 function TbBan(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": "M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" } }, { "tag": "path", "attr": { "d": "M5.7 5.7l12.6 12.6" } }] })(props);
 }
+function TbCircleFilled(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": "M7 3.34a10 10 0 1 1 -4.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 4.995 -8.336z", "strokeWidth": "0", "fill": "currentColor" } }] })(props);
+}
 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);
 }
@@ -22781,7 +22798,10 @@ const DragOptions = ({
   panEnabled,
   zoomEnabled,
   enableDragPoints,
+  enableDragAnnotation,
   isDragDataAllowed,
+  isDragAnnotationAllowed,
+  onToggleDragAnnotation,
   onToggleDragPoints,
   onDisableDragOptions,
   translations: {
@@ -22790,7 +22810,8 @@ const DragOptions = ({
     dragToPan,
     orDoubleClickToCanvas,
     dragToMovePoints,
-    dragDisabled
+    dragDisabled,
+    dragToMoveAnnotation
   }
 }) => {
   const options = useMemo(
@@ -22824,10 +22845,19 @@ const DragOptions = ({
           onClick: onToggleDragPoints
         }
       ] : [],
+      ...isDragAnnotationAllowed ? [
+        {
+          label: dragToMoveAnnotation,
+          icon: /* @__PURE__ */ jsx(TbHandStop, {}),
+          selected: enableDragAnnotation,
+          type: "Option",
+          onClick: onToggleDragAnnotation
+        }
+      ] : [],
       {
         label: dragDisabled,
         icon: /* @__PURE__ */ jsx(TbBan, {}),
-        selected: !zoomEnabled && !panEnabled && !enableDragPoints,
+        selected: !zoomEnabled && !panEnabled && !enableDragPoints && !enableDragAnnotation,
         onClick: onDisableDragOptions
       }
     ],
@@ -22884,6 +22914,7 @@ const useToggleHandlers = (dispatch) => {
     onToggleTable: createToggleHandler(TOGGLE_TABLE),
     onToggleZoom: createToggleHandler(TOGGLE_ZOOM),
     onToggleDragPoints: createToggleHandler(TOGGLE_DRAG_POINTS),
+    onToggleDragAnnotation: createToggleHandler(TOGGLE_DRAG_ANNOTATION),
     onDisableDragOptions: createToggleHandler(DISABLE_DRAG_OPTIONS)
   };
   return toggleHandlers;
@@ -24304,9 +24335,10 @@ const Controls = ({
     panEnabled,
     pointsEnabled,
     showTable,
-    zoomEnabled
+    zoomEnabled,
+    enableDragAnnotation
   } = state;
-  const { dragData, depthType } = options;
+  const { dragData, depthType, annotations } = options;
   const {
     onToggleLine,
     onTogglePan,
@@ -24314,6 +24346,7 @@ const Controls = ({
     onToggleTable,
     onToggleZoom,
     onToggleDragPoints,
+    onToggleDragAnnotation,
     onDisableDragOptions
   } = useToggleHandlers(dispatch);
   const { handleDownload, controlsAxesLabels, onResetAxes, onUpdateAxes } = useChartFunctions({
@@ -24377,7 +24410,10 @@ const Controls = ({
               onTogglePan,
               onToggleZoom,
               enableDragPoints,
+              enableDragAnnotation,
               isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
+              isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
+              onToggleDragAnnotation,
               onToggleDragPoints,
               onDisableDragOptions,
               translations
@@ -24487,6 +24523,7 @@ const defaultAnnotations$1 = (annotations) => {
     },
     showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
     controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
+    enableDragAnnotation: (annotations == null ? void 0 : annotations.enableDragAnnotation) ?? false,
     annotationsData: defaultAnnotationsData$1(annotations == null ? void 0 : annotations.annotationsData)
   };
 };
@@ -25137,6 +25174,19 @@ const legendReducer = (state, action) => {
       return state;
   }
 };
+var MouseEvents = /* @__PURE__ */ ((MouseEvents2) => {
+  MouseEvents2["MOUSEDOWN"] = "mousedown";
+  MouseEvents2["MOUSEMOVE"] = "mousemove";
+  MouseEvents2["MOUSEUP"] = "mouseup";
+  return MouseEvents2;
+})(MouseEvents || {});
+var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
+  AnnotationType2["POINT"] = "point";
+  AnnotationType2["BOX"] = "box";
+  AnnotationType2["LINE"] = "line";
+  AnnotationType2["ELLIPSE"] = "ellipse";
+  return AnnotationType2;
+})(AnnotationType || {});
 const annotationEnter = (element, chart2) => {
   var _a2;
   if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
@@ -25169,9 +25219,13 @@ const generateAnnotations = (annotationsData) => {
     const color2 = (ann == null ? void 0 : ann.color) || COLORS[idx];
     const type = (ann == null ? void 0 : ann.type) || "line";
     const adjustScaleRange2 = ann == null ? void 0 : ann.adjustScaleRange;
-    const borderColor = type === "line" ? color2 : "transparent";
-    const borderWidth = type === "line" ? BORDER_WIDTH.INITIAL : 0;
-    const borderDash = ANNOTATION_DASH;
+    const borderColor = {
+      [AnnotationType.LINE]: color2,
+      [AnnotationType.POINT]: color2,
+      [AnnotationType.BOX]: color2
+    }[type] || "transparent";
+    const borderWidth = type == "line" ? BORDER_WIDTH.INITIAL : 0;
+    const borderDash = type == "line" ? ANNOTATION_DASH : void 0;
     const label = type === "line" ? {
       backgroundColor: color2,
       content: ann == null ? void 0 : ann.label,
@@ -25187,7 +25241,7 @@ const generateAnnotations = (annotationsData) => {
     }, {
       chart: chart2
     }) => {
-      if (type !== "line")
+      if (type !== "line" && !ann.enableDrag)
         return;
       annotationEnter(element, chart2);
     };
@@ -25196,10 +25250,13 @@ const generateAnnotations = (annotationsData) => {
     }, {
       chart: chart2
     }) => {
-      if (type !== "line")
+      if (type !== "line" && !ann.enableDrag)
         return;
       annotationLeave(element, chart2);
     };
+    const onDragStart = () => (cord) => (ann == null ? void 0 : ann.onDragStart) ? ann == null ? void 0 : ann.onDragStart(cord) : void 0;
+    const onDrag = () => (cord) => (ann == null ? void 0 : ann.onDrag) ? ann == null ? void 0 : ann.onDrag(cord) : void 0;
+    const onDragEnd = () => (cord) => (ann == null ? void 0 : ann.onDragEnd) ? ann == null ? void 0 : ann.onDragEnd(cord) : void 0;
     return {
       ...ann,
       display: ann == null ? void 0 : ann.display,
@@ -25214,7 +25271,10 @@ const generateAnnotations = (annotationsData) => {
       type,
       adjustScaleRange: adjustScaleRange2,
       enter,
-      leave
+      leave,
+      onDragStart,
+      onDrag,
+      onDragEnd
     };
   });
 };
@@ -25410,6 +25470,9 @@ const useChartOptions = ({
   );
   const plugins = {
     datalabels,
+    annotationDraggerPlugin: {
+      enabled: state.enableDragAnnotation
+    },
     annotation: toAnnotationObject(annotation2),
     zoom: { pan: panOptions, zoom: zoomOptions },
     tooltip,
@@ -25766,6 +25829,224 @@ const chartAreaTextPlugin = {
     });
   }
 };
+const getMousePositionInCoordinates = (event, canvas2, scales) => {
+  var _a2, _b2;
+  const rect = canvas2.getBoundingClientRect();
+  const x2 = event.clientX - rect.left;
+  const y2 = event.clientY - rect.top;
+  const xValue = ((_a2 = scales == null ? void 0 : scales.x) == null ? void 0 : _a2.getValueForPixel(x2)) ?? -1;
+  const yValue = ((_b2 = scales == null ? void 0 : scales.y) == null ? void 0 : _b2.getValueForPixel(y2)) ?? -1;
+  return { x: xValue, y: yValue };
+};
+const getActiveAnnotation = (x2, y2, annotations) => {
+  var _a2;
+  return ((_a2 = Object.values(annotations)) == null ? void 0 : _a2.find((annotation2) => {
+    const { xMin, xMax, yMin, yMax, xValue, yValue } = annotation2 ?? {};
+    let condtion;
+    if (xMin && xMax && yMin && yMax && (annotation2 == null ? void 0 : annotation2.type) === AnnotationType.BOX) {
+      condtion = x2 >= xMin && x2 <= xMax && y2 >= yMin && y2 <= yMax;
+    } else if (xValue && yValue && (annotation2 == null ? void 0 : annotation2.type) === AnnotationType.POINT) {
+      condtion = x2 >= xValue - 2 && x2 <= xValue + 2 && y2 >= yValue - 2 && y2 <= yValue + 2;
+    }
+    return condtion;
+  })) ?? {};
+};
+const calculateAnnotationMetricsInValues = (annotation2) => {
+  const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
+  let centerX;
+  let centerY;
+  let width;
+  let height;
+  if (xMin && xMax && yMin && yMax && type === AnnotationType.BOX) {
+    centerX = (xMin + xMax) / 2;
+    centerY = (yMin + yMax) / 2;
+    width = xMax - xMin;
+    height = yMax - yMin;
+  } else if (xValue && yValue && type === AnnotationType.POINT) {
+    centerX = xValue;
+    centerY = yValue;
+    width = 0;
+    height = 0;
+  }
+  return {
+    centerX,
+    centerY,
+    width,
+    height
+  };
+};
+const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
+  var _a2, _b2, _c2, _d2;
+  const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
+  const { x: x2, y: y2 } = scales ?? {};
+  let centerX;
+  let centerY;
+  let width;
+  let height;
+  if (xMin && xMax && yMin && yMax && type === AnnotationType.BOX) {
+    const xCenterValue = (xMin + xMax) / 2;
+    const yCenterValue = (yMin + yMax) / 2;
+    const xMinValue = (x2 == null ? void 0 : x2.getPixelForValue(xMin)) ?? 0;
+    const xMaxValue = (x2 == null ? void 0 : x2.getPixelForValue(xMax)) ?? 0;
+    const yMinValue = (y2 == null ? void 0 : y2.getPixelForValue(yMin)) ?? 0;
+    const yMaxValue = (y2 == null ? void 0 : y2.getPixelForValue(yMax)) ?? 0;
+    width = xMinValue - xMaxValue;
+    height = yMinValue - yMaxValue;
+    centerX = ((_a2 = scales == null ? void 0 : scales.x) == null ? void 0 : _a2.getPixelForValue(xCenterValue)) ?? -1;
+    centerY = ((_b2 = scales == null ? void 0 : scales.y) == null ? void 0 : _b2.getPixelForValue(yCenterValue)) ?? -1;
+  } else if (xValue && yValue && type === AnnotationType.POINT) {
+    width = 0;
+    height = 0;
+    centerX = ((_c2 = scales == null ? void 0 : scales.x) == null ? void 0 : _c2.getPixelForValue(xValue)) ?? -1;
+    centerY = ((_d2 = scales == null ? void 0 : scales.y) == null ? void 0 : _d2.getPixelForValue(yValue)) ?? -1;
+  }
+  return {
+    centerX,
+    centerY,
+    width,
+    height
+  };
+};
+const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState) => {
+  const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
+  const annotation2 = getActiveAnnotation(x2, y2, annotations);
+  const metrics = calculateAnnotationMetricsInValues(annotation2);
+  console.log(cloneDeep(annotations));
+  console.log(metrics);
+  if (annotation2 && annotation2.enableDrag && metrics.centerY && metrics.centerX) {
+    const dragStartX = x2 - metrics.centerX;
+    const dragStartY = y2 - metrics.centerY;
+    setDraggingState(true, annotation2, dragStartX, dragStartY);
+    if (annotation2 == null ? void 0 : annotation2.onDragStart) {
+      annotation2.onDragStart({ x: x2, y: y2 });
+    }
+  }
+};
+const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAnnotation, dragStartX, dragStartY, chart2) => {
+  if (isDragging2 && activeAnnotation) {
+    const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
+    const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
+    let newCenterX = x2 - dragStartX;
+    let newCenterY = y2 - dragStartY;
+    if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.POINT) {
+      newCenterX = x2 - dragStartX;
+      newCenterY = y2 - dragStartY;
+      activeAnnotation.xValue = newCenterX;
+      activeAnnotation.yValue = newCenterY;
+    } else if ((activeAnnotation == null ? void 0 : activeAnnotation.type) === AnnotationType.BOX) {
+      if ((metrics == null ? void 0 : metrics.width) && metrics.height) {
+        activeAnnotation.xMin = newCenterX - metrics.width / 2;
+        activeAnnotation.xMax = newCenterX + metrics.width / 2;
+        activeAnnotation.yMin = newCenterY - metrics.height / 2;
+        activeAnnotation.yMax = newCenterY + metrics.height / 2;
+      }
+    }
+    chart2.update();
+    if (activeAnnotation == null ? void 0 : activeAnnotation.onDrag) {
+      activeAnnotation.onDrag({ x: x2, y: y2 });
+    }
+    const { ctx, width, height } = chart2;
+    const { centerX, centerY } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
+    const { centerX: xValue, centerY: yValue } = calculateAnnotationMetricsInValuesInPixels(activeAnnotation, scales);
+    if (centerX && centerY && xValue && yValue) {
+      ctx.save();
+      ctx.clearRect(0, 0, width, height);
+      chart2.draw();
+      ctx.font = DEFAULT_FONT_FAMILY;
+      ctx.fillStyle = "black";
+      let labelX = xValue - 45;
+      let labelY = yValue - 20;
+      const labelText = `X: ${round$2(centerX, 2)}, Y: ${round$2(centerY, 2)}`;
+      const labelHeight = 14;
+      if (labelY - labelHeight < 0) {
+        labelY = yValue + labelHeight + 15;
+      }
+      if (labelY > height) {
+        labelY = height - 7;
+      }
+      ctx.fillText(labelText, labelX, labelY);
+      ctx.restore();
+    }
+  }
+};
+const handleAnnotationMouseUp = (isDragging2, activeAnnotation, chart2, setDraggingState) => {
+  if (isDragging2) {
+    if (activeAnnotation) {
+      const { centerX = -1, centerY = -1 } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
+      if (activeAnnotation == null ? void 0 : activeAnnotation.onDragEnd) {
+        activeAnnotation.onDragEnd({ x: centerX, y: centerY });
+      }
+      setDraggingState(false, null);
+    }
+    chart2.update();
+  }
+};
+const annotationDraggerPlugin = {
+  id: "annotationDraggerPlugin",
+  afterUpdate(chart2) {
+    var _a2, _b2, _c2, _d2;
+    const { canvas: canvas2, scales } = chart2;
+    const pluginOptions = ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.annotationDraggerPlugin) || {
+      enabled: false
+    };
+    const typedScales = { x: scales.x, y: scales.y };
+    let annotations = ((_d2 = (_c2 = chart2.options.plugins) == null ? void 0 : _c2.annotation) == null ? void 0 : _d2.annotations) ?? {};
+    if (!annotations)
+      return;
+    let isDragging2 = false;
+    let dragStartX, dragStartY;
+    let activeAnnotation = null;
+    const setDraggingState = (dragging, annotation2, startX, startY) => {
+      isDragging2 = dragging;
+      activeAnnotation = annotation2;
+      if (startX !== void 0 && startY !== void 0) {
+        dragStartX = startX;
+        dragStartY = startY;
+      }
+    };
+    if (!canvas2.dataset.annotationDraggerInitialized && pluginOptions.enabled) {
+      canvas2.addEventListener(MouseEvents.MOUSEDOWN, (event) => {
+        handleAnnotationMouseDown(
+          event,
+          canvas2,
+          typedScales,
+          annotations,
+          setDraggingState
+        );
+      });
+      canvas2.addEventListener(MouseEvents.MOUSEMOVE, (event) => {
+        handleAnnotationMouseMove(
+          event,
+          canvas2,
+          typedScales,
+          isDragging2,
+          activeAnnotation,
+          dragStartX,
+          dragStartY,
+          chart2
+        );
+      });
+      canvas2.addEventListener(MouseEvents.MOUSEUP, () => {
+        handleAnnotationMouseUp(
+          isDragging2,
+          activeAnnotation,
+          chart2,
+          setDraggingState
+        );
+      });
+      canvas2.dataset.annotationDraggerInitialized = "true";
+    }
+    if (!pluginOptions.enabled) {
+      canvas2.removeEventListener(MouseEvents.MOUSEDOWN, () => {
+      });
+      canvas2.removeEventListener(MouseEvents.MOUSEMOVE, () => {
+      });
+      canvas2.removeEventListener(MouseEvents.MOUSEUP, () => {
+      });
+      canvas2.dataset.annotationDraggerInitialized = "";
+    }
+  }
+};
 var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
   defaultTranslations2["label"] = "Label";
   defaultTranslations2["pointsLines"] = "Points & lines";
@@ -25780,6 +26061,7 @@ var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
   defaultTranslations2["dragToZoom"] = "Drag to zoom";
   defaultTranslations2["dragToPan"] = "Drag to pan";
   defaultTranslations2["dragToMovePoints"] = "Drag to move points";
+  defaultTranslations2["dragToMoveAnnotation"] = "Drag to move annotation";
   defaultTranslations2["dragDisabled"] = "Drag disabled";
   defaultTranslations2["hideLegend"] = "Hide Legend";
   defaultTranslations2["showLegend"] = "Show Legend";
@@ -25895,6 +26177,7 @@ var ChartType = /* @__PURE__ */ ((ChartType2) => {
   ChartType2["LINE"] = "line";
   ChartType2["BAR"] = "bar";
   ChartType2["PIE"] = "pie";
+  ChartType2["SCATTER"] = "scatter";
   return ChartType2;
 })(ChartType || {});
 const circleSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz48L3N2Zz4=";
@@ -25956,10 +26239,10 @@ const BoxItem = ({ dataset }) => {
 const LegendItemLine = ({ dataset }) => {
   const { annotationType, showLine } = dataset;
   switch (annotationType) {
-    case AnnotationType.Box:
-    case AnnotationType.Ellipse:
+    case AnnotationType$1.Box:
+    case AnnotationType$1.Ellipse:
       return /* @__PURE__ */ jsx(BoxItem, { dataset });
-    case AnnotationType.Line:
+    case AnnotationType$1.Line:
       return /* @__PURE__ */ jsx(LineItem, { dataset });
     default:
       return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -25977,6 +26260,8 @@ const renderLegendItemSymbol = (dataset, chartType) => {
       return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
     case ChartType.PIE:
       return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: circleSvg }) });
+    case ChartType.SCATTER:
+      return /* @__PURE__ */ jsx("span", { className: styles$2.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: dataset.borderColor }) });
     default:
       return null;
   }
@@ -26255,7 +26540,8 @@ Chart$2.register(
   plugin$1,
   plugin,
   annotation,
-  chartAreaTextPlugin
+  chartAreaTextPlugin,
+  annotationDraggerPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;
@@ -26361,6 +26647,7 @@ const LineChart = (props) => {
     },
     generateKey([
       state.enableDragPoints,
+      state.enableDragAnnotation,
       state.zoomEnabled,
       state.panEnabled,
       languageKey
@@ -26462,7 +26749,7 @@ const usePieChartConfig = (chart2) => {
       const generatedDataset = {
         label: ((_a2 = copyDataset == null ? void 0 : copyDataset[0]) == null ? void 0 : _a2.label) ?? "",
         backgroundColor: [],
-        borderColor: [],
+        borderColor: "",
         borderWidth: Number(copyDataset[0].borderWidth) || 1,
         data: [],
         borderDash: []
@@ -26475,20 +26762,18 @@ const usePieChartConfig = (chart2) => {
           generatedDataset.backgroundColor.push(
             (Array.isArray(backgroundColor) ? backgroundColor[labelIndex % ((borderColor == null ? void 0 : borderColor.length) || 1)] : backgroundColor) || COLORS[labelIndex] + `${99 - 10 * arcIndex}`
           );
-          generatedDataset.borderColor.push(
-            (Array.isArray(borderColor) ? borderColor[labelIndex % borderColor.length] : borderColor) || COLORS[labelIndex]
-          );
+          generatedDataset.borderColor = borderColor ?? "";
         });
       });
       return [generatedDataset];
     }
     const generatedDatasets2 = copyDataset.map(
       (pieDataset, index2) => {
-        const { borderWidth: inputBorderWidth = "1", data: data2 = [] } = pieDataset ?? {};
+        const { borderWidth: inputBorderWidth = "1" } = pieDataset ?? {};
         const borderWidth = parseFloat(String(inputBorderWidth)) || 1;
-        const color2 = data2.map((_2, i2) => COLORS[i2]) || generateRandomColor(COLORS);
+        const color2 = COLORS[index2];
         const borderColor = pieDataset.borderColor || color2;
-        const backgroundColor = pieDataset.backgroundColor || color2.map((col) => col + `${99 - 11 * index2}`);
+        const backgroundColor = pieDataset.backgroundColor || generateRandomColor(COLORS);
         return {
           ...pieDataset,
           borderWidth,