@acorex/charts 20.1.28 → 20.1.29

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

@@ -1,3 +1,4 @@
+import { getEasingFunction, computeTooltipPosition } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, ChangeDetectorRef, input, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
@@ -79,6 +80,8 @@ class AXGaugeChartComponent {
             ...this.options(),
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    // Tooltip gap in pixels for precise spacing
+    TOOLTIP_GAP = 10;
     constructor() {
         // Dynamically load D3 and initialize the chart when the component is ready
         afterNextRender(() => {
@@ -213,7 +216,7 @@ class AXGaugeChartComponent {
         const minValue = options.minValue;
         const maxValue = options.maxValue;
         const animationDuration = options.animationDuration;
-        const easingFunction = this.getEasingFunction(options.animationEasing);
+        const easingFunction = getEasingFunction(this.d3, options.animationEasing);
         const currentValue = value;
         const svg = this.d3.select(this.svgElement);
         // Update value text
@@ -389,32 +392,14 @@ class AXGaugeChartComponent {
      * Updates the tooltip position based on the mouse event
      */
     updateTooltipPosition(event) {
-        const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
-        const x = event.clientX - container.left;
-        const y = event.clientY - container.top;
-        // Get container dimensions to check if we're near the edge
-        const containerWidth = container.width;
-        // Tooltip dimensions approximation (can't get exact dimensions without rendering)
-        const tooltipWidth = 150; // Approximate width of tooltip
-        // Calculate position with edge detection
-        let tooltipX = x + 8; // fix overlap with cursor
-        const tooltipY = y - 12; // fix overlap with cursor
-        // Check if we're too close to the right edge
-        const rightEdgeDistance = containerWidth - x;
-        if (rightEdgeDistance < tooltipWidth) {
-            // Place tooltip to the left of the cursor with no gap
-            tooltipX = x - tooltipWidth + 70; // Overlap more with cursor position
-        }
-        // Check if we're too close to the bottom edge
-        // const bottomEdgeDistance = containerHeight - y;
-        // if (bottomEdgeDistance < tooltipHeight + 10) {
-        //   // Move tooltip up if near bottom edge
-        //   tooltipY = y - tooltipHeight;
-        // }
-        this._tooltipPosition.set({
-            x: tooltipX,
-            y: tooltipY,
-        });
+        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, event.clientX, event.clientY, this.TOOLTIP_GAP);
+        this._tooltipPosition.set(pos);
         this.cdr.detectChanges();
     }
     /**
@@ -605,7 +590,7 @@ class AXGaugeChartComponent {
             .attr('r', radius * 0.03)
             .attr('fill', '#fff');
         // Get easing function
-        const easingFunction = this.getEasingFunction(this.options()?.animationEasing);
+        const easingFunction = getEasingFunction(this.d3, this.options()?.animationEasing);
         // Animate the needle from min to current value
         needlePath
             .transition()
@@ -613,33 +598,7 @@ class AXGaugeChartComponent {
             .ease(easingFunction)
             .attr('transform', `rotate(${angleInDegrees})`);
     }
-    /**
-     * Gets the appropriate D3 easing function based on the option string
-     */
-    getEasingFunction(easing) {
-        switch (easing) {
-            case 'linear':
-                return this.d3.easeLinear;
-            case 'ease':
-                return this.d3.easePolyInOut;
-            case 'ease-in':
-                return this.d3.easePolyIn;
-            case 'ease-out':
-                return this.d3.easePolyOut;
-            case 'ease-in-out':
-                return this.d3.easePolyInOut;
-            case 'cubic':
-                return this.d3.easeCubic;
-            case 'cubic-in':
-                return this.d3.easeCubicIn;
-            case 'cubic-out':
-                return this.d3.easeCubicOut;
-            case 'cubic-in-out':
-                return this.d3.easeCubicInOut;
-            default:
-                return this.d3.easeCubicOut; // Default easing
-        }
-    }
+    // getEasingFunction moved to shared chart utils
     /**
      * Creates a path string for the needle
      */