@acorex/charts 0.0.1

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

@@ -0,0 +1,686 @@
+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 { AX_GLOBAL_CONFIG } from '@acorex/core/config';
+import { set } from 'lodash-es';
+
+const AXGaugeChartDefaultConfig = {
+    minValue: 0,
+    maxValue: 100,
+    gaugeWidth: 22,
+    cornerRadius: 5,
+    showValue: true,
+    showTooltip: true,
+    animationDuration: 750,
+    animationEasing: 'cubic-out',
+};
+const AX_GAUGE_CHART_CONFIG = new InjectionToken('AX_GAUGE_CHART_CONFIG', {
+    providedIn: 'root',
+    factory: () => {
+        const global = inject(AX_GLOBAL_CONFIG);
+        set(global, 'chart.gaugeChart', AXGaugeChartDefaultConfig);
+        return AXGaugeChartDefaultConfig;
+    },
+});
+function gaugeChartConfig(config = {}) {
+    const result = {
+        ...AXGaugeChartDefaultConfig,
+        ...config,
+    };
+    return result;
+}
+
+/**
+ * Gauge Chart Component
+ * 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);
+    /** Chart options input */
+    options = input({});
+    // Chart container reference
+    chartContainerEl = viewChild.required('chartContainer');
+    // SVG element reference (created in the code)
+    svgElement = null;
+    // D3 reference - loaded asynchronously
+    d3;
+    // Signals for component state
+    _initialized = signal(false);
+    _rendered = signal(false);
+    _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
+    effectiveOptions = computed(() => {
+        return {
+            ...this.configToken,
+            ...this.options(),
+        };
+    });
+    constructor() {
+        // Dynamically load D3 and initialize the chart when the component is ready
+        afterNextRender(() => {
+            this._initialized.set(true);
+            this.loadD3();
+        });
+        // Watch for changes to redraw the chart
+        effect(() => {
+            // Access inputs to track them
+            const currentValue = this.value();
+            const options = this.effectiveOptions();
+            // Update previous value
+            this._prevValue.set(currentValue);
+            // Only update if already rendered
+            if (this._rendered()) {
+                // If only the value changed, just update the value display and dial
+                const optionsString = JSON.stringify(options);
+                if (this._prevOptionsString === optionsString) {
+                    this.updateValueAndDial(currentValue);
+                }
+                else {
+                    // If options changed, recreate the whole chart
+                    this._prevOptionsString = optionsString;
+                    this.updateChart();
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.cleanupChart();
+    }
+    /**
+     * Loads D3.js dynamically
+     */
+    async loadD3() {
+        try {
+            this.d3 = await import('d3');
+            // If container is ready, create chart
+            if (this._initialized() && this.chartContainerEl()) {
+                this.createChart();
+                this._rendered.set(true);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load D3.js:', error);
+        }
+    }
+    /**
+     * Creates the gauge chart with all elements
+     */
+    createChart() {
+        // Clear container and create SVG
+        if (this.svgElement) {
+            this.svgElement.remove();
+        }
+        // Create SVG element
+        this.svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        this.chartContainerEl().nativeElement.appendChild(this.svgElement);
+        // Get current options
+        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 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;
+        // Determine chart dimensions - use options if provided, otherwise use container dimensions
+        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 = size * 0.1;
+        // Set up SVG with responsive viewBox
+        const svg = this.d3
+            .select(this.svgElement)
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('viewBox', `0 0 ${size} ${size / 2}`)
+            .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})`);
+        // Define gauge parameters
+        const radius = size / 2 - margin;
+        const innerRadius = radius - gaugeWidth;
+        const outerRadius = radius;
+        // Create gradient definitions
+        this.createGradients(svg, thresholds);
+        // Draw the background arc
+        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);
+        }
+        // Draw tick marks
+        this.drawTicks(chartGroup, outerRadius, minValue, maxValue);
+        // 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)
+        if (showValue) {
+            this.drawValueDisplay(chartGroup, this.value(), label, radius);
+        }
+        // Hide tooltip initially
+        this._tooltipVisible.set(false);
+    }
+    /**
+     * Updates the chart when options change
+     */
+    updateChart() {
+        this.createChart();
+    }
+    /**
+     * Updates only the value display and dial position without recreating the chart
+     */
+    updateValueAndDial(value) {
+        if (!this.svgElement)
+            return;
+        const options = this.effectiveOptions();
+        const minValue = options.minValue;
+        const maxValue = options.maxValue;
+        const animationDuration = options.animationDuration;
+        const easingFunction = this.getEasingFunction(options.animationEasing);
+        const currentValue = value;
+        const svg = this.d3.select(this.svgElement);
+        // Get chart size from SVG viewBox
+        const viewBoxValues = svg.attr('viewBox')?.split(' ').map(Number) || [0, 0, 300, 150];
+        const size = viewBoxValues[2];
+        const margin = size * 0.1;
+        const radius = size / 2 - margin;
+        // Update value text
+        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);
+        svg
+            .select('.gauge-needle')
+            .attr('fill', 'rgb(var(--ax-comp-gauge-chart-needle-color))')
+            .transition()
+            .duration(animationDuration)
+            .ease(easingFunction)
+            .attr('transform', `rotate(${angleInDegrees})`);
+    }
+    /**
+     * Draw the background arc
+     */
+    drawBackgroundArc(chartGroup, innerRadius, outerRadius, cornerRadius) {
+        // Create arc for the background
+        const backgroundArc = this.d3
+            .arc()
+            .innerRadius(innerRadius)
+            .outerRadius(outerRadius)
+            .startAngle(-Math.PI / 2) // Start from bottom (-90 degrees)
+            .endAngle(Math.PI / 2) // End at top (90 degrees)
+            .cornerRadius(cornerRadius);
+        // Draw background arc
+        const backgroundPath = chartGroup
+            .append('path')
+            .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();
+            });
+        }
+    }
+    /**
+     * Draw the thresholds arcs
+     */
+    drawThresholds(chartGroup, innerRadius, outerRadius, minValue, maxValue, thresholds, cornerRadius) {
+        // Create arc generator
+        const arc = this.d3
+            .arc()
+            .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);
+        // 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
+        let previousEndAngle = this.scaleValueToColorAngle(minValue, minValue, maxValue);
+        sortedThresholds.forEach((threshold, i) => {
+            const endAngle = angles[i];
+            // Skip if end angle is not greater than start angle
+            if (endAngle <= previousEndAngle)
+                return;
+            const arcPath = chartGroup
+                .append('path')
+                .attr('d', arc({
+                innerRadius,
+                outerRadius,
+                startAngle: previousEndAngle,
+                endAngle,
+            }))
+                .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) {
+            const lastArc = chartGroup
+                .append('path')
+                .attr('d', arc({
+                innerRadius,
+                outerRadius,
+                startAngle: previousEndAngle,
+                endAngle: Math.PI / 2,
+            }))
+                .attr('fill', 'url(#gauge-bg-gradient)')
+                .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);
+            });
+        }
+    }
+    /**
+     * Draws tick marks and labels around the gauge
+     */
+    drawTicks(chartGroup, radius, minValue, maxValue) {
+        const tickCount = 5; // Number of ticks including min and max
+        const tickLength = radius * 0.1;
+        const labelOffset = radius * 0.15;
+        // Create a group for the ticks
+        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 angle = this.scaleValueToAngle(tick, minValue, maxValue);
+            const radians = angle - Math.PI / 2; // 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
+            tickGroup
+                .append('line')
+                .attr('x1', x1)
+                .attr('y1', y1)
+                .attr('x2', x2)
+                .attr('y2', y2)
+                .attr('stroke', 'rgba(var(--ax-comp-gauge-chart-text-color), 0.5)')
+                .attr('stroke-width', 2);
+            // Add tick label
+            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', '12px')
+                .text(tick.toLocaleString());
+        });
+    }
+    /**
+     * Draws the value and label text in the center
+     */
+    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('class', 'gauge-value')
+            .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());
+        // Add label display (if provided)
+        if (label) {
+            valueGroup
+                .append('text')
+                .attr('class', 'gauge-label')
+                .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, animationDuration) {
+        // Clamp value to min/max range
+        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);
+        // Create a group for the needle
+        const dialGroup = chartGroup.append('g').attr('class', 'dial');
+        // Draw the needle with initial position at minimum value
+        const needlePath = dialGroup
+            .append('path')
+            .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)
+        // Add a center circle
+        dialGroup
+            .append('circle')
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('r', radius * 0.08)
+            .attr('fill', 'rgb(var(--ax-comp-gauge-chart-needle-color))')
+            .attr('stroke', '#fff')
+            .attr('stroke-width', 2);
+        // Add a smaller white center
+        dialGroup
+            .append('circle')
+            .attr('cx', 0)
+            .attr('cy', 0)
+            .attr('r', radius * 0.03)
+            .attr('fill', '#fff');
+        // Get easing function
+        const easingFunction = this.getEasingFunction(this.options()?.animationEasing);
+        // Animate the needle from min to current value
+        needlePath
+            .transition()
+            .duration(animationDuration)
+            .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
+        }
+    }
+    /**
+     * Creates a path string for the needle
+     */
+    createNeedlePath(radius) {
+        const needleLength = radius * 0.8;
+        const needleWidth = radius * 0.06;
+        return `M 0,${needleWidth / 2} L ${needleLength},0 L 0,${-needleWidth / 2} Z`;
+    }
+    /**
+     * Scales a value to an angle (in radians)
+     */
+    scaleValueToAngle(value, min, max) {
+        const valueRange = max - min;
+        const angleRange = Math.PI;
+        return ((value - min) / valueRange) * angleRange - Math.PI / 2;
+    }
+    /**
+     * 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;
+    }
+    /**
+     * 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
+     */
+    radiansToDegrees(radians) {
+        return radians * (180 / Math.PI);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXGaugeChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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 .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}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-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.0.4", 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\" #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 .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}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-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: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXGaugeChartComponent, AXGaugeChartDefaultConfig, AX_GAUGE_CHART_CONFIG, gaugeChartConfig };
+//# sourceMappingURL=acorex-charts-gauge-chart.mjs.map