@acorex/charts 19.15.0-next.8 → 20.0.0

package/bar-chart/index.d.ts

@@ -1,3 +1,211 @@
-export * from './lib/bar-chart.component';
-export * from './lib/bar-chart.config';
-export * from './lib/bar-chart.type';
+import * as _acorex_cdk_common from '@acorex/cdk/common';
+import { AXAnimationEasing, NXNativeEvent, NXComponent } from '@acorex/cdk/common';
+import * as d3 from 'd3';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, InjectionToken } from '@angular/core';
+import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
+import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+
+/**
+ * Bar chart data item interface
+ */
+interface AXBarChartData {
+    id: string;
+    label: string;
+    value: number;
+    tooltipLabel?: string;
+    color?: string;
+}
+/**
+ * Bar chart click event interface
+ */
+interface AXBarChartClickEvent {
+    item: AXBarChartData;
+    event: NXNativeEvent;
+}
+/**
+ * Bar chart options interface
+ *
+ * Component supports the following CSS custom properties (design tokens):
+ * - `--ax-comp-bar-chart-labels-color`: Color for axis labels in option (X/Y axis titles).
+ *   Default: `--ax-sys-color-on-lightest-surface` (applied with 0.7 opacity where needed)
+ * - `--ax-comp-bar-chart-data-labels-color`: Color for data labels.
+ *   Default: `--ax-sys-color-on-lightest-surface`
+ * - `--ax-comp-bar-chart-axis-color`: Color for X/Y axis lines.
+ *   Default: `--ax-sys-color-on-lightest-surface`
+ * - `--ax-comp-bar-chart-grid-lines-color`: Color for grid lines.
+ *   Default: `--ax-sys-color-on-lightest-surface` (applied with 0.2 opacity)
+ * - `--ax-comp-bar-chart-bg-color`: Background color for the chart.
+ *   Default: `--ax-sys-color-lightest-surface`
+ */
+interface AXBarChartOption {
+    width?: number;
+    height?: number;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    showDataLabels?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showTooltip?: boolean;
+    barWidth?: number;
+    cornerRadius?: number;
+    animationDuration?: number;
+    animationEasing?: AXAnimationEasing;
+}
+/**
+ * Bar chart data type returned by getValue()
+ * Represents an array of bar chart data items
+ */
+type AXBarChartValue = AXBarChartData[];
+
+/**
+ * Bar Chart Component
+ * Renders data as vertical bars with interactive hover effects and animations
+ */
+declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXChartLegendCompatible {
+    /** Chart data input */
+    data: _angular_core.InputSignal<AXBarChartData[]>;
+    /** Chart options input */
+    options: _angular_core.InputSignal<AXBarChartOption>;
+    /** Emitted when a bar is clicked */
+    barClick: _angular_core.OutputEmitterRef<AXBarChartClickEvent>;
+    private readonly chartContainerEl;
+    protected d3: typeof d3;
+    private svg;
+    private chart;
+    private xScale;
+    private yScale;
+    private xAxis;
+    private yAxis;
+    private width;
+    private height;
+    private margin;
+    private _initialAnimationComplete;
+    private _tooltipVisible;
+    private _tooltipPosition;
+    private _tooltipData;
+    private _initialized;
+    private _rendered;
+    protected tooltipVisible: _angular_core.Signal<boolean>;
+    protected tooltipPosition: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    protected tooltipData: _angular_core.Signal<AXChartTooltipData>;
+    private configToken;
+    private chartColors;
+    private platform;
+    protected effectiveOptions: _angular_core.Signal<{
+        width?: number;
+        height?: number;
+        showXAxis?: boolean;
+        showYAxis?: boolean;
+        showGrid?: boolean;
+        showDataLabels?: boolean;
+        xAxisLabel?: string;
+        yAxisLabel?: string;
+        showTooltip?: boolean;
+        barWidth?: number;
+        cornerRadius?: number;
+        animationDuration?: number;
+        animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+    }>;
+    private hiddenBars;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Loads D3.js dynamically
+     */
+    protected loadD3(): Promise<void>;
+    /**
+     * Creates the bar chart SVG and renders all elements
+     */
+    protected createChart(): void;
+    /**
+     * Updates the chart when inputs change
+     */
+    protected updateChart(): void;
+    /**
+     * Cleans up chart resources
+     */
+    protected 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 axes with grid lines
+     */
+    private createAxes;
+    /**
+     * Renders the bars with animations
+     */
+    private renderBars;
+    /**
+     * Gets the appropriate D3 easing function based on the option string
+     */
+    private getEasingFunction;
+    /**
+     * Handles bar hover event and shows tooltip
+     */
+    private handleBarHover;
+    /**
+     * Updates tooltip position based on mouse coordinates
+     */
+    private updateTooltipPosition;
+    /**
+     * Handles bar click event
+     */
+    private handleBarClick;
+    /**
+     * 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: _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>;
+}
+
+declare const AXBarChartDefaultConfig: AXBarChartOption;
+declare const AX_BAR_CHART_CONFIG: InjectionToken<AXBarChartOption>;
+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 };

package/chart-legend/index.d.ts

@@ -0,0 +1,104 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+/**
+ * Defines a legend item
+ */
+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
+ */
+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
+ */
+interface AXChartLegendOptions {
+    showValues?: boolean;
+    showPercentage?: boolean;
+    className?: string;
+    interactive?: boolean;
+    mode?: 'vertical' | 'horizontal';
+}
+
+declare class AXChartLegendComponent {
+    /**
+     * Chart component instance
+     * Must implement AXChartLegendCompatible interface
+     */
+    chart: _angular_core.InputSignal<AXChartLegendCompatible>;
+    /**
+     * Configuration options for the legend
+     */
+    options: _angular_core.InputSignal<AXChartLegendOptions>;
+    /**
+     * Event emitted when a legend item is clicked
+     * Returns the item that was clicked
+     */
+    itemClick: _angular_core.OutputEmitterRef<AXChartLegendItem>;
+    /**
+     * Event emitted when the mouse enters a legend item
+     */
+    itemMouseEnter: _angular_core.OutputEmitterRef<AXChartLegendItem>;
+    /**
+     * Event emitted when the mouse leaves a legend item
+     */
+    itemMouseLeave: _angular_core.OutputEmitterRef<AXChartLegendItem>;
+    /**
+     * Reference to legend container for measuring dimensions
+     */
+    legendContainer?: ElementRef<HTMLDivElement>;
+    protected showValues: _angular_core.Signal<boolean>;
+    protected showPercentage: _angular_core.Signal<boolean>;
+    protected containerClass: _angular_core.Signal<{
+        [x: string]: boolean;
+        'ax-chart-legend': boolean;
+    }>;
+    protected isInteractive: _angular_core.Signal<boolean>;
+    protected displayItems: _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: _angular_core.ɵɵFactoryDeclaration<AXChartLegendComponent, never>;
+    static ɵcmp: _angular_core.ɵɵ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>;
+}
+
+export { AXChartLegendComponent };
+export type { AXChartLegendCompatible, AXChartLegendItem, AXChartLegendOptions };

package/chart-tooltip/index.d.ts

@@ -1,2 +1,54 @@
-export * from './lib/chart-tooltip.component';
-export * from './lib/chart-tooltip.type';
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+
+interface AXChartTooltipData {
+    title: string;
+    value: number | string;
+    percentage?: string;
+    color?: string;
+    [key: string]: any;
+}
+
+declare class AXChartTooltipComponent {
+    private ngZone;
+    data: _angular_core.InputSignal<AXChartTooltipData>;
+    position: _angular_core.InputSignal<{
+        x: number;
+        y: number;
+    }>;
+    visible: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show the tooltip's percentage badge
+     */
+    showPercentage: _angular_core.InputSignal<boolean>;
+    /**
+     * Optional custom styling for the tooltip
+     */
+    style: _angular_core.InputSignal<{
+        [key: string]: string;
+    }>;
+    /**
+     * Reference to tooltip container for measuring dimensions
+     */
+    tooltipContainer?: ElementRef<HTMLDivElement>;
+    protected tooltipWidth: number;
+    protected tooltipHeight: number;
+    constructor();
+    /**
+     * Updates tooltip dimensions after it's rendered
+     */
+    protected updateTooltipDimensions(): void;
+    /**
+     * Get adjusted tooltip position
+     * Exposes properties for parent components to query tooltip dimensions
+     */
+    getDimensions(): {
+        width: number;
+        height: number;
+    };
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXChartTooltipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXChartTooltipComponent, "ax-chart-tooltip", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "showPercentage": { "alias": "showPercentage"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { AXChartTooltipComponent };
+export type { AXChartTooltipData };

package/donut-chart/index.d.ts

@@ -1,3 +1,251 @@
-export * from './lib/donut-chart.component';
-export * from './lib/donut-chart.config';
-export * from './lib/donut-chart.type';
+import * as _acorex_cdk_common from '@acorex/cdk/common';
+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 { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
+import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+
+/**
+ * Represents a single segment in the donut chart
+ */
+interface AXDonutChartData {
+    id: string;
+    value: number;
+    color?: string;
+    tooltipLabel?: string;
+    label?: string;
+}
+/**
+ * Configuration options for the donut chart
+ *
+ * ## Design Tokens
+ * The component supports the following CSS custom properties:
+ *
+ * ### `--ax-comp-donut-chart-bg-color`
+ * Background color for the chart area and separator lines between segments.
+ * Default: `var(--ax-sys-color-lightest-surface)`
+ * Usage: `rgb(var(--ax-comp-donut-chart-bg-color))`
+ *
+ * ### `--ax-comp-donut-chart-text-color`
+ * Text color for all labels, values, total count, and percentage indicators.
+ * Default: `var(--ax-sys-color-on-lightest-surface)`
+ * Usage: `rgb(var(--ax-comp-donut-chart-text-color))`
+ *
+ * ## Usage
+ * Override these tokens in your CSS to customize the chart's appearance:
+ * ```css
+ * ax-donut-chart {
+ *   --ax-comp-donut-chart-bg-color: var(--your-custom-background);
+ *   --ax-comp-donut-chart-text-color: var(--your-custom-text-color);
+ * }
+ * ```
+ */
+interface AXDonutChartOption {
+    /**
+     * Width of the chart in pixels
+     * If not provided, will use container width
+     */
+    width?: number;
+    /**
+     * Height of the chart in pixels
+     * If not provided, will use container height
+     */
+    height?: number;
+    /**
+     * Label for the total value
+     * Default: 'Total'
+     */
+    totalLabel?: string;
+    /**
+     * Whether to show tooltips on hover
+     * Default: true
+     */
+    showTooltip?: boolean;
+    /**
+     * Whether to show percentage labels inside chart segments
+     * Labels will only appear on segments large enough to fit text
+     * Default: true
+     */
+    showDataLabels?: boolean;
+    /**
+     * Width of the donut ring as a percentage (10-90)
+     * Higher values create a thicker ring
+     * Default: 35
+     */
+    donutWidth?: number;
+    /**
+     * Radius for rounded corners on segments in pixels
+     * Default: 4
+     */
+    cornerRadius?: number;
+    /**
+     * Duration of animations in milliseconds
+     * Default: 800
+     */
+    animationDuration?: number;
+    /**
+     * Type of easing function for animations
+     * Default: 'cubic-out'
+     */
+    animationEasing?: AXAnimationEasing;
+}
+/**
+ * Data structure provided to the chart component
+ * Can be an array of AXPDonutChartData directly
+ */
+type AXDonutChartValue = AXDonutChartData[];
+
+/**
+ * Donut Chart Component
+ * Displays data in a circular donut chart with interactive segments
+ */
+declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatible {
+    #private;
+    private cdr;
+    /** Chart data input */
+    data: _angular_core.InputSignal<AXDonutChartValue>;
+    /** Chart options input */
+    options: _angular_core.InputSignal<AXDonutChartOption>;
+    /** Emitted when a segment is clicked */
+    segmentClick: _angular_core.OutputEmitterRef<AXDonutChartData>;
+    /** Emitted when a segment has mouse hover
+     * Can be used by external elements to highlight this segment
+     */
+    segmentHover: _angular_core.OutputEmitterRef<AXDonutChartData>;
+    private readonly chartContainerEl;
+    protected d3: typeof d3;
+    private svg;
+    private pieData;
+    private hiddenSegments;
+    private _initialized;
+    private _rendered;
+    private _isInitialAnimating;
+    private _tooltipVisible;
+    private _tooltipPosition;
+    private _tooltipData;
+    protected tooltipVisible: _angular_core.Signal<boolean>;
+    protected tooltipPosition: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    protected tooltipData: _angular_core.Signal<AXChartTooltipData>;
+    private configToken;
+    private chartColors;
+    protected effectiveOptions: _angular_core.Signal<{
+        width?: number;
+        height?: number;
+        totalLabel?: string;
+        showTooltip?: boolean;
+        showDataLabels?: boolean;
+        donutWidth?: number;
+        cornerRadius?: number;
+        animationDuration?: number;
+        animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+    }>;
+    protected chartDataArray: _angular_core.Signal<AXDonutChartData[]>;
+    protected getColor(index: number): string;
+    protected isSegmentHidden(id: string): boolean;
+    constructor();
+    /**
+     * Highlights a specific segment by ID
+     * @param id The segment ID to highlight, or null to clear highlight
+     */
+    highlightSegment(id: string | null): void;
+    /**
+     * Toggles visibility of a segment by ID
+     * @param id Segment ID to toggle
+     * @returns New visibility state (true = visible, false = hidden)
+     */
+    toggleSegment(id: string): boolean;
+    ngOnDestroy(): void;
+    /**
+     * Loads D3.js dynamically
+     */
+    protected loadD3(): Promise<void>;
+    protected onSegmentClick(item: AXDonutChartData): void;
+    /**
+     * Creates the donut chart
+     */
+    protected createChart(): void;
+    /**
+     * Updates the chart with new data
+     */
+    protected updateChart(): void;
+    /**
+     * Clears the chart container
+     */
+    private clearChart;
+    /**
+     * Shows a message when no data is available
+     */
+    private showNoDataMessage;
+    /**
+     * Shows a message when all segments are hidden
+     */
+    private showAllSegmentsHiddenMessage;
+    /**
+     * Setups chart dimensions based on container and options
+     */
+    private setupDimensions;
+    /**
+     * Renders the donut chart with visible data
+     */
+    private renderDonutChart;
+    /**
+     * Create SVG element with filter definitions for shadows
+     */
+    private createSvgWithFilters;
+    /**
+     * Create and render the donut segments with animations
+     */
+    private createDonutSegments;
+    /**
+     * Gets the appropriate D3 easing function based on the option string
+     */
+    private getEasingFunction;
+    /**
+     * Handle hover effects on a segment
+     */
+    private handleSliceHover;
+    /**
+     * Handles mouse leave from segments
+     */
+    private handleSegmentLeave;
+    /**
+     * Updates tooltip position
+     * Ensures the tooltip is visible by adjusting position when near edges
+     */
+    private updateTooltipPosition;
+    /**
+     * Adds center display with total value
+     */
+    private addCenterDisplay;
+    /**
+     * Handles chart rendering errors
+     */
+    private handleChartError;
+    /**
+     * Cleans up chart resources
+     */
+    private cleanupChart;
+    /**
+     * 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: _angular_core.ɵɵFactoryDeclaration<AXDonutChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXDonutChartComponent, "ax-donut-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "segmentClick": "segmentClick"; "segmentHover": "segmentHover"; }, never, never, true, never>;
+}
+
+declare const AXDonutChartDefaultConfig: AXDonutChartOption;
+declare const AX_DONUT_CHART_CONFIG: InjectionToken<AXDonutChartOption>;
+type PartialDonutChartConfig = Partial<AXDonutChartOption>;
+declare function donutChartConfig(config?: PartialDonutChartConfig): AXDonutChartOption;
+
+export { AXDonutChartComponent, AXDonutChartDefaultConfig, AX_DONUT_CHART_CONFIG, donutChartConfig };
+export type { AXDonutChartData, AXDonutChartOption, AXDonutChartValue, PartialDonutChartConfig };