@acorex/charts 21.0.1-next.6 → 21.0.1-next.61

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

@@ -74,6 +74,8 @@ class AXDonutChartComponent extends AXChartComponent {
         percentage: '0%',
         color: '',
     }, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : []));
+    _tooltipRafId = null;
+    _pendingTooltipCoords = null;
     // Public computed properties for the template
     tooltipVisible = this._tooltipVisible.asReadonly();
     tooltipPosition = this._tooltipPosition.asReadonly();
@@ -97,6 +99,7 @@ class AXDonutChartComponent extends AXChartComponent {
     LABEL_ANIMATION_DELAY = 200;
     MIN_CHART_DIMENSION = 200;
     MIN_CHART_FOR_LABELS = 260;
+    CHART_INSET = 12;
     DIMMED_OPACITY = 0.5;
     VISIBLE_OPACITY = 1;
     // Messages with defaults
@@ -340,8 +343,14 @@ class AXDonutChartComponent extends AXChartComponent {
     setupDimensions(container, options) {
         const containerWidth = container.clientWidth || 400;
         const containerHeight = container.clientHeight || 400;
-        const width = Math.max(options?.width || containerWidth, this.MIN_CHART_DIMENSION);
-        const height = Math.max(options?.height || containerHeight, this.MIN_CHART_DIMENSION);
+        const desiredWidth = options?.width || containerWidth;
+        const desiredHeight = options?.height || containerHeight;
+        const boundedWidth = Math.max(this.MIN_CHART_DIMENSION, desiredWidth);
+        const boundedHeight = Math.max(this.MIN_CHART_DIMENSION, desiredHeight);
+        // Keep donut geometry square so side spacing stays visually balanced.
+        const chartSize = Math.max(this.MIN_CHART_DIMENSION, Math.min(boundedWidth, boundedHeight));
+        const width = chartSize;
+        const height = chartSize;
         return { width, height };
     }
     /**
@@ -398,21 +407,22 @@ class AXDonutChartComponent extends AXChartComponent {
             .sort(null)
             .padAngle(0.02);
         // Calculate the radius of the donut chart
-        const radius = (Math.min(chartWidth, chartHeight) / 2) * 0.85;
+        const maxRadius = Math.min(chartWidth, chartHeight) / 2;
+        const radius = Math.max(0, maxRadius - this.CHART_INSET);
         // 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 outerRadius = radius * 0.95;
+        const ringWidth = outerRadius - innerRadius;
         const arc = this.d3
             .arc()
             .innerRadius(innerRadius)
-            .outerRadius(radius * 0.95)
+            .outerRadius(outerRadius)
             .cornerRadius(this.effectiveOptions().cornerRadius);
-        // Create label arc generator for placing labels (middle of the donut ring)
         const labelArc = this.d3
             .arc()
-            .innerRadius(innerRadius + (radius * 0.95 - innerRadius) / 2)
-            .outerRadius(innerRadius + (radius * 0.95 - innerRadius) / 2);
+            .innerRadius(innerRadius + ringWidth / 2)
+            .outerRadius(innerRadius + ringWidth / 2);
         // Get animation options
         const animationDuration = this.effectiveOptions().animationDuration;
         const animationEasing = getEasingFunction(this.d3, this.effectiveOptions().animationEasing);
@@ -477,7 +487,7 @@ class AXDonutChartComponent extends AXChartComponent {
         });
         // Add data labels if enabled and chart size is sufficient
         if (this.effectiveOptions().showDataLabels && this.isChartLargeEnoughForLabels(chartWidth, chartHeight)) {
-            this.addDataLabels(labelArc, radius, innerRadius, total, animationDuration);
+            this.addDataLabels(labelArc, outerRadius, innerRadius, total, animationDuration);
         }
         // Determine when all segment animations are complete (handle empty case)
         if (numSegments === 0) {
@@ -489,14 +499,11 @@ class AXDonutChartComponent extends AXChartComponent {
         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) {
+    addDataLabels(labelArc, outerRadius, 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
+            return this.calculateLabelFontSize(d, outerRadius, innerRadius, total) > 0;
         });
         const labels = this.svg
             .selectAll('.ax-donut-chart-data-label')
@@ -513,9 +520,9 @@ class AXDonutChartComponent extends AXChartComponent {
         })
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'middle')
-            .style('font-size', (d) => `${this.calculateLabelFontSize(d, radius, total, labelRadius)}px`)
+            .style('font-size', (d) => `${this.calculateLabelFontSize(d, outerRadius, innerRadius, total)}px`)
             .style('font-weight', (d) => ((d.data.value / total) * 100 >= 15 ? '600' : '500'))
-            .text((d) => this.getTruncatedLabelText(d, radius, labelRadius, total));
+            .text((d) => this.getTruncatedLabelText(d, outerRadius, innerRadius, total));
         labels
             .transition()
             .duration(animationDuration)
@@ -523,38 +530,34 @@ class AXDonutChartComponent extends AXChartComponent {
             .style('opacity', this.VISIBLE_OPACITY);
     }
     /**
-     * Calculates optimal font size for label based on segment size
-     * Uses smart dynamic sizing with readability constraints
+     * Calculates font size for data labels using the donut ring's physical dimensions.
+     *
+     * Primary driver is the ring width (radial space), with chord length as an
+     * overflow guard and a gentle scale-down for smaller segments to create
+     * visual hierarchy.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    calculateLabelFontSize(d, radius, total, labelRadius) {
+    calculateLabelFontSize(d, outerRadius, innerRadius, total) {
         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)
+        if (segmentPercentage < 2)
             return 0;
-        // Calculate chord length (available horizontal space)
+        const ringWidth = outerRadius - innerRadius;
+        const labelRadius = innerRadius + ringWidth / 2;
         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)
+        const MIN_CHORD = 22;
+        const MIN_RING = 16;
+        if (chordLength < MIN_CHORD || ringWidth < MIN_RING)
             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;
+        const ringBasedSize = ringWidth * 0.48;
+        // Segments >= 20% get full size; smaller ones scale from 0.75 → 1.0
+        const segmentScale = Math.min(1, 0.75 + 0.25 * (segmentPercentage / 20));
+        // At least 2 characters ("X%") must fit horizontally
+        const maxByChord = chordLength / (2 * 0.65);
+        const fontSize = Math.min(ringBasedSize * segmentScale, maxByChord);
+        const MIN_FONT_SIZE = 11;
+        const MAX_FONT_SIZE = 20;
+        return Math.round(Math.max(MIN_FONT_SIZE, Math.min(fontSize, MAX_FONT_SIZE)) * 2) / 2;
     }
     formatPercentage(value) {
         if (value < 1)
@@ -563,60 +566,34 @@ class AXDonutChartComponent extends AXChartComponent {
             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
+     * Returns the best-fit label text for a segment, progressively truncating
+     * from "Label (XX%)" → "Label" → "XX%" → truncated label → truncated percentage.
      */
     // 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
+    getTruncatedLabelText(d, outerRadius, innerRadius, total) {
+        const fontSize = this.calculateLabelFontSize(d, outerRadius, innerRadius, total);
         if (fontSize === 0)
             return '';
-        // Calculate chord length (straight line distance) instead of arc length
-        // Formula: chord = 2 * radius * sin(angle/2)
+        const ringWidth = outerRadius - innerRadius;
+        const labelRadius = innerRadius + ringWidth / 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 availableWidth = chordLength * 0.8;
         const percentage = (d.data.value / total) * 100;
-        if (percentage < 1)
+        if (percentage < 2)
             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)) {
+        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) {
+        if (label && this.doesTextFit(label, fontSize, availableWidth))
+            return label;
+        if (this.doesTextFit(percentageText, fontSize, availableWidth))
+            return percentageText;
+        if (label)
             return this.truncateTextToFit(label, fontSize, availableWidth);
-        }
-        // 5. Last resort: truncate percentage (very small segments)
         return this.truncateTextToFit(percentageText, fontSize, availableWidth);
     }
     /**
@@ -693,25 +670,27 @@ class AXDonutChartComponent extends AXChartComponent {
     handleSegmentLeave() {
         if (this._isInitialAnimating())
             return;
-        // Hide tooltip
         this._tooltipVisible.set(false);
-        this.cdr.detectChanges();
-        // 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 containerEl = this.chartContainerEl()?.nativeElement;
-        if (!containerEl)
+        this._pendingTooltipCoords = { x: event.clientX, y: event.clientY };
+        if (this._tooltipRafId != null)
             return;
-        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);
+        this._tooltipRafId = requestAnimationFrame(() => {
+            this._tooltipRafId = null;
+            const coords = this._pendingTooltipCoords;
+            if (!coords)
+                return;
+            const containerEl = this.chartContainerEl()?.nativeElement;
+            if (!containerEl)
+                return;
+            const containerRect = containerEl.getBoundingClientRect();
+            const tooltipEl = containerEl.querySelector('.chart-tooltip');
+            const tooltipRect = tooltipEl ? tooltipEl.getBoundingClientRect() : null;
+            const pos = computeTooltipPosition(containerRect, tooltipRect, coords.x, coords.y, this.TOOLTIP_GAP);
+            this._tooltipPosition.set(pos);
+        });
     }
     /**
      * Adds center display with total value
@@ -759,6 +738,11 @@ class AXDonutChartComponent extends AXChartComponent {
      * Cleans up chart resources
      */
     cleanupChart() {
+        if (this._tooltipRafId != null) {
+            cancelAnimationFrame(this._tooltipRafId);
+            this._tooltipRafId = null;
+        }
+        this._pendingTooltipCoords = null;
         if (!this.svg)
             return;
         this.d3.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
@@ -817,12 +801,12 @@ class AXDonutChartComponent extends AXChartComponent {
             hidden: this.isSegmentHidden(item.id),
         }));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.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 }], 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%;min-height:clamp(220px,38vw,360px);--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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.3.15", ngImport: i0, type: AXDonutChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.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()\">\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"] }]
+            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%;min-height:clamp(220px,38vw,360px);--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;box-sizing:border-box;padding:clamp(.5rem,1.2vw,.875rem);border-radius:.5rem;overflow:hidden;background-color:rgba(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], segmentClick: [{ type: i0.Output, args: ["segmentClick"] }], segmentHover: [{ type: i0.Output, args: ["segmentHover"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
 
 /**