@oliasoft-open-source/charts-library 5.0.8-beta-1 → 5.1.0-beta-1

package/dist/index.js.js

@@ -572,7 +572,7 @@ let Color$1 = class Color {
   }
 };
 /*!
- * Chart.js v4.4.9
+ * Chart.js v4.4.8
  * https://www.chartjs.org
  * (c) 2025 Chart.js Contributors
  * Released under the MIT License
@@ -2899,36 +2899,8 @@ function styleChanged$1(style, prevStyle) {
   };
   return JSON.stringify(style, replacer) !== JSON.stringify(prevStyle, replacer);
 }
-function getSizeForArea(scale, chartArea, field) {
-  return scale.options.clip ? scale[field] : chartArea[field];
-}
-function getDatasetArea(meta, chartArea) {
-  const { xScale, yScale } = meta;
-  if (xScale && yScale) {
-    return {
-      left: getSizeForArea(xScale, chartArea, "left"),
-      right: getSizeForArea(xScale, chartArea, "right"),
-      top: getSizeForArea(yScale, chartArea, "top"),
-      bottom: getSizeForArea(yScale, chartArea, "bottom")
-    };
-  }
-  return chartArea;
-}
-function getDatasetClipArea(chart2, meta) {
-  const clip = meta._clip;
-  if (clip.disabled) {
-    return false;
-  }
-  const area = getDatasetArea(meta, chart2.chartArea);
-  return {
-    left: clip.left === false ? 0 : area.left - (clip.left === true ? 0 : clip.left),
-    right: clip.right === false ? chart2.width : area.right + (clip.right === true ? 0 : clip.right),
-    top: clip.top === false ? 0 : area.top - (clip.top === true ? 0 : clip.top),
-    bottom: clip.bottom === false ? chart2.height : area.bottom + (clip.bottom === true ? 0 : clip.bottom)
-  };
-}
 /*!
- * Chart.js v4.4.9
+ * Chart.js v4.4.8
  * https://www.chartjs.org
  * (c) 2025 Chart.js Contributors
  * Released under the MIT License
@@ -8030,7 +8002,7 @@ function needContext$1(proxy, names2) {
   }
   return false;
 }
-var version$3 = "4.4.9";
+var version$3 = "4.4.8";
 const KNOWN_POSITIONS$1 = [
   "top",
   "bottom",
@@ -8099,6 +8071,21 @@ function determineLastEvent$1(e2, lastEvent, inChartArea, isClick) {
   }
   return e2;
 }
+function getSizeForArea(scale, chartArea, field) {
+  return scale.options.clip ? scale[field] : chartArea[field];
+}
+function getDatasetArea(meta, chartArea) {
+  const { xScale, yScale } = meta;
+  if (xScale && yScale) {
+    return {
+      left: getSizeForArea(xScale, chartArea, "left"),
+      right: getSizeForArea(xScale, chartArea, "right"),
+      top: getSizeForArea(yScale, chartArea, "top"),
+      bottom: getSizeForArea(yScale, chartArea, "bottom")
+    };
+  }
+  return chartArea;
+}
 let Chart$2 = (_h = class {
   static register(...items) {
     registry$1.add(...items);
@@ -8591,20 +8578,27 @@ let Chart$2 = (_h = class {
   }
   _drawDataset(meta) {
     const ctx = this.ctx;
+    const clip = meta._clip;
+    const useClip = !clip.disabled;
+    const area = getDatasetArea(meta, this.chartArea);
     const args = {
       meta,
       index: meta.index,
       cancelable: true
     };
-    const clip = getDatasetClipArea(this, meta);
     if (this.notifyPlugins("beforeDatasetDraw", args) === false) {
       return;
     }
-    if (clip) {
-      clipArea$1(ctx, clip);
+    if (useClip) {
+      clipArea$1(ctx, {
+        left: clip.left === false ? 0 : area.left - clip.left,
+        right: clip.right === false ? this.width : area.right + clip.right,
+        top: clip.top === false ? 0 : area.top - clip.top,
+        bottom: clip.bottom === false ? this.height : area.bottom + clip.bottom
+      });
     }
     meta.controller.draw();
-    if (clip) {
+    if (useClip) {
       unclipArea$1(ctx);
     }
     args.cancelable = false;
@@ -10103,13 +10097,11 @@ function computeCircularBoundary(source) {
 }
 function _drawfill(ctx, source, area) {
   const target = _getTarget(source);
-  const { chart: chart2, index: index2, line, scale, axis } = source;
+  const { line, scale, axis } = source;
   const lineOpts = line.options;
   const fillOption = lineOpts.fill;
   const color2 = lineOpts.backgroundColor;
   const { above = color2, below = color2 } = fillOption || {};
-  const meta = chart2.getDatasetMeta(index2);
-  const clip = getDatasetClipArea(chart2, meta);
   if (target && line.points.length) {
     clipArea$1(ctx, area);
     doFill(ctx, {
@@ -10119,14 +10111,13 @@ function _drawfill(ctx, source, area) {
       below,
       area,
       scale,
-      axis,
-      clip
+      axis
     });
     unclipArea$1(ctx);
   }
 }
 function doFill(ctx, cfg) {
-  const { line, target, above, below, area, scale, clip } = cfg;
+  const { line, target, above, below, area, scale } = cfg;
   const property = line._loop ? "angle" : cfg.axis;
   ctx.save();
   if (property === "x" && below !== above) {
@@ -10136,8 +10127,7 @@ function doFill(ctx, cfg) {
       target,
       color: above,
       scale,
-      property,
-      clip
+      property
     });
     ctx.restore();
     ctx.save();
@@ -10148,8 +10138,7 @@ function doFill(ctx, cfg) {
     target,
     color: below,
     scale,
-    property,
-    clip
+    property
   });
   ctx.restore();
 }
@@ -10183,14 +10172,14 @@ function clipVertical(ctx, target, clipY) {
   ctx.clip();
 }
 function fill(ctx, cfg) {
-  const { line, target, property, color: color2, scale, clip } = cfg;
+  const { line, target, property, color: color2, scale } = cfg;
   const segments = _segments(line, target, property);
   for (const { source: src, target: tgt, start, end } of segments) {
     const { style: { backgroundColor = color2 } = {} } = src;
     const notShape = target !== true;
     ctx.save();
     ctx.fillStyle = backgroundColor;
-    clipBounds(ctx, scale, clip, notShape && _getBounds(property, start, end));
+    clipBounds(ctx, scale, notShape && _getBounds(property, start, end));
     ctx.beginPath();
     const lineLoop = !!line.pathSegment(ctx, src);
     let loop;
@@ -10214,30 +10203,12 @@ function fill(ctx, cfg) {
     ctx.restore();
   }
 }
-function clipBounds(ctx, scale, clip, bounds) {
-  const chartArea = scale.chart.chartArea;
+function clipBounds(ctx, scale, bounds) {
+  const { top: top2, bottom: bottom2 } = scale.chart.chartArea;
   const { property, start, end } = bounds || {};
-  if (property === "x" || property === "y") {
-    let left2, top2, right2, bottom2;
-    if (property === "x") {
-      left2 = start;
-      top2 = chartArea.top;
-      right2 = end;
-      bottom2 = chartArea.bottom;
-    } else {
-      left2 = chartArea.left;
-      top2 = start;
-      right2 = chartArea.right;
-      bottom2 = end;
-    }
+  if (property === "x") {
     ctx.beginPath();
-    if (clip) {
-      left2 = Math.max(left2, clip.left);
-      right2 = Math.min(right2, clip.right);
-      top2 = Math.max(top2, clip.top);
-      bottom2 = Math.min(bottom2, clip.bottom);
-    }
-    ctx.rect(left2, top2, right2 - left2, bottom2 - top2);
+    ctx.rect(start, top2, end - start, bottom2 - top2);
     ctx.clip();
   }
 }
@@ -22803,6 +22774,48 @@ const isNilOrEmpty = (value) => {
   return false;
 };
 const isEmptyString = (value) => value === "";
+const ellipsisAnnotationPlugin = {
+  id: "ellipsisAnnotationPlugin",
+  afterDatasetsDraw(chart2) {
+    const ctx = chart2.ctx;
+    const xScale = chart2.scales.x;
+    const yScale = chart2.scales.y;
+    chart2.data.datasets.forEach((dataset) => {
+      const customDataset = dataset;
+      customDataset.data.forEach((item) => {
+        const { ellipsePoints } = item;
+        if (!ellipsePoints) return;
+        const [p1, p2] = ellipsePoints.major;
+        const [p3, p4] = ellipsePoints.minor;
+        const centerX = (p1.x + p2.x + p3.x + p4.x) / 4;
+        const centerY = (p1.y + p2.y + p3.y + p4.y) / 4;
+        const dx = p2.x - p1.x;
+        const dy = p2.y - p1.y;
+        const angle = Math.atan2(
+          yScale.getPixelForValue(centerY + dy / 2) - yScale.getPixelForValue(centerY - dy / 2),
+          xScale.getPixelForValue(centerX + dx / 2) - xScale.getPixelForValue(centerX - dx / 2)
+        );
+        const radiusX = Math.hypot(
+          xScale.getPixelForValue(p1.x) - xScale.getPixelForValue(p2.x),
+          yScale.getPixelForValue(p1.y) - yScale.getPixelForValue(p2.y)
+        ) / 2;
+        const radiusY = Math.hypot(
+          xScale.getPixelForValue(p3.x) - xScale.getPixelForValue(p4.x),
+          yScale.getPixelForValue(p3.y) - yScale.getPixelForValue(p4.y)
+        ) / 2;
+        const cx2 = xScale.getPixelForValue(centerX);
+        const cy = yScale.getPixelForValue(centerY);
+        ctx.save();
+        ctx.beginPath();
+        ctx.ellipse(cx2, cy, radiusX, radiusY, angle, 0, 2 * Math.PI);
+        ctx.strokeStyle = customDataset.borderColor || DEFAULT_COLOR;
+        ctx.lineWidth = customDataset.borderWidth || 1;
+        ctx.stroke();
+        ctx.restore();
+      });
+    });
+  }
+};
 const chart$3 = "_chart_e3qdd_1";
 const canvas$2 = "_canvas_e3qdd_11";
 const fixedHeight$3 = "_fixedHeight_e3qdd_20";
@@ -24387,9 +24400,11 @@ const useChartFunctions = ({
   const onHover = useCallback(
     (hoveredPoint, setHoveredPoint, datasets) => {
       return (evt, hoveredItems) => {
+        var _a2, _b2;
         if (!(hoveredItems == null ? void 0 : hoveredItems.length) && onPointUnhover && hoveredPoint) {
           setHoveredPoint(null);
           onPointUnhover(evt);
+          (_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.update();
         }
         if ((hoveredItems == null ? void 0 : hoveredItems.length) && onPointHover) {
           const { index: index2, datasetIndex } = hoveredItems[0];
@@ -24398,6 +24413,7 @@ const useChartFunctions = ({
           if (point && !isEqual(hoveredPoint, point)) {
             setHoveredPoint(point);
             onPointHover(evt, datasetIndex, index2, datasets);
+            (_b2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _b2.update();
           }
         }
       };
@@ -25339,8 +25355,8 @@ const estimateDataSeriesHaveCloseValues = (generatedDatasets) => {
   }
   const axesFirstLast = generatedDatasets == null ? void 0 : generatedDatasets.reduce((acc, dataset) => {
     var _a3, _b2, _c2, _d2;
-    const xAxisId = (dataset == null ? void 0 : dataset.xAxisID) ?? "x";
-    const yAxisId = (dataset == null ? void 0 : dataset.yAxisID) ?? "y";
+    const xAxisId = (dataset == null ? void 0 : dataset.xAxisID) ?? "defaultX";
+    const yAxisId = (dataset == null ? void 0 : dataset.yAxisID) ?? "defaultY";
     const data = (dataset == null ? void 0 : dataset.data) ?? [];
     if (data && (data == null ? void 0 : data.length)) {
       const { x: xFirstCurrent, y: yFirstCurrent } = (data == null ? void 0 : data[0]) ?? {};
@@ -25419,24 +25435,18 @@ const getSuggestedAxisRange = ({
     max: round$2(maxAxisValue, DECIMAL_POINT_TOLERANCE)
   };
 };
-const getAxesDataFromMetasets = (generatedDatasets, scalesKeys, annotationsData) => {
-  if (!Array.isArray(generatedDatasets) || !Array.isArray(scalesKeys)) {
-    return {};
-  }
-  const annotations = getAnnotationsData(annotationsData);
-  return scalesKeys.reduce((acc, axisKey) => {
-    const axisType = getAxisTypeFromKey(axisKey);
-    const datasetValues = generatedDatasets.filter((dataset) => {
-      const axisId = dataset[`${axisType}AxisID`] ?? axisType;
-      return axisId === axisKey;
-    }).flatMap((dataset) => {
-      const data = (dataset == null ? void 0 : dataset.data) ?? [];
-      return data.map((point) => point[axisType]);
-    });
-    const annotationValues = (annotations == null ? void 0 : annotations[axisKey]) ?? [];
-    acc[axisKey] = [.../* @__PURE__ */ new Set([...datasetValues, ...annotationValues])];
-    return acc;
-  }, {});
+const getAxesDataFromMetasets = (chartRef, scalesKeys, annotationsData) => {
+  var _a2;
+  if (!chartRef || !scalesKeys) return {};
+  const metasets = ((_a2 = chartRef == null ? void 0 : chartRef.current) == null ? void 0 : _a2.getSortedVisibleDatasetMetas()) ?? [];
+  const annotData = getAnnotationsData(annotationsData);
+  return metasets && (scalesKeys == null ? void 0 : scalesKeys.reduce((acc, key) => {
+    const data = metasets.filter((dataset) => Object.values(dataset).includes(key)).flatMap((dataset) => dataset._parsed).map((parsedData) => parsedData[getAxisTypeFromKey(key)]).concat((annotData == null ? void 0 : annotData[key]) ?? []);
+    return {
+      ...acc,
+      [key]: [...new Set(data)]
+    };
+  }, {}));
 };
 const shouldCalculate = (min, max) => !isNil(min) || !isNil(max);
 const autoScale = (options, state, generatedDatasets, chartRef) => {
@@ -25451,7 +25461,7 @@ const autoScale = (options, state, generatedDatasets, chartRef) => {
   }
   const scalesKeys = Object.keys(scales) ?? [];
   const data = getAxesDataFromMetasets(
-    generatedDatasets,
+    chartRef,
     scalesKeys,
     annotationsData
   );
@@ -25780,7 +25790,12 @@ const generateAnnotations = (annotationsData) => {
       [AnnotationType.BOX]: color2,
       [AnnotationType.ELLIPSE]: TRANSPARENT
     }[type] || TRANSPARENT;
-    const borderWidth = type === AnnotationType.LINE ? BORDER_WIDTH.INITIAL : 0;
+    const borderWidth = {
+      [AnnotationType.LINE]: BORDER_WIDTH.INITIAL,
+      [AnnotationType.BOX]: BORDER_WIDTH.ZERO,
+      [AnnotationType.POINT]: BORDER_WIDTH.ZERO,
+      [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,
@@ -26807,19 +26822,6 @@ const annotationDraggerPlugin = {
     }
   }
 };
-const tooltipNullGuard = {
-  id: "tooltipNullGuard",
-  beforeUpdate(chart2) {
-    var _a2;
-    const tt2 = chart2 == null ? void 0 : chart2.tooltip;
-    if (tt2 && ((_a2 = tt2 == null ? void 0 : tt2.getActiveElements()) == null ? void 0 : _a2.some(({ datasetIndex }) => {
-      const meta = chart2 == null ? void 0 : chart2.getDatasetMeta(datasetIndex);
-      return !meta || !(meta == null ? void 0 : meta.controller);
-    }))) {
-      tt2 == null ? void 0 : tt2.setActiveElements([], { x: 0, y: 0 });
-    }
-  }
-};
 var defaultTranslations = /* @__PURE__ */ ((defaultTranslations2) => {
   defaultTranslations2["label"] = "Label";
   defaultTranslations2["pointsLines"] = "Points & lines";
@@ -27304,7 +27306,7 @@ Chart$2.register(
   annotation,
   chartAreaTextPlugin,
   annotationDraggerPlugin,
-  tooltipNullGuard
+  ellipsisAnnotationPlugin
 );
 const LineChart = (props) => {
   var _a2, _b2;