@acorex/charts 19.15.0-next.22 → 19.15.0-next.25

package/bar-chart/lib/bar-chart.component.d.ts

@@ -1,4 +1,5 @@
 import { NXComponent } from '@acorex/cdk/common';
+import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
 import { OnDestroy } from '@angular/core';
 import { AXBarChartClickEvent, AXBarChartData, AXBarChartOption } from './bar-chart.type';
@@ -7,7 +8,7 @@ import * as i0 from "@angular/core";
  * Bar Chart Component
  * Renders data as vertical bars with interactive hover effects and animations
  */
-export declare class AXBarChartComponent extends NXComponent implements OnDestroy {
+export declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXChartLegendCompatible {
     /** Chart data input */
     data: import("@angular/core").InputSignal<AXBarChartData[]>;
     /** Chart options input */
@@ -39,6 +40,7 @@ export declare class AXBarChartComponent extends NXComponent implements OnDestro
     protected tooltipData: import("@angular/core").Signal<AXChartTooltipData>;
     private configToken;
     private chartColors;
+    private platform;
     protected effectiveOptions: import("@angular/core").Signal<{
         width?: number;
         height?: number;
@@ -54,6 +56,7 @@ export declare class AXBarChartComponent extends NXComponent implements OnDestro
         animationDuration?: number;
         animationEasing?: import("@acorex/cdk/common").AXAnimationEasing;
     }>;
+    private hiddenBars;
     constructor();
     ngOnDestroy(): void;
     /**
@@ -112,6 +115,34 @@ export declare class AXBarChartComponent extends NXComponent implements OnDestro
      * Shows a message when no data is available
      */
     private showNoDataMessage;
+    /**
+     * Shows a message when all bars are hidden
+     */
+    private showAllBarsHiddenMessage;
+    /**
+     * Gets the color for a bar based on its index
+     */
+    protected getColor(index: number): string;
+    /**
+     * Checks if a bar is hidden
+     */
+    protected isBarHidden(id: string): boolean;
+    /**
+     * Implementation of AXChartLegendCompatible interface
+     * Returns legend items based on the chart data
+     */
+    getLegendItems(): AXChartLegendItem[];
+    /**
+     * Implementation of AXChartLegendCompatible interface
+     * Highlights a specific bar by ID
+     */
+    highlightSegment(id: string | null): void;
+    /**
+     * Implementation of AXChartLegendCompatible interface
+     * Toggles visibility of a bar by ID
+     * @returns New visibility state (true = visible, false = hidden)
+     */
+    toggleSegment(id: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXBarChartComponent, never>;
     static ɵcmp: i0.ɵɵ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/chart-legend/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/chart-legend.component';
+export * from './lib/chart-legend.type';

package/chart-legend/lib/chart-legend.component.d.ts

@@ -0,0 +1,60 @@
+import { ElementRef } from '@angular/core';
+import { AXChartLegendCompatible, AXChartLegendItem, AXChartLegendOptions } from './chart-legend.type';
+import * as i0 from "@angular/core";
+export declare class AXChartLegendComponent {
+    /**
+     * Chart component instance
+     * Must implement AXChartLegendCompatible interface
+     */
+    chart: import("@angular/core").InputSignal<AXChartLegendCompatible>;
+    /**
+     * Configuration options for the legend
+     */
+    options: import("@angular/core").InputSignal<AXChartLegendOptions>;
+    /**
+     * Event emitted when a legend item is clicked
+     * Returns the item that was clicked
+     */
+    itemClick: import("@angular/core").OutputEmitterRef<AXChartLegendItem>;
+    /**
+     * Event emitted when the mouse enters a legend item
+     */
+    itemMouseEnter: import("@angular/core").OutputEmitterRef<AXChartLegendItem>;
+    /**
+     * Event emitted when the mouse leaves a legend item
+     */
+    itemMouseLeave: import("@angular/core").OutputEmitterRef<AXChartLegendItem>;
+    /**
+     * Reference to legend container for measuring dimensions
+     */
+    legendContainer?: ElementRef<HTMLDivElement>;
+    protected showValues: import("@angular/core").Signal<boolean>;
+    protected showPercentage: import("@angular/core").Signal<boolean>;
+    protected containerClass: import("@angular/core").Signal<{
+        [x: string]: boolean;
+        'ax-chart-legend': boolean;
+    }>;
+    protected isInteractive: import("@angular/core").Signal<boolean>;
+    protected displayItems: import("@angular/core").Signal<AXChartLegendItem[]>;
+    /**
+     * Handle clicks on legend items
+     */
+    protected onItemClick(item: AXChartLegendItem): void;
+    /**
+     * Handle mouse enter on legend items
+     */
+    protected onItemMouseEnter(item: AXChartLegendItem): void;
+    /**
+     * Handle mouse leave on legend items
+     */
+    protected onItemMouseLeave(item: AXChartLegendItem): void;
+    /**
+     * Get legend container dimensions
+     */
+    getDimensions(): {
+        width: number;
+        height: number;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXChartLegendComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXChartLegendComponent, "ax-chart-legend", never, { "chart": { "alias": "chart"; "required": true; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemMouseEnter": "itemMouseEnter"; "itemMouseLeave": "itemMouseLeave"; }, never, never, true, never>;
+}

package/chart-legend/lib/chart-legend.type.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Defines a legend item
+ */
+export interface AXChartLegendItem {
+    id: string;
+    name: string;
+    value: number | string;
+    percentage?: number;
+    color?: string;
+    hidden?: boolean;
+    [key: string]: any;
+}
+/**
+ * Interface that chart components should implement to work with the legend
+ */
+export interface AXChartLegendCompatible {
+    /**
+     * Returns the data items for the legend
+     */
+    getLegendItems(): AXChartLegendItem[];
+    /**
+     * Highlights a specific segment by ID
+     */
+    highlightSegment(id: string | null): void;
+    /**
+     * Toggles visibility of a segment by ID
+     * @returns New visibility state (true = visible, false = hidden)
+     */
+    toggleSegment(id: string): boolean;
+}
+/**
+ * Legend configuration options
+ */
+export interface AXChartLegendOptions {
+    showValues?: boolean;
+    showPercentage?: boolean;
+    className?: string;
+    interactive?: boolean;
+    mode?: 'vertical' | 'horizontal';
+}

package/donut-chart/lib/donut-chart.component.d.ts

@@ -1,3 +1,4 @@
+import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
 import { OnDestroy } from '@angular/core';
 import { AXDonutChartData, AXDonutChartOption, AXDonutChartValue } from './donut-chart.type';
@@ -6,7 +7,8 @@ import * as i0 from "@angular/core";
  * Donut Chart Component
  * Displays data in a circular donut chart with interactive segments
  */
-export declare class AXDonutChartComponent implements OnDestroy {
+export declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatible {
+    #private;
     private cdr;
     /** Chart data input */
     data: import("@angular/core").InputSignal<AXDonutChartValue>;
@@ -25,6 +27,7 @@ export declare class AXDonutChartComponent implements OnDestroy {
     private hiddenSegments;
     private _initialized;
     private _rendered;
+    private _isInitialAnimating;
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
@@ -121,10 +124,6 @@ export declare class AXDonutChartComponent implements OnDestroy {
      * Ensures the tooltip is visible by adjusting position when near edges
      */
     private updateTooltipPosition;
-    /**
-     * Toggles the visibility of a segment
-     */
-    private toggleSegmentVisibility;
     /**
      * Adds center display with total value
      */
@@ -141,6 +140,11 @@ export declare class AXDonutChartComponent implements OnDestroy {
      * Gets an accessibility label describing the donut chart for screen readers
      */
     protected getAccessibilityLabel(): string;
+    /**
+     * Returns the data items for the legend
+     * @implements AXChartLegendCompatible
+     */
+    getLegendItems(): AXChartLegendItem[];
     static ɵfac: i0.ɵɵFactoryDeclaration<AXDonutChartComponent, never>;
     static ɵcmp: i0.ɵɵ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,6 +1,7 @@
 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 { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, input, output, viewChild, signal, computed, afterNextRender, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
@@ -84,6 +85,8 @@ class AXBarChartComponent extends NXComponent {
     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 {
@@ -91,6 +94,8 @@ class AXBarChartComponent extends NXComponent {
             ...this.options(),
         };
     });
+    // Track hidden bars
+    hiddenBars = new Set();
     constructor() {
         super();
         // Dynamically load D3 and initialize the chart when the component is ready
@@ -141,6 +146,8 @@ class AXBarChartComponent extends NXComponent {
             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
@@ -148,11 +155,16 @@ class AXBarChartComponent extends NXComponent {
             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
-        this.setupScales(data);
+        // Create scales and axes using visible data
+        this.setupScales(visibleData);
         this.createAxes(chartOptions);
         // Render the bars
         this.renderBars(data);
@@ -266,6 +278,7 @@ class AXBarChartComponent extends NXComponent {
         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) {
@@ -276,16 +289,17 @@ class AXBarChartComponent extends NXComponent {
                 .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', '11px')
+                .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.65;
+                const labelY = this.height + this.margin.bottom * 0.8;
                 axesGroup
                     .append('text')
                     .attr('class', 'ax-bar-chart-axis-label ax-x-axis-label')
@@ -293,7 +307,7 @@ class AXBarChartComponent extends NXComponent {
                     .attr('dominant-baseline', 'middle')
                     .attr('x', this.width / 2)
                     .attr('y', labelY)
-                    .style('font-size', '13px')
+                    .style('font-size', '14px')
                     .style('font-weight', '500')
                     .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
                     .text(options.xAxisLabel);
@@ -303,17 +317,21 @@ class AXBarChartComponent extends NXComponent {
             // 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
-            this.yAxis
+            const dynamicYAxisTickFontSize = Math.max(11, Math.min(15, Math.round(this.height / 30)));
+            const yTickTexts = this.yAxis
                 .selectAll('text')
-                .style('font-size', '11px')
+                .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.65;
+                const labelY = -this.margin.left * 0.8;
                 axesGroup
                     .append('text')
                     .attr('class', 'ax-bar-chart-axis-label ax-y-axis-label')
@@ -322,7 +340,7 @@ class AXBarChartComponent extends NXComponent {
                     .attr('transform', 'rotate(-90)')
                     .attr('x', labelX)
                     .attr('y', labelY)
-                    .style('font-size', '13px')
+                    .style('font-size', '14px')
                     .style('font-weight', '500')
                     .style('fill', 'rgb(var(--ax-comp-bar-chart-axis-label-color))')
                     .text(options.yAxisLabel);
@@ -348,6 +366,9 @@ class AXBarChartComponent extends NXComponent {
      * 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
@@ -360,7 +381,7 @@ class AXBarChartComponent extends NXComponent {
         // Create groups for each bar to handle transformations
         const barGroups = barsContainer
             .selectAll('.ax-bar-chart-bar-group')
-            .data(data)
+            .data(visibleData)
             .enter()
             .append('g')
             .style('cursor', 'pointer')
@@ -375,7 +396,13 @@ class AXBarChartComponent extends NXComponent {
             .attr('height', 0) // Start with height 0 for animation
             .attr('rx', radius) // Rounded corners
             .attr('ry', radius) // Rounded corners
-            .attr('fill', (d, i) => d.color || getChartColor(i, this.chartColors));
+            .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
@@ -478,7 +505,7 @@ class AXBarChartComponent extends NXComponent {
     handleBarHover(event, datum) {
         if (this.effectiveOptions().showTooltip !== false) {
             const index = this.data().findIndex((item) => item.id === datum.id);
-            const color = datum.color || getChartColor(index, this.chartColors);
+            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';
@@ -531,47 +558,211 @@ class AXBarChartComponent extends NXComponent {
         const messageContainer = this.d3
             .select(containerElement)
             .append('div')
-            .attr('class', 'ax-bar-chart-no-data-message')
-            .style('position', 'absolute')
-            .style('left', '50%')
-            .style('top', '50%')
-            .style('transform', 'translate(-50%, -50%)')
-            .style('text-align', 'center')
-            .style('background-color', 'rgb(var(--ax-comp-bar-chart-bg-color))')
-            .style('padding', '1.5rem')
-            .style('border-radius', '0.5rem')
-            .style('box-shadow', '0 2px 12px rgba(0, 0, 0, 0.08)')
-            .style('width', '80%')
-            .style('max-width', '300px');
+            // 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')
-            .attr('class', 'ax-bar-chart-no-data-icon')
-            .style('opacity', '0.6')
-            .style('margin-bottom', '0.75rem')
+            // 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')
-            .attr('class', 'ax-bar-chart-no-data-text')
-            .style('font-size', '1rem')
-            .style('font-weight', '600')
-            .style('margin-bottom', '0.5rem')
+            // 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')
-            .attr('class', 'ax-bar-chart-no-data-help')
-            .style('font-size', '0.8rem')
-            .style('opacity', '0.6')
+            // 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');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.13", 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{position:absolute;text-align:center;transform:translate(-50%,-50%);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: "ngmodule", type: CommonModule }, { kind: "component", type: AXChartTooltipComponent, selector: "ax-chart-tooltip", inputs: ["data", "position", "visible", "showPercentage", "style"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    /**
+     * 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: "19.2.14", ngImport: i0, type: AXBarChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", 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: "ngmodule", type: CommonModule }, { 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: "19.2.13", ngImport: i0, type: AXBarChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: AXBarChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [CommonModule, 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{position:absolute;text-align:center;transform:translate(-50%,-50%);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"] }]
+            args: [{ selector: 'ax-bar-chart', encapsulation: ViewEncapsulation.None, imports: [CommonModule, 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: () => [] });
 
 /**