@acorex/charts 21.0.3-next.3 → 21.0.3-next.31

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,38 +323,39 @@ 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
      */
     renderDonutChart(container, width, height, visibleData) {
-        const total = visibleData.reduce((sum, item) => sum + item.value, 0);
+        const displayTotal = this.getDisplayTotal(visibleData);
+        const layoutTotal = this.getLayoutTotal(visibleData);
         // Create SVG container with filters
         const svg = this.createSvgWithFilters(container, width, height);
         // Create main chart group
         this.svg = svg.append('g').attr('transform', `translate(${width / 2}, ${height / 2})`);
         // Create donut segments
-        this.createDonutSegments(width, height, visibleData, total);
+        this.createDonutSegments(width, height, visibleData, layoutTotal);
         // Add total in center
-        this.addCenterDisplay(total);
+        this.addCenterDisplay(displayTotal);
     }
     /**
      * Create SVG element with filter definitions for shadows
@@ -382,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
@@ -398,12 +388,12 @@ class AXDonutChartComponent extends AXChartComponent {
     /**
      * Create and render the donut segments with animations
      */
-    createDonutSegments(chartWidth, chartHeight, data, total) {
+    createDonutSegments(chartWidth, chartHeight, data, layoutTotal) {
         this._isInitialAnimating.set(true);
         // Create pie layout
         const pie = this.d3
             .pie()
-            .value((d) => d.value)
+            .value((d) => this.getSegmentLayoutValue(d.value))
             .sort(null)
             .padAngle(0.02);
         // Calculate the radius of the donut chart
@@ -487,7 +477,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, outerRadius, innerRadius, total, animationDuration);
+            this.addDataLabels(labelArc, outerRadius, innerRadius, layoutTotal, animationDuration);
         }
         // Determine when all segment animations are complete (handle empty case)
         if (numSegments === 0) {
@@ -499,11 +489,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, outerRadius, innerRadius, total, animationDuration) {
+    addDataLabels(labelArc, outerRadius, innerRadius, layoutTotal, animationDuration) {
         if (!this.svg)
             return;
         const dataWithLabels = this.pieData.filter((d) => {
-            return this.calculateLabelFontSize(d, outerRadius, innerRadius, total) > 0;
+            return this.calculateLabelFontSize(d, outerRadius, innerRadius, layoutTotal) > 0;
         });
         const labels = this.svg
             .selectAll('.ax-donut-chart-data-label')
@@ -520,9 +510,9 @@ class AXDonutChartComponent extends AXChartComponent {
         })
             .attr('text-anchor', 'middle')
             .attr('dominant-baseline', 'middle')
-            .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, outerRadius, innerRadius, total));
+            .style('font-size', (d) => `${this.calculateLabelFontSize(d, outerRadius, innerRadius, layoutTotal)}px`)
+            .style('font-weight', (d) => (this.getSegmentPercentage(d.data.value, layoutTotal) >= 15 ? '600' : '500'))
+            .text((d) => this.getTruncatedLabelText(d, outerRadius, innerRadius, layoutTotal));
         labels
             .transition()
             .duration(animationDuration)
@@ -537,9 +527,9 @@ class AXDonutChartComponent extends AXChartComponent {
      * visual hierarchy.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    calculateLabelFontSize(d, outerRadius, innerRadius, total) {
+    calculateLabelFontSize(d, outerRadius, innerRadius, layoutTotal) {
         const angle = d.endAngle - d.startAngle;
-        const segmentPercentage = (d.data.value / total) * 100;
+        const segmentPercentage = this.getSegmentPercentage(d.data.value, layoutTotal);
         if (segmentPercentage < 2)
             return 0;
         const ringWidth = outerRadius - innerRadius;
@@ -571,8 +561,8 @@ class AXDonutChartComponent extends AXChartComponent {
      * from "Label (XX%)" → "Label" → "XX%" → truncated label → truncated percentage.
      */
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    getTruncatedLabelText(d, outerRadius, innerRadius, total) {
-        const fontSize = this.calculateLabelFontSize(d, outerRadius, innerRadius, total);
+    getTruncatedLabelText(d, outerRadius, innerRadius, layoutTotal) {
+        const fontSize = this.calculateLabelFontSize(d, outerRadius, innerRadius, layoutTotal);
         if (fontSize === 0)
             return '';
         const ringWidth = outerRadius - innerRadius;
@@ -580,7 +570,7 @@ class AXDonutChartComponent extends AXChartComponent {
         const angle = d.endAngle - d.startAngle;
         const chordLength = 2 * labelRadius * Math.sin(angle / 2);
         const availableWidth = chordLength * 0.8;
-        const percentage = (d.data.value / total) * 100;
+        const percentage = this.getSegmentPercentage(d.data.value, layoutTotal);
         if (percentage < 2)
             return '';
         const label = d.data.label || '';
@@ -652,8 +642,9 @@ class AXDonutChartComponent extends AXChartComponent {
         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 visibleData = untracked(() => this.chartDataArray()).filter((item) => !this.hiddenSegments.has(item.id));
+        const layoutTotal = this.getLayoutTotal(visibleData);
+        const percentage = layoutTotal > 0 ? this.getSegmentPercentage(datum.value, layoutTotal).toFixed(1) : '0';
         const color = this.getSegmentColor(datum);
         this._tooltipData.set({
             title: datum.tooltipLabel || datum.label,
@@ -695,7 +686,7 @@ class AXDonutChartComponent extends AXChartComponent {
     /**
      * Adds center display with total value
      */
-    addCenterDisplay(total) {
+    addCenterDisplay(displayTotal) {
         if (!this.svg)
             return;
         const chartContainerWidth = this.chartContainerEl().nativeElement.clientWidth;
@@ -714,7 +705,7 @@ class AXDonutChartComponent extends AXChartComponent {
             .style('font-size', `${baseFontSize}rem`)
             .style('font-weight', '600')
             .style('fill', 'rgb(var(--ax-comp-donut-chart-value-color))')
-            .text(total.toLocaleString());
+            .text(displayTotal.toLocaleString());
         // Add label
         totalDisplay
             .append('text')
@@ -745,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 = [];
@@ -754,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
@@ -778,37 +755,53 @@ class AXDonutChartComponent extends AXChartComponent {
         if (!data || data.length === 0) {
             return 'Empty donut chart. No data available.';
         }
-        const total = data.reduce((sum, item) => sum + item.value, 0);
+        const displayTotal = this.getDisplayTotal(data);
+        const layoutTotal = this.getLayoutTotal(data);
         const segmentDescriptions = data
             .map((segment) => {
-            const percentage = total > 0 ? ((segment.value / total) * 100).toFixed(1) : '0';
+            const percentage = layoutTotal > 0 ? this.getSegmentPercentage(segment.value, layoutTotal).toFixed(1) : '0';
             return `${segment.label}: ${segment.value} (${percentage}%)`;
         })
             .join('; ');
-        return `Donut chart with ${data.length} segments. Total value: ${total}. ${segmentDescriptions}`;
+        return `Donut chart with ${data.length} segments. Total value: ${displayTotal}. ${segmentDescriptions}`;
     }
     /**
      * Returns the data items for the legend
      * @implements AXChartLegendCompatible
      */
     getLegendItems() {
-        const total = this.data().reduce((sum, item) => sum + item.value, 0);
-        return this.chartDataArray().map((item, index) => ({
+        const data = this.chartDataArray();
+        const layoutTotal = this.getLayoutTotal(data);
+        return data.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,
+            percentage: this.getSegmentPercentage(item.value, layoutTotal),
             hidden: this.isSegmentHidden(item.id),
         }));
     }
-    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 });
+    getSegmentLayoutValue(value) {
+        return Math.abs(value);
+    }
+    getLayoutTotal(data) {
+        return data.reduce((sum, item) => sum + this.getSegmentLayoutValue(item.value), 0);
+    }
+    getDisplayTotal(data) {
+        return data.reduce((sum, item) => sum + item.value, 0);
+    }
+    getSegmentPercentage(segmentValue, layoutTotal) {
+        if (layoutTotal <= 0)
+            return 0;
+        return (this.getSegmentLayoutValue(segmentValue) / layoutTotal) * 100;
+    }
+    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.