@oliasoft-open-source/charts-library 4.3.3-beta-10 → 4.4.0-beta-1

package/dist/index.js

@@ -11,7 +11,7 @@ import { produce } from "immer";
 import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
 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 { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, isNil, debounce as debounce$3, isFunction as isFunction$2, map as map$3, find, get as get$1, values } from "lodash";
+import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1, values } from "lodash";
 import { roundNumberToPrecision } from "@oliasoft-open-source/units/dist/rounding/rounding";
 /*!
  * @kurkle/color v0.3.2
@@ -22173,6 +22173,127 @@ class HTML5BackendImpl {
 const HTML5Backend = function createBackend(manager, context, options) {
   return new HTML5BackendImpl(manager, context, options);
 };
+const BORDER_WIDTH = {
+  INITIAL: 2,
+  HOVERED: 6,
+  POINT_HOVERED: 8
+};
+const BORDER_COLOR = "rgba(0,0,0,0.1)";
+const ANNOTATION_DASH = [10, 2];
+const DEFAULT_FONT_SIZE = 12;
+const DEFAULT_FONT_FAMILY = '"Roobert", "Noto Sans", sans-serif';
+const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
+const LEGEND_LABEL_BOX_SIZE = 12;
+const TOOLTIP_PADDING = 8;
+const TOOLTIP_BOX_PADDING = 4;
+const TRANSPARENT = "transparent";
+const LOGARITHMIC_STEPS = [1, 10, 100, 1e3, 1e4];
+const COLORS = [
+  "#3366cc",
+  "#dc3912",
+  "#ff9900",
+  "#109618",
+  "#990099",
+  "#0099c6",
+  "#dd4477",
+  "#66aa00",
+  "#b82e2e",
+  "#316395",
+  "#994499",
+  "#22aa99",
+  "#aaaa11",
+  "#6633cc",
+  "#e67300",
+  "#8b0707",
+  "#651067",
+  "#329262",
+  "#5574a6",
+  "#3b3eac"
+];
+const ALPHA_CHANEL = "99";
+const WHITE_COLOR_AS_DECIMAL = 16777215;
+const AUTO = "auto";
+const ANIMATION_DURATION = {
+  NO: 0,
+  SLOW: 400,
+  FAST: 1e3
+};
+const DEFAULT_CHART_NAME = "new_chart";
+const CUSTOM_LEGEND_PLUGIN_NAME = "htmlLegend";
+const DECIMAL_POINT_TOLERANCE = 9;
+const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;
+const findRadii = (points, mainPoint, isXReverse, isYReverse) => {
+  if ((points == null ? void 0 : points.length) === 0) {
+    throw new Error("Array of points is empty");
+  }
+  let top2 = mainPoint;
+  let bottom2 = mainPoint;
+  let left2 = mainPoint;
+  let right2 = mainPoint;
+  for (const point of points) {
+    if (isYReverse ? point.y < top2.y : point.y > top2.y) {
+      top2 = point;
+    }
+    if (isYReverse ? point.y > bottom2.y : point.y < bottom2.y) {
+      bottom2 = point;
+    }
+    if (isXReverse ? point.x > left2.x : point.x < left2.x) {
+      left2 = point;
+    }
+    if (isXReverse ? point.x < right2.x : point.x > right2.x) {
+      right2 = point;
+    }
+  }
+  const radiusX = Math.abs(right2.x - left2.x) / 2;
+  const radiusY = Math.abs(bottom2.y - top2.y) / 2;
+  return { radiusX, radiusY };
+};
+const ellipsisAnnotationPlugin = {
+  id: "ellipsisAnnotationPlugin",
+  afterDraw: (chart2) => {
+    var _a2, _b2, _c2, _d2;
+    const {
+      ctx,
+      scales: { x: x2, y: y2 },
+      data: { datasets },
+      options
+    } = chart2;
+    const isXReverse = ((_b2 = (_a2 = options == null ? void 0 : options.scales) == null ? void 0 : _a2.x) == null ? void 0 : _b2.reverse) || false;
+    const isYReverse = ((_d2 = (_c2 = options == null ? void 0 : options.scales) == null ? void 0 : _c2.y) == null ? void 0 : _d2.reverse) || false;
+    datasets.forEach((dataset) => {
+      dataset.data.forEach((item) => {
+        if (item.ellipsePoints && item.ellipsePoints.length) {
+          const centerX = x2.getPixelForValue(item.x);
+          const centerY = y2.getPixelForValue(item.y);
+          const points = item.ellipsePoints.map((point) => ({
+            x: x2.getPixelForValue(point.x),
+            y: y2.getPixelForValue(point.y)
+          }));
+          const mainPoint = { x: centerX, y: centerY };
+          const { radiusX, radiusY } = findRadii(
+            points,
+            mainPoint,
+            isXReverse,
+            isYReverse
+          );
+          const rotationAngle = item.ellipseRotation * Math.PI / 180;
+          ctx.beginPath();
+          ctx.ellipse(
+            centerX,
+            centerY,
+            radiusX,
+            radiusY,
+            rotationAngle,
+            0,
+            2 * Math.PI
+          );
+          ctx.strokeStyle = (dataset == null ? void 0 : dataset.borderColor) ?? DEFAULT_COLOR;
+          ctx.stroke();
+        }
+      });
+    });
+  }
+};
 const chart$3 = "_chart_e3qdd_1";
 const canvas$1 = "_canvas_e3qdd_11";
 const fixedHeight$3 = "_fixedHeight_e3qdd_20";
@@ -22466,55 +22587,6 @@ const chartMinorGridlinesPlugin = {
     Object.keys(scales).forEach((id) => drawMinorTicksForScale(scales[id]));
   }
 };
-const BORDER_WIDTH = {
-  INITIAL: 2,
-  HOVERED: 6,
-  POINT_HOVERED: 8
-};
-const BORDER_COLOR = "rgba(0,0,0,0.1)";
-const ANNOTATION_DASH = [10, 2];
-const DEFAULT_FONT_SIZE = 12;
-const DEFAULT_FONT_FAMILY = '"Roobert", "Noto Sans", sans-serif';
-const DEFAULT_COLOR = "hsl(60, 10.34482759%, 12.5%)";
-const LEGEND_LABEL_BOX_SIZE = 12;
-const TOOLTIP_PADDING = 8;
-const TOOLTIP_BOX_PADDING = 4;
-const TRANSPARENT = "transparent";
-const LOGARITHMIC_STEPS = [1, 10, 100, 1e3, 1e4];
-const COLORS = [
-  "#3366cc",
-  "#dc3912",
-  "#ff9900",
-  "#109618",
-  "#990099",
-  "#0099c6",
-  "#dd4477",
-  "#66aa00",
-  "#b82e2e",
-  "#316395",
-  "#994499",
-  "#22aa99",
-  "#aaaa11",
-  "#6633cc",
-  "#e67300",
-  "#8b0707",
-  "#651067",
-  "#329262",
-  "#5574a6",
-  "#3b3eac"
-];
-const ALPHA_CHANEL = "99";
-const WHITE_COLOR_AS_DECIMAL = 16777215;
-const AUTO = "auto";
-const ANIMATION_DURATION = {
-  NO: 0,
-  SLOW: 400,
-  FAST: 1e3
-};
-const DEFAULT_CHART_NAME = "new_chart";
-const CUSTOM_LEGEND_PLUGIN_NAME = "htmlLegend";
-const DECIMAL_POINT_TOLERANCE = 9;
-const MAX_DECIMAL_DIFF = 1 / 10 ** DECIMAL_POINT_TOLERANCE;
 const chartAreaBorderPlugin = {
   id: "chartAreaBorder",
   beforeDraw(chart2, _2, options) {
@@ -25329,11 +25401,9 @@ var AnnotationType = /* @__PURE__ */ ((AnnotationType2) => {
   return AnnotationType2;
 })(AnnotationType || {});
 const handleLineEnter = (element, chart2, annotation2) => {
-  var _a2, _b2, _c2;
-  if (!isNil((_b2 = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.style) == null ? void 0 : _b2.cursor)) {
-    chart2.canvas.style.cursor = CursorStyle.Pointer;
-  }
-  if ((_c2 = element.options.scaleID) == null ? void 0 : _c2.includes(AxisType.X)) {
+  var _a2;
+  chart2.canvas.style.cursor = CursorStyle.Pointer;
+  if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
     if (element.options.label) {
       element.options.label.xAdjust = chart2.chartArea.left;
     }
@@ -25350,11 +25420,8 @@ const handleLineEnter = (element, chart2, annotation2) => {
   chart2.draw();
 };
 const handleLineLeave = (element, chart2, annotation2) => {
-  var _a2, _b2;
   element.options.borderWidth = BORDER_WIDTH.INITIAL;
-  if (!isNil((_b2 = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.style) == null ? void 0 : _b2.cursor)) {
-    chart2.canvas.style.cursor = CursorStyle.Initial;
-  }
+  chart2.canvas.style.cursor = CursorStyle.Initial;
   chart2.hoveredAnnotationId = null;
   if (element.options.label) {
     element.label.options.display = false;
@@ -25367,49 +25434,37 @@ const handleLineLeave = (element, chart2, annotation2) => {
   chart2.draw();
 };
 const handleBoxEnter = (element, chart2, annotation2) => {
-  var _a2, _b2;
   if (annotation2 == null ? void 0 : annotation2.enableDrag) {
     chart2.hoveredAnnotationId = element.options.id || null;
     chart2.update();
     element.options.borderWidth = BORDER_WIDTH.HOVERED;
-    if (!isNil((_b2 = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.style) == null ? void 0 : _b2.cursor)) {
-      chart2.canvas.style.cursor = CursorStyle.Pointer;
-    }
+    chart2.canvas.style.cursor = CursorStyle.Pointer;
   }
   chart2.draw();
 };
 const handleBoxLeave = (element, chart2, annotation2) => {
-  var _a2, _b2;
   if (annotation2 == null ? void 0 : annotation2.enableDrag) {
     chart2.hoveredAnnotationId = null;
     element.options.borderWidth = BORDER_WIDTH.INITIAL;
-    if (!isNil((_b2 = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.style) == null ? void 0 : _b2.cursor)) {
-      chart2.canvas.style.cursor = CursorStyle.Initial;
-    }
+    chart2.canvas.style.cursor = CursorStyle.Initial;
     chart2.update();
   }
   chart2.draw();
 };
 const handlePointEnter = (element, chart2, annotation2) => {
-  var _a2, _b2;
   if (annotation2 == null ? void 0 : annotation2.enableDrag) {
     chart2.hoveredAnnotationId = element.options.id || null;
     chart2.update();
     element.options.borderWidth = BORDER_WIDTH.POINT_HOVERED;
-    if (!isNil((_b2 = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.style) == null ? void 0 : _b2.cursor)) {
-      chart2.canvas.style.cursor = CursorStyle.Pointer;
-    }
+    chart2.canvas.style.cursor = CursorStyle.Pointer;
   }
   chart2.draw();
 };
 const handlePointLeave = (element, chart2, annotation2) => {
-  var _a2, _b2;
   if (annotation2 == null ? void 0 : annotation2.enableDrag) {
     chart2.hoveredAnnotationId = null;
     element.options.borderWidth = BORDER_WIDTH.INITIAL;
-    if (!isNil((_b2 = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.style) == null ? void 0 : _b2.cursor)) {
-      chart2.canvas.style.cursor = CursorStyle.Initial;
-    }
+    chart2.canvas.style.cursor = CursorStyle.Initial;
     chart2.update();
   }
   chart2.draw();
@@ -25424,9 +25479,13 @@ const generateAnnotations = (annotationsData) => {
     const borderColor = {
       [AnnotationType.LINE]: color2,
       [AnnotationType.POINT]: color2,
-      [AnnotationType.BOX]: color2
+      [AnnotationType.BOX]: color2,
+      [AnnotationType.ELLIPSE]: color2
     }[type] || TRANSPARENT;
-    const borderWidth = type === AnnotationType.LINE ? BORDER_WIDTH.INITIAL : 0;
+    const borderWidth = {
+      [AnnotationType.LINE]: BORDER_WIDTH.INITIAL,
+      [AnnotationType.ELLIPSE]: (ann == null ? void 0 : ann.borderWidth) ?? 0
+    }[type] ?? 0;
     const borderDash = type === AnnotationType.LINE ? ANNOTATION_DASH : void 0;
     const defLabel = {
       content: ann == null ? void 0 : ann.label,
@@ -25494,12 +25553,13 @@ const generateAnnotations = (annotationsData) => {
     const onDragEnd = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDragEnd) ? ann == null ? void 0 : ann.onDragEnd(cord, annotation2) : void 0;
     return {
       ...ann,
+      drawTime: "afterDraw",
       display: ann == null ? void 0 : ann.display,
       annotationIndex: idx,
       id: `${ann == null ? void 0 : ann.label}-${ann == null ? void 0 : ann.value}-${idx}`,
       scaleID,
       label,
-      backgroundColor: color2,
+      backgroundColor: (ann == null ? void 0 : ann.backgroundColor) ?? color2,
       borderColor,
       borderWidth,
       borderDash,
@@ -25826,13 +25886,13 @@ const useToggleCustomLegendVisibility = (memoState, memoOptions) => {
       const parent = document.getElementById(
         memoOptions.legend.customLegend.customLegendContainerID
       );
-      if (!isNil(parent)) {
+      if (parent !== null) {
         parent.style.visibility = memoState.legendEnabled ? "visible" : "hidden";
       }
     }
   }, [
     (_b2 = (_a2 = memoOptions == null ? void 0 : memoOptions.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendPlugin,
-    memoState == null ? void 0 : memoState.legendEnabled
+    memoState.legendEnabled
   ]);
 };
 const useStoreChartStateInStorage = (memoState, persistenceId) => {
@@ -26129,16 +26189,13 @@ const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
   };
 };
 const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState, hoveredAnnotationId) => {
-  var _a2;
   const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
   const annotation2 = hoveredAnnotationId ? annotations == null ? void 0 : annotations[hoveredAnnotationId] : null;
   if (!annotation2)
     return;
   const metrics = calculateAnnotationMetricsInValues(annotation2);
   if (annotation2 && annotation2.enableDrag && !isNil(metrics.centerY) && !isNil(metrics.centerX)) {
-    if (!isNil((_a2 = canvas2 == null ? void 0 : canvas2.style) == null ? void 0 : _a2.cursor)) {
-      canvas2.style.cursor = CursorStyle.Move;
-    }
+    canvas2.style.cursor = CursorStyle.Move;
     const dragStartX = x2 - metrics.centerX;
     const dragStartY = y2 - metrics.centerY;
     setDraggingState(true, annotation2, dragStartX, dragStartY);
@@ -26148,11 +26205,8 @@ const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDragg
   }
 };
 const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAnnotation, dragStartX, dragStartY, chart2) => {
-  var _a2;
   if (isDragging2 && activeAnnotation) {
-    if (!isNil((_a2 = canvas2 == null ? void 0 : canvas2.style) == null ? void 0 : _a2.cursor)) {
-      canvas2.style.cursor = CursorStyle.Move;
-    }
+    canvas2.style.cursor = CursorStyle.Move;
     const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
     const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
     let newCenterX = x2 - dragStartX;
@@ -26170,6 +26224,7 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
         activeAnnotation.yMax = newCenterY + metrics.height / 2;
       }
     }
+    chart2.update();
     if (activeAnnotation == null ? void 0 : activeAnnotation.onDrag) {
       activeAnnotation.onDrag({ x: x2, y: y2 }, cloneDeep(activeAnnotation));
     }
@@ -26177,9 +26232,9 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
     const { centerX, centerY } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
     const { centerX: xValue, centerY: yValue } = calculateAnnotationMetricsInValuesInPixels(activeAnnotation, scales);
     if (!isNil(centerX) && !isNil(centerY) && !isNil(xValue) && !isNil(yValue)) {
-      ctx == null ? void 0 : ctx.save();
-      ctx == null ? void 0 : ctx.clearRect(0, 0, width, height);
-      chart2 == null ? void 0 : chart2.draw();
+      ctx.save();
+      ctx.clearRect(0, 0, width, height);
+      chart2.draw();
       ctx.font = DEFAULT_FONT_FAMILY;
       ctx.fillStyle = "black";
       let labelX = xValue - 45;
@@ -26192,13 +26247,12 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
       if (labelY > height) {
         labelY = height - 7;
       }
-      ctx == null ? void 0 : ctx.fillText(labelText, labelX, labelY);
-      ctx == null ? void 0 : ctx.restore();
+      ctx.fillText(labelText, labelX, labelY);
+      ctx.restore();
     }
   }
 };
 const handleAnnotationMouseUp = (isDragging2, activeAnnotation, chart2, setDraggingState) => {
-  var _a2, _b2;
   if (isDragging2) {
     if (activeAnnotation) {
       const { centerX = -1, centerY = -1 } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
@@ -26208,15 +26262,10 @@ const handleAnnotationMouseUp = (isDragging2, activeAnnotation, chart2, setDragg
           cloneDeep(activeAnnotation)
         );
       }
-      if (!isNil((_b2 = (_a2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _a2.style) == null ? void 0 : _b2.cursor)) {
-        chart2.canvas.style.cursor = CursorStyle.Pointer;
-      }
-    }
-    console.log("chart?.canvas MOUSE UP", chart2 == null ? void 0 : chart2.canvas);
-    if (chart2 == null ? void 0 : chart2.canvas) {
+      chart2.canvas.style.cursor = CursorStyle.Pointer;
       setDraggingState(false, null);
-      chart2 == null ? void 0 : chart2.update();
     }
+    chart2.update();
   }
 };
 const annotationLabel = (ctx, annotations, scales) => {
@@ -26224,11 +26273,11 @@ const annotationLabel = (ctx, annotations, scales) => {
     var _a2;
     if (annotation2.type === AnnotationType.POINT && !isNil(annotation2 == null ? void 0 : annotation2.label) && ((_a2 = annotation2 == null ? void 0 : annotation2.label) == null ? void 0 : _a2.display)) {
       const { content, font, color: color2, position, padding } = (annotation2 == null ? void 0 : annotation2.label) ?? {};
-      ctx == null ? void 0 : ctx.save();
+      ctx.save();
       ctx.font = font;
       ctx.fillStyle = color2;
       const { centerX = -1, centerY = -1 } = calculateAnnotationMetricsInValuesInPixels(annotation2, scales);
-      const textWidth = ctx == null ? void 0 : ctx.measureText(content).width;
+      const textWidth = ctx.measureText(content).width;
       let textX = centerX - textWidth / 2;
       let textY = centerY + 20;
       switch (position) {
@@ -26244,8 +26293,8 @@ const annotationLabel = (ctx, annotations, scales) => {
           textY = centerY;
           break;
       }
-      ctx == null ? void 0 : ctx.fillText(content, textX, textY);
-      ctx == null ? void 0 : ctx.restore();
+      ctx.fillText(content, textX, textY);
+      ctx.restore();
     }
   });
 };
@@ -26257,9 +26306,9 @@ const annotationDraggerPlugin = {
     if (!annotations)
       return;
     annotationLabel(
-      chart2 == null ? void 0 : chart2.ctx,
+      chart2.ctx,
       annotations,
-      chart2 == null ? void 0 : chart2.scales
+      chart2.scales
     );
     const pluginOptions = ((_d2 = (_c2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _c2.plugins) == null ? void 0 : _d2.annotationDraggerPlugin) || {
       enabled: false
@@ -26282,14 +26331,15 @@ const annotationDraggerPlugin = {
       };
     }
   },
-  afterRender(chart2) {
-    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
+  afterUpdate(chart2) {
+    var _a2, _b2, _c2, _d2;
+    const { canvas: canvas2, scales, hoveredAnnotationId } = 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: (_c2 = chart2 == null ? void 0 : chart2.scales) == null ? void 0 : _c2.x, y: (_d2 = chart2 == null ? void 0 : chart2.scales) == null ? void 0 : _d2.y };
-    let annotations = ((_g2 = (_f2 = (_e2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _e2.plugins) == null ? void 0 : _f2.annotation) == null ? void 0 : _g2.annotations) ?? {};
-    if (!annotations)
+    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 (!chart2 && !annotations)
       return;
     let isDragging2 = false;
     let dragStartX, dragStartY;
@@ -26302,71 +26352,48 @@ const annotationDraggerPlugin = {
         dragStartY = startY;
       }
     };
-    if (!((_i2 = (_h2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _h2.dataset) == null ? void 0 : _i2.annotationDraggerInitialized) && (pluginOptions == null ? void 0 : pluginOptions.enabled) && (chart2 == null ? void 0 : chart2.hoveredAnnotationId)) {
-      console.group("Condition");
-      console.log("addEventListener", (_j2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _j2.addEventListener);
-      console.log("nil", !isNil(chart2 == null ? void 0 : chart2.canvas));
-      console.log("isEmpty", !isEmpty(chart2 == null ? void 0 : chart2.canvas));
-      console.log("isFunction", isFunction$2(chart2 == null ? void 0 : chart2.canvas.addEventListener));
-      console.groupEnd();
-      if (!isNil(chart2 == null ? void 0 : chart2.canvas) && !isEmpty(chart2 == null ? void 0 : chart2.canvas) && isFunction$2(chart2 == null ? void 0 : chart2.canvas.addEventListener)) {
-        console.log("Canvas exists and has addEventListener:", chart2 == null ? void 0 : chart2.canvas);
-        (_k2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _k2.addEventListener(
-          MouseEvents.MOUSEDOWN,
-          (event) => {
-            var _a3, _b3, _c3;
-            handleAnnotationMouseDown(
-              event,
-              chart2 == null ? void 0 : chart2.canvas,
-              typedScales,
-              (_c3 = (_b3 = (_a3 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a3.plugins) == null ? void 0 : _b3.annotation) == null ? void 0 : _c3.annotations,
-              setDraggingState,
-              chart2.hoveredAnnotationId
-            );
-          }
+    if (!canvas2.dataset.annotationDraggerInitialized && pluginOptions.enabled && hoveredAnnotationId) {
+      canvas2.addEventListener(MouseEvents.MOUSEDOWN, (event) => {
+        var _a3, _b3, _c3;
+        handleAnnotationMouseDown(
+          event,
+          canvas2,
+          typedScales,
+          (_c3 = (_b3 = (_a3 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a3.plugins) == null ? void 0 : _b3.annotation) == null ? void 0 : _c3.annotations,
+          setDraggingState,
+          chart2.hoveredAnnotationId
         );
-        (_l2 = chart2 == null ? void 0 : chart2.canvas) == null ? void 0 : _l2.addEventListener(
-          MouseEvents.MOUSEMOVE,
-          (event) => {
-            handleAnnotationMouseMove(
-              event,
-              chart2 == null ? void 0 : chart2.canvas,
-              typedScales,
-              isDragging2,
-              activeAnnotation,
-              dragStartX,
-              dragStartY,
-              chart2
-            );
-          }
+      });
+      canvas2.addEventListener(MouseEvents.MOUSEMOVE, (event) => {
+        handleAnnotationMouseMove(
+          event,
+          canvas2,
+          typedScales,
+          isDragging2,
+          activeAnnotation,
+          dragStartX,
+          dragStartY,
+          chart2
         );
-        chart2 == null ? void 0 : chart2.canvas.addEventListener(MouseEvents.MOUSEUP, () => {
-          handleAnnotationMouseUp(
-            isDragging2,
-            activeAnnotation,
-            chart2,
-            setDraggingState
-          );
-        });
-        chart2.canvas.dataset.annotationDraggerInitialized = "true";
-      } else {
-        console.error(
-          "Canvas is null, empty, or does not support addEventListener:",
-          chart2 == null ? void 0 : chart2.canvas
+      });
+      canvas2.addEventListener(MouseEvents.MOUSEUP, () => {
+        handleAnnotationMouseUp(
+          isDragging2,
+          activeAnnotation,
+          chart2,
+          setDraggingState
         );
-      }
+      });
+      canvas2.dataset.annotationDraggerInitialized = "true";
     }
     if (!pluginOptions.enabled) {
-      if ((chart2 == null ? void 0 : chart2.canvas) && isFunction$2(chart2 == null ? void 0 : chart2.canvas.removeEventListener)) {
-        console.log("Removing event listeners from canvas:", chart2 == null ? void 0 : chart2.canvas);
-        chart2 == null ? void 0 : chart2.canvas.removeEventListener(MouseEvents.MOUSEDOWN, () => {
-        });
-        chart2 == null ? void 0 : chart2.canvas.removeEventListener(MouseEvents.MOUSEMOVE, () => {
-        });
-        chart2 == null ? void 0 : chart2.canvas.removeEventListener(MouseEvents.MOUSEUP, () => {
-        });
-        chart2.canvas.dataset.annotationDraggerInitialized = "";
-      }
+      canvas2.removeEventListener(MouseEvents.MOUSEDOWN, () => {
+      });
+      canvas2.removeEventListener(MouseEvents.MOUSEMOVE, () => {
+      });
+      canvas2.removeEventListener(MouseEvents.MOUSEUP, () => {
+      });
+      canvas2.dataset.annotationDraggerInitialized = "";
     }
   }
 };
@@ -26869,7 +26896,8 @@ Chart$2.register(
   plugin,
   annotation,
   chartAreaTextPlugin,
-  annotationDraggerPlugin
+  annotationDraggerPlugin,
+  ellipsisAnnotationPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;