@acorex/charts 21.0.3-next.25 → 21.0.3-next.28

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

@@ -1,4 +1,4 @@
-import { AXChartComponent, AX_CHART_COLOR_PALETTE, getChartColor, getEasingFunction, computeTooltipPosition } from '@acorex/charts';
+import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, AX_CHART_COLOR_PALETTE, mergeChartOptions, createChartInstanceId, mergeChartMessages, getChartColor, renderChartEmptyMessage, 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';
@@ -11,12 +11,8 @@ const AXDonutChartDefaultConfig = {
     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',
+        ...AX_CHART_DEFAULT_MESSAGES,
         noDataIcon: 'fa-light fa-chart-pie',
-        allHiddenIcon: 'fa-light fa-eye-slash',
     },
 };
 const AX_DONUT_CHART_CONFIG = new InjectionToken('AX_DONUT_CHART_CONFIG', {
@@ -24,11 +20,14 @@ const AX_DONUT_CHART_CONFIG = new InjectionToken('AX_DONUT_CHART_CONFIG', {
     factory: () => AXDonutChartDefaultConfig,
 });
 function donutChartConfig(config = {}) {
-    const result = {
+    return {
         ...AXDonutChartDefaultConfig,
         ...config,
+        messages: {
+            ...AXDonutChartDefaultConfig.messages,
+            ...config.messages,
+        },
     };
-    return result;
 }
 
 /**
@@ -40,9 +39,9 @@ class AXDonutChartComponent extends AXChartComponent {
     cdr = inject(ChangeDetectorRef);
     // Inputs
     /** Chart data input */
-    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : []));
     /** Chart options input */
-    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : []));
     // Outputs
     /** Emitted when a segment is clicked */
     segmentClick = output();
@@ -61,19 +60,19 @@ class AXDonutChartComponent extends AXChartComponent {
     pieData = [];
     // State management
     hiddenSegments = new Set();
-    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
-    _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
-    _isInitialAnimating = signal(false, ...(ngDevMode ? [{ debugName: "_isInitialAnimating" }] : /* istanbul ignore next */ []));
-    _currentlyHighlightedSegment = signal(null, ...(ngDevMode ? [{ debugName: "_currentlyHighlightedSegment" }] : /* istanbul ignore next */ []));
+    _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" }] : /* istanbul ignore next */ []));
-    _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : /* istanbul ignore next */ []));
+    _tooltipVisible = signal(false, ...(ngDevMode ? [{ debugName: "_tooltipVisible" }] : []));
+    _tooltipPosition = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "_tooltipPosition" }] : []));
     _tooltipData = signal({
         title: '',
         value: 0,
         percentage: '0%',
         color: '',
-    }, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "_tooltipData" }] : []));
     _tooltipRafId = null;
     _pendingTooltipCoords = null;
     // Public computed properties for the template
@@ -85,12 +84,7 @@ class AXDonutChartComponent extends AXChartComponent {
     // Inject the chart colors
     chartColors = inject(AX_CHART_COLOR_PALETTE);
     // Computed configuration options
-    effectiveOptions = computed(() => {
-        return {
-            ...this.configToken,
-            ...this.options(),
-        };
-    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
+    effectiveOptions = computed(() => mergeChartOptions(this.configToken, this.options()), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
     // Constants
     TOOLTIP_GAP = 10;
     HIGHLIGHT_TRANSITION_DURATION = 150;
@@ -102,25 +96,16 @@ class AXDonutChartComponent extends AXChartComponent {
     CHART_INSET = 12;
     DIMMED_OPACITY = 0.5;
     VISIBLE_OPACITY = 1;
+    instanceId = createChartInstanceId('ax-donut');
+    get segmentShadowFilterId() {
+        return `${this.instanceId}-segment-shadow`;
+    }
     // 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" }] : /* istanbul ignore next */ []));
+    effectiveMessages = computed(() => mergeChartMessages(this.configToken.messages, this.options()?.messages), ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
     // Data accessor for handling different incoming data formats
     chartDataArray = computed(() => {
         return this.data() || [];
-    }, ...(ngDevMode ? [{ debugName: "chartDataArray" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "chartDataArray" }] : []));
     // Color accessor method
     getColor(index) {
         return getChartColor(index, this.chartColors);
@@ -147,7 +132,7 @@ class AXDonutChartComponent extends AXChartComponent {
                 this.updateChart();
             }
         });
-    }, ...(ngDevMode ? [{ debugName: "dataChangeEffect" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "dataChangeEffect" }] : []));
     /**
      * Highlights a specific segment by ID
      * @param id The segment ID to highlight, or null to clear highlight
@@ -211,7 +196,7 @@ class AXDonutChartComponent extends AXChartComponent {
             .classed('ax-donut-chart-highlighted', true)
             .transition(this.HIGHLIGHT_TRANSITION_NAME)
             .duration(this.HIGHLIGHT_TRANSITION_DURATION)
-            .style('filter', 'url(#ax-donut-chart-segment-shadow)')
+            .style('filter', `url(#${this.segmentShadowFilterId})`)
             .style('opacity', this.VISIBLE_OPACITY);
     }
     getSegmentDataById(segmentId) {
@@ -235,7 +220,7 @@ class AXDonutChartComponent extends AXChartComponent {
                     // 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')
+                        .selectAll('svg, .ax-chart-empty, .ax-chart-message-container, .ax-donut-chart-no-data-message')
                         .remove();
                     // Force full redraw
                     setTimeout(() => {
@@ -316,7 +301,7 @@ class AXDonutChartComponent extends AXChartComponent {
      * Clears the chart container
      */
     clearChart(container) {
-        this.d3.select(container).selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
+        this.d3.select(container).selectAll('svg, .ax-chart-empty, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
         this._tooltipVisible.set(false);
     }
     /**
@@ -325,8 +310,12 @@ class AXDonutChartComponent extends AXChartComponent {
     showNoDataMessage() {
         if (!this.chartContainerEl()?.nativeElement)
             return;
-        const container = this.chartContainerEl().nativeElement;
-        this.renderMessage(container, this.effectiveMessages().noDataIcon, this.effectiveMessages().noData, this.effectiveMessages().noDataHelp, 'ax-donut-chart-no-data-message');
+        const messages = this.effectiveMessages();
+        renderChartEmptyMessage(this.d3, this.chartContainerEl().nativeElement, {
+            icon: messages.noDataIcon,
+            title: messages.noData,
+            help: messages.noDataHelp,
+        });
     }
     /**
      * Shows a message when all segments are hidden
@@ -334,24 +323,24 @@ class AXDonutChartComponent extends AXChartComponent {
     showAllSegmentsHiddenMessage() {
         if (!this.chartContainerEl()?.nativeElement)
             return;
-        const container = this.chartContainerEl().nativeElement;
-        this.renderMessage(container, this.effectiveMessages().allHiddenIcon, this.effectiveMessages().allHidden, this.effectiveMessages().allHiddenHelp, 'ax-donut-chart-no-data-message');
+        const messages = this.effectiveMessages();
+        renderChartEmptyMessage(this.d3, this.chartContainerEl().nativeElement, {
+            icon: messages.allHiddenIcon,
+            title: messages.allHidden,
+            help: messages.allHiddenHelp,
+        });
     }
     /**
      * Setups chart dimensions based on container and options
      */
     setupDimensions(container, options) {
-        const containerWidth = container.clientWidth || 400;
-        const containerHeight = container.clientHeight || 400;
+        const containerWidth = Math.max(container.clientWidth, 1);
+        const containerHeight = Math.max(container.clientHeight, 1);
         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 };
+        const chartSize = Math.max(1, Math.min(desiredWidth, desiredHeight));
+        return { width: chartSize, height: chartSize };
     }
     /**
      * Renders the donut chart with visible data
@@ -383,7 +372,7 @@ class AXDonutChartComponent extends AXChartComponent {
             .attr('preserveAspectRatio', 'xMidYMid meet');
         // Add drop shadow filter
         const defs = svg.append('defs');
-        const filter = defs.append('filter').attr('id', 'ax-donut-chart-segment-shadow').attr('height', '130%');
+        const filter = defs.append('filter').attr('id', this.segmentShadowFilterId).attr('height', '130%');
         filter.append('feGaussianBlur').attr('in', 'SourceAlpha').attr('stdDeviation', 2).attr('result', 'blur');
         filter.append('feOffset').attr('in', 'blur').attr('dx', 1).attr('dy', 1).attr('result', 'offsetBlur');
         const feComponentTransfer = filter
@@ -747,7 +736,7 @@ class AXDonutChartComponent extends AXChartComponent {
         this._pendingTooltipCoords = null;
         const container = this.chartContainerEl()?.nativeElement;
         if (container) {
-            this.d3?.select(container).selectAll('svg, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
+            this.d3?.select(container).selectAll('svg, .ax-chart-empty, .ax-chart-message-container, .ax-donut-chart-no-data-message').remove();
         }
         this.svg = null;
         this.pieData = [];
@@ -756,20 +745,6 @@ class AXDonutChartComponent extends AXChartComponent {
         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
@@ -820,13 +795,13 @@ class AXDonutChartComponent extends AXChartComponent {
             return 0;
         return (this.getSegmentLayoutValue(segmentValue) / layoutTotal) * 100;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXDonutChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXDonutChartComponent, isStandalone: true, selector: "ax-donut-chart", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { segmentClick: "segmentClick", segmentHover: "segmentHover" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], 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:0;box-sizing:border-box;--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--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 });
+    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 }], 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-chart-empty{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1rem;pointer-events:none}.ax-chart-empty__card{text-align:center;padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px;box-sizing:border-box}.ax-chart-empty__icon{opacity:.6;margin-bottom:.75rem}.ax-chart-empty__title{font-size:1rem;font-weight:600;margin-bottom:.5rem}.ax-chart-empty__help{font-size:.8rem;opacity:.6}ax-donut-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--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;min-height:0;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}\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: "21.2.9", 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()\">\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:0;box-sizing:border-box;--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--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 }] }] } });
+            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-chart-empty{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:1rem;pointer-events:none}.ax-chart-empty__card{text-align:center;padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px;box-sizing:border-box}.ax-chart-empty__icon{opacity:.6;margin-bottom:.75rem}.ax-chart-empty__title{font-size:1rem;font-weight:600;margin-bottom:.5rem}.ax-chart-empty__help{font-size:.8rem;opacity:.6}ax-donut-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--ax-comp-donut-chart-bg-color: 0, 0, 0, 0;--ax-comp-donut-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--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;min-height:0;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}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.