@acorex/charts 0.0.1

package/donut-chart/index.d.ts

@@ -0,0 +1,251 @@
+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 };