@acorex/charts 20.3.47 → 20.3.50

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

@@ -73,6 +73,8 @@ class AXLineChartComponent extends AXChartComponent {
         percentage: '0%',
         color: '',
     }, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : []));
+    _tooltipRafId = null;
+    _pendingTooltipCoords = null;
     _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
     _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
     hiddenSeries = new Set();
@@ -350,6 +352,11 @@ class AXLineChartComponent extends AXChartComponent {
         this.createChart();
     }
     cleanupChart() {
+        if (this._tooltipRafId != null) {
+            cancelAnimationFrame(this._tooltipRafId);
+            this._tooltipRafId = null;
+        }
+        this._pendingTooltipCoords = null;
         if (this.svg) {
             this.d3?.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
             this.svg = null;
@@ -1047,14 +1054,23 @@ class AXLineChartComponent extends AXChartComponent {
             .attr('pointer-events', 'none');
     }
     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 ? tooltipEl.getBoundingClientRect() : null;
-        const pos = computeTooltipPosition(rect, tooltipRect, event.clientX, event.clientY, 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 ? tooltipEl.getBoundingClientRect() : null;
+            const pos = computeTooltipPosition(rect, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
+            this._tooltipPosition.set(pos);
+        });
     }
     // computeTooltipPosition moved to shared chart utils
     handlePointClick(event, dataPoint, series) {