@acorex/charts 19.13.2

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

@@ -0,0 +1,616 @@
+import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
+import { set } from 'lodash-es';
+
+const AXDonutChartDefaultConfig = {
+    showTooltip: 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;
+}
+
+const AXDonutChartColors = {
+    // Modern color palette suitable for data visualization
+    defaultColors: [
+        '#4361ee', // Blue
+        '#3a0ca3', // Purple
+        '#7209b7', // Violet
+        '#f72585', // Pink
+        '#4cc9f0', // Light Blue
+        '#4895ef', // Sky Blue
+        '#560bad', // Deep Purple
+        '#f15bb5', // Light Pink
+        '#00bbf9', // Cyan
+        '#00f5d4', // Teal
+    ],
+    // Get a color from the palette by index with wraparound
+    getColor: (index, customPalette) => {
+        const palette = customPalette || AXDonutChartColors.defaultColors;
+        return palette[index % palette.length];
+    },
+};
+/**
+ * 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);
+    // 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);
+    // 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 AXDonutChartColors.getColor(index);
+    }
+    // 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();
+        });
+        // Watch for changes to redraw the chart
+        effect(() => {
+            // Access inputs to track them
+            this.data();
+            this.effectiveOptions();
+            // Only update if already rendered
+            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.svg)
+            return;
+        // Reset all segments first
+        this.svg
+            .selectAll('path')
+            .classed('ax-donut-chart-highlighted', false)
+            .classed('ax-donut-chart-dimmed', false)
+            .attr('transform', 'scale(1)');
+        if (id !== null) {
+            // Highlight the target segment
+            this.svg
+                .selectAll('path')
+                .filter((d) => d?.data?.id === id)
+                .classed('ax-donut-chart-highlighted', true)
+                .attr('transform', 'scale(1.02)');
+            // Dim other segments
+            this.svg
+                .selectAll('path')
+                .filter((d) => d?.data?.id !== id)
+                .classed('ax-donut-chart-dimmed', true);
+        }
+        this.cdr.detectChanges();
+    }
+    /**
+     * Toggles visibility of a segment by ID
+     * @param id Segment ID to toggle
+     * @returns New visibility state (true = visible, false = hidden)
+     */
+    toggleSegment(id) {
+        this.toggleSegmentVisibility(id);
+        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(containerElement);
+                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(containerElement);
+                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(container) {
+        const messageContainer = this.d3
+            .select(container)
+            .append('div')
+            .attr('class', 'ax-donut-chart-no-data-message')
+            .style('width', 'auto')
+            .style('text-align', 'center');
+        // Add an icon
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-donut-chart-no-data-icon')
+            .html('<i class="fa-light fa-chart-pie-simple fa-2x"></i>');
+        // Add text message and help text
+        messageContainer.append('div').attr('class', 'ax-donut-chart-no-data-text').text('No data available');
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-donut-chart-no-data-help')
+            .text('Please provide data in the correct format');
+    }
+    /**
+     * Shows a message when all segments are hidden
+     */
+    showAllSegmentsHiddenMessage(container) {
+        this.clearChart(container);
+        // Add a simple div to ensure proper positioning
+        const wrapper = this.d3
+            .select(container)
+            .append('div')
+            .style('position', 'relative')
+            .style('width', '100%')
+            .style('height', '100%');
+        const messageContainer = wrapper
+            .append('div')
+            .attr('class', 'ax-donut-chart-no-data-message')
+            .style('position', 'absolute')
+            .style('left', '50%')
+            .style('top', '50%')
+            .style('transform', 'translate(-50%, -50%)')
+            .style('text-align', 'center')
+            .style('z-index', '10')
+            .style('background-color', 'rgba(255, 255, 255, 0.95)')
+            .style('padding', '1.5rem')
+            .style('border-radius', '0.5rem')
+            .style('box-shadow', '0 2px 12px rgba(0, 0, 0, 0.08)')
+            .style('width', '80%')
+            .style('max-width', '300px');
+        // Add an icon
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-donut-chart-no-data-icon')
+            .style('color', 'var(--ax-text-muted, #999)')
+            .style('margin-bottom', '0.75rem')
+            .html('<i class="fa-light fa-eye-slash fa-2x"></i>');
+        // Add text message and help text
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-donut-chart-no-data-text')
+            .style('font-size', '1rem')
+            .style('font-weight', '600')
+            .style('color', 'var(--ax-text-color, #333)')
+            .style('margin-bottom', '0.5rem')
+            .text('All segments are hidden');
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-donut-chart-no-data-help')
+            .style('font-size', '0.8rem')
+            .style('color', 'var(--ax-text-muted, #999)')
+            .text('Click on a segment to show data');
+    }
+    /**
+     * 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) {
+        // 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);
+        // 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, i) => this.getColor(i))
+            .style('opacity', 0)
+            .style('cursor', 'pointer') // Add cursor pointer to segments
+            .on('mouseenter', (event, d) => {
+            if (!this.effectiveOptions().showTooltip)
+                return;
+            this.handleSegmentHover(event, d, hoverArc, arc, total);
+        })
+            .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));
+        });
+    }
+    /**
+     * 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
+     */
+    handleSegmentHover(event, d, hoverArc, normalArc, total) {
+        const segmentData = d.data;
+        const percentage = ((segmentData.value / total) * 100).toFixed(1);
+        const segmentColor = this.d3.select(event.currentTarget).attr('fill');
+        // Update tooltip data
+        this._tooltipData.set({
+            title: segmentData.name,
+            value: segmentData.value,
+            percentage: `${percentage}%`,
+            color: segmentColor,
+        });
+        // Show tooltip
+        this._tooltipVisible.set(true);
+        this.updateTooltipPosition(event);
+        this.cdr.detectChanges();
+        // Emit segment hover event
+        this.segmentHover.emit(segmentData);
+        // Apply hover effect
+        this.d3
+            .select(event.currentTarget)
+            .transition()
+            .duration(200)
+            .attr('d', (d) => hoverArc(d));
+    }
+    /**
+     * Handles mouse leave from segments
+     */
+    handleSegmentLeave(event, d, normalArc) {
+        // Hide tooltip
+        this._tooltipVisible.set(false);
+        this.cdr.detectChanges();
+        // Emit null to indicate no segment is hovered
+        this.segmentHover.emit(null);
+        // Remove hover effect
+        this.d3
+            .select(event.currentTarget)
+            .transition()
+            .duration(200)
+            .attr('d', (d) => normalArc(d));
+    }
+    /**
+     * Updates tooltip position
+     * Ensures the tooltip is visible by adjusting position when near edges
+     */
+    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 = 100; // Approximate height of tooltip
+        // Calculate position with edge detection
+        let tooltipX = x;
+        let tooltipY = y;
+        // Check if we're too close to the right edge
+        const rightEdgeDistance = containerWidth - x;
+        if (rightEdgeDistance < tooltipWidth + 20) {
+            // Place tooltip to the left of the cursor with no gap
+            tooltipX = x - tooltipWidth + 20; // 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();
+    }
+    /**
+     * Toggles the visibility of a segment
+     */
+    toggleSegmentVisibility(id) {
+        if (this.hiddenSegments.has(id)) {
+            this.hiddenSegments.delete(id);
+        }
+        else {
+            this.hiddenSegments.add(id);
+        }
+        // Hide tooltip when toggling segments
+        this._tooltipVisible.set(false);
+        this.updateChart();
+    }
+    /**
+     * 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', 'currentColor')
+            .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', 'currentColor')
+            .style('fill-opacity', '0.8')
+            .text('Total');
+    }
+    /**
+     * Handles chart rendering errors
+     */
+    handleChartError() {
+        const container = this.chartContainerEl()?.nativeElement;
+        if (container) {
+            this.showNoDataMessage(container);
+        }
+    }
+    /**
+     * 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);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.9", 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>\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: [":host{display:block;width:100%;height:100%}.ax-donut-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.ax-donut-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);font-family:var(--ax-font-family, system-ui, sans-serif);background-color:#ffffffe6;padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}.ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{color:var(--ax-text-muted, #999);margin-bottom:.75rem}.ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;color:var(--ax-text-color, #333);margin-bottom:.5rem}.ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;color:var(--ax-text-muted, #999)}.ax-donut-chart-segment{cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);stroke:#fff;stroke-width:1.5px;filter:drop-shadow(0px 1px 2px rgba(0,0,0,.1))}.ax-donut-chart-segment:hover{opacity:.92;filter:drop-shadow(0px 3px 5px rgba(0,0,0,.15));transform:scale(1.01)}.ax-donut-chart-highlighted{opacity:1;filter:brightness(1.05) drop-shadow(0px 3px 5px rgba(0,0,0,.15));transform:scale(1.02)}.ax-donut-chart-dimmed{opacity:.4}.ax-donut-chart-total-display{pointer-events:none}.ax-donut-chart-total-value{fill:currentColor}.ax-donut-chart-total-label{fill:currentColor;opacity:.8}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: AXDonutChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-donut-chart', standalone: true, imports: [CommonModule, AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-donut-chart\" #chartContainer>\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: [":host{display:block;width:100%;height:100%}.ax-donut-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden}.ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}.ax-donut-chart-no-data-message{position:absolute;text-align:center;transform:translate(-50%,-50%);font-family:var(--ax-font-family, system-ui, sans-serif);background-color:#ffffffe6;padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}.ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{color:var(--ax-text-muted, #999);margin-bottom:.75rem}.ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;color:var(--ax-text-color, #333);margin-bottom:.5rem}.ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;color:var(--ax-text-muted, #999)}.ax-donut-chart-segment{cursor:pointer;transition:all .3s cubic-bezier(.25,.8,.25,1);stroke:#fff;stroke-width:1.5px;filter:drop-shadow(0px 1px 2px rgba(0,0,0,.1))}.ax-donut-chart-segment:hover{opacity:.92;filter:drop-shadow(0px 3px 5px rgba(0,0,0,.15));transform:scale(1.01)}.ax-donut-chart-highlighted{opacity:1;filter:brightness(1.05) drop-shadow(0px 3px 5px rgba(0,0,0,.15));transform:scale(1.02)}.ax-donut-chart-dimmed{opacity:.4}.ax-donut-chart-total-display{pointer-events:none}.ax-donut-chart-total-value{fill:currentColor}.ax-donut-chart-total-label{fill:currentColor;opacity:.8}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXDonutChartColors, AXDonutChartComponent, AXDonutChartDefaultConfig, AX_DONUT_CHART_CONFIG, donutChartConfig };
+//# sourceMappingURL=acorex-charts-donut-chart.mjs.map