@acorex/charts 21.0.0-next.14 → 21.0.0-next.16

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

@@ -1,4 +1,4 @@
-import { AXChartComponent, AX_CHART_COLOR_PALETTE, getEasingFunction, getChartColor } from '@acorex/charts';
+import { AXChartComponent, AX_CHART_COLOR_PALETTE, formatLargeNumber, getEasingFunction, 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';
@@ -52,7 +52,7 @@ class AXBarChartComponent extends AXChartComponent {
     chartContainerEl = viewChild.required('chartContainer');
     // D3 reference - loaded asynchronously
     d3;
-    // Chart elements
+    // Chart elements - using proper D3 types
     svg;
     chart;
     xScale;
@@ -64,10 +64,42 @@ class AXBarChartComponent extends AXChartComponent {
     width;
     height;
     margin = { top: 0, right: 0, bottom: 0, left: 0 };
-    // Character width ratio heuristic for mixed Latin/Persian texts
+    // Constants for layout calculations
     CHAR_WIDTH_RATIO = 0.65;
-    // Tooltip gap in pixels for consistent spacing
     TOOLTIP_GAP = 10;
+    AXIS_TICK_PADDING = 10;
+    Y_AXIS_TITLE_THICKNESS = 14;
+    Y_AXIS_TITLE_PADDING = 14;
+    X_AXIS_TITLE_FONT_SIZE = 14;
+    X_AXIS_TITLE_GAP = 14;
+    X_AXIS_TITLE_BLOCK_HEIGHT = 24;
+    TOP_EDGE_PADDING = 6;
+    FALLBACK_PLOT_HEIGHT = 240;
+    MIN_PLOT_HEIGHT = 120;
+    MIN_TOTAL_WIDTH = 200;
+    OUTER_PADDING_CLUSTERED = 0.2;
+    INNER_PADDING_CLUSTERED = 0.1;
+    MIN_PADDING = 0.1;
+    HOVER_TRANSITION_DURATION = 150;
+    DEFAULT_ANIMATION_DELAY = 50;
+    LABEL_ANIMATION_DELAY = 100;
+    MIN_TOP_SPACE_FOR_LABEL = 20;
+    LABEL_OFFSET = 8;
+    ROTATION_TOLERANCE_SMALL_DATASET = 1.4;
+    SMALL_DATASET_THRESHOLD = 6;
+    Y_AXIS_PADDING = 20;
+    TICK_AREA_PADDING = 6;
+    TICK_AREA_GAP = 8;
+    DEFAULT_FONT_SIZE = 13;
+    FONT_WIDTH_MULTIPLIER = 0.6;
+    FONT_PADDING = 8;
+    MAX_LABEL_LENGTH = 20;
+    MIN_FONT_SIZE_X_AXIS = 8;
+    MAX_FONT_SIZE_X_AXIS = 14;
+    MIN_FONT_SIZE_Y_AXIS = 9;
+    MAX_FONT_SIZE_Y_AXIS = 15;
+    MANY_ITEMS_THRESHOLD = 20;
+    VERY_MANY_ITEMS_THRESHOLD = 50;
     // Animation state
     _initialAnimationComplete = signal(false, ...(ngDevMode ? [{ debugName: "_initialAnimationComplete" }] : []));
     // Tooltip state
@@ -114,17 +146,39 @@ class AXBarChartComponent extends AXChartComponent {
             ...this.effectiveOptions().messages,
         };
     }, ...(ngDevMode ? [{ debugName: "effectiveMessages" }] : []));
-    // Track hidden bars
+    // Track hidden bars and series
     hiddenBars = new Set();
-    // Track hidden series for clustered charts (by series label)
     hiddenSeries = new Set();
-    // Helpers
+    // Computed values for better performance
+    isClusteredMode = computed(() => {
+        const value = this.data();
+        return Array.isArray(value) && value.length > 0 && 'chartData' in value[0];
+    }, ...(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" }] : []));
+    hasVisibleData = computed(() => {
+        const value = this.data();
+        if (!Array.isArray(value) || value.length === 0)
+            return false;
+        if (this.isClusteredMode()) {
+            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 value.some((d) => !this.hiddenBars.has(d.id));
+    }, ...(ngDevMode ? [{ debugName: "hasVisibleData" }] : []));
+    // Type guard helper
     isClusteredData(value) {
-        return Array.isArray(value) && value.length > 0 && value[0] && 'chartData' in value[0];
+        return Array.isArray(value) && value.length > 0 && 'chartData' in value[0];
     }
     getClusterSeriesLabels(groups) {
-        const first = groups[0]?.chartData ?? [];
-        return first.map((d) => d.label);
+        return groups[0]?.chartData?.map((d) => d.label) ?? [];
     }
     constructor() {
         super();
@@ -177,25 +231,14 @@ class AXBarChartComponent extends AXChartComponent {
         const containerElement = this.chartContainerEl().nativeElement;
         const inputValue = (this.data() || []);
         const isClustered = this.isClusteredData(inputValue);
-        // Visibility calculation
-        let hasAnyVisible = false;
-        let visibleSingleData = [];
-        let groupedData = [];
-        if (isClustered) {
-            groupedData = inputValue;
-            const seriesLabels = groupedData.length > 0 ? this.getClusterSeriesLabels(groupedData) : [];
-            const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
-            hasAnyVisible = groupedData.some((g) => visibleSeries.some((_, idx) => !!g.chartData[idx]));
-        }
-        else {
-            const single = inputValue || [];
-            visibleSingleData = single.filter((d) => !this.isBarHidden(d.id));
-            hasAnyVisible = visibleSingleData.length > 0;
-        }
+        // Use computed visibility
+        const hasAnyVisible = this.hasVisibleData();
+        const visibleSingleData = isClustered ? [] : this.visibleData();
+        const groupedData = isClustered ? inputValue : [];
         // Clear existing chart SVG and messages (do not remove tooltip component)
         this.d3.select(containerElement).selectAll('svg, .ax-chart-message-container').remove();
         // Early return if no data
-        if (!inputValue.length) {
+        if (!Array.isArray(inputValue) || inputValue.length === 0) {
             this.showNoDataMessage(containerElement);
             return;
         }
@@ -234,8 +277,8 @@ class AXBarChartComponent extends AXChartComponent {
             // Only remove chart SVG and message containers to preserve tooltip component
             this.d3?.select(container).selectAll('svg, .ax-chart-message-container').remove();
         }
-        this.svg = null;
-        this.chart = null;
+        this.svg = undefined;
+        this.chart = undefined;
         this._tooltipVisible.set(false);
     }
     /**
@@ -251,11 +294,10 @@ class AXBarChartComponent extends AXChartComponent {
         const showXAxis = options.showXAxis !== false;
         const showYAxis = options.showYAxis !== false;
         // Internal left padding for Y-axis ticks/labels/title
-        const axisAndTickPadding = 10;
-        const yAxisTitleThickness = options.yAxisLabel ? 14 : 0; // rotated label thickness along X
-        const yAxisTitlePadding = options.yAxisLabel ? 14 : 0; // gap between ticks and title
+        const yAxisTitleThickness = options.yAxisLabel ? this.Y_AXIS_TITLE_THICKNESS : 0;
+        const yAxisTitlePadding = options.yAxisLabel ? this.Y_AXIS_TITLE_PADDING : 0;
         const leftPaddingForYAxis = showYAxis
-            ? this.calculateMaxYAxisTickLabelWidth() + axisAndTickPadding + yAxisTitlePadding + yAxisTitleThickness
+            ? this.calculateMaxYAxisTickLabelWidth() + this.AXIS_TICK_PADDING + yAxisTitlePadding + yAxisTitleThickness
             : 0;
         // Estimate internal bottom padding for X-axis ticks/labels/title
         let bottomPaddingForXAxis = 0;
@@ -274,41 +316,29 @@ class AXBarChartComponent extends AXChartComponent {
             const baseWidth = options.width ?? containerWidth;
             const workingWidth = Math.max(1, baseWidth - leftPaddingForYAxis);
             const dynamicFontSize = Math.max(10, Math.min(14, Math.round(workingWidth / 50)));
-            const estimatedLongestLabelWidth = longestLabel.length * dynamicFontSize * 0.65;
+            // Use truncated label length for calculation (same logic as actual rendering)
+            const maxLabelLength = barCount > this.MANY_ITEMS_THRESHOLD ? 10 : this.MAX_LABEL_LENGTH;
+            const effectiveLabelLength = Math.min(longestLabel.length, maxLabelLength);
+            const estimatedLongestLabelWidth = effectiveLabelLength * dynamicFontSize * 0.65;
             const availableWidthPerBar = barCount > 0 ? workingWidth / barCount : workingWidth;
-            const willRotate = options.rotateXAxisLabels === true
-                ? true
-                : options.rotateXAxisLabels === false
-                    ? false
-                    : estimatedLongestLabelWidth > availableWidthPerBar;
+            const rotateOption = typeof options.rotateXAxisLabels === 'boolean' ? options.rotateXAxisLabels : undefined;
+            const willRotate = this.shouldLabelsRotate(rotateOption, estimatedLongestLabelWidth, availableWidthPerBar);
             const tickAreaHeight = willRotate
-                ? estimatedLongestLabelWidth * Math.SQRT1_2 + dynamicFontSize * Math.SQRT1_2 + 6
-                : dynamicFontSize + 8;
-            const gapBelowTicks = options.xAxisLabel && !willRotate ? 14 : 0; // matches renderer
-            const titleBlockHeight = options.xAxisLabel && !willRotate ? 24 : 0; // 14px font + ~10px gap
+                ? estimatedLongestLabelWidth * Math.SQRT1_2 + dynamicFontSize * Math.SQRT1_2 + this.TICK_AREA_PADDING
+                : dynamicFontSize + this.TICK_AREA_PADDING + 2;
+            const gapBelowTicks = options.xAxisLabel && !willRotate ? this.X_AXIS_TITLE_GAP : 0;
+            const titleBlockHeight = options.xAxisLabel && !willRotate ? this.X_AXIS_TITLE_BLOCK_HEIGHT : 0;
             bottomPaddingForXAxis = tickAreaHeight + gapBelowTicks + titleBlockHeight;
         }
         // Determine plotting dimensions with sensible fallbacks
-        const fallbackPlotHeight = 240; // ensures visible plot when container has no height
         const baseWidth = options.width ?? containerWidth;
-        const totalWidth = Math.max(200, baseWidth > 0 ? baseWidth : 200);
+        const totalWidth = Math.max(this.MIN_TOTAL_WIDTH, baseWidth > 0 ? baseWidth : this.MIN_TOTAL_WIDTH);
         const plotWidth = Math.max(0, totalWidth - leftPaddingForYAxis);
-        let plotHeight;
-        if (options.height && options.height > 0) {
-            plotHeight = Math.max(120, options.height - bottomPaddingForXAxis);
-        }
-        else if (containerHeight > 0) {
-            plotHeight = Math.max(120, containerHeight - bottomPaddingForXAxis, fallbackPlotHeight);
-        }
-        else {
-            plotHeight = fallbackPlotHeight;
-        }
+        const plotHeight = this.calculatePlotHeight(options.height, containerHeight, bottomPaddingForXAxis);
         this.width = plotWidth;
         this.height = plotHeight;
         // Create SVG with explicit pixel dimensions to avoid collapse
-        // Add a small internal top padding to avoid clipping the top-most Y-axis label
-        const topPaddingForTopEdge = 6;
-        const totalHeight = this.height + bottomPaddingForXAxis + topPaddingForTopEdge;
+        const totalHeight = this.height + bottomPaddingForXAxis + this.TOP_EDGE_PADDING;
         const svg = this.d3
             .select(containerElement)
             .append('svg')
@@ -321,17 +351,38 @@ class AXBarChartComponent extends AXChartComponent {
         this.chart = this.svg
             .append('g')
             .attr('class', 'chart-content')
-            .attr('transform', `translate(${leftPaddingForYAxis},${topPaddingForTopEdge})`);
+            .attr('transform', `translate(${leftPaddingForYAxis},${this.TOP_EDGE_PADDING})`);
+    }
+    /**
+     * Calculates plot height based on options and container dimensions
+     */
+    calculatePlotHeight(optionHeight, containerHeight, bottomPadding) {
+        if (optionHeight && optionHeight > 0) {
+            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 this.FALLBACK_PLOT_HEIGHT;
+    }
+    /**
+     * Determines if X-axis labels should rotate
+     */
+    shouldLabelsRotate(rotateOption, estimatedWidth, availableWidth) {
+        if (rotateOption === true)
+            return true;
+        if (rotateOption === false)
+            return false;
+        return estimatedWidth > availableWidth;
     }
-    // calculateMargins was unused; removed to simplify and reduce maintenance surface
     /**
      * Creates x and y scales for the chart
      */
     setupScales(data) {
-        // Get the bar width percentage (default 80%)
-        const barWidthPercent = this.effectiveOptions().barWidth ?? 60 / 100;
+        // 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(0.1, 1 - barWidthPercent);
+        const padding = Math.max(this.MIN_PADDING, 1 - barWidthPercent);
         // Create x scale (band scale for categorical data)
         this.xScale = this.d3
             .scaleBand()
@@ -339,9 +390,12 @@ class AXBarChartComponent extends AXChartComponent {
             .range([0, this.width])
             .padding(padding);
         // Create y scale (linear scale for values)
+        // Support negative values by calculating min/max
+        const minValue = this.d3.min(data, (d) => d.value) || 0;
+        const maxValue = this.d3.max(data, (d) => d.value) || 0;
         this.yScale = this.d3
             .scaleLinear()
-            .domain([0, this.d3.max(data, (d) => d.value) || 0])
+            .domain([Math.min(0, minValue), Math.max(0, maxValue)])
             .nice()
             .range([this.height, 0]);
     }
@@ -349,18 +403,21 @@ class AXBarChartComponent extends AXChartComponent {
      * Creates x and y scales for clustered charts
      */
     setupScalesClustered(groups) {
-        const seriesLabels = groups.length > 0 ? this.getClusterSeriesLabels(groups) : [];
+        const seriesLabels = this.getClusterSeriesLabels(groups);
         const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
         // Outer band for clusters
-        const outerPadding = 0.2;
         this.xScale = this.d3
             .scaleBand()
             .domain(groups.map((g) => g.id))
             .range([0, this.width])
-            .padding(outerPadding);
+            .padding(this.OUTER_PADDING_CLUSTERED);
         // Inner band for series
-        this.xSubScale = this.d3.scaleBand().domain(visibleSeries).range([0, this.xScale.bandwidth()]).padding(0.1);
-        // Y scale across all visible values
+        this.xSubScale = this.d3
+            .scaleBand()
+            .domain(visibleSeries)
+            .range([0, this.xScale.bandwidth()])
+            .padding(this.INNER_PADDING_CLUSTERED);
+        // Y scale across all visible values (support negative values)
         const allVisibleValues = [];
         for (const g of groups) {
             visibleSeries.forEach((_, idx) => {
@@ -369,8 +426,13 @@ class AXBarChartComponent extends AXChartComponent {
                     allVisibleValues.push(item.value);
             });
         }
+        const yMin = this.d3.min(allVisibleValues) || 0;
         const yMax = this.d3.max(allVisibleValues) || 0;
-        this.yScale = this.d3.scaleLinear().domain([0, yMax]).nice().range([this.height, 0]);
+        this.yScale = this.d3
+            .scaleLinear()
+            .domain([Math.min(0, yMin), Math.max(0, yMax)])
+            .nice()
+            .range([this.height, 0]);
     }
     /**
      * Creates x and y axes with grid lines
@@ -396,8 +458,20 @@ class AXBarChartComponent extends AXChartComponent {
         this.buildXAxisCommon(axesGroup, idToLabel, options);
     }
     createYAxis(axesGroup, options) {
-        // Create Y axis
-        this.yAxis = axesGroup.append('g').attr('class', 'ax-bar-chart-axis-y').call(this.d3.axisLeft(this.yScale));
+        // Create Y axis with smart number formatting
+        const yAxisGenerator = this.d3.axisLeft(this.yScale).tickFormat((value) => {
+            const numValue = typeof value === 'number' ? value : value.valueOf();
+            return formatLargeNumber(numValue);
+        });
+        // Reduce tick count for better readability
+        const maxValue = this.yScale.domain()[1];
+        if (maxValue > 1e6) {
+            yAxisGenerator.ticks(6); // Fewer ticks for large numbers
+        }
+        else if (maxValue > 1e3) {
+            yAxisGenerator.ticks(8);
+        }
+        this.yAxis = axesGroup.append('g').attr('class', 'ax-bar-chart-axis-y').call(yAxisGenerator);
         // Style the axis text
         const dynamicFontSize = this.getYAxisTickFontSizeBasedOnHeight();
         this.yAxis
@@ -428,14 +502,14 @@ class AXBarChartComponent extends AXChartComponent {
         const labels = Array.from(idToLabel.values());
         const longestLabel = labels.reduce((a, b) => (a.length > b.length ? a : b), '');
         const estimatedWidth = longestLabel.length * fontSize * this.CHAR_WIDTH_RATIO;
-        // Heuristic: avoid rotation when there are few categories (<= 6) even if estimation is slightly larger
+        // Heuristic: avoid rotation when there are few categories even if estimation is slightly larger
         const domainCount = this.xScale.domain().length;
-        if (domainCount <= 6) {
-            return estimatedWidth > step * 1.4; // be more tolerant for small datasets
+        if (domainCount <= this.SMALL_DATASET_THRESHOLD) {
+            return estimatedWidth > step * this.ROTATION_TOLERANCE_SMALL_DATASET;
         }
         return estimatedWidth > step;
     }
-    createXAxisTitle(axesGroup, title, tickAreaHeight, gapBelowTicks = 8) {
+    createXAxisTitle(axesGroup, title, tickAreaHeight, gapBelowTicks = this.TICK_AREA_GAP) {
         // Title positioned directly below tick area with a consistent gap
         const labelY = this.height + tickAreaHeight + gapBelowTicks;
         axesGroup
@@ -446,7 +520,7 @@ class AXBarChartComponent extends AXChartComponent {
             .attr('x', this.width / 2)
             .attr('y', labelY)
             .attr('direction', 'ltr')
-            .style('font-size', '14px')
+            .style('font-size', `${this.X_AXIS_TITLE_FONT_SIZE}px`)
             .style('font-weight', '500')
             .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
             .text(title);
@@ -458,7 +532,7 @@ class AXBarChartComponent extends AXChartComponent {
         // Chart group is translated by (margin.left, margin.top)
         // So Y-axis is at X = margin.left in SVG coordinates
         const maxTickLabelWidth = this.calculateMaxYAxisTickLabelWidth();
-        const padding = 20; // Increased padding between tick labels and axis title
+        const padding = this.Y_AXIS_PADDING;
         // Position title to the left of the tick labels
         // Since text-anchor: end aligns the text to the Y-axis, we need to go further left
         const labelY = -maxTickLabelWidth - padding;
@@ -499,9 +573,9 @@ class AXBarChartComponent extends AXChartComponent {
             const visibleData = raw.filter((d) => !this.isBarHidden(d.id));
             maxValue = visibleData.reduce((acc, d) => (d.value > acc ? d.value : acc), 0);
         }
-        const tickLabelText = Number.isFinite(maxValue) ? maxValue.toLocaleString() : '00000';
-        const fontSize = 13; // Approximate font size for Y-axis tick labels
-        return tickLabelText.length * fontSize * 0.6 + 8; // Character width + padding
+        // Use formatted number for width calculation
+        const tickLabelText = Number.isFinite(maxValue) ? formatLargeNumber(maxValue) : '00000';
+        return tickLabelText.length * this.DEFAULT_FONT_SIZE * this.FONT_WIDTH_MULTIPLIER + this.FONT_PADDING;
     }
     createGridLines() {
         this.chart
@@ -592,28 +666,29 @@ class AXBarChartComponent extends AXChartComponent {
                 .style('font-weight', '500')
                 .style('fill', 'rgb(var(--ax-comp-bar-chart-data-labels-color))')
                 .style('opacity', 0) // Start invisible for animation
-                .text((d) => d.value);
+                .text((d) => {
+                // Format large numbers in data labels
+                return d.value >= 1000 ? formatLargeNumber(d.value) : d.value;
+            });
             // Animate data labels with smart positioning to avoid clipping
+            const animationDelay = this.effectiveOptions().animationDelay ?? this.DEFAULT_ANIMATION_DELAY;
             barGroups
                 .selectAll('.ax-bar-chart-data-label')
                 .transition()
                 .duration(animationDuration)
-                .delay((d, i) => i * 50 + 100) // Slightly delayed after bar animation
+                .delay((d, i) => i * animationDelay + this.LABEL_ANIMATION_DELAY)
                 .attr('y', (d) => {
                 const barTop = this.yScale(d.value);
-                const labelOffset = 8;
-                const minTopSpace = 20; // Minimum space from top of chart
                 // If bar is near the top (100% or close), position label inside the bar
-                if (barTop < minTopSpace) {
-                    return barTop + labelOffset; // Position inside the bar
+                if (barTop < this.MIN_TOP_SPACE_FOR_LABEL) {
+                    return barTop + this.LABEL_OFFSET;
                 }
                 // Otherwise, position above the bar
-                return barTop - labelOffset;
+                return barTop - this.LABEL_OFFSET;
             })
                 .attr('data-inside-bar', (d) => {
                 const barTop = this.yScale(d.value);
-                const minTopSpace = 20;
-                return barTop < minTopSpace ? 'true' : 'false';
+                return barTop < this.MIN_TOP_SPACE_FOR_LABEL ? 'true' : 'false';
             })
                 .style('opacity', 1)
                 .ease(animationEasing);
@@ -626,7 +701,10 @@ class AXBarChartComponent extends AXChartComponent {
                 return;
             const barEl = this.d3.select(event.currentTarget).select('path');
             // Standard hover effect - darken the bar slightly and add a subtle shadow
-            barEl.transition().duration(150).style('filter', 'brightness(0.7) drop-shadow(0 0 2px rgba(0,0,0,0.1))');
+            barEl
+                .transition()
+                .duration(this.HOVER_TRANSITION_DURATION)
+                .style('filter', 'brightness(0.7) drop-shadow(0 0 2px rgba(0,0,0,0.1))');
             this.handleBarHover(event, d);
         })
             .on('mousemove', (event) => {
@@ -641,7 +719,7 @@ class AXBarChartComponent extends AXChartComponent {
                 return;
             const barEl = this.d3.select(event.currentTarget).select('path');
             // Remove hover effect
-            barEl.transition().duration(150).style('filter', null);
+            barEl.transition().duration(this.HOVER_TRANSITION_DURATION).style('filter', null);
             this._tooltipVisible.set(false);
         })
             .on('click', (event, d) => {
@@ -651,10 +729,11 @@ class AXBarChartComponent extends AXChartComponent {
             }
         });
         // Add animation
+        const animationDelay = this.effectiveOptions().animationDelay ?? this.DEFAULT_ANIMATION_DELAY;
         bars
             .transition()
             .duration(animationDuration)
-            .delay((d, i) => i * 50) // Stagger each bar animation
+            .delay((d, i) => i * animationDelay)
             .attrTween('d', (d) => {
             const x = this.xScale(d.id);
             const width = this.xScale.bandwidth();
@@ -684,7 +763,7 @@ class AXBarChartComponent extends AXChartComponent {
      * Renders bars for clustered charts
      */
     renderBarsClustered(groups) {
-        const seriesLabels = groups.length > 0 ? this.getClusterSeriesLabels(groups) : [];
+        const seriesLabels = this.getClusterSeriesLabels(groups);
         const visibleSeries = seriesLabels.filter((s) => !this.hiddenSeries.has(s));
         this._initialAnimationComplete.set(false);
         const radius = this.effectiveOptions().cornerRadius;
@@ -712,13 +791,12 @@ class AXBarChartComponent extends AXChartComponent {
             .attr('d', (d) => {
             const x = this.xSubScale(d.seriesLabel);
             const width = this.xSubScale.bandwidth();
-            const y = this.height - 0.5; // initial height is zero
+            const y = this.height - 0.5;
             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];
-            const colorIndex = d.seriesIndex;
-            return item?.color || this.getColor(colorIndex);
+            return item?.color || this.getColor(d.seriesIndex);
         });
         if (this.effectiveOptions().showDataLabels !== false) {
             barGroups
@@ -732,35 +810,36 @@ class AXBarChartComponent extends AXChartComponent {
                 .style('fill', 'rgb(var(--ax-comp-bar-chart-data-labels-color))')
                 .style('opacity', 0)
                 .text((d) => {
-                const item = d.group.chartData[d.seriesIndex];
-                return item ? item.value : '';
+                const value = d.group.chartData[d.seriesIndex]?.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;
             barGroups
                 .selectAll('.ax-bar-chart-data-label')
                 .transition()
                 .duration(animationDuration)
-                .delay((_, i) => i * 50 + 100)
+                .delay((_d, i) => i * animationDelay + this.LABEL_ANIMATION_DELAY)
                 .attr('y', (d) => {
                 const item = d.group.chartData[d.seriesIndex];
                 if (!item)
                     return this.height;
                 const barTop = this.yScale(item.value);
-                const labelOffset = 8;
-                const minTopSpace = 20; // Minimum space from top of chart
                 // If bar is near the top (100% or close), position label inside the bar
-                if (barTop < minTopSpace) {
-                    return barTop + labelOffset; // Position inside the bar
+                if (barTop < this.MIN_TOP_SPACE_FOR_LABEL) {
+                    return barTop + this.LABEL_OFFSET;
                 }
                 // Otherwise, position above the bar
-                return barTop - labelOffset;
+                return barTop - this.LABEL_OFFSET;
             })
                 .attr('data-inside-bar', (d) => {
                 const item = d.group.chartData[d.seriesIndex];
                 if (!item)
                     return 'false';
                 const barTop = this.yScale(item.value);
-                const minTopSpace = 20;
-                return barTop < minTopSpace ? 'true' : 'false';
+                return barTop < this.MIN_TOP_SPACE_FOR_LABEL ? 'true' : 'false';
             })
                 .style('opacity', 1)
                 .ease(animationEasing);
@@ -770,7 +849,10 @@ class AXBarChartComponent extends AXChartComponent {
             if (!this._initialAnimationComplete())
                 return;
             const barEl = this.d3.select(event.currentTarget).select('path');
-            barEl.transition().duration(150).style('filter', 'brightness(0.7) drop-shadow(0 0 2px rgba(0,0,0,0.1))');
+            barEl
+                .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);
@@ -783,7 +865,7 @@ class AXBarChartComponent extends AXChartComponent {
             if (!this._initialAnimationComplete())
                 return;
             const barEl = this.d3.select(event.currentTarget).select('path');
-            barEl.transition().duration(150).style('filter', null);
+            barEl.transition().duration(this.HOVER_TRANSITION_DURATION).style('filter', null);
             this._tooltipVisible.set(false);
         })
             .on('click', (event, d) => {
@@ -793,10 +875,11 @@ class AXBarChartComponent extends AXChartComponent {
             if (item)
                 this.handleBarClick(event, item);
         });
+        const animationDelay = this.effectiveOptions().animationDelay ?? this.DEFAULT_ANIMATION_DELAY;
         bars
             .transition()
             .duration(animationDuration)
-            .delay((_, i) => i * 50)
+            .delay((_d, i) => i * animationDelay)
             .attrTween('d', (d) => {
             const x = this.xSubScale(d.seriesLabel);
             const width = this.xSubScale.bandwidth();
@@ -843,7 +926,7 @@ class AXBarChartComponent extends AXChartComponent {
             const percentage = total > 0 ? ((datum.value / total) * 100).toFixed(1) : '0';
             this._tooltipData.set({
                 title: group ? `${datum.tooltipLabel || datum.label} — ${group.label}` : datum.tooltipLabel || datum.label,
-                value: datum.value.toString(),
+                value: formatLargeNumber(datum.value),
                 percentage: `${percentage}%`,
                 color: color,
             });
@@ -1021,7 +1104,9 @@ class AXBarChartComponent extends AXChartComponent {
                 resetAll();
                 return;
             }
-            const targetBar = this.svg.selectAll('.ax-bar-chart-bar').filter((d) => d?.id === id);
+            const targetBar = this.svg
+                .selectAll('.ax-bar-chart-bar')
+                .filter((d) => d?.id === id);
             if (targetBar.empty())
                 return;
             const isCurrentlyHighlighted = targetBar.classed('ax-bar-chart-highlighted');
@@ -1046,7 +1131,9 @@ class AXBarChartComponent extends AXChartComponent {
             }
             return;
         }
-        const targetBars = this.svg.selectAll('.ax-bar-chart-bar').filter((_, i, nodes) => {
+        const targetBars = this.svg
+            .selectAll('.ax-bar-chart-bar')
+            .filter((_d, i, nodes) => {
             const node = nodes[i];
             return node.getAttribute('data-series') === id;
         });
@@ -1067,7 +1154,7 @@ class AXBarChartComponent extends AXChartComponent {
                 .style('transition', 'all 0.2s ease-in-out');
             this.svg
                 .selectAll('.ax-bar-chart-bar')
-                .filter((_, i, nodes) => nodes[i].getAttribute('data-series') !== id)
+                .filter((_d, i, nodes) => nodes[i].getAttribute('data-series') !== id)
                 .classed('ax-bar-chart-dimmed', true)
                 .attr('opacity', 0.5)
                 .style('transition', 'opacity 0.2s ease-in-out');
@@ -1138,18 +1225,63 @@ class AXBarChartComponent extends AXChartComponent {
     clearChartArea(containerElement) {
         this.d3.select(containerElement).selectAll('svg, .ax-chart-message-container').remove();
     }
+    /**
+     * Truncates long labels with ellipsis
+     */
+    truncateLabel(label, maxLength = this.MAX_LABEL_LENGTH) {
+        if (label.length <= maxLength)
+            return label;
+        return label.substring(0, maxLength - 1) + '…';
+    }
+    /**
+     * Gets adaptive font size for X-axis based on width and item count
+     */
     getXAxisTickFontSizeBasedOnWidth() {
-        return Math.max(10, Math.min(14, Math.round(this.width / 50)));
+        const itemCount = this.xScale.domain().length;
+        const baseSize = Math.round(this.width / 50);
+        // Reduce font size for many items
+        let adjustedSize = baseSize;
+        if (itemCount > this.VERY_MANY_ITEMS_THRESHOLD) {
+            adjustedSize = Math.round(baseSize * 0.7);
+        }
+        else if (itemCount > this.MANY_ITEMS_THRESHOLD) {
+            adjustedSize = Math.round(baseSize * 0.85);
+        }
+        return Math.max(this.MIN_FONT_SIZE_X_AXIS, Math.min(this.MAX_FONT_SIZE_X_AXIS, adjustedSize));
     }
+    /**
+     * Gets adaptive font size for Y-axis based on height
+     */
     getYAxisTickFontSizeBasedOnHeight() {
-        return Math.max(11, Math.min(15, Math.round(this.height / 30)));
+        const baseSize = Math.round(this.height / 30);
+        return Math.max(this.MIN_FONT_SIZE_Y_AXIS, Math.min(this.MAX_FONT_SIZE_Y_AXIS, baseSize));
     }
     buildXAxisCommon(axesGroup, idToLabel, options) {
+        const itemCount = this.xScale.domain().length;
+        // Smart tick reduction for many items
+        let tickValues = this.xScale.domain();
+        if (itemCount > this.VERY_MANY_ITEMS_THRESHOLD) {
+            // Show every 5th tick
+            tickValues = tickValues.filter((_d, i) => i % 5 === 0);
+        }
+        else if (itemCount > this.MANY_ITEMS_THRESHOLD) {
+            // Show every 2nd tick
+            tickValues = tickValues.filter((_d, i) => i % 2 === 0);
+        }
+        const axis = this.d3
+            .axisBottom(this.xScale)
+            .tickValues(tickValues)
+            .tickFormat((id) => {
+            const label = idToLabel.get(id) ?? String(id);
+            // Truncate long labels intelligently
+            const maxLength = itemCount > this.MANY_ITEMS_THRESHOLD ? 10 : this.MAX_LABEL_LENGTH;
+            return this.truncateLabel(label, maxLength);
+        });
         this.xAxis = axesGroup
             .append('g')
             .attr('class', 'ax-bar-chart-axis-x')
             .attr('transform', `translate(0,${this.height})`)
-            .call(this.d3.axisBottom(this.xScale).tickFormat((id) => idToLabel.get(id) ?? String(id)));
+            .call(axis);
         const dynamicFontSize = this.getXAxisTickFontSizeBasedOnWidth();
         const xAxisTicks = this.xAxis
             .selectAll('text')
@@ -1165,10 +1297,17 @@ class AXBarChartComponent extends AXChartComponent {
         if (options.xAxisLabel && !isRotated) {
             const tickNodes = (this.xAxis.selectAll('text').nodes() || []);
             const measuredTickHeight = tickNodes.length > 0
-                ? Math.max(...tickNodes.map((n) => (n && n.getBBox ? n.getBBox().height : dynamicFontSize)))
+                ? Math.max(...tickNodes.map((n) => {
+                    try {
+                        return n?.getBBox?.()?.height ?? dynamicFontSize;
+                    }
+                    catch {
+                        return dynamicFontSize;
+                    }
+                }))
                 : dynamicFontSize;
-            const tickAreaHeight = measuredTickHeight + 6;
-            const gapBelowTicks = 14;
+            const tickAreaHeight = measuredTickHeight + this.TICK_AREA_PADDING;
+            const gapBelowTicks = this.X_AXIS_TITLE_GAP;
             this.createXAxisTitle(axesGroup, options.xAxisLabel, tickAreaHeight, gapBelowTicks);
         }
     }
@@ -1185,10 +1324,10 @@ class AXBarChartComponent extends AXChartComponent {
         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: "20.3.6", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.6", 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:200px;--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;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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.9", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.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:200px;--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;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: AXBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", 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:200px;--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;display:flex;align-items:center;justify-content:center;border-radius:.5rem;background-color:rgba(var(--ax-comp-bar-chart-bg-color))}ax-bar-chart .ax-bar-chart svg{width:100%;height:100%;max-width:100%;max-height:100%;overflow:hidden}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 }] }] } });