@oliasoft-open-source/charts-library 3.7.5 → 3.8.0-beta-2

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, toNum } from "@oliasoft-open-source/units";
+import { round as round$2, displayNumber, isCloseTo, roundByMagnitude, to as to$2, 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,6 +24957,7 @@ const TextLabelPosition = {
   BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right"
 };
+const DEGTORAD = 90;
 const defaultAxis = (position) => ({
   label: "",
   position,
@@ -25008,17 +25009,24 @@ 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;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2;
   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: ((_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
+      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
     },
     showAnnotations: (annotations == null ? void 0 : annotations.showAnnotations) ?? false,
     controlAnnotation: (annotations == null ? void 0 : annotations.controlAnnotation) ?? false,
@@ -25184,6 +25192,7 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
       pointRadius,
       pointHoverRadius: hoverRadius,
       pointHitRadius: line.pointHitRadius ?? hoverRadius,
+      showEllipsesAnnotation: (line == null ? void 0 : line.showEllipsesAnnotation) ?? false,
       ...hasCustomOpt ? { hasCustomOpt } : {}
     };
   });
@@ -25791,6 +25800,63 @@ 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,
+                radiusY: ellipseRadiusY = radiusY,
+                rotation: ellipseRotation = rotation,
+                lineWidth: ellipseLineWidth = lineWidth,
+                color: ellipseColor = color2
+              } = ellipseOptions ?? {};
+              const customRadiusX = Number(ellipseRadiusX);
+              const customRadiusY = Number(ellipseRadiusY);
+              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(
@@ -25809,13 +25875,15 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     },
     [debouncedResetZoom]
   );
+  const ellipsePlugin = customPointEllipsisPlugin(options);
   return useMemo(() => {
     return [
       ...getPlugins(graph, legend2),
       {
         id: "customEventCatcher",
         beforeEvent: handleDoubleClick
-      }
+      },
+      ellipsePlugin
     ];
   }, [handleDoubleClick]);
 };
@@ -26151,7 +26219,8 @@ Chart$2.register(
   plugin$1,
   plugin,
   annotation,
-  chartAreaTextPlugin
+  chartAreaTextPlugin,
+  customPointEllipsisPlugin()
 );
 const LineChart = (props) => {
   var _a2, _b2;