@oliasoft-open-source/charts-library 4.4.2 → 4.5.0-beta-1

package/dist/index.js

@@ -22174,6 +22174,139 @@ 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 GRADIENT_COLORS = [
+  { offset: 0, color: "rgba(144,238,144,0.8)" },
+  // Light green
+  { offset: 0.6, color: "rgba(255,255,224,0.8)" },
+  // Light yellow
+  { offset: 0.8, color: "rgba(255,255,224,0.8)" },
+  // Light yellow
+  { offset: 0.92, color: "rgba(255,182,193,0.5)" },
+  // Light red
+  { offset: 0.99, color: "rgba(255,182,193,0.8)" }
+  // Light red
+];
+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";
@@ -22467,67 +22600,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 GRADIENT_COLORS = [
-  { offset: 0, color: "rgba(144,238,144,0.8)" },
-  // Light green
-  { offset: 0.6, color: "rgba(255,255,224,0.8)" },
-  // Light yellow
-  { offset: 0.8, color: "rgba(255,255,224,0.8)" },
-  // Light yellow
-  { offset: 0.92, color: "rgba(255,182,193,0.5)" },
-  // Light red
-  { offset: 0.99, color: "rgba(255,182,193,0.8)" }
-  // Light red
-];
 const chartAreaBorderPlugin = {
   id: "chartAreaBorder",
   beforeDraw(chart2, _2, options) {
@@ -25420,9 +25492,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,
@@ -25488,15 +25564,17 @@ const generateAnnotations = (annotationsData) => {
     const onDragStart = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDragStart) ? ann == null ? void 0 : ann.onDragStart(cord, annotation2) : void 0;
     const onDrag = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDrag) ? ann == null ? void 0 : ann.onDrag(cord, annotation2) : void 0;
     const onDragEnd = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDragEnd) ? ann == null ? void 0 : ann.onDragEnd(cord, annotation2) : void 0;
+    const rotation = ann.rotation * Math.PI / 180;
     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}`,
+      rotation,
       scaleID,
       label,
-      backgroundColor: color2,
+      backgroundColor: (ann == null ? void 0 : ann.backgroundColor) ?? color2,
       borderColor,
       borderWidth,
       borderDash,
@@ -26302,16 +26380,20 @@ const annotationDraggerPlugin = {
         );
       });
       canvas2.addEventListener(MouseEvents.MOUSEMOVE, (event) => {
-        handleAnnotationMouseMove(
-          event,
-          canvas2,
-          typedScales,
-          isDragging2,
-          activeAnnotation,
-          dragStartX,
-          dragStartY,
-          chart2
+        const handleAnnotationMouseMoveDebounce = debounce$3(
+          () => handleAnnotationMouseMove(
+            event,
+            canvas2,
+            typedScales,
+            isDragging2,
+            activeAnnotation,
+            dragStartX,
+            dragStartY,
+            chart2
+          ),
+          5
         );
+        handleAnnotationMouseMoveDebounce();
       });
       canvas2.addEventListener(MouseEvents.MOUSEUP, () => {
         handleAnnotationMouseUp(
@@ -26837,7 +26919,8 @@ Chart$2.register(
   plugin,
   annotation,
   chartAreaTextPlugin,
-  annotationDraggerPlugin
+  annotationDraggerPlugin,
+  ellipsisAnnotationPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;