@acorex/charts 20.2.0-next.9 → 20.2.1

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

@@ -1,4 +1,4 @@
-import { AX_CHART_COLOR_PALETTE, getChartColor } from '@acorex/charts';
+import { AX_CHART_COLOR_PALETTE, getChartColor, getEasingFunction, computeTooltipPosition } 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';
@@ -12,6 +12,14 @@ const AXDonutChartDefaultConfig = {
     cornerRadius: 4,
     animationDuration: 800,
     animationEasing: 'cubic-out',
+    messages: {
+        noData: 'No data available',
+        noDataHelp: 'Please provide data to display the chart',
+        allHidden: 'All segments are hidden',
+        allHiddenHelp: 'Please toggle visibility of at least one segment',
+        noDataIcon: 'fa-light fa-chart-pie',
+        allHiddenIcon: 'fa-light fa-eye-slash',
+    },
 };
 const AX_DONUT_CHART_CONFIG = new InjectionToken('AX_DONUT_CHART_CONFIG', {
     providedIn: 'root',
@@ -60,6 +68,7 @@ class AXDonutChartComponent {
     _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
     _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
     _isInitialAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isInitialAnimating" }] : []));
+    _currentlyHighlightedSegment = signal(null, ...(ngDevMode ? [{ debugName: "_currentlyHighlightedSegment" }] : []));
     // Tooltip state
     _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
     _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
@@ -84,6 +93,23 @@ class AXDonutChartComponent {
             ...this.options(),
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
+    // Tooltip positioning gap in pixels
+    TOOLTIP_GAP = 10;
+    // Messages with defaults
+    effectiveMessages = computed(() => {
+        const defaultMessages = {
+            noData: 'No data available',
+            noDataHelp: 'Please provide data to display the chart',
+            allHidden: 'All segments are hidden',
+            allHiddenHelp: 'Please toggle visibility of at least one segment',
+            noDataIcon: 'fa-light fa-chart-pie',
+            allHiddenIcon: 'fa-light fa-eye-slash',
+        };
+        return {
+            ...defaultMessages,
+            ...this.effectiveOptions().messages,
+        };
+    }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
     // Data accessor for handling different incoming data formats
     chartDataArray = computed(() => {
         return this.data() || [];
@@ -106,7 +132,8 @@ class AXDonutChartComponent {
     #eff = effect(() => {
         // Access inputs to track them
         this.data();
-        // this.effectiveOptions();
+        // Track options changes to trigger re-render on updates
+        this.effectiveOptions();
         // Only update if already rendered
         untracked(() => {
             if (this._rendered()) {
@@ -123,60 +150,61 @@ class AXDonutChartComponent {
             return;
         if (!this.svg)
             return;
+        const currentlyHighlighted = this._currentlyHighlightedSegment();
+        // If the same segment is already highlighted, do nothing
+        if (currentlyHighlighted === id) {
+            return;
+        }
+        // Update the currently highlighted segment state
+        this._currentlyHighlightedSegment.set(id);
         const transitionDuration = 150;
-        // Helper to unhighlight all segments and reset them to their normal state
-        const unhighlightAllSegments = () => {
+        // Helper to get full data for the segment ID
+        const getSegmentDataById = (segmentId) => {
+            return untracked(() => this.chartDataArray()).find((d) => d.id === segmentId) || null;
+        };
+        // Always interrupt any ongoing transitions first
+        this.svg.selectAll('path').interrupt();
+        if (id === null) {
+            // Clear all highlights
             this.svg
                 .selectAll('path')
                 .classed('ax-donut-chart-highlighted', false)
                 .classed('ax-donut-chart-dimmed', false)
                 .transition()
                 .duration(transitionDuration)
-                .attr('transform', 'scale(1)')
+                .attr('transform', null)
                 .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
+            // Target not found, clear highlights
+            this._currentlyHighlightedSegment.set(null);
+            this.highlightSegment(null);
             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));
-        }
+        // Dim all segments that are NOT the target
+        this.svg
+            .selectAll('path')
+            .filter((d) => d?.data?.id !== id)
+            .classed('ax-donut-chart-highlighted', false)
+            .classed('ax-donut-chart-dimmed', true)
+            .transition()
+            .duration(transitionDuration)
+            .attr('transform', null)
+            .style('filter', null)
+            .style('opacity', 0.5);
+        // Highlight the target segment
+        targetSegment
+            .classed('ax-donut-chart-dimmed', false)
+            .classed('ax-donut-chart-highlighted', true)
+            .transition()
+            .duration(transitionDuration)
+            .style('filter', 'url(#ax-donut-chart-segment-shadow)')
+            .style('opacity', 1);
+        this.segmentHover.emit(getSegmentDataById(id));
     }
     /**
      * Toggles visibility of a segment by ID
@@ -192,8 +220,11 @@ class AXDonutChartComponent {
             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();
+                    // Clear only chart SVG and message containers (preserve tooltip component)
+                    this.d3
+                        ?.select(this.chartContainerEl().nativeElement)
+                        .selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message')
+                        .remove();
                     // Force full redraw
                     setTimeout(() => {
                         this.createChart();
@@ -268,13 +299,15 @@ class AXDonutChartComponent {
      * Updates the chart with new data
      */
     updateChart() {
+        // Reset highlighted segment state when updating
+        this._currentlyHighlightedSegment.set(null);
         this.createChart(); // Recreate the chart with updated data
     }
     /**
      * Clears the chart container
      */
     clearChart(container) {
-        this.d3.select(container).selectAll('svg').remove();
+        this.d3.select(container).selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
         this._tooltipVisible.set(false);
     }
     /**
@@ -284,27 +317,7 @@ class AXDonutChartComponent {
         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');
+        this.renderMessage(container, this.effectiveMessages().noDataIcon, this.effectiveMessages().noData, this.effectiveMessages().noDataHelp, 'ax-donut-chart-no-data-message');
     }
     /**
      * Shows a message when all segments are hidden
@@ -313,27 +326,7 @@ class AXDonutChartComponent {
         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');
+        this.renderMessage(container, this.effectiveMessages().allHiddenIcon, this.effectiveMessages().allHidden, this.effectiveMessages().allHiddenHelp, 'ax-donut-chart-no-data-message');
     }
     /**
      * Setups chart dimensions based on container and options
@@ -410,12 +403,6 @@ class AXDonutChartComponent {
             .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()
@@ -423,7 +410,7 @@ class AXDonutChartComponent {
             .outerRadius(innerRadius + (radius * 0.95 - innerRadius) / 2);
         // Get animation options
         const animationDuration = this.effectiveOptions().animationDuration;
-        const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
+        const animationEasing = getEasingFunction(this.d3, this.effectiveOptions().animationEasing);
         // Generate pie data
         this.pieData = pie(data);
         // Add segments with animation
@@ -451,8 +438,8 @@ class AXDonutChartComponent {
                 return;
             this.handleSliceHover(event, d.data);
         })
-            .on('mouseleave', (event, d) => {
-            this.handleSegmentLeave(event, d, arc);
+            .on('mouseleave', () => {
+            this.handleSegmentLeave();
         })
             .on('mousemove', (event) => {
             if (this._tooltipVisible()) {
@@ -463,6 +450,8 @@ class AXDonutChartComponent {
             this.onSegmentClick(d.data);
         });
         // Animate segments
+        const numSegments = this.pieData.length;
+        let completed = 0;
         segments
             .transition()
             .duration(animationDuration)
@@ -472,112 +461,107 @@ class AXDonutChartComponent {
             .attrTween('d', (d) => {
             const interpolate = this.d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d);
             return (t) => arc(interpolate(t));
+        })
+            .on('end', () => {
+            completed++;
+            if (completed >= numSegments) {
+                this._isInitialAnimating.set(false);
+                this.cdr.detectChanges();
+            }
+        })
+            .on('interrupt', () => {
+            // Treat interrupts as completion to avoid getting stuck in animating state
+            completed++;
+            if (completed >= numSegments) {
+                this._isInitialAnimating.set(false);
+                this.cdr.detectChanges();
+            }
         });
-        // Add data labels if enabled
+        // Add data labels if enabled and chart size is sufficient
         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 minChartDimension = Math.min(chartWidth, chartHeight);
+            const isTooSmallChartForLabels = minChartDimension < 260; // Hide labels entirely on small charts
+            if (!isTooSmallChartForLabels) {
+                // Calculate optimal font size based on segment size and chart dimensions
+                const calculateFontSize = (d) => {
+                    const angleSize = d.endAngle - d.startAngle; // radians
+                    const segmentPercentage = (d.data.value / total) * 100;
+                    // Drop labels for very small segments
+                    if (segmentPercentage < 2)
+                        return 0;
+                    // Minimum readable font size; avoid tiny unreadable text
+                    const minReadable = segmentPercentage < 8 ? 0 : 9;
+                    // Base size scaled by arc angle and radius, capped
+                    const scaled = (angleSize * radius) / 9;
+                    return Math.min(Math.max(minReadable, scaled), 13);
+                };
+                const formatPercentage = (value) => {
+                    if (value < 1)
+                        return '<1%';
+                    if (value < 10)
+                        return `${value.toFixed(1)}%`;
+                    return `${Math.round(value)}%`;
+                };
+                const labelRadius = innerRadius + (radius * 0.95 - innerRadius) / 2;
+                const approximateTextWidth = (text, fontSize) => {
+                    // Approximate width: 0.55em per char
+                    return text.length * fontSize * 0.55;
+                };
+                const arcLength = (d) => (d.endAngle - d.startAngle) * labelRadius;
+                const buildLabelText = (d) => {
+                    const percentage = (d.data.value / total) * 100;
+                    if (percentage < 1)
+                        return '';
+                    const label = d.data.label || '';
+                    const percentageText = formatPercentage(percentage);
+                    return label ? `${label} (${percentageText})` : percentageText;
+                };
+                const dataThatFits = this.pieData.filter((d) => {
+                    const fontSize = calculateFontSize(d);
+                    if (!fontSize)
+                        return false;
+                    const text = buildLabelText(d);
+                    if (!text)
+                        return false;
+                    const available = arcLength(d);
+                    const needed = approximateTextWidth(text, fontSize) + 6; // small padding
+                    return needed <= available;
+                });
+                const labels = this.svg
+                    .selectAll('.ax-donut-chart-data-label')
+                    .data(dataThatFits)
+                    .enter()
+                    .append('text')
+                    .attr('class', 'ax-donut-chart-data-label')
+                    .style('opacity', 0)
+                    .style('pointer-events', 'none')
+                    .style('fill', 'rgb(var(--ax-comp-donut-chart-data-labels-color))')
+                    .attr('transform', (d) => {
+                    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) => buildLabelText(d));
+                labels
+                    .transition()
+                    .duration(animationDuration)
+                    .delay((d, i) => i * 50 + 200)
+                    .style('opacity', 1);
             }
         }
-        const totalAnimationCycleTime = maxIndividualDelay + animationDuration;
-        setTimeout(() => {
+        // Determine when all segment animations are complete (handle empty case)
+        if (numSegments === 0) {
             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
-        }
-    }
+    // getEasingFunction moved to shared chart utils
     /**
      * Handle hover effects on a segment
      */
@@ -606,52 +590,28 @@ class AXDonutChartComponent {
     /**
      * Handles mouse leave from segments
      */
-    handleSegmentLeave(event, d, normalArc) {
+    handleSegmentLeave() {
         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
+        // Clear all highlights to ensure segments return to normal state
+        this.highlightSegment(null);
     }
     /**
      * 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 });
+        const containerEl = this.chartContainerEl()?.nativeElement;
+        if (!containerEl)
             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 });
+        const containerRect = containerEl.getBoundingClientRect();
+        const tooltipEl = containerEl.querySelector('.chart-tooltip');
+        const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
+        const pos = computeTooltipPosition(containerRect, tooltipRect, event.clientX, event.clientY, this.TOOLTIP_GAP);
+        this._tooltipPosition.set(pos);
     }
     /**
      * Adds center display with total value
@@ -706,7 +666,24 @@ class AXDonutChartComponent {
         }
         this.hiddenSegments.clear();
         this._tooltipVisible.set(false);
+        this._currentlyHighlightedSegment.set(null);
+    }
+    // ===== Helper utilities for modularity and maintainability =====
+    renderMessage(container, iconClass, messageText, helpText, specificClass) {
+        // Clear container area first (preserve tooltip component)
+        this.d3.select(container).selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
+        const messageContainer = this.d3
+            .select(container)
+            .append('div')
+            .attr('class', `ax-chart-message-container ax-donut-chart-message-background ${specificClass}`);
+        messageContainer
+            .append('div')
+            .attr('class', 'ax-chart-message-icon ax-donut-chart-no-data-icon')
+            .html(`<i class="${iconClass} fa-2x"></i>`);
+        messageContainer.append('div').attr('class', 'ax-chart-message-text ax-donut-chart-no-data-text').text(messageText);
+        messageContainer.append('div').attr('class', 'ax-chart-message-help ax-donut-chart-no-data-help').text(helpText);
     }
+    // computeTooltipPosition moved to shared chart utils
     /**
      * Gets an accessibility label describing the donut chart for screen readers
      */
@@ -742,12 +719,12 @@ class AXDonutChartComponent {
             };
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.3", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", 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()\">\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: 0, 0, 0, 0;--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;background-color:rgba(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 svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));border:1px solid rgba(var(--ax-sys-color-surface));padding:1.5rem;border-radius:.5rem;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.1.3", ngImport: i0, type: AXDonutChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", 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"] }]
+            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()\">\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: 0, 0, 0, 0;--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;background-color:rgba(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 svg g:has(text){font-family:inherit}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));border:1px solid rgba(var(--ax-sys-color-surface));padding:1.5rem;border-radius:.5rem;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: () => [] });
 
 /**