@acorex/charts 21.0.0-next.13 → 21.0.0-next.15

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

@@ -1,7 +1,7 @@
-import { AXChartComponent, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
+import { AXChartComponent, getEasingFunction, computeTooltipPosition, formatLargeNumber } 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';
+import { InjectionToken, input, viewChild, signal, inject, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 
 const AXGaugeChartDefaultConfig = {
     minValue: 0,
@@ -35,8 +35,6 @@ function gaugeChartConfig(config = {}) {
  * Renders a semi-circular gauge chart with animated needle and thresholds
  */
 class AXGaugeChartComponent extends AXChartComponent {
-    // Inject ChangeDetectorRef
-    cdr = inject(ChangeDetectorRef);
     // Inputs
     /** Chart value input */
     value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -54,6 +52,8 @@ class AXGaugeChartComponent extends AXChartComponent {
     _prevValue = signal(null, ...(ngDevMode ? [{ debugName: "_prevValue" }] : []));
     // Track previous options to detect changes
     _prevOptionsString = '';
+    // Cache for container dimensions to avoid repeated DOM reads
+    _lastContainerRect = null;
     // Tooltip signals
     _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
     _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
@@ -74,8 +74,11 @@ class AXGaugeChartComponent extends AXChartComponent {
             ...this.options(),
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
-    // Tooltip gap in pixels for precise spacing
+    // Constants
     TOOLTIP_GAP = 10;
+    HALF_CIRCLE_RADIANS = Math.PI;
+    QUARTER_CIRCLE_RADIANS = Math.PI / 2;
+    DEGREES_PER_RADIAN = 180 / Math.PI;
     constructor() {
         super();
         // Dynamically load D3 and initialize the chart when the component is ready
@@ -112,6 +115,8 @@ class AXGaugeChartComponent extends AXChartComponent {
      * Loads D3.js dynamically
      */
     async loadD3() {
+        if (this.d3)
+            return; // Already loaded
         try {
             this.d3 = await import('d3');
             // If container is ready, create chart
@@ -139,37 +144,44 @@ class AXGaugeChartComponent extends AXChartComponent {
         const options = this.effectiveOptions();
         // Store options string for comparison
         this._prevOptionsString = JSON.stringify(options);
-        // Use design tokens instead of removed properties
-        const showValue = options.showValue;
-        const minValue = options.minValue;
-        const maxValue = options.maxValue;
+        const { minValue, maxValue, showValue, label = '', gaugeWidth, cornerRadius, animationDuration } = options;
         const thresholds = options.thresholds ?? [];
-        const label = options.label ?? '';
-        const gaugeWidth = options.gaugeWidth;
-        const cornerRadius = options.cornerRadius;
-        const animationDuration = options.animationDuration;
         // Calculate responsive dimensions
         const containerElement = this.chartContainerEl().nativeElement;
         const containerWidth = containerElement.clientWidth;
         const containerHeight = containerElement.clientHeight;
+        // Cache container dimensions
+        this._lastContainerRect = { width: containerWidth, height: containerHeight };
         // Determine chart dimensions - use options if provided, otherwise use container dimensions
-        const width = options.width || containerWidth;
-        const height = options.height || containerHeight;
+        const width = options.width ?? containerWidth;
+        const height = options.height ?? containerHeight;
         // Ensure minimum dimensions
         const effectiveWidth = Math.max(width, 100);
         const effectiveHeight = Math.max(height, 50);
         // For a semi-circular gauge, width should be approximately twice the height
         const size = Math.min(effectiveWidth, effectiveHeight * 2);
-        const margin = Math.max(8, size * 0.08);
-        // Set up SVG with responsive viewBox
+        // Calculate margin as percentage of size (5-8% with reasonable bounds)
+        const marginRatio = 0.08;
+        const margin = Math.max(5, Math.min(size * marginRatio, 30));
+        // Calculate space needed for ticks and labels (increased for larger font sizes)
+        const tickLabelSpace = Math.max(12, Math.min(size * 0.12, 40));
+        const totalVerticalSpace = size / 2 + tickLabelSpace;
+        // Calculate horizontal padding for tick labels (they extend beyond gauge edges)
+        // Estimate based on font size - tick labels are roughly 2-3 characters wide
+        const estimatedTickFontSize = Math.max(14, Math.min(18, Math.floor(size / 35)));
+        const horizontalPadding = Math.max(20, estimatedTickFontSize * 1.5);
+        const totalWidth = size + horizontalPadding * 2;
+        // Set up SVG with responsive viewBox that accounts for overflow
         const svg = this.d3
             .select(this.svgElement)
             .attr('width', '100%')
             .attr('height', '100%')
-            .attr('viewBox', `0 0 ${size} ${size / 2}`)
+            .attr('viewBox', `0 0 ${totalWidth} ${totalVerticalSpace}`)
             .attr('preserveAspectRatio', 'xMidYMid meet');
-        // Create a group for the chart with margin and move it to show only the top half
-        const chartGroup = svg.append('g').attr('transform', `translate(${size / 2}, ${size / 2 - margin})`);
+        // Create a group for the chart centered horizontally with padding, positioned to show only the top half
+        const chartGroup = svg
+            .append('g')
+            .attr('transform', `translate(${size / 2 + horizontalPadding}, ${size / 2 - margin})`);
         // Define gauge parameters
         const radius = size / 2 - margin;
         const desiredGaugeWidth = typeof gaugeWidth === 'number' && !Number.isNaN(gaugeWidth) ? gaugeWidth : size * 0.12;
@@ -218,7 +230,7 @@ class AXGaugeChartComponent extends AXChartComponent {
         svg.select('.gauge-value').text(currentValue.toLocaleString());
         // Update needle position
         const angle = this.scaleValueToAngle(currentValue, minValue, maxValue);
-        const angleInDegrees = this.radiansToDegrees(angle - Math.PI / 2);
+        const angleInDegrees = this.radiansToDegrees(angle - this.QUARTER_CIRCLE_RADIANS);
         svg
             .select('.gauge-needle')
             .attr('fill', 'rgb(var(--ax-comp-gauge-chart-needle-color))')
@@ -236,8 +248,8 @@ class AXGaugeChartComponent extends AXChartComponent {
             .arc()
             .innerRadius(innerRadius)
             .outerRadius(outerRadius)
-            .startAngle(-Math.PI / 2) // Start from bottom (-90 degrees)
-            .endAngle(Math.PI / 2) // End at top (90 degrees)
+            .startAngle(-this.QUARTER_CIRCLE_RADIANS) // Start from bottom (-90 degrees)
+            .endAngle(this.QUARTER_CIRCLE_RADIANS) // End at top (90 degrees)
             .cornerRadius(cornerRadius);
         // Draw background arc
         const backgroundPath = chartGroup
@@ -275,8 +287,8 @@ class AXGaugeChartComponent extends AXChartComponent {
             .innerRadius(innerRadius)
             .outerRadius(outerRadius * 0.98)
             .cornerRadius(cornerRadius);
-        // Sort thresholds by value in ascending order
-        const sortedThresholds = [...thresholds].sort((a, b) => a.value - b.value);
+        // Sort thresholds by value in ascending order (only if needed)
+        const sortedThresholds = thresholds.length > 1 ? [...thresholds].sort((a, b) => a.value - b.value) : thresholds;
         // Calculate all angles first using the color angle calculation
         const angles = sortedThresholds.map((t) => this.scaleValueToColorAngle(t.value, minValue, maxValue));
         // Start from the minimum value angle
@@ -320,14 +332,14 @@ class AXGaugeChartComponent extends AXChartComponent {
             previousEndAngle = endAngle;
         });
         // Draw the last segment if the last threshold is less than the max value
-        if (previousEndAngle < Math.PI / 2) {
+        if (previousEndAngle < this.QUARTER_CIRCLE_RADIANS) {
             const lastArc = chartGroup
                 .append('path')
                 .attr('d', arc({
                 innerRadius,
                 outerRadius,
                 startAngle: previousEndAngle,
-                endAngle: Math.PI / 2,
+                endAngle: this.QUARTER_CIRCLE_RADIANS,
             }))
                 .attr('fill', 'url(#gauge-bg-gradient)')
                 .attr('class', 'gauge-arc threshold-arc')
@@ -365,7 +377,6 @@ class AXGaugeChartComponent extends AXChartComponent {
         // Show tooltip
         this._tooltipVisible.set(true);
         this.updateTooltipPosition(event);
-        this.cdr.detectChanges();
     }
     /**
      * Shows tooltip for the entire range when no thresholds are defined
@@ -381,7 +392,6 @@ class AXGaugeChartComponent extends AXChartComponent {
             color: 'rgb(var(--ax-comp-gauge-chart-track-color))',
         });
         this._tooltipVisible.set(true);
-        this.cdr.detectChanges();
     }
     /**
      * Updates the tooltip position based on the mouse event
@@ -393,22 +403,18 @@ class AXGaugeChartComponent extends AXChartComponent {
             return;
         const rect = containerEl.getBoundingClientRect();
         const tooltipEl = containerEl.querySelector('.chart-tooltip');
-        const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
-        // For gauge charts, the mouse event coordinates are already in the correct coordinate system
-        // relative to the container, but we need to position the tooltip appropriately for the semi-circular layout
+        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.cdr.detectChanges();
     }
     /**
      * Hides the tooltip
      */
     hideTooltip() {
         this._tooltipVisible.set(false);
-        this.cdr.detectChanges();
     }
     /**
      * Cleans up chart resources
@@ -419,6 +425,7 @@ class AXGaugeChartComponent extends AXChartComponent {
             this.svgElement = null;
         }
         this._tooltipVisible.set(false);
+        this._lastContainerRect = null;
     }
     /**
      * Creates gradient definitions for thresholds
@@ -470,16 +477,20 @@ class AXGaugeChartComponent extends AXChartComponent {
      * Draws tick marks and labels around the gauge
      */
     drawTicks(chartGroup, radius, minValue, maxValue, size) {
-        // Dynamically choose tick count based on chart size
+        // Dynamically choose tick count based on chart size (reduced for better spacing)
         let tickCount = 5;
-        if (size < 260)
-            tickCount = 3;
-        else if (size < 340)
+        if (size < 200)
+            tickCount = 3; // Very small: only show min, mid, max
+        else if (size < 300)
             tickCount = 4;
+        else if (size < 400)
+            tickCount = 5;
         else if (size > 520)
             tickCount = 7;
-        const tickLength = Math.max(6, Math.min(radius * 0.12, 14));
-        const labelOffset = Math.max(radius * 0.12, 22);
+        // Scale tick length and label offset proportionally to size
+        const tickLength = Math.max(4, Math.min(radius * 0.12, 14));
+        // Increased label offset to prevent overlap with tick lines and wide labels (like 100M)
+        const labelOffset = Math.max(22, Math.min(radius * 0.28, 45));
         // Create a group for the ticks
         const tickGroup = chartGroup.append('g').attr('class', 'ticks');
         // Generate tick values
@@ -492,7 +503,7 @@ class AXGaugeChartComponent extends AXChartComponent {
         tickValues.forEach((tick) => {
             // Calculate angle for this tick
             const angle = this.scaleValueToAngle(tick, minValue, maxValue);
-            const radians = angle - Math.PI / 2; // Adjust for starting at bottom (-90 degrees)
+            const radians = angle - this.QUARTER_CIRCLE_RADIANS; // Adjust for starting at bottom (-90 degrees)
             // Calculate positions
             const x1 = Math.cos(radians) * (radius + 5);
             const y1 = Math.sin(radians) * (radius + 5);
@@ -510,8 +521,23 @@ class AXGaugeChartComponent extends AXChartComponent {
                 .attr('y2', y2)
                 .attr('stroke', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.5)')
                 .attr('stroke-width', 2);
-            // Add tick label with dynamic font size
-            const tickFontPx = Math.max(9, Math.min(12, Math.floor(size / 40)));
+            // Add tick label with dynamic font size (minimum 14px)
+            const tickFontPx = Math.max(14, Math.min(18, Math.floor(size / 35)));
+            // Smart formatting: preserve decimals for small ranges, round for large values
+            const valueRange = maxValue - minValue;
+            let formattedValue;
+            if (valueRange <= 10) {
+                // Small range: show up to 2 decimal places, remove trailing zeros
+                formattedValue = tick.toFixed(2).replace(/\.?0+$/, '');
+            }
+            else if (valueRange < 1000) {
+                // Medium range: show 1 decimal if needed
+                formattedValue = tick % 1 === 0 ? tick.toString() : tick.toFixed(1);
+            }
+            else {
+                // Large range: use abbreviated format (K, M, B)
+                formattedValue = formatLargeNumber(Math.round(tick));
+            }
             tickGroup
                 .append('text')
                 .attr('x', labelX)
@@ -520,17 +546,18 @@ class AXGaugeChartComponent extends AXChartComponent {
                 .attr('dominant-baseline', 'middle')
                 .attr('fill', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.7)')
                 .style('font-size', `${tickFontPx}px`)
-                .text(tick.toFixed(0).toLocaleString());
+                .text(formattedValue);
         });
     }
     /**
      * Draws the value and label text in the center
      */
     drawValueDisplay(chartGroup, value, label, radius, size) {
-        // Px-based scaling for robust small/large sizes
-        const valueFontPx = Math.max(14, Math.min(32, Math.floor(size / 8)));
+        // Px-based scaling for robust small/large sizes with better small-size handling
+        const valueFontPx = Math.max(18, Math.min(32, Math.floor(size / 8)));
         const labelFontPx = Math.max(10, Math.min(16, Math.floor(valueFontPx * 0.55)));
-        const verticalGap = Math.max(4, Math.min(10, Math.floor(size / 60)));
+        // More vertical gap for small sizes: use larger base value
+        const verticalGap = Math.max(6, Math.min(12, Math.floor(size / 40)));
         // Create group for the value display
         const valueGroup = chartGroup.append('g').attr('class', 'gauge-value-display').attr('text-anchor', 'middle');
         // Add value display
@@ -564,7 +591,7 @@ class AXGaugeChartComponent extends AXChartComponent {
         const clampedValue = Math.max(minValue, Math.min(maxValue, value));
         // Calculate angle for needle based on value
         const angle = this.scaleValueToAngle(clampedValue, minValue, maxValue);
-        const angleInDegrees = this.radiansToDegrees(angle - Math.PI / 2);
+        const angleInDegrees = this.radiansToDegrees(angle - this.QUARTER_CIRCLE_RADIANS);
         // Create a group for the needle
         const dialGroup = chartGroup.append('g').attr('class', 'dial');
         // Draw the needle with initial position at minimum value
@@ -573,7 +600,7 @@ class AXGaugeChartComponent extends AXChartComponent {
             .attr('d', this.createNeedlePath(radius))
             .attr('class', 'gauge-needle')
             .attr('fill', 'rgb(var(--ax-comp-gauge-chart-needle-color))')
-            .attr('transform', `rotate(${this.radiansToDegrees(-Math.PI)})`); // Start at -180 degrees (left)
+            .attr('transform', `rotate(${this.radiansToDegrees(-this.HALF_CIRCLE_RADIANS)})`); // Start at -180 degrees (left)
         // Add a center circle
         dialGroup
             .append('circle')
@@ -613,30 +640,27 @@ class AXGaugeChartComponent extends AXChartComponent {
      */
     scaleValueToAngle(value, min, max) {
         const valueRange = max - min;
-        const angleRange = Math.PI;
-        return ((value - min) / valueRange) * angleRange - Math.PI / 2;
+        return ((value - min) / valueRange) * this.HALF_CIRCLE_RADIANS - this.QUARTER_CIRCLE_RADIANS;
     }
     /**
      * Scales a value to an angle for color arcs (in radians)
      */
     scaleValueToColorAngle(value, min, max) {
         const valueRange = max - min;
-        const angleRange = Math.PI; // 180 degrees in radians
-        return ((value - min) / valueRange) * angleRange - Math.PI / 2;
+        return ((value - min) / valueRange) * this.HALF_CIRCLE_RADIANS - this.QUARTER_CIRCLE_RADIANS;
     }
     /**
      * Converts an angle back to a value
      */
     angleToValue(angle, min, max) {
         const valueRange = max - min;
-        const angleRange = Math.PI;
-        return min + ((angle + Math.PI / 2) / angleRange) * valueRange;
+        return min + ((angle + this.QUARTER_CIRCLE_RADIANS) / this.HALF_CIRCLE_RADIANS) * valueRange;
     }
     /**
      * Converts radians to degrees
      */
     radiansToDegrees(radians) {
-        return radians * (180 / Math.PI);
+        return radians * this.DEGREES_PER_RADIAN;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", type: AXGaugeChartComponent, isStandalone: true, selector: "ax-gauge-chart", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-gauge-chart\" role=\"img\" #chartContainer></div>\n<ax-chart-tooltip [data]=\"tooltipData()\" [position]=\"tooltipPosition()\" [visible]=\"tooltipVisible()\"></ax-chart-tooltip>\n", styles: ["ax-gauge-chart{display:block;width:100%;height:100%;min-height:200px;--ax-comp-gauge-chart-bg-color: 0, 0, 0, 0;--ax-comp-gauge-chart-text-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-gauge-chart-track-color: var(--ax-sys-color-dark-surface);--ax-comp-gauge-chart-needle-color: var(--ax-sys-color-primary-500)}ax-gauge-chart .ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgba(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}ax-gauge-chart .ax-gauge-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-gauge-chart .ax-gauge-chart svg g:has(text){font-family:inherit}ax-gauge-chart .ax-gauge-chart-no-data-message{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;width:100%;height:100%;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color))}ax-gauge-chart .ax-gauge-chart-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}ax-gauge-chart .ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"], dependencies: [{ kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });