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

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
@@ -25329,11 +25329,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 +25348,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 +25362,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();
@@ -25494,6 +25477,7 @@ 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}`,
@@ -25826,13 +25810,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 +26113,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 +26129,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 +26148,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 +26156,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 +26171,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 +26186,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 +26197,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 +26217,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 +26230,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 +26255,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 +26276,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 = "";
     }
   }
 };