@acorex/charts 19.15.0-next.22 → 19.15.0-next.25

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

@@ -2,7 +2,7 @@ import { AX_CHART_COLOR_PALETTE, getChartColor } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ChangeDetectorRef, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { InjectionToken, inject, ChangeDetectorRef, input, output, viewChild, signal, computed, afterNextRender, effect, untracked, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
 import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
 import { set } from 'lodash-es';
 
@@ -60,6 +60,7 @@ class AXDonutChartComponent {
     hiddenSegments = new Set();
     _initialized = signal(false);
     _rendered = signal(false);
+    _isInitialAnimating = signal(false);
     // Tooltip state
     _tooltipVisible = signal(false);
     _tooltipPosition = signal({ x: 0, y: 0 });
@@ -102,44 +103,81 @@ class AXDonutChartComponent {
             this._initialized.set(true);
             this.loadD3();
         });
-        // Watch for changes to redraw the chart
-        effect(() => {
-            // Access inputs to track them
-            this.data();
-            this.effectiveOptions();
-            // Only update if already rendered
+    }
+    #eff = effect(() => {
+        // Access inputs to track them
+        this.data();
+        // this.effectiveOptions();
+        // Only update if already rendered
+        untracked(() => {
             if (this._rendered()) {
                 this.updateChart();
             }
         });
-    }
+    });
     /**
      * Highlights a specific segment by ID
      * @param id The segment ID to highlight, or null to clear highlight
      */
     highlightSegment(id) {
+        if (this._isInitialAnimating())
+            return;
         if (!this.svg)
             return;
-        // Reset all segments first
-        this.svg
-            .selectAll('path')
-            .classed('ax-donut-chart-highlighted', false)
-            .classed('ax-donut-chart-dimmed', false)
-            .attr('transform', 'scale(1)');
-        if (id !== null) {
-            // Highlight the target segment
+        const transitionDuration = 150;
+        // Helper to unhighlight all segments and reset them to their normal state
+        const unhighlightAllSegments = () => {
             this.svg
                 .selectAll('path')
-                .filter((d) => d?.data?.id === id)
-                .classed('ax-donut-chart-highlighted', true)
-                .attr('transform', 'scale(1.02)');
-            // Dim other segments
+                .classed('ax-donut-chart-highlighted', false)
+                .classed('ax-donut-chart-dimmed', false)
+                .transition()
+                .duration(transitionDuration)
+                .attr('transform', 'scale(1)')
+                .style('filter', null)
+                .style('opacity', 1);
+            this.segmentHover.emit(null);
+        };
+        // Helper to get full data for the segment ID
+        const getSegmentDataById = (segmentId) => {
+            return untracked(() => this.chartDataArray()).find((d) => d.id === segmentId) || null;
+        };
+        if (id === null) {
+            unhighlightAllSegments();
+            return;
+        }
+        const targetSegment = this.svg.selectAll('path').filter((d) => d?.data?.id === id);
+        if (targetSegment.empty()) {
+            unhighlightAllSegments(); // Target not found, so unhighlight all
+            return;
+        }
+        const isCurrentlyHighlighted = targetSegment.classed('ax-donut-chart-highlighted');
+        if (isCurrentlyHighlighted) {
+            unhighlightAllSegments(); // Toggle off if already highlighted
+        }
+        else {
+            // Dim all segments that are NOT the target
             this.svg
                 .selectAll('path')
                 .filter((d) => d?.data?.id !== id)
-                .classed('ax-donut-chart-dimmed', true);
+                .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));
         }
-        this.cdr.detectChanges();
     }
     /**
      * Toggles visibility of a segment by ID
@@ -147,7 +185,31 @@ class AXDonutChartComponent {
      * @returns New visibility state (true = visible, false = hidden)
      */
     toggleSegment(id) {
-        this.toggleSegmentVisibility(id);
+        const wasAllHidden = this.chartDataArray().length > 0 && this.chartDataArray().every((d) => this.isSegmentHidden(d.id));
+        if (this.hiddenSegments.has(id)) {
+            // Making a segment visible
+            this.hiddenSegments.delete(id);
+            // If all segments were previously hidden, we need to ensure the message is cleared
+            if (wasAllHidden) {
+                // Force complete DOM cleanup and redraw
+                if (this.chartContainerEl()?.nativeElement) {
+                    // Clear everything in the container
+                    this.d3?.select(this.chartContainerEl().nativeElement).selectAll('*').remove();
+                    // Force full redraw
+                    setTimeout(() => {
+                        this.createChart();
+                    }, 0);
+                }
+            }
+            else {
+                this.updateChart();
+            }
+        }
+        else {
+            // Hiding a segment
+            this.hiddenSegments.add(id);
+            this.updateChart();
+        }
         return !this.isSegmentHidden(id);
     }
     ngOnDestroy() {
@@ -222,23 +284,27 @@ class AXDonutChartComponent {
     showNoDataMessage() {
         if (!this.chartContainerEl()?.nativeElement)
             return;
-        // Clear existing contents
         const container = this.chartContainerEl().nativeElement;
         this.d3.select(container).selectAll('*').remove();
-        const noDataMessage = this.d3
+        const messageContainer = this.d3
             .select(container)
             .append('div')
-            .attr('class', 'ax-donut-chart-no-data-message ax-bg-lightest ax-text-on-lightest')
-            .style('left', '50%')
-            .style('top', '50%');
-        noDataMessage
+            // 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')
-            .attr('class', 'ax-donut-chart-no-data-icon')
-            .html('<i class="fa-light fa-chart-pie fa-2x"></i>');
-        noDataMessage.append('div').attr('class', 'ax-donut-chart-no-data-text').text('No data available');
-        noDataMessage
+            // 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')
-            .attr('class', 'ax-donut-chart-no-data-help')
+            // 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');
     }
     /**
@@ -247,23 +313,27 @@ class AXDonutChartComponent {
     showAllSegmentsHiddenMessage() {
         if (!this.chartContainerEl()?.nativeElement)
             return;
-        // Clear existing contents
         const container = this.chartContainerEl().nativeElement;
-        this.d3.select(container).selectAll('svg').remove();
-        const noDataMessage = this.d3
+        this.d3.select(container).selectAll('*').remove();
+        const messageContainer = this.d3
             .select(container)
             .append('div')
-            .attr('class', 'ax-donut-chart-no-data-message ax-bg-lightest ax-text-on-lightest')
-            .style('left', '50%')
-            .style('top', '50%');
-        noDataMessage
+            // Apply generic container class and specific background class
+            .attr('class', 'ax-donut-chart-no-data-message');
+        messageContainer
             .append('div')
-            .attr('class', 'ax-donut-chart-no-data-icon')
+            // 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>');
-        noDataMessage.append('div').attr('class', 'ax-donut-chart-no-data-text').text('All segments are hidden');
-        noDataMessage
+        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')
-            .attr('class', 'ax-donut-chart-no-data-help')
+            // 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');
     }
     /**
@@ -323,6 +393,7 @@ class AXDonutChartComponent {
      * Create and render the donut segments with animations
      */
     createDonutSegments(chartWidth, chartHeight, data, total) {
+        this._isInitialAnimating.set(true);
         // Create pie layout
         const pie = this.d3
             .pie()
@@ -363,7 +434,17 @@ class AXDonutChartComponent {
             .enter()
             .append('path')
             .attr('class', 'ax-donut-chart-segment')
-            .attr('fill', (d, i) => this.getColor(i))
+            .attr('fill', (d /* d is PieArcDatum<AXDonutChartData> */) => {
+            const chartItem = d.data; // AXDonutChartData from visibleData
+            if (chartItem.color) {
+                // Prioritize explicit color on the item
+                return chartItem.color;
+            }
+            // Fallback: find original index for consistent palette color
+            const originalFullData = untracked(() => this.chartDataArray());
+            const originalIndex = originalFullData.findIndex((item) => item.id === chartItem.id);
+            return this.getColor(originalIndex !== -1 ? originalIndex : 0); // Ensure valid index
+        })
             .style('opacity', 0)
             .style('cursor', 'pointer') // Add cursor pointer to segments
             .on('mouseenter', (event, d) => {
@@ -454,6 +535,22 @@ class AXDonutChartComponent {
                 .delay((d, i) => i * 50 + 200)
                 .style('opacity', 1);
         }
+        // Determine when all animations are complete
+        const numSegments = this.pieData.length;
+        let maxIndividualDelay = 0;
+        if (numSegments > 0) {
+            // Base delay for segments
+            maxIndividualDelay = (numSegments - 1) * 50;
+            if (this.effectiveOptions().showDataLabels) {
+                // Labels have an additional fixed delay
+                maxIndividualDelay = Math.max(maxIndividualDelay, (numSegments - 1) * 50 + 200);
+            }
+        }
+        const totalAnimationCycleTime = maxIndividualDelay + animationDuration;
+        setTimeout(() => {
+            this._isInitialAnimating.set(false);
+            this.cdr.detectChanges();
+        }, totalAnimationCycleTime);
     }
     /**
      * Gets the appropriate D3 easing function based on the option string
@@ -486,11 +583,14 @@ class AXDonutChartComponent {
      * Handle hover effects on a segment
      */
     handleSliceHover(event, datum) {
+        if (this._isInitialAnimating())
+            return;
         if (this.effectiveOptions().showTooltip !== false) {
             const index = this.data().findIndex((item) => item.id === datum.id);
             const color = datum.color || getChartColor(index, this.chartColors);
             // Calculate percentage of total
-            const total = this.data().reduce((sum, item) => sum + item.value, 0);
+            // 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,
@@ -501,22 +601,30 @@ class AXDonutChartComponent {
             this.updateTooltipPosition(event);
             this._tooltipVisible.set(true);
         }
+        this.highlightSegment(datum.id); // This will now also handle emitting segmentHover
+        // No direct segmentHover.emit(datum) here anymore
     }
     /**
      * Handles mouse leave from segments
      */
     handleSegmentLeave(event, d, normalArc) {
+        if (this._isInitialAnimating())
+            return;
         // Hide tooltip
         this._tooltipVisible.set(false);
         this.cdr.detectChanges();
-        // Emit null to indicate no segment is hovered
-        this.segmentHover.emit(null);
-        // Remove hover effect
+        // 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', (d) => normalArc(d));
+            .attr('d', (arcData) => normalArc(arcData)); // Ensure arcData is used if 'd' is shadowed
     }
     /**
      * Updates tooltip position
@@ -546,20 +654,6 @@ class AXDonutChartComponent {
         const y = Math.max(gap, Math.min(cursorY, container.height - tooltipRect.height - gap));
         this._tooltipPosition.set({ x, y });
     }
-    /**
-     * Toggles the visibility of a segment
-     */
-    toggleSegmentVisibility(id) {
-        if (this.hiddenSegments.has(id)) {
-            this.hiddenSegments.delete(id);
-        }
-        else {
-            this.hiddenSegments.add(id);
-        }
-        // Hide tooltip when toggling segments
-        this._tooltipVisible.set(false);
-        this.updateChart();
-    }
     /**
      * Adds center display with total value
      */
@@ -633,12 +727,28 @@ class AXDonutChartComponent {
             .join('; ');
         return `Donut chart with ${data.length} segments. Total value: ${total}. ${segmentDescriptions}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.13", 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{position:absolute;text-align:center;transform:translate(-50%,-50%);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: "ngmodule", type: CommonModule }, { kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    /**
+     * Returns the data items for the legend
+     * @implements AXChartLegendCompatible
+     */
+    getLegendItems() {
+        return this.chartDataArray().map((item, index) => {
+            return {
+                id: item.id,
+                name: item.label || `Segment ${index + 1}`,
+                value: item.value,
+                color: item.color || this.getColor(index),
+                percentage: (item.value / this.data().reduce((sum, item) => sum + item.value, 0)) * 100,
+                hidden: this.isSegmentHidden(item.id),
+            };
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", 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: "ngmodule", type: CommonModule }, { 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: "19.2.13", ngImport: i0, type: AXDonutChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AXDonutChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-donut-chart', encapsulation: ViewEncapsulation.None, imports: [CommonModule, 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{position:absolute;text-align:center;transform:translate(-50%,-50%);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: [CommonModule, AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-donut-chart\" #chartContainer role=\"img\" [attr.aria-label]=\"getAccessibilityLabel()\" tabindex=\"0\">\n  <!-- Tooltip component -->\n  <ax-chart-tooltip\n    [visible]=\"tooltipVisible()\"\n    [position]=\"tooltipPosition()\"\n    [data]=\"tooltipData()\"\n    [showPercentage]=\"true\"\n  ></ax-chart-tooltip>\n</div>\n", styles: ["ax-donut-chart{display:block;width:100%;height:100%;--ax-comp-donut-chart-bg-color: var(--ax-sys-color-lightest-surface);--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-dark);--ax-comp-donut-chart-value-color: var(--ax-sys-color-on-lightest-surface)}ax-donut-chart .ax-donut-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-comp-donut-chart-data-labels-color));background-color:rgb(var(--ax-comp-donut-chart-bg-color))}ax-donut-chart .ax-donut-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:visible}ax-donut-chart .ax-donut-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-donut-chart-bg-color));padding:1.5rem;border-radius:.5rem;box-shadow:0 2px 12px #00000014;width:80%;max-width:300px}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-donut-chart .ax-donut-chart-no-data-message .ax-donut-chart-no-data-help{font-size:.8rem;opacity:.6}\n"] }]
         }], ctorParameters: () => [] });
 
 /**