@acorex/charts 0.0.1

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

@@ -0,0 +1,772 @@
+import { NXComponent } from '@acorex/cdk/common';
+import { AX_CHART_COLOR_PALETTE, getChartColor } from '@acorex/charts';
+import { AXChartTooltipComponent } from '@acorex/charts/chart-tooltip';
+import { AXPlatform } from '@acorex/core/platform';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import { AX_GLOBAL_CONFIG } from '@acorex/core/config';
+import { set } from 'lodash-es';
+
+const AXBarChartDefaultConfig = {
+    showXAxis: true,
+    showYAxis: true,
+    showGrid: true,
+    showDataLabels: true,
+    showTooltip: true,
+    barWidth: 80,
+    cornerRadius: 4,
+    animationDuration: 800,
+    animationEasing: 'cubic-out',
+};
+const AX_BAR_CHART_CONFIG = new InjectionToken('AX_BAR_CHART_CONFIG', {
+    providedIn: 'root',
+    factory: () => {
+        const global = inject(AX_GLOBAL_CONFIG);
+        set(global, 'chart.barChart', AXBarChartDefaultConfig);
+        return AXBarChartDefaultConfig;
+    },
+});
+function barChartConfig(config = {}) {
+    const result = {
+        ...AXBarChartDefaultConfig,
+        ...config,
+    };
+    return result;
+}
+
+/**
+ * Bar Chart Component
+ * Renders data as vertical bars with interactive hover effects and animations
+ */
+class AXBarChartComponent extends NXComponent {
+    // Inputs
+    /** Chart data input */
+    data = input([]);
+    /** Chart options input */
+    options = input({});
+    // Outputs
+    /** Emitted when a bar is clicked */
+    barClick = output();
+    // Chart container reference
+    chartContainerEl = viewChild.required('chartContainer');
+    // D3 reference - loaded asynchronously
+    d3;
+    // Chart elements
+    svg;
+    chart;
+    xScale;
+    yScale;
+    xAxis;
+    yAxis;
+    // Chart dimensions
+    width;
+    height;
+    margin = { top: 20, right: 20, bottom: 30, left: 40 };
+    // Animation state
+    _initialAnimationComplete = signal(false);
+    // Tooltip state
+    _tooltipVisible = signal(false);
+    _tooltipPosition = signal({ x: 0, y: 0 });
+    _tooltipData = signal({
+        title: '',
+        value: '0',
+        percentage: '0%',
+        color: '',
+    });
+    // Signals for component state
+    _initialized = signal(false);
+    _rendered = signal(false);
+    // Tooltip accessors
+    tooltipVisible = this._tooltipVisible.asReadonly();
+    tooltipPosition = this._tooltipPosition.asReadonly();
+    tooltipData = this._tooltipData.asReadonly();
+    // Inject configuration
+    configToken = inject(AX_BAR_CHART_CONFIG);
+    // Inject the chart colors
+    chartColors = inject(AX_CHART_COLOR_PALETTE);
+    // Inject AXPlatform
+    platform = inject(AXPlatform);
+    // Configuration with defaults
+    effectiveOptions = computed(() => {
+        return {
+            ...this.configToken,
+            ...this.options(),
+        };
+    });
+    // Track hidden bars
+    hiddenBars = new Set();
+    constructor() {
+        super();
+        // Dynamically load D3 and initialize the chart when the component is ready
+        afterNextRender(() => {
+            this._initialized.set(true);
+            this.loadD3();
+            // Create chart after D3 is loaded and container is available
+            if (this.d3 && this.chartContainerEl()) {
+                this.createChart();
+                this._rendered.set(true);
+            }
+        });
+        // Watch for changes to redraw the chart
+        effect(() => {
+            // Access inputs to track them
+            this.data();
+            this.effectiveOptions();
+            // Only update if already rendered
+            if (this._rendered()) {
+                this.updateChart();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.cleanupChart();
+    }
+    /**
+     * Loads D3.js dynamically
+     */
+    async loadD3() {
+        try {
+            this.d3 = await import('d3');
+            // If container is ready, create chart
+            if (this._initialized() && this.chartContainerEl()) {
+                this.createChart();
+                this._rendered.set(true);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load D3.js:', error);
+        }
+    }
+    /**
+     * Creates the bar chart SVG and renders all elements
+     */
+    createChart() {
+        if (!this.d3 || !this.chartContainerEl()?.nativeElement)
+            return;
+        const containerElement = this.chartContainerEl().nativeElement;
+        const data = this.data() || [];
+        // Filter out hidden bars for visible data
+        const visibleData = data.filter((d) => !this.isBarHidden(d.id));
+        // Clear existing chart
+        this.d3.select(containerElement).selectAll('svg').remove();
+        // Early return if no data
+        if (!data.length) {
+            this.showNoDataMessage(containerElement);
+            return;
+        }
+        // Early return if all bars are hidden
+        if (visibleData.length === 0) {
+            this.showAllBarsHiddenMessage(containerElement);
+            return;
+        }
+        // Get options and setup dimensions
+        const chartOptions = this.effectiveOptions();
+        this.setupDimensions(containerElement, chartOptions);
+        // Create scales and axes using visible data
+        this.setupScales(visibleData);
+        this.createAxes(chartOptions);
+        // Render the bars
+        this.renderBars(data);
+    }
+    /**
+     * Updates the chart when inputs change
+     */
+    updateChart() {
+        this.createChart();
+    }
+    /**
+     * Cleans up chart resources
+     */
+    cleanupChart() {
+        if (this.svg) {
+            this.d3?.select(this.chartContainerEl()?.nativeElement).selectAll('svg').remove();
+            this.svg = null;
+            this.chart = null;
+        }
+        this._tooltipVisible.set(false);
+    }
+    /**
+     * Sets up chart dimensions and creates SVG with responsive attributes
+     */
+    setupDimensions(containerElement, options) {
+        // Calculate margins based on options
+        this.calculateMargins(options);
+        // Get container dimensions
+        const containerWidth = containerElement.clientWidth;
+        const containerHeight = containerElement.clientHeight;
+        // If options specify width and height, use those, otherwise default to container size
+        const minDim = Math.min(200, containerWidth, containerHeight); // Ensure reasonable minimum
+        if (options.width && options.height) {
+            // Explicit dimensions provided
+            this.width = options.width - this.margin.left - this.margin.right;
+            this.height = options.height - this.margin.top - this.margin.bottom;
+        }
+        else {
+            // Responsive dimensions
+            this.width = Math.max(containerWidth, minDim) - this.margin.left - this.margin.right;
+            this.height = Math.max(containerHeight, minDim) - this.margin.top - this.margin.bottom;
+        }
+        // Create responsive SVG that scales with its container
+        const svg = this.d3
+            .select(containerElement)
+            .append('svg')
+            .attr('width', '100%')
+            .attr('height', '100%')
+            .attr('viewBox', `0 0 ${this.width + this.margin.left + this.margin.right} ${this.height + this.margin.top + this.margin.bottom}`)
+            .attr('preserveAspectRatio', 'xMidYMid meet');
+        this.svg = svg;
+        // Create chart group with margins
+        this.chart = this.svg.append('g').attr('transform', `translate(${this.margin.left},${this.margin.top})`);
+    }
+    /**
+     * Calculates chart margins based on options
+     */
+    calculateMargins(options) {
+        // Start with default margins
+        this.margin = {
+            top: 20,
+            right: 20,
+            bottom: 30,
+            left: 40,
+        };
+        // Adjust margins if axis labels are present
+        if (options.xAxisLabel) {
+            const xLabelLength = options.xAxisLabel.length;
+            const extraBottomMargin = Math.min(20, Math.max(10, xLabelLength * 0.8));
+            this.margin.bottom = Math.max(this.margin.bottom, 30 + extraBottomMargin);
+        }
+        if (options.yAxisLabel) {
+            const yLabelLength = options.yAxisLabel.length;
+            const extraLeftMargin = Math.min(20, Math.max(10, yLabelLength * 0.8));
+            this.margin.left = Math.max(this.margin.left, 40 + extraLeftMargin);
+        }
+        // Ensure minimum margins for axes
+        if (options.showXAxis !== false) {
+            this.margin.bottom = Math.max(this.margin.bottom, 35);
+        }
+        if (options.showYAxis !== false) {
+            this.margin.left = Math.max(this.margin.left, 45);
+        }
+    }
+    /**
+     * Creates x and y scales for the chart
+     */
+    setupScales(data) {
+        // Get the bar width percentage (default 80%)
+        const barWidthPercent = this.effectiveOptions().barWidth ?? 60 / 100;
+        // Calculate padding based on barWidth (inverse relationship)
+        const padding = Math.max(0.1, 1 - barWidthPercent);
+        // Create x scale (band scale for categorical data)
+        this.xScale = this.d3
+            .scaleBand()
+            .domain(data.map((d) => d.label))
+            .range([0, this.width])
+            .padding(padding);
+        // Create y scale (linear scale for values)
+        this.yScale = this.d3
+            .scaleLinear()
+            .domain([0, this.d3.max(data, (d) => d.value) || 0])
+            .nice()
+            .range([this.height, 0]);
+    }
+    /**
+     * Creates x and y axes with grid lines
+     */
+    createAxes(options) {
+        // Only create axes if they are enabled in options
+        const showXAxis = options.showXAxis !== false;
+        const showYAxis = options.showYAxis !== false;
+        const showGrid = options.showGrid !== false;
+        const isRtl = this.platform.isRtl();
+        // Create a group for all axes
+        const axesGroup = this.chart.append('g').attr('class', 'ax-bar-chart-axes');
+        if (showXAxis) {
+            // Create X axis
+            this.xAxis = axesGroup
+                .append('g')
+                .attr('class', 'ax-bar-chart-axis-x')
+                .attr('transform', `translate(0,${this.height})`)
+                .call(this.d3.axisBottom(this.xScale));
+            // Style the axis text
+            const dynamicXAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.width / 45)));
+            this.xAxis
+                .selectAll('text')
+                .style('font-size', `${dynamicXAxisTickFontSize}px`)
+                .style('font-weight', '400')
+                .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)');
+            // Style all lines in the x-axis (path, ticks)
+            this.xAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
+            // Add X axis label if provided
+            if (options.xAxisLabel) {
+                const labelY = this.height + this.margin.bottom * 0.8;
+                axesGroup
+                    .append('text')
+                    .attr('class', 'ax-bar-chart-axis-label ax-x-axis-label')
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'middle')
+                    .attr('x', this.width / 2)
+                    .attr('y', labelY)
+                    .style('font-size', '14px')
+                    .style('font-weight', '500')
+                    .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
+                    .text(options.xAxisLabel);
+            }
+        }
+        if (showYAxis) {
+            // Create Y axis
+            this.yAxis = axesGroup.append('g').attr('class', 'ax-bar-chart-axis-y').call(this.d3.axisLeft(this.yScale));
+            // Style the axis text
+            const dynamicYAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.height / 30)));
+            const yTickTexts = this.yAxis
+                .selectAll('text')
+                .style('font-size', `${dynamicYAxisTickFontSize}px`)
+                .style('font-weight', '400')
+                .style('fill', 'rgba(var(--ax-comp-bar-chart-labels-color), 0.7)');
+            if (isRtl) {
+                yTickTexts.attr('text-anchor', 'start');
+            }
+            // Style all lines in the y-axis (path, ticks)
+            this.yAxis.selectAll('line, path').style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))');
+            // Add Y axis label if provided
+            if (options.yAxisLabel) {
+                const labelX = -this.height / 2;
+                const labelY = -this.margin.left * 0.8;
+                axesGroup
+                    .append('text')
+                    .attr('class', 'ax-bar-chart-axis-label ax-y-axis-label')
+                    .attr('text-anchor', 'middle')
+                    .attr('dominant-baseline', 'middle')
+                    .attr('transform', 'rotate(-90)')
+                    .attr('x', labelX)
+                    .attr('y', labelY)
+                    .style('font-size', '14px')
+                    .style('font-weight', '500')
+                    .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
+                    .text(options.yAxisLabel);
+            }
+        }
+        if (showGrid) {
+            // Add horizontal grid lines
+            this.chart
+                .append('g')
+                .attr('class', 'ax-bar-chart-grid')
+                .call(this.d3
+                .axisLeft(this.yScale)
+                .tickSize(-this.width)
+                .tickFormat(() => ''))
+                .selectAll('line')
+                .style('stroke', 'rgb(var(--ax-comp-bar-chart-grid-lines-color))')
+                .style('stroke-opacity', 0.2);
+            // Remove unneeded elements from grid
+            this.chart.select('.ax-bar-chart-grid').selectAll('path, text').remove();
+        }
+    }
+    /**
+     * Renders the bars with animations
+     */
+    renderBars(data) {
+        // Filter out hidden bars
+        const visibleData = data.filter((d) => !this.isBarHidden(d.id));
+        const originalFullData = this.data(); // Get the original full data set
+        // Reset animation state
+        this._initialAnimationComplete.set(false);
+        // Get corner radius from options
+        const radius = this.effectiveOptions().cornerRadius;
+        // Get animation options
+        const animationDuration = this.effectiveOptions().animationDuration;
+        const animationEasing = this.getEasingFunction(this.effectiveOptions().animationEasing);
+        // Create a container for all bars
+        const barsContainer = this.chart.append('g').attr('class', 'ax-bar-chart-bars-container');
+        // Create groups for each bar to handle transformations
+        const barGroups = barsContainer
+            .selectAll('.ax-bar-chart-bar-group')
+            .data(visibleData)
+            .enter()
+            .append('g')
+            .style('cursor', 'pointer')
+            .attr('class', 'ax-bar-chart-bar-group');
+        // Add bars inside groups
+        const bars = barGroups
+            .append('rect')
+            .attr('class', 'ax-bar-chart-bar')
+            .attr('x', (d) => this.xScale(d.label))
+            .attr('width', this.xScale.bandwidth())
+            .attr('y', this.height) // Start from bottom for animation
+            .attr('height', 0) // Start with height 0 for animation
+            .attr('rx', radius) // Rounded corners
+            .attr('ry', radius) // Rounded corners
+            .attr('fill', (d) => {
+            // Find the index of the current bar (d) in the original data array
+            const originalIndex = originalFullData.findIndex((item) => item.id === d.id);
+            // Use the original color if provided, otherwise get color from palette using original index
+            // Fallback to index 0 if not found, though this shouldn't happen with valid data.
+            return d.color || this.getColor(originalIndex !== -1 ? originalIndex : 0);
+        });
+        // Add data labels if they're enabled
+        if (this.effectiveOptions().showDataLabels !== false) {
+            barGroups
+                .append('text')
+                .attr('class', 'ax-bar-chart-data-label')
+                .attr('text-anchor', 'middle')
+                .attr('x', (d) => this.xScale(d.label) + this.xScale.bandwidth() / 2)
+                .attr('y', this.height) // Start from bottom for animation
+                .style('font-size', 'clamp(8px, 2vmin, 12px)')
+                .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);
+            // Animate data labels
+            barGroups
+                .selectAll('.ax-bar-chart-data-label')
+                .transition()
+                .duration(animationDuration)
+                .delay((d, i) => i * 50 + 100) // Slightly delayed after bar animation
+                .attr('y', (d) => this.yScale(d.value) - 8) // Position above bar
+                .style('opacity', 1)
+                .ease(animationEasing);
+        }
+        // Set up event handlers on each group
+        barGroups
+            .on('mouseenter', (event, d) => {
+            // Only apply hover effects if initial animation is complete
+            if (!this._initialAnimationComplete())
+                return;
+            const barEl = this.d3.select(event.currentTarget).select('rect');
+            // 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))');
+            this.handleBarHover(event, d);
+        })
+            .on('mousemove', (event) => {
+            // Only update tooltip if initial animation is complete
+            if (this._initialAnimationComplete()) {
+                this.updateTooltipPosition(event);
+            }
+        })
+            .on('mouseleave', (event, d) => {
+            // Only apply hover effects if initial animation is complete
+            if (!this._initialAnimationComplete())
+                return;
+            const barEl = this.d3.select(event.currentTarget).select('rect');
+            // Remove hover effect
+            barEl.transition().duration(150).style('filter', null);
+            this._tooltipVisible.set(false);
+        })
+            .on('click', (event, d) => {
+            // Only trigger click events if initial animation is complete
+            if (this._initialAnimationComplete()) {
+                this.handleBarClick(event, d);
+            }
+        });
+        // Add animation
+        bars
+            .transition()
+            .duration(animationDuration)
+            .delay((d, i) => i * 50) // Stagger each bar animation
+            .attr('y', (d) => this.yScale(d.value))
+            .attr('height', (d) => this.height - this.yScale(d.value))
+            .ease(animationEasing) // Use the configured easing function
+            .end() // Wait for all animations to complete
+            .then(() => {
+            // Mark animation as complete to enable hover effects
+            this._initialAnimationComplete.set(true);
+        });
+    }
+    /**
+     * Gets the appropriate D3 easing function based on the option string
+     */
+    getEasingFunction(easing) {
+        switch (easing) {
+            case 'linear':
+                return this.d3.easeLinear;
+            case 'ease':
+                return this.d3.easePolyInOut;
+            case 'ease-in':
+                return this.d3.easePolyIn;
+            case 'ease-out':
+                return this.d3.easePolyOut;
+            case 'ease-in-out':
+                return this.d3.easePolyInOut;
+            case 'cubic':
+                return this.d3.easeCubic;
+            case 'cubic-in':
+                return this.d3.easeCubicIn;
+            case 'cubic-out':
+                return this.d3.easeCubicOut;
+            case 'cubic-in-out':
+                return this.d3.easeCubicInOut;
+            default:
+                return this.d3.easeCubicOut; // Default easing
+        }
+    }
+    /**
+     * Handles bar hover event and shows tooltip
+     */
+    handleBarHover(event, datum) {
+        if (this.effectiveOptions().showTooltip !== false) {
+            const index = this.data().findIndex((item) => item.id === datum.id);
+            const color = datum.color || this.getColor(index);
+            // Calculate percentage of total
+            const total = this.data().reduce((sum, item) => sum + item.value, 0);
+            const percentage = total > 0 ? ((datum.value / total) * 100).toFixed(1) : '0';
+            this._tooltipData.set({
+                title: datum.tooltipLabel || datum.label,
+                value: datum.value.toString(),
+                percentage: `${percentage}%`,
+                color: color,
+            });
+            this.updateTooltipPosition(event);
+            this._tooltipVisible.set(true);
+        }
+    }
+    /**
+     * Updates tooltip position based on mouse coordinates
+     */
+    updateTooltipPosition(event) {
+        const container = this.chartContainerEl().nativeElement.getBoundingClientRect();
+        const tooltipEl = this.chartContainerEl().nativeElement.querySelector('.chart-tooltip');
+        if (!tooltipEl) {
+            const x = event.clientX - container.left;
+            const y = event.clientY - container.top;
+            this._tooltipPosition.set({ x, y });
+            return;
+        }
+        const tooltipRect = tooltipEl.getBoundingClientRect();
+        let x = event.clientX - container.left;
+        const y = event.clientY - container.top;
+        // Adjust position if near the right edge
+        if (x + tooltipRect.width + 10 > container.width) {
+            x = x - tooltipRect.width - 10;
+        }
+        else {
+            x = x + 10;
+        }
+        this._tooltipPosition.set({ x, y });
+    }
+    /**
+     * Handles bar click event
+     */
+    handleBarClick(event, datum) {
+        this.barClick.emit({ item: datum, event: { nativeEvent: event, sender: this } });
+    }
+    /**
+     * Shows a message when no data is available
+     */
+    showNoDataMessage(containerElement) {
+        // Clear existing contents first
+        this.d3.select(containerElement).selectAll('*').remove();
+        const messageContainer = this.d3
+            .select(containerElement)
+            .append('div')
+            // Apply generic container class, specific bar chart background class, and existing specific class
+            .attr('class', 'ax-chart-message-container ax-bar-chart-message-background ax-bar-chart-no-data-message');
+        // Add an icon
+        messageContainer
+            .append('div')
+            // Apply generic icon class and specific bar chart icon class
+            .attr('class', 'ax-chart-message-icon ax-bar-chart-no-data-icon')
+            .html('<i class="fa-light fa-chart-column fa-2x"></i>');
+        // Add text message
+        messageContainer
+            .append('div')
+            // Apply generic text class and specific bar chart text class
+            .attr('class', 'ax-chart-message-text ax-bar-chart-no-data-text')
+            .text('No data available');
+        // Add help text
+        messageContainer
+            .append('div')
+            // Apply generic help class and specific bar chart help class
+            .attr('class', 'ax-chart-message-help ax-bar-chart-no-data-help')
+            .text('Please provide data to display the chart');
+    }
+    /**
+     * Shows a message when all bars are hidden
+     */
+    showAllBarsHiddenMessage(containerElement) {
+        // Clear existing contents first
+        this.d3.select(containerElement).selectAll('*').remove();
+        const messageContainer = this.d3
+            .select(containerElement)
+            .append('div')
+            // Apply generic container class, specific bar chart background class, and existing specific class
+            .attr('class', 'ax-chart-message-container ax-bar-chart-message-background ax-bar-chart-no-data-message');
+        // Add an icon
+        messageContainer
+            .append('div')
+            // Apply generic icon class and specific bar chart icon class
+            .attr('class', 'ax-chart-message-icon ax-bar-chart-no-data-icon')
+            .html('<i class="fa-light fa-eye-slash fa-2x"></i>');
+        // Add text message
+        messageContainer
+            .append('div')
+            // Apply generic text class and specific bar chart text class
+            .attr('class', 'ax-chart-message-text ax-bar-chart-no-data-text')
+            .text('All bars are hidden');
+        // Add help text
+        messageContainer
+            .append('div')
+            // Apply generic help class and specific bar chart help class
+            .attr('class', 'ax-chart-message-help ax-bar-chart-no-data-help')
+            .text('Click on legend items to show bars');
+    }
+    /**
+     * Gets the color for a bar based on its index
+     */
+    getColor(index) {
+        return getChartColor(index, this.chartColors);
+    }
+    /**
+     * Checks if a bar is hidden
+     */
+    isBarHidden(id) {
+        return this.hiddenBars.has(id);
+    }
+    /**
+     * Implementation of AXChartLegendCompatible interface
+     * Returns legend items based on the chart data
+     */
+    getLegendItems() {
+        const data = this.data() || [];
+        const total = data.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
+        return data.map((item, index) => {
+            const value = typeof item.value === 'number' ? item.value : 0;
+            const percentage = total > 0 ? (value / total) * 100 : 0;
+            return {
+                id: item.id,
+                name: item.label || `Item ${index + 1}`,
+                value: item.value,
+                percentage,
+                color: item.color || this.getColor(index),
+                hidden: this.isBarHidden(item.id),
+            };
+        });
+    }
+    /**
+     * Implementation of AXChartLegendCompatible interface
+     * Highlights a specific bar by ID
+     */
+    highlightSegment(id) {
+        if (!this.svg)
+            return;
+        // If the bar is hidden, we shouldn't try to highlight it
+        if (id !== null && this.isBarHidden(id)) {
+            // Just unhighlight everything when trying to highlight a hidden bar
+            this.svg
+                .selectAll('.ax-bar-chart-bar')
+                .classed('ax-bar-chart-highlighted', false)
+                .classed('ax-bar-chart-dimmed', false)
+                .attr('opacity', 1)
+                .attr('filter', null)
+                .attr('stroke', null)
+                .attr('stroke-width', null)
+                .attr('stroke-opacity', null);
+            return;
+        }
+        if (id === null) {
+            // If id is null, unhighlight everything
+            this.svg
+                .selectAll('.ax-bar-chart-bar')
+                .classed('ax-bar-chart-highlighted', false)
+                .classed('ax-bar-chart-dimmed', false)
+                .attr('opacity', 1)
+                .attr('filter', null)
+                .attr('stroke', null)
+                .attr('stroke-width', null)
+                .attr('stroke-opacity', null);
+            return;
+        }
+        // Find the target bar
+        const targetBar = this.svg.selectAll('.ax-bar-chart-bar').filter((d) => d?.id === id);
+        // Safety check - if no matching bar is found, do nothing
+        if (targetBar.empty())
+            return;
+        // Check if the target bar is currently highlighted
+        const isCurrentlyHighlighted = targetBar.classed('ax-bar-chart-highlighted');
+        if (isCurrentlyHighlighted) {
+            // If already highlighted, unhighlight all bars
+            this.svg
+                .selectAll('.ax-bar-chart-bar')
+                .classed('ax-bar-chart-highlighted', false)
+                .classed('ax-bar-chart-dimmed', false)
+                .attr('opacity', 1)
+                .attr('filter', null)
+                .attr('stroke', null)
+                .attr('stroke-width', null)
+                .attr('stroke-opacity', null);
+        }
+        else {
+            // Reset all bars first
+            this.svg
+                .selectAll('.ax-bar-chart-bar')
+                .classed('ax-bar-chart-highlighted', false)
+                .classed('ax-bar-chart-dimmed', false)
+                .attr('opacity', 1)
+                .attr('filter', null)
+                .attr('stroke', null)
+                .attr('stroke-width', null)
+                .attr('stroke-opacity', null);
+            // Highlight the target bar
+            targetBar
+                .classed('ax-bar-chart-highlighted', true)
+                .attr('filter', 'drop-shadow(0 0 4px rgba(0, 0, 0, 0.3))')
+                .attr('stroke', '#000')
+                .attr('stroke-width', '1px')
+                .attr('stroke-opacity', '0.3')
+                .style('transition', 'all 0.2s ease-in-out');
+            // Dim other bars
+            this.svg
+                .selectAll('.ax-bar-chart-bar')
+                .filter((d) => d?.id !== id)
+                .classed('ax-bar-chart-dimmed', true)
+                .attr('opacity', 0.5)
+                .style('transition', 'opacity 0.2s ease-in-out');
+        }
+    }
+    /**
+     * Implementation of AXChartLegendCompatible interface
+     * Toggles visibility of a bar by ID
+     * @returns New visibility state (true = visible, false = hidden)
+     */
+    toggleSegment(id) {
+        const wasAllHidden = this.data().length > 0 && this.data().every((d) => this.isBarHidden(d.id));
+        if (this.hiddenBars.has(id)) {
+            // Making a bar visible
+            this.hiddenBars.delete(id);
+            // If all bars were previously hidden, we need to ensure the message is cleared
+            if (wasAllHidden) {
+                // Force complete DOM cleanup and redraw
+                if (this.chartContainerEl()?.nativeElement) {
+                    // Clear everything in the container
+                    this.d3?.select(this.chartContainerEl().nativeElement).selectAll('*').remove();
+                    // Force full redraw
+                    setTimeout(() => {
+                        this.createChart();
+                    }, 0);
+                }
+            }
+            else {
+                // Normal update for other cases
+                this.updateChart();
+            }
+        }
+        else {
+            // Hiding a bar
+            this.hiddenBars.add(id);
+            this.updateChart();
+        }
+        // Return the new visibility state
+        return !this.hiddenBars.has(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.4", 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\" #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: var(--ax-sys-color-lightest-surface)}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(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:visible}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;box-shadow:0 2px 12px #00000014;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.0.4", 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\" #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: var(--ax-sys-color-lightest-surface)}ax-bar-chart .ax-bar-chart{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;border-radius:.5rem;overflow:hidden;color:rgb(var(--ax-sys-color-on-lightest-surface));background-color:rgb(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:visible}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;box-shadow:0 2px 12px #00000014;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: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXBarChartComponent, AXBarChartDefaultConfig, AX_BAR_CHART_CONFIG, barChartConfig };
+//# sourceMappingURL=acorex-charts-bar-chart.mjs.map