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

package/{types/acorex-charts-bar-chart.d.ts → bar-chart/index.d.ts}

@@ -1,4 +1,3 @@
-import * as _acorex_charts_bar_chart from '@acorex/charts/bar-chart';
 import * as _acorex_charts from '@acorex/charts';
 import { NXNativeEvent, AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
@@ -72,6 +71,7 @@ interface AXBarChartOption {
     yAxisLabel?: string;
     rotateXAxisLabels?: boolean | 'auto';
     showTooltip?: boolean;
+    /** Percent of band width used by each bar (0–100). Default: 80. Values ≤ 1 are treated as fractions. */
     barWidth?: number;
     cornerRadius?: number;
     animationDuration?: number;
@@ -161,32 +161,8 @@ declare class AXBarChartComponent extends AXChartComponent implements OnDestroy,
     protected tooltipData: _angular_core.Signal<AXChartTooltipData>;
     private configToken;
     private chartColors;
-    protected effectiveOptions: _angular_core.Signal<{
-        width?: number;
-        height?: number;
-        showXAxis?: boolean;
-        showYAxis?: boolean;
-        showGrid?: boolean;
-        showDataLabels?: boolean;
-        xAxisLabel?: string;
-        yAxisLabel?: string;
-        rotateXAxisLabels?: boolean | "auto";
-        showTooltip?: boolean;
-        barWidth?: number;
-        cornerRadius?: number;
-        animationDuration?: number;
-        animationDelay?: number;
-        animationEasing?: _acorex_charts.AXAnimationEasing;
-        messages?: _acorex_charts_bar_chart.AXBarChartMessages;
-    }>;
-    protected effectiveMessages: _angular_core.Signal<{
-        noData: string;
-        noDataHelp: string;
-        allHidden: string;
-        allHiddenHelp: string;
-        noDataIcon: string;
-        allHiddenIcon: string;
-    }>;
+    protected effectiveOptions: _angular_core.Signal<AXBarChartOption>;
+    protected effectiveMessages: _angular_core.Signal<Required<_acorex_charts.AXChartMessages>>;
     private readonly hiddenBars;
     private readonly hiddenSeries;
     private readonly isClusteredMode;
@@ -319,7 +295,6 @@ declare class AXBarChartComponent extends AXChartComponent implements OnDestroy,
      */
     private getYAxisTickFontSizeBasedOnHeight;
     private buildXAxisCommon;
-    private showMessage;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXBarChartComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXBarChartComponent, "ax-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "barClick": "barClick"; }, never, never, true, never>;
 }

package/{types/acorex-charts-donut-chart.d.ts → donut-chart/index.d.ts}

@@ -1,4 +1,3 @@
-import * as _acorex_charts_donut_chart from '@acorex/charts/donut-chart';
 import * as _acorex_charts from '@acorex/charts';
 import { AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
@@ -156,18 +155,7 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
     protected tooltipData: _angular_core.Signal<AXChartTooltipData>;
     private configToken;
     private chartColors;
-    protected effectiveOptions: _angular_core.Signal<{
-        width?: number;
-        height?: number;
-        totalLabel?: string;
-        showTooltip?: boolean;
-        showDataLabels?: boolean;
-        donutWidth?: number;
-        cornerRadius?: number;
-        animationDuration?: number;
-        animationEasing?: _acorex_charts.AXAnimationEasing;
-        messages?: _acorex_charts_donut_chart.AXDonutChartMessages;
-    }>;
+    protected effectiveOptions: _angular_core.Signal<AXDonutChartOption>;
     private readonly TOOLTIP_GAP;
     private readonly HIGHLIGHT_TRANSITION_DURATION;
     private readonly HIGHLIGHT_TRANSITION_NAME;
@@ -178,14 +166,9 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
     private readonly CHART_INSET;
     private readonly DIMMED_OPACITY;
     private readonly VISIBLE_OPACITY;
-    protected effectiveMessages: _angular_core.Signal<{
-        noData: string;
-        noDataHelp: string;
-        allHidden: string;
-        allHiddenHelp: string;
-        noDataIcon: string;
-        allHiddenIcon: string;
-    }>;
+    private readonly instanceId;
+    private get segmentShadowFilterId();
+    protected effectiveMessages: _angular_core.Signal<Required<_acorex_charts.AXChartMessages>>;
     protected chartDataArray: _angular_core.Signal<AXDonutChartData[]>;
     protected getColor(index: number): string;
     protected isSegmentHidden(id: string): boolean;
@@ -299,7 +282,6 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
      * Cleans up chart resources
      */
     cleanupChart(): void;
-    private renderMessage;
     /**
      * Gets an accessibility label describing the donut chart for screen readers
      * @returns Descriptive string for screen readers
@@ -310,6 +292,10 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
      * @implements AXChartLegendCompatible
      */
     getLegendItems(): AXChartLegendItem[];
+    private getSegmentLayoutValue;
+    private getLayoutTotal;
+    private getDisplayTotal;
+    private getSegmentPercentage;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXDonutChartComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDonutChartComponent, "ax-donut-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "segmentClick": "segmentClick"; "segmentHover": "segmentHover"; }, never, never, true, never>;
 }

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

@@ -1,4 +1,4 @@
-import { AXChartComponent, AX_CHART_COLOR_PALETTE, formatLargeNumber, getEasingFunction, getChartColor } from '@acorex/charts';
+import { AX_CHART_DEFAULT_MESSAGES, AXChartComponent, AX_CHART_COLOR_PALETTE, mergeChartOptions, mergeChartMessages, resolveBarWidthFraction, formatLargeNumber, getEasingFunction, renderChartEmptyMessage, getChartColor } from '@acorex/charts';
 import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
 import * as i0 from '@angular/core';
 import { InjectionToken, input, output, viewChild, signal, inject, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
@@ -15,12 +15,8 @@ const AXBarChartDefaultConfig = {
     animationDuration: 800,
     animationEasing: 'cubic-out',
     messages: {
-        noData: 'No data available',
-        noDataHelp: 'Please provide data to display the chart',
-        allHidden: 'All bars are hidden',
-        allHiddenHelp: 'Click on legend items to show bars',
+        ...AX_CHART_DEFAULT_MESSAGES,
         noDataIcon: 'fa-light fa-chart-column',
-        allHiddenIcon: 'fa-light fa-eye-slash',
     },
 };
 const AX_BAR_CHART_CONFIG = new InjectionToken('AX_BAR_CHART_CONFIG', {
@@ -28,11 +24,14 @@ const AX_BAR_CHART_CONFIG = new InjectionToken('AX_BAR_CHART_CONFIG', {
     factory: () => AXBarChartDefaultConfig,
 });
 function barChartConfig(config = {}) {
-    const result = {
+    return {
         ...AXBarChartDefaultConfig,
         ...config,
+        messages: {
+            ...AXBarChartDefaultConfig.messages,
+            ...config.messages,
+        },
     };
-    return result;
 }
 
 /**
@@ -42,9 +41,9 @@ function barChartConfig(config = {}) {
 class AXBarChartComponent extends AXChartComponent {
     // 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 bar is clicked */
     barClick = output();
@@ -103,21 +102,21 @@ class AXBarChartComponent extends AXChartComponent {
     MANY_ITEMS_THRESHOLD = 20;
     VERY_MANY_ITEMS_THRESHOLD = 50;
     // Animation state
-    _initialAnimationComplete = signal(false, ...(ngDevMode ? [{ debugName: "_initialAnimationComplete" }] : /* istanbul ignore next */ []));
+    _initialAnimationComplete = signal(false, ...(ngDevMode ? [{ debugName: "_initialAnimationComplete" }] : []));
     // 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;
     // Signals for component state
-    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : /* istanbul ignore next */ []));
-    _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : /* istanbul ignore next */ []));
+    _initialized = signal(false, ...(ngDevMode ? [{ debugName: "_initialized" }] : []));
+    _rendered = signal(false, ...(ngDevMode ? [{ debugName: "_rendered" }] : []));
     // Tooltip accessors
     tooltipVisible = this._tooltipVisible.asReadonly();
     tooltipPosition = this._tooltipPosition.asReadonly();
@@ -129,27 +128,9 @@ class AXBarChartComponent extends AXChartComponent {
     // Inject AXPlatform
     // Removed unused AXPlatform injection
     // Configuration with defaults
-    effectiveOptions = computed(() => {
-        return {
-            ...this.configToken,
-            ...this.options(),
-        };
-    }, ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : /* istanbul ignore next */ []));
+    effectiveOptions = computed(() => mergeChartOptions(this.configToken, this.options()), ...(ngDevMode ? [{ debugName: "effectiveOptions" }] : []));
     // Messages with defaults
-    effectiveMessages = computed(() => {
-        const defaultMessages = {
-            noData: 'No data available',
-            noDataHelp: 'Please provide data to display the chart',
-            allHidden: 'All bars are hidden',
-            allHiddenHelp: 'Click on legend items to show bars',
-            noDataIcon: 'fa-light fa-chart-column',
-            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" }] : []));
     // Track hidden bars and series
     hiddenBars = new Set();
     hiddenSeries = new Set();
@@ -157,14 +138,14 @@ class AXBarChartComponent extends AXChartComponent {
     isClusteredMode = computed(() => {
         const value = this.data();
         return Array.isArray(value) && value.length > 0 && 'chartData' in value[0];
-    }, ...(ngDevMode ? [{ debugName: "isClusteredMode" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "isClusteredMode" }] : []));
     visibleData = computed(() => {
         const value = this.data() || [];
         if (this.isClusteredMode()) {
             return value;
         }
         return value.filter((d) => !this.hiddenBars.has(d.id));
-    }, ...(ngDevMode ? [{ debugName: "visibleData" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "visibleData" }] : []));
     hasVisibleData = computed(() => {
         const value = this.data();
         if (!Array.isArray(value) || value.length === 0)
@@ -173,10 +154,10 @@ class AXBarChartComponent extends AXChartComponent {
             const groups = value;
             const seriesLabels = this.getClusterSeriesLabels(groups);
             const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
-            return groups.some((g) => visibleSeries.some((_, idx) => !!g.chartData[idx]));
+            return groups.some((g) => visibleSeries.some((label) => !!g.chartData.find((item) => item.label === label)));
         }
         return value.some((d) => !this.hiddenBars.has(d.id));
-    }, ...(ngDevMode ? [{ debugName: "hasVisibleData" }] : /* istanbul ignore next */ []));
+    }, ...(ngDevMode ? [{ debugName: "hasVisibleData" }] : []));
     // Type guard helper
     isClusteredData(value) {
         return Array.isArray(value) && value.length > 0 && 'chartData' in value[0];
@@ -371,7 +352,7 @@ class AXBarChartComponent extends AXChartComponent {
             return Math.max(this.MIN_PLOT_HEIGHT, optionHeight - bottomPadding);
         }
         if (containerHeight > 0) {
-            return Math.max(this.MIN_PLOT_HEIGHT, containerHeight - bottomPadding, this.FALLBACK_PLOT_HEIGHT);
+            return Math.max(this.MIN_PLOT_HEIGHT, containerHeight - bottomPadding);
         }
         return this.FALLBACK_PLOT_HEIGHT;
     }
@@ -389,10 +370,8 @@ class AXBarChartComponent extends AXChartComponent {
      * Creates x and y scales for the chart
      */
     setupScales(data) {
-        // Get the bar width percentage (default 60%)
-        const barWidthPercent = this.effectiveOptions().barWidth ?? 0.6;
-        // Calculate padding based on barWidth (inverse relationship)
-        const padding = Math.max(this.MIN_PADDING, 1 - barWidthPercent);
+        const barWidthFraction = resolveBarWidthFraction(this.effectiveOptions().barWidth);
+        const padding = Math.max(this.MIN_PADDING, 1 - barWidthFraction);
         // Create x scale (band scale for categorical data)
         this.xScale = this.d3
             .scaleBand()
@@ -430,8 +409,8 @@ class AXBarChartComponent extends AXChartComponent {
         // Y scale across all visible values (support negative values)
         const allVisibleValues = [];
         for (const g of groups) {
-            visibleSeries.forEach((_, idx) => {
-                const item = g.chartData[idx];
+            visibleSeries.forEach((label) => {
+                const item = g.chartData.find((d) => d.label === label);
                 if (item && typeof item.value === 'number')
                     allVisibleValues.push(item.value);
             });
@@ -572,8 +551,8 @@ class AXBarChartComponent extends AXChartComponent {
             const seriesLabels = groups.length > 0 ? this.getClusterSeriesLabels(groups) : [];
             const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
             for (const g of groups) {
-                visibleSeries.forEach((_, idx) => {
-                    const item = g.chartData[idx];
+                visibleSeries.forEach((label) => {
+                    const item = g.chartData.find((d) => d.label === label);
                     if (item && typeof item.value === 'number')
                         maxValue = Math.max(maxValue, item.value);
                 });
@@ -789,7 +768,15 @@ class AXBarChartComponent extends AXChartComponent {
             .attr('transform', (g) => `translate(${this.xScale(g.id)},0)`);
         const barGroups = groupSel
             .selectAll('.ax-bar-chart-bar-group')
-            .data((g) => visibleSeries.map((label, idx) => ({ group: g, seriesLabel: label, seriesIndex: idx })))
+            .data((g) => visibleSeries.map((label) => {
+            const seriesIndex = seriesLabels.indexOf(label);
+            return {
+                group: g,
+                seriesLabel: label,
+                seriesIndex,
+                item: g.chartData.find((d) => d.label === label) ?? g.chartData[seriesIndex],
+            };
+        }))
             .enter()
             .append('g')
             .style('cursor', 'pointer')
@@ -805,8 +792,7 @@ class AXBarChartComponent extends AXChartComponent {
             return `M${x},${y} L${x},${y} L${x + width},${y} L${x + width},${y} Z`;
         })
             .attr('fill', (d) => {
-            const item = d.group.chartData[d.seriesIndex];
-            return item?.color || this.getColor(d.seriesIndex);
+            return d.item?.color || this.getColor(d.seriesIndex);
         });
         if (this.effectiveOptions().showDataLabels !== false) {
             barGroups
@@ -820,10 +806,9 @@ class AXBarChartComponent extends AXChartComponent {
                 .style('fill', 'rgb(var(--ax-comp-bar-chart-data-labels-color))')
                 .style('opacity', 0)
                 .text((d) => {
-                const value = d.group.chartData[d.seriesIndex]?.value;
+                const value = d.item?.value;
                 if (value === undefined)
                     return '';
-                // Format large numbers in data labels
                 return value >= 1000 ? formatLargeNumber(value) : value;
             });
             const animationDelay = this.effectiveOptions().animationDelay ?? this.DEFAULT_ANIMATION_DELAY;
@@ -833,10 +818,9 @@ class AXBarChartComponent extends AXChartComponent {
                 .duration(animationDuration)
                 .delay((_d, i) => i * animationDelay + this.LABEL_ANIMATION_DELAY)
                 .attr('y', (d) => {
-                const item = d.group.chartData[d.seriesIndex];
-                if (!item)
+                if (!d.item)
                     return this.height;
-                const barTop = this.yScale(item.value);
+                const barTop = this.yScale(d.item.value);
                 // If bar is near the top (100% or close), position label inside the bar
                 if (barTop < this.MIN_TOP_SPACE_FOR_LABEL) {
                     return barTop + this.LABEL_OFFSET;
@@ -845,10 +829,9 @@ class AXBarChartComponent extends AXChartComponent {
                 return barTop - this.LABEL_OFFSET;
             })
                 .attr('data-inside-bar', (d) => {
-                const item = d.group.chartData[d.seriesIndex];
-                if (!item)
+                if (!d.item)
                     return 'false';
-                const barTop = this.yScale(item.value);
+                const barTop = this.yScale(d.item.value);
                 return barTop < this.MIN_TOP_SPACE_FOR_LABEL ? 'true' : 'false';
             })
                 .style('opacity', 1)
@@ -863,9 +846,8 @@ class AXBarChartComponent extends AXChartComponent {
                 .transition()
                 .duration(this.HOVER_TRANSITION_DURATION)
                 .style('filter', 'brightness(0.7) drop-shadow(0 0 2px rgba(0,0,0,0.1))');
-            const item = d.group.chartData[d.seriesIndex];
-            if (item)
-                this.handleBarHover(event, item, d.group);
+            if (d.item)
+                this.handleBarHover(event, d.item, d.group);
         })
             .on('mousemove', (event) => {
             if (this._initialAnimationComplete())
@@ -881,9 +863,8 @@ class AXBarChartComponent extends AXChartComponent {
             .on('click', (event, d) => {
             if (!this._initialAnimationComplete())
                 return;
-            const item = d.group.chartData[d.seriesIndex];
-            if (item)
-                this.handleBarClick(event, item);
+            if (d.item)
+                this.handleBarClick(event, d.item);
         });
         const animationDelay = this.effectiveOptions().animationDelay ?? this.DEFAULT_ANIMATION_DELAY;
         bars
@@ -893,8 +874,7 @@ class AXBarChartComponent extends AXChartComponent {
             .attrTween('d', (d) => {
             const x = this.xSubScale(d.seriesLabel);
             const width = this.xSubScale.bandwidth();
-            const item = d.group.chartData[d.seriesIndex];
-            const finalHeight = item ? this.height - this.yScale(item.value) : 0;
+            const finalHeight = d.item ? this.height - this.yScale(d.item.value) : 0;
             return (t) => {
                 const currentHeight = finalHeight * t;
                 const currentY = this.height - currentHeight;
@@ -1024,15 +1004,23 @@ class AXBarChartComponent extends AXChartComponent {
      * Shows a message when no data is available
      */
     showNoDataMessage(containerElement) {
-        this.clearChartArea(containerElement);
-        this.showMessage(containerElement, this.effectiveMessages().noDataIcon, this.effectiveMessages().noData, this.effectiveMessages().noDataHelp, 'ax-bar-chart-no-data-message');
+        const messages = this.effectiveMessages();
+        renderChartEmptyMessage(this.d3, containerElement, {
+            icon: messages.noDataIcon,
+            title: messages.noData,
+            help: messages.noDataHelp,
+        });
     }
     /**
      * Shows a message when all bars are hidden
      */
     showAllBarsHiddenMessage(containerElement) {
-        this.clearChartArea(containerElement);
-        this.showMessage(containerElement, this.effectiveMessages().allHiddenIcon, this.effectiveMessages().allHidden, this.effectiveMessages().allHiddenHelp, 'ax-bar-chart-no-data-message');
+        const messages = this.effectiveMessages();
+        renderChartEmptyMessage(this.d3, containerElement, {
+            icon: messages.allHiddenIcon,
+            title: messages.allHidden,
+            help: messages.allHiddenHelp,
+        });
     }
     /**
      * Gets the color for a bar based on its index
@@ -1237,7 +1225,7 @@ class AXBarChartComponent extends AXChartComponent {
         return this.chartContainerEl()?.nativeElement ?? null;
     }
     clearChartArea(containerElement) {
-        this.d3.select(containerElement).selectAll('svg, .ax-chart-message-container').remove();
+        this.d3.select(containerElement).selectAll('svg, .ax-chart-empty, .ax-chart-message-container').remove();
     }
     /**
      * Truncates long labels with ellipsis
@@ -1325,26 +1313,13 @@ class AXBarChartComponent extends AXChartComponent {
             this.createXAxisTitle(axesGroup, options.xAxisLabel, tickAreaHeight, gapBelowTicks);
         }
     }
-    // computeTooltipPosition moved to shared chart utils
-    showMessage(containerElement, iconClass, text, helpText, specificClass) {
-        const container = this.d3
-            .select(containerElement)
-            .append('div')
-            .attr('class', `ax-chart-message-container ax-bar-chart-message-background ${specificClass}`);
-        container
-            .append('div')
-            .attr('class', 'ax-chart-message-icon ax-bar-chart-no-data-icon')
-            .html(`<i class="${iconClass} fa-2x"></i>`);
-        container.append('div').attr('class', 'ax-chart-message-text ax-bar-chart-no-data-text').text(text);
-        container.append('div').attr('class', 'ax-chart-message-help ax-bar-chart-no-data-help').text(helpText);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.9", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared 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-bar-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;min-height:0;box-sizing:border-box;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{pointer-events:none;-webkit-user-select:none;user-select:none}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-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: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.3", type: AXBarChartComponent, isStandalone: true, selector: "ax-bar-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: { barClick: "barClick" }, viewQueries: [{ propertyName: "chartContainerEl", first: true, predicate: ["chartContainer"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared 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-bar-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;min-height:0;box-sizing:border-box;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{pointer-events:none;-webkit-user-select:none;user-select:none}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}\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: AXBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXBarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared 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-bar-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;min-height:0;box-sizing:border-box;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{pointer-events:none;-webkit-user-select:none;user-select:none}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}ax-bar-chart .ax-bar-chart-no-data-message{text-align:center;background-color:rgb(var(--ax-comp-bar-chart-bg-color));padding:1.5rem;border-radius:.5rem;border:1px solid rgba(var(--ax-sys-color-surface));width:80%;max-width:300px}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-icon{opacity:.6;margin-bottom:.75rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-chart-no-data-text{font-size:1rem;font-weight:600;margin-bottom:.5rem}ax-bar-chart .ax-bar-chart-no-data-message .ax-bar-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 }] }], barClick: [{ type: i0.Output, args: ["barClick"] }], chartContainerEl: [{ type: i0.ViewChild, args: ['chartContainer', { isSignal: true }] }] } });
+            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [AXChartTooltipComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ax-bar-chart\" role=\"img\" #chartContainer>\n  <!-- Shared 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-bar-chart{display:block;width:100%;height:100%;min-height:clamp(220px,38vw,360px);box-sizing:border-box;--ax-comp-bar-chart-axis-label-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-data-labels-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-grid-lines-color: var(--ax-sys-color-on-lightest-surface);--ax-comp-bar-chart-bg-color: 0, 0, 0, 0}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;min-height:0;box-sizing:border-box;overflow:hidden;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{display:block;width:100%;height:100%;max-width:100%;max-height:100%}ax-bar-chart .ax-bar-chart svg g:has(text){font-family:inherit}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label{pointer-events:none;-webkit-user-select:none;user-select:none}ax-bar-chart .ax-bar-chart .ax-bar-chart-data-label[data-inside-bar=true]{fill:#fff;font-weight:600;text-shadow:0 0 2px rgba(0,0,0,.3)}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.