@acorex/charts 21.0.1-next.6 → 21.0.1-next.60

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();
@@ -79,6 +81,10 @@ class AXGaugeChartComponent extends AXChartComponent {
     HALF_CIRCLE_RADIANS = Math.PI;
     QUARTER_CIRCLE_RADIANS = Math.PI / 2;
     DEGREES_PER_RADIAN = 180 / Math.PI;
+    CHART_EDGE_PADDING = 12;
+    TICK_LABEL_CHAR_WIDTH_RATIO = 0.62;
+    TICK_LABEL_SIDE_PADDING = 6;
+    LABEL_TICK_CLEARANCE = 4;
     constructor() {
         super();
         // Dynamically load D3 and initialize the chart when the component is ready
@@ -163,29 +169,36 @@ class AXGaugeChartComponent extends AXChartComponent {
         // 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 tickCount = this.getTickCount(size);
+        const tickFontPx = this.getTickFontSize(size);
+        const maxTickLabelWidth = this.estimateMaxTickLabelWidth(tickCount, minValue, maxValue, tickFontPx);
+        const tickLength = Math.max(4, Math.min((size / 2) * 0.12, 14));
+        // Keep labels closer to the gauge arc while preserving readability.
+        const labelGap = Math.max(6, Math.min((size / 2) * 0.06, 14));
+        const labelOffsetFromTickEnd = labelGap + tickFontPx * 0.35;
+        const tickLabelSpace = tickLength + labelOffsetFromTickEnd + tickFontPx;
         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);
+        // Labels at edge ticks use start/end anchors, so they can extend by near full width.
+        const horizontalPadding = Math.max(18, maxTickLabelWidth + 8);
         const totalWidth = size + horizontalPadding * 2;
+        const viewBoxWidth = totalWidth + this.CHART_EDGE_PADDING * 2;
+        const viewBoxHeight = totalVerticalSpace + this.CHART_EDGE_PADDING * 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 ${totalWidth} ${totalVerticalSpace}`)
+            .attr('viewBox', `0 0 ${viewBoxWidth} ${viewBoxHeight}`)
             .attr('preserveAspectRatio', 'xMidYMid meet');
         // 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})`);
+            .attr('transform', `translate(${size / 2 + horizontalPadding + this.CHART_EDGE_PADDING}, ${size / 2 - margin + this.CHART_EDGE_PADDING})`);
         // Define gauge parameters
         const radius = size / 2 - margin;
-        const desiredGaugeWidth = typeof gaugeWidth === 'number' && !Number.isNaN(gaugeWidth) ? gaugeWidth : size * 0.12;
-        const clampedGaugeWidth = Math.max(size * 0.06, Math.min(desiredGaugeWidth, size * 0.2));
+        const desiredGaugeWidth = typeof gaugeWidth === 'number' && !Number.isNaN(gaugeWidth) ? gaugeWidth : 30;
+        // Respect explicit gaugeWidth in px with sane absolute bounds.
+        const clampedGaugeWidth = Math.max(6, Math.min(desiredGaugeWidth, radius * 0.7));
         const innerRadius = radius - clampedGaugeWidth;
         const outerRadius = radius;
         // Create gradient definitions
@@ -197,7 +210,7 @@ class AXGaugeChartComponent extends AXChartComponent {
             this.drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius);
         }
         // Draw tick marks
-        this.drawTicks(chartGroup, outerRadius, minValue, maxValue, size);
+        this.drawTicks(chartGroup, outerRadius, minValue, maxValue, size, tickCount, tickFontPx);
         // Draw the dial/needle with animation
         this.drawDial(chartGroup, radius, this.value(), minValue, maxValue, animationDuration);
         // Draw the value display (after the dial so it's on top)
@@ -393,22 +406,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 +435,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;
@@ -476,79 +496,130 @@ 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 (reduced for better spacing)
-        let tickCount = 5;
-        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;
-        // Scale tick length and label offset proportionally to size
+    drawTicks(chartGroup, radius, minValue, maxValue, size, tickCount, tickFontPx) {
         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 baseLabelOffset = this.getBaseLabelOffset(radius, tickLength, tickFontPx);
         const tickGroup = chartGroup.append('g').attr('class', 'ticks');
-        // Generate tick values
         const tickValues = [];
         const step = (maxValue - minValue) / (tickCount - 1);
         for (let i = 0; i < tickCount; i++) {
             tickValues.push(minValue + i * step);
         }
-        // Create ticks and labels
-        tickValues.forEach((tick) => {
-            // Calculate angle for this tick
+        const tickMetrics = tickValues.map((tick) => {
             const angle = this.scaleValueToAngle(tick, minValue, maxValue);
-            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);
-            const x2 = Math.cos(radians) * (radius + tickLength);
-            const y2 = Math.sin(radians) * (radius + tickLength);
-            // Calculate label position
-            const labelX = Math.cos(radians) * (radius + labelOffset);
-            const labelY = Math.sin(radians) * (radius + labelOffset);
-            // Draw tick line
+            const radians = angle - this.QUARTER_CIRCLE_RADIANS;
+            return {
+                radians,
+                cos: Math.cos(radians),
+                sin: Math.sin(radians),
+                label: this.formatTickValue(tick, minValue, maxValue),
+            };
+        });
+        tickMetrics.forEach((metric) => {
             tickGroup
                 .append('line')
-                .attr('x1', x1)
-                .attr('y1', y1)
-                .attr('x2', x2)
-                .attr('y2', y2)
+                .attr('x1', metric.cos * (radius + 5))
+                .attr('y1', metric.sin * (radius + 5))
+                .attr('x2', metric.cos * (radius + tickLength))
+                .attr('y2', metric.sin * (radius + tickLength))
                 .attr('stroke', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.5)')
                 .attr('stroke-width', 2);
-            // 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);
+        });
+        const textSelection = tickGroup
+            .selectAll('text.gauge-tick-label')
+            .data(tickMetrics)
+            .enter()
+            .append('text')
+            .attr('class', 'gauge-tick-label')
+            .attr('x', 0)
+            .attr('y', 0)
+            .attr('fill', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.7)')
+            .style('font-size', `${tickFontPx}px`)
+            .text((d) => d.label);
+        textSelection.each((d, index, nodes) => {
+            const node = nodes[index];
+            let bboxWidth = this.estimateLabelWidth(d.label, tickFontPx);
+            let bboxHeight = tickFontPx;
+            try {
+                const bbox = node.getBBox();
+                if (bbox.width > 0)
+                    bboxWidth = bbox.width;
+                if (bbox.height > 0)
+                    bboxHeight = bbox.height;
             }
-            else {
-                // Large range: use abbreviated format (K, M, B)
-                formattedValue = formatLargeNumber(Math.round(tick));
+            catch {
+                // Keep fallback estimates.
             }
-            tickGroup
-                .append('text')
-                .attr('x', labelX)
-                .attr('y', labelY)
-                .attr('text-anchor', 'middle')
-                .attr('dominant-baseline', 'middle')
-                .attr('fill', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.7)')
-                .style('font-size', `${tickFontPx}px`)
-                .text(formattedValue);
+            const anchor = this.getTickLabelAnchor(d.cos);
+            const nearEdgeExtent = this.getNearEdgeProjection(anchor, d.cos, d.sin, bboxWidth, bboxHeight);
+            const requiredOffset = tickLength + this.LABEL_TICK_CLEARANCE + nearEdgeExtent;
+            const effectiveLabelOffset = Math.max(baseLabelOffset, requiredOffset);
+            const nudge = tickFontPx * 0.1;
+            const x = d.cos * (radius + effectiveLabelOffset) + (anchor === 'start' ? nudge : anchor === 'end' ? -nudge : 0);
+            const y = d.sin * (radius + effectiveLabelOffset);
+            this.d3.select(node).attr('x', x).attr('y', y).attr('text-anchor', anchor).attr('dominant-baseline', 'middle');
         });
     }
+    getTickCount(size) {
+        if (size < 200)
+            return 3;
+        if (size < 300)
+            return 4;
+        if (size < 400)
+            return 5;
+        if (size > 520)
+            return 7;
+        return 5;
+    }
+    getTickFontSize(size) {
+        return Math.max(14, Math.min(18, Math.floor(size / 35)));
+    }
+    getBaseLabelOffset(radius, tickLength, tickFontPx) {
+        const labelGap = Math.max(6, Math.min(radius * 0.06, 14));
+        return tickLength + labelGap + tickFontPx * 0.2;
+    }
+    getTickLabelAnchor(cosValue) {
+        if (cosValue > 0.35)
+            return 'start';
+        if (cosValue < -0.35)
+            return 'end';
+        return 'middle';
+    }
+    getNearEdgeProjection(anchor, cosValue, sinValue, bboxWidth, bboxHeight) {
+        const absCos = Math.abs(cosValue);
+        const absSin = Math.abs(sinValue);
+        const halfHeightProjection = absSin * (bboxHeight / 2);
+        // For start/end anchored labels on edge ticks, the nearest side is close to the anchor point.
+        if (anchor === 'start' || anchor === 'end') {
+            return halfHeightProjection + absCos * this.TICK_LABEL_SIDE_PADDING;
+        }
+        // For centered labels, nearest side includes half text width projection.
+        return absCos * (bboxWidth / 2) + halfHeightProjection;
+    }
+    formatTickValue(tick, minValue, maxValue) {
+        const valueRange = maxValue - minValue;
+        if (valueRange <= 10) {
+            return tick.toFixed(2).replace(/\.?0+$/, '');
+        }
+        if (valueRange < 1000) {
+            return tick % 1 === 0 ? tick.toString() : tick.toFixed(1);
+        }
+        return formatLargeNumber(Math.round(tick));
+    }
+    estimateLabelWidth(label, tickFontPx) {
+        return label.length * tickFontPx * this.TICK_LABEL_CHAR_WIDTH_RATIO + this.TICK_LABEL_SIDE_PADDING;
+    }
+    estimateMaxTickLabelWidth(tickCount, minValue, maxValue, tickFontPx) {
+        if (tickCount <= 1)
+            return tickFontPx;
+        const step = (maxValue - minValue) / (tickCount - 1);
+        let maxChars = 0;
+        for (let i = 0; i < tickCount; i++) {
+            const label = this.formatTickValue(minValue + i * step, minValue, maxValue);
+            maxChars = Math.max(maxChars, label.length);
+        }
+        return maxChars * tickFontPx * this.TICK_LABEL_CHAR_WIDTH_RATIO + this.TICK_LABEL_SIDE_PADDING;
+    }
     /**
      * Draws the value and label text in the center
      */
@@ -662,12 +733,12 @@ class AXGaugeChartComponent extends AXChartComponent {
     radiansToDegrees(radians) {
         return radians * this.DEGREES_PER_RADIAN;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.3", 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:clamp(220px,38vw,360px);--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%;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXGaugeChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXGaugeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-gauge-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
+            args: [{ selector: 'ax-gauge-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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:clamp(220px,38vw,360px);--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%;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);overflow:hidden;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{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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"] }]
         }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
 
 /**