@acorex/charts 19.14.0-next.2 → 19.14.0

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

@@ -1,6 +1,7 @@
+import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, input, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, input, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
 import { set } from 'lodash-es';
 
@@ -9,12 +10,8 @@ const AXGaugeChartDefaultConfig = {
     maxValue: 100,
     gaugeWidth: 22,
     cornerRadius: 5,
-    backgroundColor: 'transparent',
-    baseColor: '#e2e8f0',
     showValue: true,
-    valueColor: '#6366f1',
-    valueFontSize: 24,
-    labelFontSize: 16,
+    showTooltip: true,
     animationDuration: 750,
     animationEasing: 'cubic-out',
 };
@@ -39,6 +36,8 @@ function gaugeChartConfig(config = {}) {
  * Renders a semi-circular gauge chart with animated needle and thresholds
  */
 class AXGaugeChartComponent {
+    // Inject ChangeDetectorRef
+    cdr = inject(ChangeDetectorRef);
     // Inputs
     /** Chart value input */
     value = input(0);
@@ -56,6 +55,17 @@ class AXGaugeChartComponent {
     _prevValue = signal(null);
     // Track previous options to detect changes
     _prevOptionsString = '';
+    // Tooltip signals
+    _tooltipVisible = signal(false);
+    _tooltipPosition = signal({ x: 0, y: 0 });
+    _tooltipData = signal({
+        title: '',
+        value: '',
+    });
+    // Expose tooltip signals as read-only for the template
+    tooltipVisible = this._tooltipVisible.asReadonly();
+    tooltipPosition = this._tooltipPosition.asReadonly();
+    tooltipData = this._tooltipData.asReadonly();
     // Inject configuration
     configToken = inject(AX_GAUGE_CHART_CONFIG);
     // Computed configuration options
@@ -127,12 +137,8 @@ class AXGaugeChartComponent {
         const options = this.effectiveOptions();
         // Store options string for comparison
         this._prevOptionsString = JSON.stringify(options);
-        const backgroundColor = options.backgroundColor;
-        const baseColor = options.baseColor;
+        // Use design tokens instead of removed properties
         const showValue = options.showValue;
-        const valueColor = options.valueColor;
-        const valueFontSize = options.valueFontSize;
-        const labelFontSize = options.labelFontSize;
         const minValue = options.minValue;
         const maxValue = options.maxValue;
         const thresholds = options.thresholds ?? [];
@@ -167,9 +173,9 @@ class AXGaugeChartComponent {
         const innerRadius = radius - gaugeWidth;
         const outerRadius = radius;
         // Create gradient definitions
-        this.createGradients(svg, thresholds, baseColor, valueColor);
+        this.createGradients(svg, thresholds);
         // Draw the background arc
-        this.drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius, backgroundColor);
+        this.drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius);
         // Draw the threshold arcs if thresholds exist
         if (thresholds.length > 0) {
             this.drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius);
@@ -177,11 +183,13 @@ class AXGaugeChartComponent {
         // Draw tick marks
         this.drawTicks(chartGroup, outerRadius, minValue, maxValue);
         // Draw the dial/needle with animation
-        this.drawDial(chartGroup, radius, this.value(), minValue, maxValue, valueColor, animationDuration);
+        this.drawDial(chartGroup, radius, this.value(), minValue, maxValue, animationDuration);
         // Draw the value display (after the dial so it's on top)
         if (showValue) {
-            this.drawValueDisplay(chartGroup, this.value(), label, radius, valueColor, valueFontSize, labelFontSize);
+            this.drawValueDisplay(chartGroup, this.value(), label, radius);
         }
+        // Hide tooltip initially
+        this._tooltipVisible.set(false);
     }
     /**
      * Updates the chart when options change
@@ -214,69 +222,17 @@ class AXGaugeChartComponent {
         const angleInDegrees = this.radiansToDegrees(angle - Math.PI / 2);
         svg
             .select('.gauge-needle')
+            .attr('fill', 'rgb(var(--ax-comp-gauge-chart-needle-color))')
             .transition()
             .duration(animationDuration)
             .ease(easingFunction)
             .attr('transform', `rotate(${angleInDegrees})`);
     }
     /**
-     * Cleans up chart resources
+     * Draw the background arc
      */
-    cleanupChart() {
-        if (this.svgElement) {
-            this.svgElement.remove();
-            this.svgElement = null;
-        }
-    }
-    /**
-     * Creates gradient definitions for thresholds
-     */
-    createGradients(svg, thresholds, baseColor, valueColor) {
-        const defs = svg.append('defs');
-        // Create a radial gradient for the background
-        const bgGradient = defs
-            .append('radialGradient')
-            .attr('id', 'gauge-bg-gradient')
-            .attr('cx', '50%')
-            .attr('cy', '50%')
-            .attr('r', '50%')
-            .attr('gradientUnits', 'userSpaceOnUse');
-        if (thresholds.length === 0) {
-            // Default gradient when no thresholds are provided
-            bgGradient
-                .append('stop')
-                .attr('offset', '0%')
-                .attr('stop-color', this.d3.color(valueColor)?.brighter(0.5).toString() || valueColor);
-            bgGradient.append('stop').attr('offset', '100%').attr('stop-color', valueColor);
-        }
-        else {
-            bgGradient
-                .append('stop')
-                .attr('offset', '0%')
-                .attr('stop-color', this.d3.color(baseColor)?.brighter(0.5).toString() || baseColor);
-            bgGradient.append('stop').attr('offset', '100%').attr('stop-color', baseColor);
-            // Create gradients for each threshold
-            thresholds.forEach((threshold, i) => {
-                const gradient = defs
-                    .append('linearGradient')
-                    .attr('id', `threshold-gradient-${i}`)
-                    .attr('gradientUnits', 'userSpaceOnUse')
-                    .attr('x1', '-1')
-                    .attr('y1', '0')
-                    .attr('x2', '1')
-                    .attr('y2', '0');
-                gradient
-                    .append('stop')
-                    .attr('offset', '0%')
-                    .attr('stop-color', this.d3.color(threshold.color)?.brighter(0.5).toString() || threshold.color);
-                gradient.append('stop').attr('offset', '100%').attr('stop-color', threshold.color);
-            });
-        }
-    }
-    /**
-     * Draws the background arc
-     */
-    drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius, backgroundColor) {
+    drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius) {
+        // Create arc for the background
         const backgroundArc = this.d3
             .arc()
             .innerRadius(innerRadius)
@@ -284,21 +240,37 @@ class AXGaugeChartComponent {
             .startAngle(-Math.PI / 2) // Start from bottom (-90 degrees)
             .endAngle(Math.PI / 2) // End at top (90 degrees)
             .cornerRadius(cornerRadius);
-        chartGroup
+        // Draw background arc
+        const backgroundPath = chartGroup
             .append('path')
-            .attr('d', backgroundArc({
-            innerRadius,
-            outerRadius,
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI / 2,
-        }))
-            .attr('fill', backgroundColor === 'transparent' ? 'url(#gauge-bg-gradient)' : backgroundColor)
+            .attr('d', backgroundArc)
+            .attr('class', 'gauge-arc gauge-base')
+            .attr('fill', 'url(#gauge-bg-gradient)')
             .attr('filter', 'drop-shadow(0px 2px 3px rgba(0,0,0,0.1))');
+        // Add tooltip for single arc if no thresholds
+        if (!this.effectiveOptions().thresholds || this.effectiveOptions().thresholds.length === 0) {
+            backgroundPath
+                .style('cursor', 'pointer')
+                .on('mouseenter', (event) => {
+                if (!this.effectiveOptions().showTooltip)
+                    return;
+                this.showSingleRangeTooltip(event);
+            })
+                .on('mousemove', (event) => {
+                if (this._tooltipVisible()) {
+                    this.updateTooltipPosition(event);
+                }
+            })
+                .on('mouseleave', () => {
+                this.hideTooltip();
+            });
+        }
     }
     /**
-     * Draws the threshold arcs with colors
+     * Draw the thresholds arcs
      */
     drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius) {
+        // Create arc generator
         const arc = this.d3
             .arc()
             .innerRadius(innerRadius)
@@ -312,7 +284,10 @@ class AXGaugeChartComponent {
         let previousEndAngle = this.scaleValueToColorAngle(minValue, minValue, maxValue);
         sortedThresholds.forEach((threshold, i) => {
             const endAngle = angles[i];
-            chartGroup
+            // Skip if end angle is not greater than start angle
+            if (endAngle <= previousEndAngle)
+                return;
+            const arcPath = chartGroup
                 .append('path')
                 .attr('d', arc({
                 innerRadius,
@@ -320,15 +295,34 @@ class AXGaugeChartComponent {
                 startAngle: previousEndAngle,
                 endAngle,
             }))
-                .attr('fill', `url(#threshold-gradient-${i})`)
-                .attr('class', 'threshold-arc')
-                .attr('data-value', threshold.value);
+                .attr('fill', threshold.color || `url(#threshold-gradient-${i})`)
+                .attr('class', 'gauge-arc threshold-arc')
+                .attr('data-value', threshold.value)
+                .style('cursor', 'pointer');
+            // Add tooltip interaction
+            if (this.effectiveOptions().showTooltip) {
+                // Convert angles back to values for tooltip
+                const startValue = this.angleToValue(previousEndAngle, minValue, maxValue);
+                const endValue = threshold.value;
+                arcPath
+                    .on('mouseenter', (event) => {
+                    this.showThresholdTooltip(event, startValue, endValue, threshold.color, threshold.label);
+                })
+                    .on('mousemove', (event) => {
+                    if (this._tooltipVisible()) {
+                        this.updateTooltipPosition(event);
+                    }
+                })
+                    .on('mouseleave', () => {
+                    this.hideTooltip();
+                });
+            }
             // Update the previous end angle for the next threshold
             previousEndAngle = endAngle;
         });
         // Draw the last segment if the last threshold is less than the max value
         if (previousEndAngle < Math.PI / 2) {
-            chartGroup
+            const lastArc = chartGroup
                 .append('path')
                 .attr('d', arc({
                 innerRadius,
@@ -337,7 +331,154 @@ class AXGaugeChartComponent {
                 endAngle: Math.PI / 2,
             }))
                 .attr('fill', 'url(#gauge-bg-gradient)')
-                .attr('class', 'threshold-arc');
+                .attr('class', 'gauge-arc threshold-arc')
+                .style('cursor', 'pointer');
+            // Add tooltip for the last segment
+            if (this.effectiveOptions().showTooltip) {
+                const startValue = this.angleToValue(previousEndAngle, minValue, maxValue);
+                const endValue = maxValue;
+                const lastThreshold = thresholds[thresholds.length - 1];
+                lastArc
+                    .on('mouseenter', (event) => {
+                    this.showThresholdTooltip(event, startValue, endValue, lastThreshold.color, lastThreshold.label);
+                })
+                    .on('mousemove', (event) => {
+                    if (this._tooltipVisible()) {
+                        this.updateTooltipPosition(event);
+                    }
+                })
+                    .on('mouseleave', () => {
+                    this.hideTooltip();
+                });
+            }
+        }
+    }
+    /**
+     * Shows tooltip for a threshold arc
+     */
+    showThresholdTooltip(event, startValue, endValue, color, label) {
+        // Create tooltip data
+        this._tooltipData.set({
+            title: label || 'Range',
+            value: `${startValue.toLocaleString()} - ${endValue.toLocaleString()}`,
+            color: color,
+        });
+        // Show tooltip
+        this._tooltipVisible.set(true);
+        this.updateTooltipPosition(event);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Shows tooltip for the entire range when no thresholds are defined
+     */
+    showSingleRangeTooltip(event) {
+        const options = this.effectiveOptions();
+        if (!options.showTooltip)
+            return;
+        this.updateTooltipPosition(event);
+        this._tooltipData.set({
+            title: options.label || 'Range',
+            value: `${options.minValue.toLocaleString()} - ${options.maxValue.toLocaleString()}`,
+            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
+     */
+    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;
+        const containerHeight = container.height;
+        // Tooltip dimensions approximation (can't get exact dimensions without rendering)
+        const tooltipWidth = 150; // Approximate width of tooltip
+        const tooltipHeight = 80; // Approximate height 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,
+        });
+        this.cdr.detectChanges();
+    }
+    /**
+     * Hides the tooltip
+     */
+    hideTooltip() {
+        this._tooltipVisible.set(false);
+        this.cdr.detectChanges();
+    }
+    /**
+     * Cleans up chart resources
+     */
+    cleanupChart() {
+        if (this.svgElement) {
+            this.svgElement.remove();
+            this.svgElement = null;
+        }
+        this._tooltipVisible.set(false);
+    }
+    /**
+     * Creates gradient definitions for thresholds
+     */
+    createGradients(svg, thresholds) {
+        const defs = svg.append('defs');
+        // Create a radial gradient for the background
+        const bgGradient = defs
+            .append('radialGradient')
+            .attr('id', 'gauge-bg-gradient')
+            .attr('cx', '50%')
+            .attr('cy', '50%')
+            .attr('r', '50%')
+            .attr('gradientUnits', 'userSpaceOnUse');
+        // Get CSS variable for track color
+        if (thresholds.length === 0) {
+            // Default gradient when no thresholds are provided
+            bgGradient.append('stop').attr('offset', '0%').attr('stop-color', 'rgb(var(--ax-comp-gauge-chart-track-color))');
+            bgGradient
+                .append('stop')
+                .attr('offset', '100%')
+                .attr('stop-color', 'rgba(var(--ax-comp-gauge-chart-track-color), 0.8)');
+        }
+        else {
+            bgGradient.append('stop').attr('offset', '0%').attr('stop-color', 'rgb(var(--ax-comp-gauge-chart-track-color))');
+            bgGradient
+                .append('stop')
+                .attr('offset', '100%')
+                .attr('stop-color', 'rgba(var(--ax-comp-gauge-chart-track-color), 0.8)');
+            // Create gradients for each threshold
+            thresholds.forEach((threshold, i) => {
+                const gradient = defs
+                    .append('linearGradient')
+                    .attr('id', `threshold-gradient-${i}`)
+                    .attr('gradientUnits', 'userSpaceOnUse')
+                    .attr('x1', '-1')
+                    .attr('y1', '0')
+                    .attr('x2', '1')
+                    .attr('y2', '0');
+                gradient
+                    .append('stop')
+                    .attr('offset', '0%')
+                    .attr('stop-color', this.d3.color(threshold.color)?.brighter(0.5).toString() || threshold.color);
+                gradient.append('stop').attr('offset', '100%').attr('stop-color', threshold.color);
+            });
         }
     }
     /**
@@ -375,7 +516,7 @@ class AXGaugeChartComponent {
                 .attr('y1', y1)
                 .attr('x2', x2)
                 .attr('y2', y2)
-                .attr('stroke', '#94a3b8')
+                .attr('stroke', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.5)')
                 .attr('stroke-width', 2);
             // Add tick label
             tickGroup
@@ -384,8 +525,7 @@ class AXGaugeChartComponent {
                 .attr('y', labelY)
                 .attr('text-anchor', 'middle')
                 .attr('dominant-baseline', 'middle')
-                .attr('fill', '#64748b')
-                .attr('class', 'gauge-min-max')
+                .attr('fill', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.7)')
                 .style('font-size', '12px')
                 .text(tick.toLocaleString());
         });
@@ -393,37 +533,40 @@ class AXGaugeChartComponent {
     /**
      * Draws the value and label text in the center
      */
-    drawValueDisplay(chartGroup, value, label, radius, valueColor, valueFontSize, labelFontSize) {
-        const valueGroup = chartGroup.append('g').attr('class', 'value-display');
-        // Value display - moved closer to the dial
+    drawValueDisplay(chartGroup, value, label, radius) {
+        // Calculate appropriate font sizes based on chart dimensions
+        const chartContainerWidth = this.chartContainerEl().nativeElement.clientWidth;
+        const baseFontSize = Math.max(1.4, Math.min(2.4, chartContainerWidth / 200)); // Scale between 1.4rem and 2.4rem
+        const subTextFontSize = baseFontSize * 0.5;
+        // Create group for the value display
+        const valueGroup = chartGroup.append('g').attr('class', 'gauge-value-display').attr('text-anchor', 'middle');
+        // Add value display
         valueGroup
             .append('text')
-            .attr('x', 0)
-            .attr('y', radius * 0.3)
-            .attr('text-anchor', 'middle')
-            .attr('dominant-baseline', 'middle')
-            .attr('fill', valueColor)
             .attr('class', 'gauge-value')
-            .style('font-size', `${valueFontSize}px`)
+            .attr('x', 0)
+            .attr('y', radius * 0.25)
+            .style('font-size', `${baseFontSize}rem`)
+            .style('font-weight', '600')
+            .style('fill', 'rgb(var(--ax-comp-gauge-chart-text-color))')
             .text(value.toLocaleString());
-        // Label display (if provided), positioned closer to the value
+        // Add label display (if provided)
         if (label) {
             valueGroup
                 .append('text')
-                .attr('x', 0)
-                .attr('y', radius * 0.45)
-                .attr('text-anchor', 'middle')
-                .attr('dominant-baseline', 'middle')
-                .attr('fill', '#64748b')
                 .attr('class', 'gauge-label')
-                .style('font-size', `${labelFontSize}px`)
+                .attr('x', 0)
+                .attr('y', radius * 0.35)
+                .style('font-size', `${subTextFontSize}rem`)
+                .style('fill', 'rgb(var(--ax-comp-gauge-chart-text-color))')
+                .style('opacity', '0.8')
                 .text(label);
         }
     }
     /**
      * Draws the dial/needle pointing to the current value with animation
      */
-    drawDial(chartGroup, radius, value, minValue, maxValue, valueColor, animationDuration) {
+    drawDial(chartGroup, radius, value, minValue, maxValue, animationDuration) {
         // Clamp value to min/max range
         const clampedValue = Math.max(minValue, Math.min(maxValue, value));
         // Calculate angle for needle based on value
@@ -435,8 +578,8 @@ class AXGaugeChartComponent {
         const needlePath = dialGroup
             .append('path')
             .attr('d', this.createNeedlePath(radius))
-            .attr('fill', valueColor)
             .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)
         // Add a center circle
         dialGroup
@@ -444,7 +587,7 @@ class AXGaugeChartComponent {
             .attr('cx', 0)
             .attr('cy', 0)
             .attr('r', radius * 0.08)
-            .attr('fill', valueColor)
+            .attr('fill', 'rgb(var(--ax-comp-gauge-chart-needle-color))')
             .attr('stroke', '#fff')
             .attr('stroke-width', 2);
         // Add a smaller white center
@@ -514,6 +657,14 @@ class AXGaugeChartComponent {
         const angleRange = Math.PI; // 180 degrees in radians
         return ((value - min) / valueRange) * angleRange - Math.PI / 2;
     }
+    /**
+     * 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;
+    }
     /**
      * Converts radians to degrees
      */
@@ -521,11 +672,11 @@ class AXGaugeChartComponent {
         return radians * (180 / Math.PI);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", 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 }], ngImport: i0, template: "<div class=\"ax-gauge-chart\" #chartContainer></div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.gauge-arc{transition:stroke-dashoffset 1s ease}.gauge-label{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:600}.gauge-value{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:700}.gauge-min-max{font-family:var(--ax-font-family, system-ui, sans-serif);opacity:.7}.gauge-needle{transform-origin:center;transition:transform 1s cubic-bezier(.34,1.56,.64,1)}.value-display{text-anchor:middle;dominant-baseline:middle}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", 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 }], ngImport: i0, template: "<div class=\"ax-gauge-chart\" #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: var(--ax-sys-color-lightest-surface);--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{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.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-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}.ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "19.2.10", ngImport: i0, type: AXGaugeChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-gauge-chart', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-gauge-chart\" #chartContainer></div>\n", styles: [":host{display:block;width:100%;height:100%;min-height:200px}.ax-gauge-chart{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.gauge-arc{transition:stroke-dashoffset 1s ease}.gauge-label{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:600}.gauge-value{font-family:var(--ax-font-family, system-ui, sans-serif);font-weight:700}.gauge-min-max{font-family:var(--ax-font-family, system-ui, sans-serif);opacity:.7}.gauge-needle{transform-origin:center;transition:transform 1s cubic-bezier(.34,1.56,.64,1)}.value-display{text-anchor:middle;dominant-baseline:middle}\n"] }]
+            args: [{ selector: 'ax-gauge-chart', encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-gauge-chart\" #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: var(--ax-sys-color-lightest-surface);--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{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:visible;color:rgb(var(--ax-comp-gauge-chart-text-color));background-color:rgb(var(--ax-comp-gauge-chart-bg-color));border-radius:.5rem}svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.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-no-data-icon{margin-bottom:.75rem;color:rgba(var(--ax-comp-gauge-chart-text-color),.6)}.ax-gauge-chart-no-data-text{font-weight:600;color:rgb(var(--ax-comp-gauge-chart-text-color))}\n"] }]
         }], ctorParameters: () => [] });
 
 /**