@acorex/charts 21.0.0-next.13 → 21.0.0-next.15

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

@@ -54,8 +54,10 @@ class AXDonutChartComponent extends AXChartComponent {
     chartContainerEl = viewChild.required('chartContainer');
     // D3 reference - loaded asynchronously
     d3;
-    // Chart SVG reference
-    svg;
+    // Chart SVG reference (using 'any' since D3 is loaded dynamically at runtime)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    svg = null;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     pieData = [];
     // State management
     hiddenSegments = new Set();
@@ -87,8 +89,16 @@ class AXDonutChartComponent extends AXChartComponent {
             ...this.options(),
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
-    // Tooltip positioning gap in pixels
+    // Constants
     TOOLTIP_GAP = 10;
+    HIGHLIGHT_TRANSITION_DURATION = 150;
+    HIGHLIGHT_TRANSITION_NAME = 'highlight';
+    SEGMENT_ANIMATION_DELAY = 50;
+    LABEL_ANIMATION_DELAY = 200;
+    MIN_CHART_DIMENSION = 200;
+    MIN_CHART_FOR_LABELS = 260;
+    DIMMED_OPACITY = 0.5;
+    VISIBLE_OPACITY = 1;
     // Messages with defaults
     effectiveMessages = computed(() => {
         const defaultMessages = {
@@ -124,10 +134,9 @@ class AXDonutChartComponent extends AXChartComponent {
             this.loadD3();
         });
     }
-    #eff = effect(() => {
-        // Access inputs to track them
+    dataChangeEffect = effect(() => {
+        // Track data and options changes
         this.data();
-        // Track options changes to trigger re-render on updates
         this.effectiveOptions();
         // Only update if already rendered
         untracked(() => {
@@ -135,71 +144,75 @@ class AXDonutChartComponent extends AXChartComponent {
                 this.updateChart();
             }
         });
-    }, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "dataChangeEffect" }] : []));
     /**
      * 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)
+        if (this._isInitialAnimating() || !this.svg)
             return;
-        const currentlyHighlighted = this._currentlyHighlightedSegment();
-        // If the same segment is already highlighted, do nothing
-        if (currentlyHighlighted === id) {
+        if (this._currentlyHighlightedSegment() === id)
             return;
-        }
-        // Update the currently highlighted segment state
         this._currentlyHighlightedSegment.set(id);
-        const transitionDuration = 150;
-        // 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();
+        // Only interrupt ongoing HIGHLIGHT transitions (not initial animations)
+        this.svg.selectAll('path').interrupt(this.HIGHLIGHT_TRANSITION_NAME);
         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', null)
-                .style('filter', null)
-                .style('opacity', 1);
-            this.segmentHover.emit(null);
+            this.clearAllHighlights();
             return;
         }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const targetSegment = this.svg.selectAll('path').filter((d) => d?.data?.id === id);
         if (targetSegment.empty()) {
-            // Target not found, clear highlights
             this._currentlyHighlightedSegment.set(null);
             this.highlightSegment(null);
             return;
         }
-        // Dim all segments that are NOT the target
+        this.dimNonTargetSegments(id);
+        this.highlightTargetSegment(targetSegment);
+        this.segmentHover.emit(this.getSegmentDataById(id));
+    }
+    clearAllHighlights() {
+        if (!this.svg)
+            return;
         this.svg
             .selectAll('path')
-            .filter((d) => d?.data?.id !== id)
+            .classed('ax-donut-chart-highlighted', false)
+            .classed('ax-donut-chart-dimmed', false)
+            .transition(this.HIGHLIGHT_TRANSITION_NAME)
+            .duration(this.HIGHLIGHT_TRANSITION_DURATION)
+            .attr('transform', null)
+            .style('filter', null)
+            .style('opacity', this.VISIBLE_OPACITY);
+        this.segmentHover.emit(null);
+    }
+    dimNonTargetSegments(targetId) {
+        if (!this.svg)
+            return;
+        this.svg
+            .selectAll('path')
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .filter((d) => d?.data?.id !== targetId)
             .classed('ax-donut-chart-highlighted', false)
             .classed('ax-donut-chart-dimmed', true)
-            .transition()
-            .duration(transitionDuration)
+            .transition(this.HIGHLIGHT_TRANSITION_NAME)
+            .duration(this.HIGHLIGHT_TRANSITION_DURATION)
             .attr('transform', null)
             .style('filter', null)
-            .style('opacity', 0.5);
-        // Highlight the target segment
+            .style('opacity', this.DIMMED_OPACITY);
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    highlightTargetSegment(targetSegment) {
         targetSegment
             .classed('ax-donut-chart-dimmed', false)
             .classed('ax-donut-chart-highlighted', true)
-            .transition()
-            .duration(transitionDuration)
+            .transition(this.HIGHLIGHT_TRANSITION_NAME)
+            .duration(this.HIGHLIGHT_TRANSITION_DURATION)
             .style('filter', 'url(#ax-donut-chart-segment-shadow)')
-            .style('opacity', 1);
-        this.segmentHover.emit(getSegmentDataById(id));
+            .style('opacity', this.VISIBLE_OPACITY);
+    }
+    getSegmentDataById(segmentId) {
+        return untracked(() => this.chartDataArray()).find((d) => d.id === segmentId) || null;
     }
     /**
      * Toggles visibility of a segment by ID
@@ -207,7 +220,8 @@ class AXDonutChartComponent extends AXChartComponent {
      * @returns New visibility state (true = visible, false = hidden)
      */
     toggleSegment(id) {
-        const wasAllHidden = this.chartDataArray().length > 0 && this.chartDataArray().every((d) => this.isSegmentHidden(d.id));
+        const chartData = this.chartDataArray();
+        const wasAllHidden = chartData.length > 0 && chartData.every((d) => this.isSegmentHidden(d.id));
         if (this.hiddenSegments.has(id)) {
             // Making a segment visible
             this.hiddenSegments.delete(id);
@@ -257,11 +271,10 @@ class AXDonutChartComponent extends AXChartComponent {
         }
     }
     onSegmentClick(item) {
-        // this.toggleSegmentVisibility(item.id);
         this.segmentClick.emit(item);
     }
     /**
-     * Creates the donut chart
+     * Creates the donut chart from current data
      */
     createChart() {
         if (!this.d3 || !this.chartContainerEl()?.nativeElement)
@@ -274,9 +287,7 @@ class AXDonutChartComponent extends AXChartComponent {
                 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;
@@ -327,13 +338,10 @@ class AXDonutChartComponent extends AXChartComponent {
      * 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);
+        const width = Math.max(options?.width || containerWidth, this.MIN_CHART_DIMENSION);
+        const height = Math.max(options?.height || containerHeight, this.MIN_CHART_DIMENSION);
         return { width, height };
     }
     /**
@@ -352,7 +360,9 @@ class AXDonutChartComponent extends AXChartComponent {
     }
     /**
      * Create SVG element with filter definitions for shadows
+     * @returns D3 SVG selection (any type due to dynamic D3 loading)
      */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     createSvgWithFilters(container, width, height) {
         const svg = this.d3
             .select(container)
@@ -415,33 +425,24 @@ class AXDonutChartComponent extends AXChartComponent {
             .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
-        })
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .attr('fill', (d) => this.getSegmentColor(d.data))
             .style('opacity', 0)
-            .style('cursor', 'pointer') // Add cursor pointer to segments
+            .style('cursor', 'pointer')
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             .on('mouseenter', (event, d) => {
-            if (!this.effectiveOptions().showTooltip)
-                return;
-            this.handleSliceHover(event, d.data);
-        })
-            .on('mouseleave', () => {
-            this.handleSegmentLeave();
+            if (this.effectiveOptions().showTooltip) {
+                this.handleSliceHover(event, d.data);
+            }
         })
+            .on('mouseleave', () => this.handleSegmentLeave())
             .on('mousemove', (event) => {
             if (this._tooltipVisible()) {
                 this.updateTooltipPosition(event);
             }
         })
-            .on('click', (event, d) => {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .on('click', (_event, d) => {
             this.onSegmentClick(d.data);
         });
         // Animate segments
@@ -451,8 +452,10 @@ class AXDonutChartComponent extends AXChartComponent {
             .transition()
             .duration(animationDuration)
             .ease(animationEasing)
-            .delay((d, i) => i * 50)
-            .style('opacity', 1)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            .delay((_d, i) => i * this.SEGMENT_ANIMATION_DELAY)
+            .style('opacity', this.VISIBLE_OPACITY)
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
             .attrTween('d', (d) => {
             const interpolate = this.d3.interpolate({ startAngle: d.startAngle, endAngle: d.startAngle }, d);
             return (t) => arc(interpolate(t));
@@ -473,79 +476,8 @@ class AXDonutChartComponent extends AXChartComponent {
             }
         });
         // Add data labels if enabled and chart size is sufficient
-        if (this.effectiveOptions().showDataLabels) {
-            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);
-            }
+        if (this.effectiveOptions().showDataLabels && this.isChartLargeEnoughForLabels(chartWidth, chartHeight)) {
+            this.addDataLabels(labelArc, radius, innerRadius, total, animationDuration);
         }
         // Determine when all segment animations are complete (handle empty case)
         if (numSegments === 0) {
@@ -553,10 +485,184 @@ class AXDonutChartComponent extends AXChartComponent {
             this.cdr.detectChanges();
         }
     }
+    isChartLargeEnoughForLabels(width, height) {
+        return Math.min(width, height) >= this.MIN_CHART_FOR_LABELS;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    addDataLabels(labelArc, radius, innerRadius, total, animationDuration) {
+        if (!this.svg)
+            return;
+        const labelRadius = innerRadius + (radius * 0.95 - innerRadius) / 2;
+        // Show labels for all segments with valid font size
+        const dataWithLabels = this.pieData.filter((d) => {
+            const fontSize = this.calculateLabelFontSize(d, radius, total, labelRadius);
+            return fontSize > 0; // Only show if font size is valid
+        });
+        const labels = this.svg
+            .selectAll('.ax-donut-chart-data-label')
+            .data(dataWithLabels)
+            .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) => `${this.calculateLabelFontSize(d, radius, total, labelRadius)}px`)
+            .style('font-weight', (d) => ((d.data.value / total) * 100 >= 15 ? '600' : '500'))
+            .text((d) => this.getTruncatedLabelText(d, radius, labelRadius, total));
+        labels
+            .transition()
+            .duration(animationDuration)
+            .delay((_d, i) => i * this.SEGMENT_ANIMATION_DELAY + this.LABEL_ANIMATION_DELAY)
+            .style('opacity', this.VISIBLE_OPACITY);
+    }
+    /**
+     * Calculates optimal font size for label based on segment size
+     * Uses smart dynamic sizing with readability constraints
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    calculateLabelFontSize(d, radius, total, labelRadius) {
+        const angle = d.endAngle - d.startAngle;
+        const segmentPercentage = (d.data.value / total) * 100;
+        // Don't show labels for very small segments (< 1%)
+        if (segmentPercentage < 1)
+            return 0;
+        // Calculate chord length (available horizontal space)
+        const chordLength = 2 * labelRadius * Math.sin(angle / 2);
+        // Constants for font sizing
+        const MIN_FONT_SIZE = 9; // Minimum readable size
+        const MAX_FONT_SIZE = 14; // Maximum for aesthetics
+        const MIN_CHORD_FOR_LABEL = 20; // Minimum space needed for any text
+        // Don't show labels if space is too small
+        if (chordLength < MIN_CHORD_FOR_LABEL)
+            return 0;
+        // Calculate font size based on multiple factors
+        // 1. Based on arc angle (larger segments = larger font)
+        const angleBasedSize = (angle * radius) / 8;
+        // 2. Based on chord length (available horizontal space)
+        const chordBasedSize = chordLength / 8;
+        // 3. Based on segment percentage (proportional to data importance)
+        const percentageBasedSize = 9 + (segmentPercentage / 100) * 5; // 9-14px range
+        // Take the minimum of all calculations to ensure fit
+        const calculatedSize = Math.min(angleBasedSize, chordBasedSize, percentageBasedSize);
+        // Apply min/max constraints
+        const finalSize = Math.max(MIN_FONT_SIZE, Math.min(calculatedSize, MAX_FONT_SIZE));
+        // Round to .5 for crisp rendering
+        return Math.round(finalSize * 2) / 2;
+    }
+    formatPercentage(value) {
+        if (value < 1)
+            return '<1%';
+        if (value < 10)
+            return `${value.toFixed(1)}%`;
+        return `${Math.round(value)}%`;
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    buildLabelText(d, total) {
+        const percentage = (d.data.value / total) * 100;
+        if (percentage < 1)
+            return '';
+        const label = d.data.label || '';
+        const percentageText = this.formatPercentage(percentage);
+        return label ? `${label} (${percentageText})` : percentageText;
+    }
+    /**
+     * Truncates label text to fit within the arc segment
+     * Uses smart truncation: tries full label, then label only, then percentage only, then truncated percentage
+     * Calculates chord length (straight line) since text is rendered horizontally, not along the arc
+     */
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    getTruncatedLabelText(d, radius, labelRadius, total) {
+        const fontSize = this.calculateLabelFontSize(d, radius, total, labelRadius);
+        // If font size is 0, segment is too small for labels
+        if (fontSize === 0)
+            return '';
+        // Calculate chord length (straight line distance) instead of arc length
+        // Formula: chord = 2 * radius * sin(angle/2)
+        const angle = d.endAngle - d.startAngle;
+        const chordLength = 2 * labelRadius * Math.sin(angle / 2);
+        // Use chord length as available width with dynamic safety margin
+        // Smaller segments need larger safety margins (percentage-based)
+        const safetyMarginPercent = Math.max(0.15, Math.min(0.3, 1 / angle)); // 15-30% margin
+        const availableWidth = chordLength * (1 - safetyMarginPercent);
+        const percentage = (d.data.value / total) * 100;
+        if (percentage < 1)
+            return '';
+        const label = d.data.label || '';
+        const percentageText = this.formatPercentage(percentage);
+        // Try different label formats in order of preference
+        const fullText = label ? `${label} (${percentageText})` : percentageText;
+        const labelOnly = label;
+        const percentageOnly = percentageText;
+        // 1. Try full text (label + percentage)
+        if (this.doesTextFit(fullText, fontSize, availableWidth)) {
+            return fullText;
+        }
+        // 2. Try label only (if exists)
+        if (label && this.doesTextFit(labelOnly, fontSize, availableWidth)) {
+            return labelOnly;
+        }
+        // 3. Try percentage only
+        if (this.doesTextFit(percentageOnly, fontSize, availableWidth)) {
+            return percentageOnly;
+        }
+        // 4. Truncate the label with ellipsis
+        if (label) {
+            return this.truncateTextToFit(label, fontSize, availableWidth);
+        }
+        // 5. Last resort: truncate percentage (very small segments)
+        return this.truncateTextToFit(percentageText, fontSize, availableWidth);
+    }
     /**
-     * Gets the appropriate D3 easing function based on the option string
+     * Checks if text fits within available width using conservative estimation
+     * Uses 0.65em per character to account for font variations
      */
-    // getEasingFunction moved to shared chart utils
+    doesTextFit(text, fontSize, availableWidth) {
+        if (!text)
+            return false;
+        // Use conservative character width (0.65em for safety)
+        // Wider fonts like bold text need more space
+        const estimatedWidth = text.length * fontSize * 0.65;
+        return estimatedWidth <= availableWidth;
+    }
+    /**
+     * Truncates text to fit within available width with ellipsis
+     * Uses conservative character width to prevent overflow
+     * Adapts character width estimation based on font size
+     */
+    truncateTextToFit(text, fontSize, availableWidth) {
+        if (!text)
+            return '';
+        // Adaptive character width: smaller fonts are relatively wider
+        // Larger fonts: ~0.6em, Smaller fonts: ~0.7em
+        const charWidthRatio = fontSize <= 10 ? 0.7 : 0.65;
+        const charWidth = fontSize * charWidthRatio;
+        // Reserve space for ellipsis
+        const ellipsisWidth = fontSize * 0.7;
+        const availableForText = availableWidth - ellipsisWidth;
+        if (availableForText <= 0)
+            return '';
+        const maxChars = Math.floor(availableForText / charWidth);
+        if (maxChars <= 0)
+            return '';
+        if (text.length <= maxChars)
+            return text;
+        // Ensure at least 1 character before ellipsis
+        return text.substring(0, Math.max(1, maxChars)) + '…';
+    }
+    getSegmentColor(data) {
+        if (data.color)
+            return data.color;
+        const originalFullData = untracked(() => this.chartDataArray());
+        const originalIndex = originalFullData.findIndex((item) => item.id === data.id);
+        return this.getColor(originalIndex !== -1 ? originalIndex : 0);
+    }
     /**
      * Handle hover effects on a segment
      */
@@ -564,23 +670,22 @@ class AXDonutChartComponent extends AXChartComponent {
         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.showTooltip(event, datum);
         }
-        this.highlightSegment(datum.id); // This will now also handle emitting segmentHover
-        // No direct segmentHover.emit(datum) here anymore
+        this.highlightSegment(datum.id);
+    }
+    showTooltip(event, datum) {
+        const total = untracked(() => this.data()).reduce((sum, item) => sum + item.value, 0);
+        const percentage = total > 0 ? ((datum.value / total) * 100).toFixed(1) : '0';
+        const color = this.getSegmentColor(datum);
+        this._tooltipData.set({
+            title: datum.tooltipLabel || datum.label,
+            value: datum.value.toString(),
+            percentage: `${percentage}%`,
+            color,
+        });
+        this.updateTooltipPosition(event);
+        this._tooltipVisible.set(true);
     }
     /**
      * Handles mouse leave from segments
@@ -614,9 +719,9 @@ class AXDonutChartComponent extends AXChartComponent {
     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
+        // Improved font scaling: better minimum for small sizes, better ratio for scaling
+        const baseFontSize = Math.max(1.8, Math.min(3.2, chartContainerWidth / 150));
         const subTextFontSize = baseFontSize * 0.5;
         // Create group for the total display
         const totalDisplay = this.svg
@@ -654,11 +759,11 @@ class AXDonutChartComponent extends AXChartComponent {
      * Cleans up chart resources
      */
     cleanupChart() {
-        if (this.svg) {
-            this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
-            this.svg = null;
-            this.pieData = [];
-        }
+        if (!this.svg)
+            return;
+        this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
+        this.svg = null;
+        this.pieData = [];
         this.hiddenSegments.clear();
         this._tooltipVisible.set(false);
         this._currentlyHighlightedSegment.set(null);
@@ -681,18 +786,17 @@ class AXDonutChartComponent extends AXChartComponent {
     // computeTooltipPosition moved to shared chart utils
     /**
      * Gets an accessibility label describing the donut chart for screen readers
+     * @returns Descriptive string 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);
+            const percentage = total > 0 ? ((segment.value / total) * 100).toFixed(1) : '0';
             return `${segment.label}: ${segment.value} (${percentage}%)`;
         })
             .join('; ');
@@ -703,16 +807,15 @@ class AXDonutChartComponent extends AXChartComponent {
      * @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),
-            };
-        });
+        const total = this.data().reduce((sum, item) => sum + item.value, 0);
+        return this.chartDataArray().map((item, index) => ({
+            id: item.id,
+            name: item.label || `Segment ${index + 1}`,
+            value: item.value,
+            color: this.getSegmentColor(item),
+            percentage: total > 0 ? (item.value / total) * 100 : 0,
+            hidden: this.isSegmentHidden(item.id),
+        }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", 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 }], usesInheritance: 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;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 });