@oliasoft-open-source/charts-library 3.8.0-beta-3 → 3.8.1-beta-1

package/dist/index.js

@@ -8,7 +8,7 @@ var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
 import { produce } from "immer";
-import { round as round$2, displayNumber, isCloseTo, roundByMagnitude, to as to$2, toNum } from "@oliasoft-open-source/units";
+import { round as round$2, displayNumber, isCloseTo, roundByMagnitude, toNum } 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, debounce as debounce$3 } from "lodash";
@@ -24957,7 +24957,6 @@ const TextLabelPosition = {
   BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right"
 };
-const DEGTORAD = 90;
 const defaultAxis = (position) => ({
   label: "",
   position,
@@ -25009,24 +25008,17 @@ const defaultGraph$2 = (graph) => ({
   showMinorGridlines: (graph == null ? void 0 : graph.showMinorGridlines) ?? false
 });
 const defaultAnnotations$1 = (annotations) => {
-  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
   return {
-    pointEllipsisAnnotation: {
-      radiusX: ((_a2 = annotations == null ? void 0 : annotations.pointEllipsisAnnotation) == null ? void 0 : _a2.radiusX) ?? 10,
-      radiusY: ((_b2 = annotations == null ? void 0 : annotations.pointEllipsisAnnotation) == null ? void 0 : _b2.radiusY) ?? 5,
-      color: (_c2 = annotations == null ? void 0 : annotations.pointEllipsisAnnotation) == null ? void 0 : _c2.color,
-      rotation: ((_d2 = annotations == null ? void 0 : annotations.pointEllipsisAnnotation) == null ? void 0 : _d2.rotation) ?? DEGTORAD,
-      lineWidth: ((_e2 = annotations == null ? void 0 : annotations.pointEllipsisAnnotation) == null ? void 0 : _e2.lineWidth) ?? 1
-    },
     labelAnnotation: {
-      showLabel: ((_f2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _f2.showLabel) ?? false,
-      text: ((_g2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _g2.text) ?? "",
-      position: ((_h2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _h2.position) ?? TextLabelPosition.BOTTOM_RIGHT,
-      fontSize: ((_i2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _i2.fontSize) ?? 12,
-      xOffset: ((_j2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _j2.xOffset) ?? 5,
-      yOffset: ((_k2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _k2.yOffset) ?? 5,
-      maxWidth: ((_l2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _l2.maxWidth) ?? 300,
-      lineHeight: ((_m2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _m2.lineHeight) ?? 12
+      showLabel: ((_a2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _a2.showLabel) ?? false,
+      text: ((_b2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _b2.text) ?? "",
+      position: ((_c2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _c2.position) ?? TextLabelPosition.BOTTOM_RIGHT,
+      fontSize: ((_d2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _d2.fontSize) ?? 12,
+      xOffset: ((_e2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _e2.xOffset) ?? 5,
+      yOffset: ((_f2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _f2.yOffset) ?? 5,
+      maxWidth: ((_g2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _g2.maxWidth) ?? 300,
+      lineHeight: ((_h2 = annotations == null ? void 0 : annotations.labelAnnotation) == null ? void 0 : _h2.lineHeight) ?? 12
     },
     showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
     controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
@@ -25171,11 +25163,14 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     }
     const filteredData = data.filter(Boolean) || [];
     const isSinglePoint = (filteredData == null ? void 0 : filteredData.length) === 1;
-    const linePointRadius = parseFloat(pointRadiusProp) || DEFAULT_POINT_RADIUS;
+    const linePointRadius = parseFloat(String(pointRadiusProp)) || DEFAULT_POINT_RADIUS;
     const pointRadius = (pointsEnabled || isSinglePoint) && showPoints ? linePointRadius : 0;
-    const hoverRadius = parseFloat(pointHoverRadius) || DEFAULT_HOVER_RADIUS;
+    const hoverRadius = parseFloat(String(pointHoverRadius)) || DEFAULT_HOVER_RADIUS;
     const indexedColor = COLORS[i2];
-    const hasCustomOpt = checkCustomOption(line, CUSTOM_OPTION);
+    const hasCustomOpt = checkCustomOption(
+      line,
+      CUSTOM_OPTION
+    );
     return {
       ...line,
       label: line.label || `${label} ${i2 + 1}`,
@@ -25183,7 +25178,7 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       showLine: showLine ?? lineEnabled,
       lineTension,
       spanGaps,
-      borderWidth: parseFloat(borderWidth) || DEFAULT_BORDER_WIDTH,
+      borderWidth: parseFloat(String(borderWidth)) || DEFAULT_BORDER_WIDTH,
       borderDash: borderDash || [],
       borderJoinStyle: BORDER_JOIN_STYLE,
       borderColor: borderColor ?? indexedColor ?? generateRandomColor(COLORS),
@@ -25192,7 +25187,6 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       pointRadius,
       pointHoverRadius: hoverRadius,
       pointHitRadius: line.pointHitRadius ?? hoverRadius,
-      showEllipsesAnnotation: (line == null ? void 0 : line.showEllipsesAnnotation) ?? false,
       ...hasCustomOpt ? { hasCustomOpt } : {}
     };
   });
@@ -25664,6 +25658,46 @@ const getDraggableData = (options) => {
     }
   } : {};
 };
+const ellipseAnnotationsConfig = ({
+  data,
+  borderColor: pointBorderColor
+}) => {
+  return data == null ? void 0 : data.map(({ ellipseOptions }, index2) => {
+    if (!ellipseOptions)
+      return;
+    const {
+      xMinPoint,
+      xMaxPoint,
+      yMinPoint,
+      yMaxPoint,
+      rotation,
+      borderColor = pointBorderColor,
+      backgroundColor = "rgba(0, 0, 0, 0)"
+    } = ellipseOptions ?? {};
+    return {
+      id: `ellipse${index2}`,
+      type: "ellipse",
+      xMin: xMinPoint,
+      xMax: xMaxPoint,
+      yMin: yMinPoint,
+      yMax: yMaxPoint,
+      rotation,
+      borderColor,
+      backgroundColor
+    };
+  }).filter(Boolean);
+};
+const ellipsisAnnotation = (datasets) => {
+  return datasets.flatMap((dataset) => ellipseAnnotationsConfig(dataset)).reduce(
+    (acc, annotation2) => {
+      if (annotation2) {
+        acc[annotation2.id] = annotation2;
+      }
+      return acc;
+    },
+    {}
+  );
+};
 const useChartOptions = ({
   chartRef,
   state,
@@ -25748,9 +25782,15 @@ const useChartOptions = ({
     }),
     [zoomEnabled]
   );
+  const mergedAnnotation = {
+    ...annotation2.annotations,
+    ...ellipsisAnnotation(generatedDatasets)
+  };
   const plugins = {
     datalabels,
-    annotation: annotation2,
+    annotation: {
+      annotations: mergedAnnotation
+    },
     zoom: { pan: panOptions, zoom: zoomOptions },
     tooltip,
     legend: { ...legend2, display: false },
@@ -25800,67 +25840,6 @@ const useChartOptions = ({
     [state, options, chartRef]
   );
 };
-const customPointEllipsisPlugin = (options) => {
-  var _a2;
-  const { radiusX, radiusY, rotation, lineWidth, color: color2 } = ((_a2 = options == null ? void 0 : options.annotations) == null ? void 0 : _a2.pointEllipsisAnnotation) ?? {};
-  return {
-    id: "ellipseAnnotation",
-    afterDatasetsDraw: (chart2) => {
-      var _a3, _b2, _c2;
-      const { ctx, chartArea } = chart2;
-      if (isEmpty((_a3 = options == null ? void 0 : options.annotations) == null ? void 0 : _a3.pointEllipsisAnnotation))
-        return;
-      (_c2 = (_b2 = chart2 == null ? void 0 : chart2.data) == null ? void 0 : _b2.datasets) == null ? void 0 : _c2.forEach(
-        (dataset, datasetIndex) => {
-          const meta = chart2.getDatasetMeta(datasetIndex);
-          if (!meta.hidden && dataset.showEllipsesAnnotation) {
-            meta.data.forEach((element, index2) => {
-              var _a4, _b3;
-              const pointElement = element;
-              const { x: x2, y: y2 } = ((_a4 = pointElement.getCenterPoint) == null ? void 0 : _a4.call(pointElement)) || {
-                x: 0,
-                y: 0
-              };
-              if (x2 < chartArea.left || x2 > chartArea.right || y2 < chartArea.top || y2 > chartArea.bottom) {
-                return;
-              }
-              const { ellipseOptions } = (_b3 = dataset == null ? void 0 : dataset.data) == null ? void 0 : _b3[index2];
-              const {
-                radiusX: ellipseRadiusX = radiusX ?? 0,
-                radiusY: ellipseRadiusY = radiusY ?? 0,
-                rotation: ellipseRotation = rotation,
-                lineWidth: ellipseLineWidth = lineWidth,
-                color: ellipseColor = color2
-              } = ellipseOptions ?? {};
-              const borderPointPixel = {
-                x: chart2.scales.x.getPixelForValue(Math.abs(ellipseRadiusX)),
-                y: chart2.scales.y.getPixelForValue(Math.abs(ellipseRadiusY))
-              };
-              const customRadiusX = Math.abs(borderPointPixel.x - x2);
-              const customRadiusY = Math.abs(borderPointPixel.y - y2);
-              const customRotation = to$2(Number(ellipseRotation), "deg", "rad");
-              ctx.save();
-              ctx.strokeStyle = ellipseColor ?? color2 ?? dataset.borderColor ?? COLORS[datasetIndex];
-              ctx.lineWidth = ellipseLineWidth ?? lineWidth ?? 1;
-              ctx.beginPath();
-              ctx.ellipse(
-                x2,
-                y2,
-                customRadiusX,
-                customRadiusY,
-                customRotation,
-                0,
-                2 * Math.PI
-              );
-              ctx.stroke();
-              ctx.restore();
-            });
-          }
-        }
-      );
-    }
-  };
-};
 const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
   const { graph, legend: legend2 } = options;
   const debouncedResetZoom = useCallback(
@@ -25879,15 +25858,13 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     },
     [debouncedResetZoom]
   );
-  const ellipsePlugin = customPointEllipsisPlugin(options);
   return useMemo(() => {
     return [
       ...getPlugins(graph, legend2),
       {
         id: "customEventCatcher",
         beforeEvent: handleDoubleClick
-      },
-      ellipsePlugin
+      }
     ];
   }, [handleDoubleClick]);
 };
@@ -26223,8 +26200,7 @@ Chart$2.register(
   plugin$1,
   plugin,
   annotation,
-  chartAreaTextPlugin,
-  customPointEllipsisPlugin()
+  chartAreaTextPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;