@acorex/charts 20.3.48 → 20.3.50

package/fesm2022/acorex-charts-gauge-chart.mjs

@@ -61,6 +61,8 @@ class AXGaugeChartComponent extends AXChartComponent {
         title: '',
         value: '',
     }, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : []));
+    _tooltipRafId = null;
+    _pendingTooltipCoords = null;
     // Expose tooltip signals as read-only for the template
     tooltipVisible = this._tooltipVisible.asReadonly();
     tooltipPosition = this._tooltipPosition.asReadonly();
@@ -393,22 +395,24 @@ class AXGaugeChartComponent extends AXChartComponent {
         });
         this._tooltipVisible.set(true);
     }
-    /**
-     * Updates the tooltip position based on the mouse event
-     * For gauge charts, we need simpler coordinate handling since D3 events are already in container coordinates
-     */
     updateTooltipPosition(event) {
-        const containerEl = this.chartContainerEl()?.nativeElement;
-        if (!containerEl)
+        this._pendingTooltipCoords = { x: event.clientX, y: event.clientY };
+        if (this._tooltipRafId != null)
             return;
-        const rect = containerEl.getBoundingClientRect();
-        const tooltipEl = containerEl.querySelector('.chart-tooltip');
-        const tooltipRect = tooltipEl?.getBoundingClientRect() ?? null;
-        // Position the tooltip slightly above and to the right of the cursor for better visibility
-        const tooltipX = event.clientX + 10;
-        const tooltipY = event.clientY - 10;
-        const pos = computeTooltipPosition(rect, tooltipRect, tooltipX, tooltipY, this.TOOLTIP_GAP);
-        this._tooltipPosition.set(pos);
+        this._tooltipRafId = requestAnimationFrame(() => {
+            this._tooltipRafId = null;
+            const coords = this._pendingTooltipCoords;
+            if (!coords)
+                return;
+            const containerEl = this.chartContainerEl()?.nativeElement;
+            if (!containerEl)
+                return;
+            const rect = containerEl.getBoundingClientRect();
+            const tooltipEl = containerEl.querySelector('.chart-tooltip');
+            const tooltipRect = tooltipEl?.getBoundingClientRect() ?? null;
+            const pos = computeTooltipPosition(rect, tooltipRect, coords.x + 10, coords.y - 10, this.TOOLTIP_GAP);
+            this._tooltipPosition.set(pos);
+        });
     }
     /**
      * Hides the tooltip
@@ -420,6 +424,11 @@ class AXGaugeChartComponent extends AXChartComponent {
      * Cleans up chart resources
      */
     cleanupChart() {
+        if (this._tooltipRafId != null) {
+            cancelAnimationFrame(this._tooltipRafId);
+            this._tooltipRafId = null;
+        }
+        this._pendingTooltipCoords = null;
         if (this.svgElement) {
             this.svgElement.remove();
             this.svgElement = null;