@oliasoft-open-source/charts-library 4.7.2 → 4.7.3-beta-2

package/dist/index.js

@@ -25236,6 +25236,7 @@ const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
     return ticks;
   };
   return {
+    display: true,
     type: additionalAxesOptions.chartScaleType,
     position: axisData.position,
     beginAtZero: additionalAxesOptions.beginAtZero,
@@ -26360,13 +26361,14 @@ const chartAreaTextPlugin = {
     });
   }
 };
-const getMousePositionInCoordinates = (event, canvas2, scales) => {
-  var _a2, _b2;
+const getMousePositionInCoordinates = (event, canvas2, scales, xScaleID, yScaleID) => {
   const rect = canvas2.getBoundingClientRect();
   const x2 = event.clientX - rect.left;
   const y2 = event.clientY - rect.top;
-  const xValue = ((_a2 = scales == null ? void 0 : scales.x) == null ? void 0 : _a2.getValueForPixel(x2)) ?? -1;
-  const yValue = ((_b2 = scales == null ? void 0 : scales.y) == null ? void 0 : _b2.getValueForPixel(y2)) ?? -1;
+  const xScale = scales[xScaleID];
+  const yScale = scales[yScaleID];
+  const xValue = (xScale == null ? void 0 : xScale.getValueForPixel(x2)) ?? -1;
+  const yValue = (yScale == null ? void 0 : yScale.getValueForPixel(y2)) ?? -1;
   return { x: xValue, y: yValue };
 };
 const calculateAnnotationMetricsInValues = (annotation2) => {
@@ -26393,29 +26395,30 @@ const calculateAnnotationMetricsInValues = (annotation2) => {
     height
   };
 };
-const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales) => {
+const calculateAnnotationMetricsInValuesInPixels = (annotation2, scales, xScaleID, yScaleID) => {
   const { xMin, xMax, yMin, yMax, xValue, yValue, type } = annotation2 ?? {};
-  const { x: x2, y: y2 } = scales ?? {};
   let centerX;
   let centerY;
   let width;
   let height;
+  const xScale = scales[xScaleID];
+  const yScale = scales[yScaleID];
   if (!isNil(xMin) && !isNil(xMax) && !isNil(yMin) && !isNil(yMax) && type === AnnotationType.BOX) {
     const xCenterValue = (xMin + xMax) / 2;
     const yCenterValue = (yMin + yMax) / 2;
-    const xMinValue = (x2 == null ? void 0 : x2.getPixelForValue(xMin)) ?? 0;
-    const xMaxValue = (x2 == null ? void 0 : x2.getPixelForValue(xMax)) ?? 0;
-    const yMinValue = (y2 == null ? void 0 : y2.getPixelForValue(yMin)) ?? 0;
-    const yMaxValue = (y2 == null ? void 0 : y2.getPixelForValue(yMax)) ?? 0;
+    const xMinValue = (xScale == null ? void 0 : xScale.getPixelForValue(xMin)) ?? 0;
+    const xMaxValue = (xScale == null ? void 0 : xScale.getPixelForValue(xMax)) ?? 0;
+    const yMinValue = (yScale == null ? void 0 : yScale.getPixelForValue(yMin)) ?? 0;
+    const yMaxValue = (yScale == null ? void 0 : yScale.getPixelForValue(yMax)) ?? 0;
     width = xMinValue - xMaxValue;
     height = yMinValue - yMaxValue;
-    centerX = (x2 == null ? void 0 : x2.getPixelForValue(xCenterValue)) ?? -1;
-    centerY = (y2 == null ? void 0 : y2.getPixelForValue(yCenterValue)) ?? -1;
+    centerX = (xScale == null ? void 0 : xScale.getPixelForValue(xCenterValue)) ?? -1;
+    centerY = (yScale == null ? void 0 : yScale.getPixelForValue(yCenterValue)) ?? -1;
   } else if (!isNil(xValue) && !isNil(yValue) && type === AnnotationType.POINT) {
     width = 0;
     height = 0;
-    centerX = (x2 == null ? void 0 : x2.getPixelForValue(xValue)) ?? -1;
-    centerY = (y2 == null ? void 0 : y2.getPixelForValue(yValue)) ?? -1;
+    centerX = (xScale == null ? void 0 : xScale.getPixelForValue(xValue)) ?? -1;
+    centerY = (yScale == null ? void 0 : yScale.getPixelForValue(yValue)) ?? -1;
   }
   return {
     centerX,
@@ -26432,7 +26435,9 @@ const isWithinChartArea = ({
   metrics,
   resizable = false,
   dragRange,
-  annotationType
+  annotationType,
+  xScaleID,
+  yScaleID
 }) => {
   if (resizable && !dragRange) {
     return true;
@@ -26442,10 +26447,12 @@ const isWithinChartArea = ({
     const withinRangeY = y2 !== void 0 && dragRange.y ? y2 >= dragRange.y[0] && y2 <= dragRange.y[1] : true;
     return withinRangeX && withinRangeY;
   }
-  const minX = scales.x.getValueForPixel(chartArea.left) ?? Number.NEGATIVE_INFINITY;
-  const maxX = scales.x.getValueForPixel(chartArea.right) ?? Number.POSITIVE_INFINITY;
-  const minY = scales.y.getValueForPixel(chartArea.bottom) ?? Number.NEGATIVE_INFINITY;
-  const maxY = scales.y.getValueForPixel(chartArea.top) ?? Number.POSITIVE_INFINITY;
+  const xScale = scales[xScaleID];
+  const yScale = scales[yScaleID];
+  const minX = (xScale == null ? void 0 : xScale.getValueForPixel(chartArea.left)) ?? Number.NEGATIVE_INFINITY;
+  const maxX = (xScale == null ? void 0 : xScale.getValueForPixel(chartArea.right)) ?? Number.POSITIVE_INFINITY;
+  const minY = (yScale == null ? void 0 : yScale.getValueForPixel(chartArea.bottom)) ?? Number.NEGATIVE_INFINITY;
+  const maxY = (yScale == null ? void 0 : yScale.getValueForPixel(chartArea.top)) ?? Number.POSITIVE_INFINITY;
   if (annotationType === AnnotationType.POINT) {
     const withinX = x2 !== void 0 ? x2 >= minX && x2 <= maxX : true;
     const withinY = y2 !== void 0 ? y2 >= minY && y2 <= maxY : true;
@@ -26462,7 +26469,7 @@ const isWithinChartArea = ({
   }
   return true;
 };
-const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotation, chart2, scales, metrics) => {
+const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotation, chart2, scales, xScaleID, yScaleID, metrics) => {
   const { resizable, dragRange = null } = activeAnnotation ?? {};
   const checkArea = isWithinChartArea({
     [axis]: newPosition,
@@ -26471,7 +26478,9 @@ const updateAnnotationPositionWithinBounds = (axis, newPosition, activeAnnotatio
     resizable,
     dragRange,
     metrics: metrics || {},
-    annotationType: activeAnnotation.type
+    annotationType: activeAnnotation.type,
+    xScaleID,
+    yScaleID
   });
   if (!checkArea) return;
   if (activeAnnotation.type === AnnotationType.POINT) {
@@ -26500,9 +26509,16 @@ const setAnnotationBorderWidth = (chart2, annotationId, borderWidth) => {
   }
 };
 const handleAnnotationMouseDown = (event, canvas2, scales, annotations, setDraggingState, hoveredAnnotationId) => {
-  const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
   const annotation2 = hoveredAnnotationId ? annotations == null ? void 0 : annotations[hoveredAnnotationId] : null;
   if (!annotation2) return;
+  const { xScaleID = "x", yScaleID = "y" } = annotation2;
+  const { x: x2, y: y2 } = getMousePositionInCoordinates(
+    event,
+    canvas2,
+    scales,
+    xScaleID,
+    yScaleID
+  );
   const metrics = calculateAnnotationMetricsInValues(annotation2);
   if (annotation2 && annotation2.enableDrag && !isNil(metrics.centerY) && !isNil(metrics.centerX)) {
     canvas2.style.cursor = CursorStyle.Move;
@@ -26520,8 +26536,17 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
     const annotationId = activeAnnotation == null ? void 0 : activeAnnotation.id;
     setAnnotationBorderWidth(chart2, annotationId, BORDER_WIDTH.HOVERED);
     const dragAxis = (activeAnnotation == null ? void 0 : activeAnnotation.dragAxis) ?? DragAxis.Both;
-    const { x: x2, y: y2 } = getMousePositionInCoordinates(event, canvas2, scales);
+    const { xScaleID = "x", yScaleID = "y" } = activeAnnotation;
+    const { x: x2, y: y2 } = getMousePositionInCoordinates(
+      event,
+      canvas2,
+      scales,
+      xScaleID,
+      yScaleID
+    );
+    console.log("Mouse Coordinates:", x2, y2);
     const metrics = calculateAnnotationMetricsInValues(activeAnnotation);
+    console.log("Metrics:", metrics);
     let newCenterX = x2 - dragStartX;
     let newCenterY = y2 - dragStartY;
     if (dragAxis !== DragAxis.Y) {
@@ -26531,6 +26556,8 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
         activeAnnotation,
         chart2,
         scales,
+        xScaleID,
+        yScaleID,
         metrics
       );
     }
@@ -26541,6 +26568,8 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
         activeAnnotation,
         chart2,
         scales,
+        xScaleID,
+        yScaleID,
         metrics
       );
     }
@@ -26550,7 +26579,12 @@ const handleAnnotationMouseMove = (event, canvas2, scales, isDragging2, activeAn
     }
     const { ctx, width, height } = chart2;
     const { centerX, centerY } = calculateAnnotationMetricsInValues(activeAnnotation) ?? {};
-    const { centerX: xValue, centerY: yValue } = calculateAnnotationMetricsInValuesInPixels(activeAnnotation, scales);
+    const { centerX: xValue, centerY: yValue } = calculateAnnotationMetricsInValuesInPixels(
+      activeAnnotation,
+      scales,
+      xScaleID,
+      yScaleID
+    );
     if (!isNil(centerX) && !isNil(centerY) && !isNil(xValue) && !isNil(yValue)) {
       ctx.save();
       ctx.clearRect(0, 0, width, height);
@@ -26660,7 +26694,7 @@ const annotationDraggerPlugin = {
     const pluginOptions = ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.annotationDraggerPlugin) || {
       enabled: false
     };
-    const typedScales = { x: scales.x, y: scales.y };
+    const typedScales = { ...scales, x: scales.x, y: scales.y };
     let annotations = ((_d2 = (_c2 = chart2.options.plugins) == null ? void 0 : _c2.annotation) == null ? void 0 : _d2.annotations) ?? {};
     if (!chart2 && !annotations) return;
     if (pluginOptions.enabled) {