@acorex/charts 0.0.1

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

@@ -0,0 +1,758 @@
+import { AX_CHART_COLOR_PALETTE, getChartColor } from '@acorex/charts';
+import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, input, output, viewChild, signal, computed, afterNextRender, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
+import { set } from 'lodash-es';
+
+const AXDonutChartDefaultConfig = {
+    showTooltip: true,
+    showDataLabels: true,
+    donutWidth: 35,
+    cornerRadius: 4,
+    animationDuration: 800,
+    animationEasing: 'cubic-out',
+};
+const AX_DONUT_CHART_CONFIG = new InjectionToken('AX_DONUT_CHART_CONFIG', {
+    providedIn: 'root',
+    factory: () => {
+        const global = inject(AX_GLOBAL_CONFIG);
+        set(global, 'chart.donutChart', AXDonutChartDefaultConfig);
+        return AXDonutChartDefaultConfig;
+    },
+});
+function donutChartConfig(config = {}) {
+    const result = {
+        ...AXDonutChartDefaultConfig,
+        ...config,
+    };
+    return result;
+}
+
+/**
+ * Donut Chart Component
+ * Displays data in a circular donut chart with interactive segments
+ */
+class AXDonutChartComponent {
+    // Dependency Injection
+    cdr = inject(ChangeDetectorRef);
+    // Inputs
+    /** Chart data input */
+    data = input([]);
+    /** Chart options input */
+    options = input({});
+    // Outputs
+    /** Emitted when a segment is clicked */
+    segmentClick = output();
+    /** Emitted when a segment has mouse hover
+     * Can be used by external elements to highlight this segment
+     */
+    segmentHover = output();
+    // Chart container reference
+    chartContainerEl = viewChild.required('chartContainer');
+    // D3 reference - loaded asynchronously
+    d3;
+    // Chart SVG reference
+    svg;
+    pieData = [];
+    // State management
+    hiddenSegments = new Set();
+    _initialized = signal(false);
+    _rendered = signal(false);
+    _isInitialAnimating = signal(false);
+    // Tooltip state
+    _tooltipVisible = signal(false);
+    _tooltipPosition = signal({ x: 0, y: 0 });
+    _tooltipData = signal({
+        title: '',
+        value: 0,
+        percentage: '0%',
+        color: '',
+    });
+    // Public computed properties for the template
+    tooltipVisible = this._tooltipVisible.asReadonly();
+    tooltipPosition = this._tooltipPosition.asReadonly();
+    tooltipData = this._tooltipData.asReadonly();
+    // Inject configuration
+    configToken = inject(AX_DONUT_CHART_CONFIG);
+    // Inject the chart colors
+    chartColors = inject(AX_CHART_COLOR_PALETTE);
+    // Computed configuration options
+    effectiveOptions = computed(() => {
+        return {
+            ...this.configToken,
+            ...this.options(),
+        };
+    });
+    // Data accessor for handling different incoming data formats
+    chartDataArray = computed(() => {
+        return this.data() || [];
+    });
+    // Color accessor method
+    getColor(index) {
+        return getChartColor(index, this.chartColors);
+    }
+    // Segment visibility check
+    isSegmentHidden(id) {
+        return this.hiddenSegments.has(id);
+    }
+    constructor() {
+        // Dynamically load D3 and initialize the chart when the component is ready
+        afterNextRender(() => {
+            this._initialized.set(true);
+            this.loadD3();
+        });
+    }
+    #eff = effect(() => {
+        // Access inputs to track them
+        this.data();
+        // this.effectiveOptions();
+        // Only update if already rendered
+        untracked(() => {
+            if (this._rendered()) {
+                this.updateChart();
+            }
+        });
+    });
+    /**
+     * Highlights a specific segment by ID
+     * @param id The segment ID to highlight, or null to clear highlight
+     */
+    highlightSegment(id) {
+        if (this._isInitialAnimating())
+            return;
+        if (!this.svg)
+            return;
+        const transitionDuration = 150;
+        // Helper to unhighlight all segments and reset them to their normal state
+        const unhighlightAllSegments = () => {
+            this.svg
+                .selectAll('path')
+                .classed('ax-donut-chart-highlighted', false)
+                .classed('ax-donut-chart-dimmed', false)
+                .transition()
+                .duration(transitionDuration)
+                .attr('transform', 'scale(1)')
+                .style('filter', null)
+                .style('opacity', 1);
+            this.segmentHover.emit(null);
+        };
+        // Helper to get full data for the segment ID
+        const getSegmentDataById = (segmentId) => {
+            return untracked(() => this.chartDataArray()).find((d) => d.id === segmentId) || null;
+        };
+        if (id === null) {
+            unhighlightAllSegments();
+            return;
+        }
+        const targetSegment = this.svg.selectAll('path').filter((d) => d?.data?.id === id);
+        if (targetSegment.empty()) {
+            unhighlightAllSegments(); // Target not found, so unhighlight all
+            return;
+        }
+        const isCurrentlyHighlighted = targetSegment.classed('ax-donut-chart-highlighted');
+        if (isCurrentlyHighlighted) {
+            unhighlightAllSegments(); // Toggle off if already highlighted
+        }
+        else {
+            // Dim all segments that are NOT the target
+            this.svg
+                .selectAll('path')
+                .filter((d) => d?.data?.id !== id)
+                .classed('ax-donut-chart-highlighted', false) // Ensure not highlighted
+                .classed('ax-donut-chart-dimmed', true)
+                .transition()
+                .duration(transitionDuration)
+                .attr('transform', 'scale(1)') // Reset scale if it was previously highlighted
+                .style('filter', null) // Remove filter if it had one
+                .style('opacity', 0.5); // Dim opacity
+            // Highlight the target segment
+            targetSegment
+                .classed('ax-donut-chart-dimmed', false) // Ensure not dimmed
+                .classed('ax-donut-chart-highlighted', true)
+                .transition()
+                .duration(transitionDuration)
+                .attr('transform', 'scale(1.02)')
+                .style('filter', 'url(#ax-donut-chart-segment-shadow)') // Apply shadow
+                .style('opacity', 1); // Ensure full opacity
+            this.segmentHover.emit(getSegmentDataById(id));
+        }
+    }
+    /**
+     * Toggles visibility of a segment by ID
+     * @param id Segment ID to toggle
+     * @returns New visibility state (true = visible, false = hidden)
+     */
+    toggleSegment(id) {
+        const wasAllHidden = this.chartDataArray().length > 0 && this.chartDataArray().every((d) => this.isSegmentHidden(d.id));
+        if (this.hiddenSegments.has(id)) {
+            // Making a segment visible
+            this.hiddenSegments.delete(id);
+            // If all segments were previously hidden, we need to ensure the message is cleared
+            if (wasAllHidden) {
+                // Force complete DOM cleanup and redraw
+                if (this.chartContainerEl()?.nativeElement) {
+                    // Clear everything in the container
+                    this.d3?.select(this.chartContainerEl().nativeElement).selectAll('*').remove();
+                    // Force full redraw
+                    setTimeout(() => {
+                        this.createChart();
+                    }, 0);
+                }
+            }
+            else {
+                this.updateChart();
+            }
+        }
+        else {
+            // Hiding a segment
+            this.hiddenSegments.add(id);
+            this.updateChart();
+        }
+        return !this.isSegmentHidden(id);
+    }
+    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);
+        }
+    }
+    onSegmentClick(item) {
+        // this.toggleSegmentVisibility(item.id);
+        this.segmentClick.emit(item);
+    }
+    /**
+     * Creates the donut chart
+     */
+    createChart() {
+        if (!this.d3 || !this.chartContainerEl()?.nativeElement)
+            return;
+        try {
+            const containerElement = this.chartContainerEl().nativeElement;
+            this.clearChart(containerElement);
+            const data = this.chartDataArray();
+            if (!data || data.length === 0) {
+                this.showNoDataMessage();
+                return;
+            }
+            // Filter out hidden segments
+            const visibleData = data.filter((item) => !this.hiddenSegments.has(item.id));
+            // If all segments are hidden, show message
+            if (visibleData.length === 0) {
+                this.showAllSegmentsHiddenMessage();
+                return;
+            }
+            const options = this.effectiveOptions();
+            const { width, height } = this.setupDimensions(containerElement, options);
+            this.renderDonutChart(containerElement, width, height, visibleData);
+        }
+        catch (error) {
+            console.error('Error creating donut chart:', error);
+            this.handleChartError();
+        }
+    }
+    /**
+     * Updates the chart with new data
+     */
+    updateChart() {
+        this.createChart(); // Recreate the chart with updated data
+    }
+    /**
+     * Clears the chart container
+     */
+    clearChart(container) {
+        this.d3.select(container).selectAll('svg').remove();
+        this._tooltipVisible.set(false);
+    }
+    /**
+     * Shows a message when no data is available
+     */
+    showNoDataMessage() {
+        if (!this.chartContainerEl()?.nativeElement)
+            return;
+        const container = this.chartContainerEl().nativeElement;
+        this.d3.select(container).selectAll('*').remove();
+        const messageContainer = this.d3
+            .select(container)
+            .append('div')
+            // Apply generic container class and specific background class
+            .attr('class', 'ax-donut-chart-no-data-message');
+        messageContainer
+            .append('div')
+            // Apply generic icon class and specific donut chart icon class
+            .attr('class', 'ax-chart-message-icon ax-donut-chart-no-data-icon')
+            .html('<i class="fa-light fa-chart-pie fa-2x"></i>'); // Donut chart icon
+        messageContainer
+            .append('div')
+            // Apply generic text class and specific donut chart text class
+            .attr('class', 'ax-chart-message-text ax-donut-chart-no-data-text')
+            .text('No data available');
+        messageContainer
+            .append('div')
+            // Apply generic help class and specific donut chart help class
+            .attr('class', 'ax-chart-message-help ax-donut-chart-no-data-help')
+            .text('Please provide data to display the chart');
+    }
+    /**
+     * Shows a message when all segments are hidden
+     */
+    showAllSegmentsHiddenMessage() {
+        if (!this.chartContainerEl()?.nativeElement)
+            return;
+        const container = this.chartContainerEl().nativeElement;
+        this.d3.select(container).selectAll('*').remove();
+        const messageContainer = this.d3
+            .select(container)
+            .append('div')
+            // Apply generic container class and specific background class
+            .attr('class', 'ax-donut-chart-no-data-message');
+        messageContainer
+            .append('div')
+            // Apply generic icon class and specific donut chart icon class if any distinction is needed later
+            .attr('class', 'ax-chart-message-icon ax-donut-chart-no-data-icon')
+            .html('<i class="fa-light fa-eye-slash fa-2x"></i>');
+        messageContainer
+            .append('div')
+            // Apply generic text class and specific donut chart text class if needed
+            .attr('class', 'ax-chart-message-text ax-donut-chart-no-data-text')
+            .text('All segments are hidden');
+        messageContainer
+            .append('div')
+            // Apply generic help class and specific donut chart help class if needed
+            .attr('class', 'ax-chart-message-help ax-donut-chart-no-data-help')
+            .text('Please toggle visibility of at least one segment');
+    }
+    /**
+     * Setups chart dimensions based on container and options
+     */
+    setupDimensions(container, options) {
+        // Get container dimensions or use defaults
+        const containerWidth = container.clientWidth || 400;
+        const containerHeight = container.clientHeight || 400;
+        // Ensure minimum dimensions for the chart
+        const minDim = 200;
+        const width = Math.max(options?.width || containerWidth, minDim);
+        const height = Math.max(options?.height || containerHeight, minDim);
+        return { width, height };
+    }
+    /**
+     * Renders the donut chart with visible data
+     */
+    renderDonutChart(container, width, height, visibleData) {
+        const total = visibleData.reduce((sum, item) => sum + item.value, 0);
+        // Create SVG container with filters
+        const svg = this.createSvgWithFilters(container, width, height);
+        // Create main chart group
+        this.svg = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);
+        // Create donut segments
+        this.createDonutSegments(width, height, visibleData, total);
+        // Add total in center
+        this.addCenterDisplay(total);
+    }
+    /**
+     * Create SVG element with filter definitions for shadows
+     */
+    createSvgWithFilters(container, width, height) {
+        const svg = this.d3
+            .select(container)
+            .append('svg')
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('viewBox', `0 0 ${width} ${height}`)
+            .attr('preserveAspectRatio', 'xMidYMid meet');
+        // Add drop shadow filter
+        const defs = svg.append('defs');
+        const filter = defs.append('filter').attr('id', 'ax-donut-chart-segment-shadow').attr('height', '130%');
+        filter.append('feGaussianBlur').attr('in', 'SourceAlpha').attr('stdDeviation', 2).attr('result', 'blur');
+        filter.append('feOffset').attr('in', 'blur').attr('dx', 1).attr('dy', 1).attr('result', 'offsetBlur');
+        const feComponentTransfer = filter
+            .append('feComponentTransfer')
+            .attr('in', 'offsetBlur')
+            .attr('result', 'offsetBlur');
+        feComponentTransfer.append('feFuncA').attr('type', 'linear').attr('slope', 0.3);
+        const feMerge = filter.append('feMerge');
+        feMerge.append('feMergeNode').attr('in', 'offsetBlur');
+        feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
+        return svg;
+    }
+    /**
+     * Create and render the donut segments with animations
+     */
+    createDonutSegments(chartWidth, chartHeight, data, total) {
+        this._isInitialAnimating.set(true);
+        // Create pie layout
+        const pie = this.d3
+            .pie()
+            .value((d) => d.value)
+            .sort(null)
+            .padAngle(0.02);
+        // Calculate the radius of the donut chart
+        const radius = (Math.min(chartWidth, chartHeight) / 2) * 0.85;
+        // Calculate inner radius based on donutWidth percentage
+        const donutWidthPercent = this.effectiveOptions().donutWidth / 100;
+        const innerRadius = radius * (1 - donutWidthPercent);
+        // Create arc generator with the configured radius and corner radius
+        const arc = this.d3
+            .arc()
+            .innerRadius(innerRadius)
+            .outerRadius(radius * 0.95)
+            .cornerRadius(this.effectiveOptions().cornerRadius);
+        // Create hover arc for animation
+        const hoverArc = this.d3
+            .arc()
+            .innerRadius(innerRadius)
+            .outerRadius(radius + 10)
+            .cornerRadius(this.effectiveOptions().cornerRadius);
+        // Create label arc generator for placing labels (middle of the donut ring)
+        const labelArc = this.d3
+            .arc()
+            .innerRadius(innerRadius + (radius * 0.95 - innerRadius) / 2)
+            .outerRadius(innerRadius + (radius * 0.95 - innerRadius) / 2);
+        // Get animation options
+        const animationDuration = this.effectiveOptions().animationDuration;
+        const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
+        // Generate pie data
+        this.pieData = pie(data);
+        // Add segments with animation
+        const segments = this.svg
+            .selectAll('path')
+            .data(this.pieData)
+            .enter()
+            .append('path')
+            .attr('class', 'ax-donut-chart-segment')
+            .attr('fill', (d /* d is PieArcDatum<AXDonutChartData> */) => {
+            const chartItem = d.data; // AXDonutChartData from visibleData
+            if (chartItem.color) {
+                // Prioritize explicit color on the item
+                return chartItem.color;
+            }
+            // Fallback: find original index for consistent palette color
+            const originalFullData = untracked(() => this.chartDataArray());
+            const originalIndex = originalFullData.findIndex((item) => item.id === chartItem.id);
+            return this.getColor(originalIndex !== -1 ? originalIndex : 0); // Ensure valid index
+        })
+            .style('opacity', 0)
+            .style('cursor', 'pointer') // Add cursor pointer to segments
+            .on('mouseenter', (event, d) => {
+            if (!this.effectiveOptions().showTooltip)
+                return;
+            this.handleSliceHover(event, d.data);
+        })
+            .on('mouseleave', (event, d) => {
+            this.handleSegmentLeave(event, d, arc);
+        })
+            .on('mousemove', (event) => {
+            if (this._tooltipVisible()) {
+                this.updateTooltipPosition(event);
+            }
+        })
+            .on('click', (event, d) => {
+            this.onSegmentClick(d.data);
+        });
+        // Animate segments
+        segments
+            .transition()
+            .duration(animationDuration)
+            .ease(animationEasing)
+            .delay((d, i) => i * 50)
+            .style('opacity', 1)
+            .attrTween('d', (d) => {
+            const interpolate = this.d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d);
+            return (t) => arc(interpolate(t));
+        });
+        // Add data labels if enabled
+        if (this.effectiveOptions().showDataLabels) {
+            // Calculate optimal font size based on segment size and chart dimensions
+            const calculateFontSize = (d) => {
+                // Calculate angle size in radians for the segment
+                const angleSize = d.endAngle - d.startAngle;
+                // Calculate the segment's percentage of the whole
+                const segmentPercentage = (d.data.value / total) * 100;
+                // Base minimum font size on segment size
+                const minFontSize = segmentPercentage < 5
+                    ? 0 // Hide very small segments
+                    : segmentPercentage < 10
+                        ? 7 // Smaller font for small segments
+                        : segmentPercentage < 15
+                            ? 8 // Medium font for medium segments
+                            : 9; // Regular font for large segments
+                // Adjust font size based on chart size
+                return Math.min(Math.max(minFontSize, (angleSize * radius) / 10), 12);
+            };
+            // Format percentage value with appropriate precision
+            const formatPercentage = (value) => {
+                if (value < 1)
+                    return '<1%';
+                if (value < 10)
+                    return `${value.toFixed(1)}%`;
+                return `${Math.round(value)}%`;
+            };
+            const labels = this.svg
+                .selectAll('.ax-donut-chart-data-label')
+                .data(this.pieData)
+                .enter()
+                .append('text')
+                .attr('class', 'ax-donut-chart-data-label')
+                .style('opacity', 0)
+                .style('fill', 'rgb(var(--ax-comp-donut-chart-data-labels-color))')
+                .attr('transform', (d) => {
+                // Calculate the centroid position for the label
+                const centroid = labelArc.centroid(d);
+                return `translate(${centroid[0]}, ${centroid[1]})`;
+            })
+                .attr('text-anchor', 'middle')
+                .attr('dominant-baseline', 'middle')
+                .style('font-size', (d) => `${calculateFontSize(d)}px`)
+                .style('font-weight', (d) => ((d.data.value / total) * 100 >= 15 ? '600' : '500'))
+                .text((d) => {
+                // Calculate percentage for labels
+                const percentage = (d.data.value / total) * 100;
+                // Only show if segment is large enough to display text
+                if (percentage < 1)
+                    return '';
+                const label = d.data.label || '';
+                const percentageText = formatPercentage(percentage);
+                return label ? `${label} (${percentageText})` : percentageText;
+            });
+            // Animate labels
+            labels
+                .transition()
+                .duration(animationDuration)
+                .delay((d, i) => i * 50 + 200)
+                .style('opacity', 1);
+        }
+        // Determine when all animations are complete
+        const numSegments = this.pieData.length;
+        let maxIndividualDelay = 0;
+        if (numSegments > 0) {
+            // Base delay for segments
+            maxIndividualDelay = (numSegments - 1) * 50;
+            if (this.effectiveOptions().showDataLabels) {
+                // Labels have an additional fixed delay
+                maxIndividualDelay = Math.max(maxIndividualDelay, (numSegments - 1) * 50 + 200);
+            }
+        }
+        const totalAnimationCycleTime = maxIndividualDelay + animationDuration;
+        setTimeout(() => {
+            this._isInitialAnimating.set(false);
+            this.cdr.detectChanges();
+        }, totalAnimationCycleTime);
+    }
+    /**
+     * 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
+        }
+    }
+    /**
+     * Handle hover effects on a segment
+     */
+    handleSliceHover(event, datum) {
+        if (this._isInitialAnimating())
+            return;
+        if (this.effectiveOptions().showTooltip !== false) {
+            const index = this.data().findIndex((item) => item.id === datum.id);
+            const color = datum.color || getChartColor(index, this.chartColors);
+            // Calculate percentage of total
+            // Ensure data() is accessed within a tracking context if it's a signal, or use untracked if appropriate
+            const total = untracked(() => this.data()).reduce((sum, item) => sum + item.value, 0);
+            const percentage = total > 0 ? ((datum.value / total) * 100).toFixed(1) : '0';
+            this._tooltipData.set({
+                title: datum.tooltipLabel || datum.label,
+                value: datum.value.toString(),
+                percentage: `${percentage}%`,
+                color: color,
+            });
+            this.updateTooltipPosition(event);
+            this._tooltipVisible.set(true);
+        }
+        this.highlightSegment(datum.id); // This will now also handle emitting segmentHover
+        // No direct segmentHover.emit(datum) here anymore
+    }
+    /**
+     * Handles mouse leave from segments
+     */
+    handleSegmentLeave(event, d, normalArc) {
+        if (this._isInitialAnimating())
+            return;
+        // Hide tooltip
+        this._tooltipVisible.set(false);
+        this.cdr.detectChanges();
+        // Emit null to indicate no segment is hovered - highlightSegment will handle this.
+        // this.segmentHover.emit(null); // Removed
+        // Remove hover effect (visual style related to classes and scale)
+        // Calling highlightSegment with the ID of the segment being left.
+        // If it was highlighted, this will toggle it off and emit null for segmentHover.
+        this.highlightSegment(d.data.id);
+        // Animate the arc back to normal for the specific segment being left.
+        this.d3
+            .select(event.currentTarget)
+            .transition()
+            .duration(200)
+            .attr('d', (arcData) => normalArc(arcData)); // Ensure arcData is used if 'd' is shadowed
+    }
+    /**
+     * Updates tooltip position
+     * Ensures the tooltip is visible by adjusting position when near edges
+     */
+    updateTooltipPosition(event) {
+        const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
+        const tooltipEl = this.chartContainerEl().nativeElement.querySelector('.chart-tooltip');
+        if (!tooltipEl) {
+            const x = event.clientX - container.left;
+            const y = event.clientY - container.top;
+            this._tooltipPosition.set({ x, y });
+            return;
+        }
+        const tooltipRect = tooltipEl.getBoundingClientRect();
+        const cursorX = event.clientX - container.left;
+        const cursorY = event.clientY - container.top;
+        const gap = 20; // Gap between cursor and tooltip
+        // Position tooltip to the right by default
+        let x = cursorX + gap / 3;
+        // If tooltip would go off the right edge, position it to the left
+        if (x + tooltipRect.width > container.width) {
+            x = cursorX - tooltipRect.width - gap;
+        }
+        // Keep tooltip within container bounds
+        x = Math.max(gap, Math.min(x, container.width - tooltipRect.width - gap));
+        const y = Math.max(gap, Math.min(cursorY, container.height - tooltipRect.height - gap));
+        this._tooltipPosition.set({ x, y });
+    }
+    /**
+     * Adds center display with total value
+     */
+    addCenterDisplay(total) {
+        if (!this.svg)
+            return;
+        // 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 total display
+        const totalDisplay = this.svg
+            .append('g')
+            .attr('class', 'ax-donut-chart-total-display')
+            .attr('text-anchor', 'middle');
+        // Add total value
+        totalDisplay
+            .append('text')
+            .attr('class', 'ax-donut-chart-total-value')
+            .style('font-size', `${baseFontSize}rem`)
+            .style('font-weight', '600')
+            .style('fill', 'rgb(var(--ax-comp-donut-chart-value-color))')
+            .text(total.toLocaleString());
+        // Add label
+        totalDisplay
+            .append('text')
+            .attr('class', 'ax-donut-chart-total-label')
+            .attr('dy', '1.4em')
+            .style('font-size', `${subTextFontSize}rem`)
+            .style('fill', 'rgb(var(--ax-comp-donut-chart-value-color))')
+            .style('opacity', '0.8')
+            .text(this.effectiveOptions().totalLabel || 'Total');
+    }
+    /**
+     * Handles chart rendering errors
+     */
+    handleChartError() {
+        const container = this.chartContainerEl()?.nativeElement;
+        if (container) {
+            this.showNoDataMessage();
+        }
+    }
+    /**
+     * Cleans up chart resources
+     */
+    cleanupChart() {
+        if (this.svg) {
+            this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
+            this.svg = null;
+            this.pieData = [];
+        }
+        this.hiddenSegments.clear();
+        this._tooltipVisible.set(false);
+    }
+    /**
+     * Gets an accessibility label describing the donut chart for screen readers
+     */
+    getAccessibilityLabel() {
+        const data = this.chartDataArray();
+        if (!data || data.length === 0) {
+            return 'Empty donut chart. No data available.';
+        }
+        // Calculate total
+        const total = data.reduce((sum, item) => sum + item.value, 0);
+        // Generate a description of the chart with percentages
+        const segmentDescriptions = data
+            .map((segment) => {
+            const percentage = ((segment.value / total) * 100).toFixed(1);
+            return `${segment.label}: ${segment.value} (${percentage}%)`;
+        })
+            .join('; ');
+        return `Donut chart with ${data.length} segments. Total value: ${total}. ${segmentDescriptions}`;
+    }
+    /**
+     * Returns the data items for the legend
+     * @implements AXChartLegendCompatible
+     */
+    getLegendItems() {
+        return this.chartDataArray().map((item, index) => {
+            return {
+                id: item.id,
+                name: item.label || `Segment ${index + 1}`,
+                value: item.value,
+                color: item.color || this.getColor(index),
+                percentage: (item.value / this.data().reduce((sum, item) => sum + item.value, 0)) * 100,
+                hidden: this.isSegmentHidden(item.id),
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", type: AXDonutChartComponent, isStandalone: true, selector: "ax-donut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { segmentClick: "segmentClick", segmentHover: "segmentHover" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\" tabindex=\"0\">\n  <!-- Tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-donut-chart{display:block;width:100%;height:100%;--ax-comp-donut-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-dark);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-comp-donut-chart-data-labels-color));background-color:rgb(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;opacity:.6}\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: AXDonutChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\" tabindex=\"0\">\n  <!-- Tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-donut-chart{display:block;width:100%;height:100%;--ax-comp-donut-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-dark);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-comp-donut-chart-data-labels-color));background-color:rgb(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXDonutChartComponent, AXDonutChartDefaultConfig, AX_DONUT_CHART_CONFIG, donutChartConfig };
+//# sourceMappingURL=acorex-charts-donut-chart.mjs.map