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

package/dist/index.js

@@ -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) {
@@ -25407,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,
@@ -25477,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,
@@ -26254,7 +26331,7 @@ const annotationDraggerPlugin = {
       };
     }
   },
-  afterDraw(chart2) {
+  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) || {
@@ -26819,7 +26896,8 @@ Chart$2.register(
   plugin,
   annotation,
   chartAreaTextPlugin,
-  annotationDraggerPlugin
+  annotationDraggerPlugin,
+  ellipsisAnnotationPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;