@acorex/charts 20.2.0-next.8 → 20.2.0

package/bar-chart/index.d.ts

@@ -3,6 +3,7 @@ import { AXAnimationEasing, NXNativeEvent, NXComponent } from '@acorex/cdk/commo
 import * as d3 from 'd3';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, InjectionToken } from '@angular/core';
+import { AXChartComponentBase } from '@acorex/charts';
 import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
 
@@ -16,6 +17,11 @@ interface AXBarChartData {
     tooltipLabel?: string;
     color?: string;
 }
+interface AXBarChartClusteredData {
+    id: string;
+    label: string;
+    chartData: AXBarChartData[];
+}
 /**
  * Bar chart click event interface
  */
@@ -38,6 +44,23 @@ interface AXBarChartClickEvent {
  * - `--ax-comp-bar-chart-bg-color`: Background color for the chart.
  *   Default: `--ax-sys-color-lightest-surface`
  */
+/**
+ * Messages configuration for bar chart empty states
+ */
+interface AXBarChartMessages {
+    /** Message shown when no data is available */
+    noData?: string;
+    /** Help text shown when no data is available */
+    noDataHelp?: string;
+    /** Message shown when all bars are hidden */
+    allHidden?: string;
+    /** Help text shown when all bars are hidden */
+    allHiddenHelp?: string;
+    /** Icon for no data state */
+    noDataIcon?: string;
+    /** Icon for all hidden state */
+    allHiddenIcon?: string;
+}
 interface AXBarChartOption {
     width?: number;
     height?: number;
@@ -47,25 +70,27 @@ interface AXBarChartOption {
     showDataLabels?: boolean;
     xAxisLabel?: string;
     yAxisLabel?: string;
+    rotateXAxisLabels?: boolean | 'auto';
     showTooltip?: boolean;
     barWidth?: number;
     cornerRadius?: number;
     animationDuration?: number;
     animationEasing?: AXAnimationEasing;
+    messages?: AXBarChartMessages;
 }
 /**
  * Bar chart data type returned by getValue()
  * Represents an array of bar chart data items
  */
-type AXBarChartValue = AXBarChartData[];
+type AXBarChartValue = AXBarChartData[] | AXBarChartClusteredData[];
 
 /**
  * Bar Chart Component
  * Renders data as vertical bars with interactive hover effects and animations
  */
-declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXChartLegendCompatible {
+declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
     /** Chart data input */
-    data: _angular_core.InputSignal<AXBarChartData[]>;
+    data: _angular_core.InputSignal<AXBarChartValue>;
     /** Chart options input */
     options: _angular_core.InputSignal<AXBarChartOption>;
     /** Emitted when a bar is clicked */
@@ -76,11 +101,14 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
     private chart;
     private xScale;
     private yScale;
+    private xSubScale;
     private xAxis;
     private yAxis;
     private width;
     private height;
     private margin;
+    private readonly CHAR_WIDTH_RATIO;
+    private readonly TOOLTIP_GAP;
     private _initialAnimationComplete;
     private _tooltipVisible;
     private _tooltipPosition;
@@ -95,7 +123,6 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
     protected tooltipData: _angular_core.Signal<AXChartTooltipData>;
     private configToken;
     private chartColors;
-    private platform;
     protected effectiveOptions: _angular_core.Signal<{
         width?: number;
         height?: number;
@@ -105,13 +132,26 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
         showDataLabels?: boolean;
         xAxisLabel?: string;
         yAxisLabel?: string;
+        rotateXAxisLabels?: boolean | "auto";
         showTooltip?: boolean;
         barWidth?: number;
         cornerRadius?: number;
         animationDuration?: number;
         animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+        messages?: AXBarChartMessages;
+    }>;
+    protected effectiveMessages: _angular_core.Signal<{
+        noData: string;
+        noDataHelp: string;
+        allHidden: string;
+        allHiddenHelp: string;
+        noDataIcon: string;
+        allHiddenIcon: string;
     }>;
     private hiddenBars;
+    private hiddenSeries;
+    private isClusteredData;
+    private getClusterSeriesLabels;
     constructor();
     ngOnDestroy(): void;
     /**
@@ -121,39 +161,54 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
     /**
      * Creates the bar chart SVG and renders all elements
      */
-    protected createChart(): void;
+    createChart(): void;
     /**
      * Updates the chart when inputs change
      */
-    protected updateChart(): void;
+    updateChart(): void;
     /**
      * Cleans up chart resources
      */
-    protected cleanupChart(): void;
+    cleanupChart(): void;
     /**
      * Sets up chart dimensions and creates SVG with responsive attributes
      */
     private setupDimensions;
-    /**
-     * Calculates chart margins based on options
-     */
-    private calculateMargins;
     /**
      * Creates x and y scales for the chart
      */
     private setupScales;
+    /**
+     * Creates x and y scales for clustered charts
+     */
+    private setupScalesClustered;
     /**
      * Creates x and y axes with grid lines
      */
     private createAxes;
+    private createXAxis;
+    private createYAxis;
+    private shouldRotateXAxisLabels;
+    private createXAxisTitle;
+    private createYAxisTitle;
+    private calculateMaxYAxisTickLabelWidth;
+    private createGridLines;
+    /**
+     * Creates axes for clustered charts
+     */
+    private createAxesClustered;
+    private createXAxisClustered;
     /**
      * Renders the bars with animations
      */
     private renderBars;
+    /**
+     * Renders bars for clustered charts
+     */
+    private renderBarsClustered;
     /**
      * Gets the appropriate D3 easing function based on the option string
      */
-    private getEasingFunction;
     /**
      * Handles bar hover event and shows tooltip
      */
@@ -198,6 +253,12 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
      * @returns New visibility state (true = visible, false = hidden)
      */
     toggleSegment(id: string): boolean;
+    private getContainerElement;
+    private clearChartArea;
+    private getXAxisTickFontSizeBasedOnWidth;
+    private getYAxisTickFontSizeBasedOnHeight;
+    private buildXAxisCommon;
+    private showMessage;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXBarChartComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXBarChartComponent, "ax-bar-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "barClick": "barClick"; }, never, never, true, never>;
 }
@@ -208,4 +269,4 @@ type PartialBarChartConfig = Partial<AXBarChartOption>;
 declare function barChartConfig(config?: PartialBarChartConfig): AXBarChartOption;
 
 export { AXBarChartComponent, AXBarChartDefaultConfig, AX_BAR_CHART_CONFIG, barChartConfig };
-export type { AXBarChartClickEvent, AXBarChartData, AXBarChartOption, AXBarChartValue, PartialBarChartConfig };
+export type { AXBarChartClickEvent, AXBarChartClusteredData, AXBarChartData, AXBarChartMessages, AXBarChartOption, AXBarChartValue, PartialBarChartConfig };

package/chart-legend/index.d.ts

@@ -68,7 +68,7 @@ declare class AXChartLegendComponent {
     /**
      * Reference to legend container for measuring dimensions
      */
-    legendContainer?: ElementRef<HTMLDivElement>;
+    legendContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     protected showValues: _angular_core.Signal<boolean>;
     protected showPercentage: _angular_core.Signal<boolean>;
     protected containerClass: _angular_core.Signal<{

package/chart-tooltip/index.d.ts

@@ -2,11 +2,12 @@ import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
 
 interface AXChartTooltipData {
-    title: string;
+    title: string | string[];
     value: number | string;
     percentage?: string;
-    color?: string;
-    [key: string]: any;
+    color?: string | string[];
+    tooltipColor?: string;
+    tooltipBgColor?: string;
 }
 
 declare class AXChartTooltipComponent {
@@ -30,10 +31,16 @@ declare class AXChartTooltipComponent {
     /**
      * Reference to tooltip container for measuring dimensions
      */
-    tooltipContainer?: ElementRef<HTMLDivElement>;
+    tooltipContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     protected tooltipWidth: number;
     protected tooltipHeight: number;
     constructor();
+    protected isColorArray(): boolean;
+    protected colorList(): string[];
+    protected singleColor(): string | null;
+    protected isTitleArray(): boolean;
+    protected titleList(): string[];
+    protected colorAt(index: number): string | null;
     /**
      * Updates tooltip dimensions after it's rendered
      */

package/donut-chart/index.d.ts

@@ -3,6 +3,7 @@ import { AXAnimationEasing } from '@acorex/cdk/common';
 import * as d3 from 'd3';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, InjectionToken } from '@angular/core';
+import { AXChartComponentBase } from '@acorex/charts';
 import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
 
@@ -41,6 +42,23 @@ interface AXDonutChartData {
  * }
  * ```
  */
+/**
+ * Messages configuration for donut chart empty states
+ */
+interface AXDonutChartMessages {
+    /** Message shown when no data is available */
+    noData?: string;
+    /** Help text shown when no data is available */
+    noDataHelp?: string;
+    /** Message shown when all segments are hidden */
+    allHidden?: string;
+    /** Help text shown when all segments are hidden */
+    allHiddenHelp?: string;
+    /** Icon for no data state */
+    noDataIcon?: string;
+    /** Icon for all hidden state */
+    allHiddenIcon?: string;
+}
 interface AXDonutChartOption {
     /**
      * Width of the chart in pixels
@@ -89,6 +107,10 @@ interface AXDonutChartOption {
      * Default: 'cubic-out'
      */
     animationEasing?: AXAnimationEasing;
+    /**
+     * Customizable messages for empty states
+     */
+    messages?: AXDonutChartMessages;
 }
 /**
  * Data structure provided to the chart component
@@ -100,7 +122,7 @@ type AXDonutChartValue = AXDonutChartData[];
  * Donut Chart Component
  * Displays data in a circular donut chart with interactive segments
  */
-declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatible {
+declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
     #private;
     private cdr;
     /** Chart data input */
@@ -121,6 +143,7 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     private _initialized;
     private _rendered;
     private _isInitialAnimating;
+    private _currentlyHighlightedSegment;
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
@@ -142,6 +165,16 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
         cornerRadius?: number;
         animationDuration?: number;
         animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+        messages?: AXDonutChartMessages;
+    }>;
+    private readonly TOOLTIP_GAP;
+    protected effectiveMessages: _angular_core.Signal<{
+        noData: string;
+        noDataHelp: string;
+        allHidden: string;
+        allHiddenHelp: string;
+        noDataIcon: string;
+        allHiddenIcon: string;
     }>;
     protected chartDataArray: _angular_core.Signal<AXDonutChartData[]>;
     protected getColor(index: number): string;
@@ -167,11 +200,11 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     /**
      * Creates the donut chart
      */
-    protected createChart(): void;
+    createChart(): void;
     /**
      * Updates the chart with new data
      */
-    protected updateChart(): void;
+    updateChart(): void;
     /**
      * Clears the chart container
      */
@@ -203,7 +236,6 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     /**
      * Gets the appropriate D3 easing function based on the option string
      */
-    private getEasingFunction;
     /**
      * Handle hover effects on a segment
      */
@@ -228,7 +260,8 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     /**
      * Cleans up chart resources
      */
-    private cleanupChart;
+    cleanupChart(): void;
+    private renderMessage;
     /**
      * Gets an accessibility label describing the donut chart for screen readers
      */
@@ -248,4 +281,4 @@ type PartialDonutChartConfig = Partial<AXDonutChartOption>;
 declare function donutChartConfig(config?: PartialDonutChartConfig): AXDonutChartOption;
 
 export { AXDonutChartComponent, AXDonutChartDefaultConfig, AX_DONUT_CHART_CONFIG, donutChartConfig };
-export type { AXDonutChartData, AXDonutChartOption, AXDonutChartValue, PartialDonutChartConfig };
+export type { AXDonutChartData, AXDonutChartMessages, AXDonutChartOption, AXDonutChartValue, PartialDonutChartConfig };