@acorex/charts 19.13.2

package/README.md

@@ -0,0 +1,72 @@
+# AcoreX Charts Library
+
+A collection of Angular chart components powered by D3.js.
+
+## Available Charts
+
+- Bar Chart
+- Line Chart
+- Donut Chart
+- Gauge Chart
+- Hierarchy Chart
+
+## Installation
+
+```bash
+npm install @acorex/charts
+```
+
+## Usage
+
+Import specific chart components in your Angular module:
+
+```typescript
+import { AXBarChartComponent } from '@acorex/charts/bar-chart';
+import { AXLineChartComponent } from '@acorex/charts/line-chart';
+import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
+```
+
+Add the components to your templates:
+
+```html
+<ax-bar-chart [data]="barData" [options]="barOptions"></ax-bar-chart>
+<ax-line-chart [data]="lineData" [options]="lineOptions"></ax-line-chart>
+<ax-donut-chart [data]="donutData" [options]="donutOptions"></ax-donut-chart>
+```
+
+## Documentation
+
+For detailed documentation and examples, see the individual chart component README files.
+
+# ACoreX
+
+ACoreX is an UI framework based on angular. With over 50+ beautiful fully responsive and accessible components for everyone.
+
+[![License](https://img.shields.io/npm/l/nx.svg?style=flat-square)]()
+
+A few links to help you get started:
+
+- [ACoreX: Documentation, Guides](https://acorexui.com)
+
+ <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://acorexui.com/public/acorex-slang-dark.svg">
+    <img alt="Acorex - Design System, UI Framework, App Builder" src="https://acorexui.com/public/acorex-slang-dark.svg" width="100%">
+     </picture>
+
+## Team Leads
+
+| Arash Oshnoudi                                                                                                           | Ali Safari                                                                                                           |
+| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
+| ![Arash Oshnoudi](https://gravatar.com/avatar/df151090660e3842ec1ff788bb5a650e939e45784f01513a9b9f8107311e4e78?size=180) | ![Ali Safari](https://gravatar.com/avatar/555280ee36f23bedcfcfec6e068d1a85d7e1fd14676ca07e05958fc762199def?size=180) |
+
+## Develop Team
+
+| Reza Safari                                                                                                           | Matin Givi                                                                                                           | Shahin Kahrizi                                                                                                           | Mohammad Parsaeifard                                                                                                           | Mojtaba Erfan Rad                                                                                                             |
+| --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- |
+| ![Reza Safari](https://gravatar.com/avatar/0d419926e9e86bbb4b47ca6ae3ca6a2cde30fb01a6ddedefb97d043a350d11f0?size=180) | ![Matin Givi](https://gravatar.com/avatar/9a477829fc2ecdbce20a26af33d24baf63d24f042a551af8147eef1c99d2315a?size=180) | ![Shahin Kahrizi](https://gravatar.com/avatar/e699eeae86920ea44f9dd18f8bb01b5f0d28cdbd816032c4387f1f036c5977c0?size=180) | ![Mohammad Parsaeifard](https://gravatar.com/avatar/c0d9a0143f2dbbcea46e037d12ccad8f0fdaaeeaeb5089c1ae4a0c4ad131df88?size=180) | ![Mojtaba Erfan Rad](https://2.gravatar.com/avatar/791cb5077cf66aaf4f89098f9eb459a0c49198cc81d55a9b344d2620a72295bc?size=180) |
+
+## Design Team
+
+| Mohammad Hasanzade                                                                           | Meysa Aghili                                                                                                             |
+| -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| ![Mohammad Hasanzade](https://gravatar.com/avatar/ca346e55701bbf079140cb04edea9e3c?size=180) | ![Meysa Aghili](https://0.gravatar.com/avatar/bf607792c9fac9e5f4e53d141d331abd11fa56e56f42da8b69cf9ede2ffff289?size=180) |

package/bar-chart/README.md

@@ -0,0 +1,3 @@
+# @acorex/charts/bar-chart
+
+Secondary entry point of `@acorex/charts`. It can be used by importing from `@acorex/charts/bar-chart`.

package/bar-chart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/bar-chart.component';
+export * from './lib/bar-chart.config';
+export * from './lib/bar-chart.type';

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

@@ -0,0 +1,123 @@
+import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+import { OnDestroy } from '@angular/core';
+import { AXBarChartClickEvent, AXPBarChartData, AXPBarChartOption } from './bar-chart.type';
+import * as i0 from "@angular/core";
+export declare const AXBarChartColors: {
+    defaultColors: string[];
+    getColor: (index: number, customPalette?: string[]) => string;
+};
+/**
+ * Bar Chart Component
+ * Renders data as vertical bars with interactive hover effects and animations
+ */
+export declare class AXBarChartComponent implements OnDestroy {
+    /** Chart data input */
+    data: import("@angular/core").InputSignal<AXPBarChartData[]>;
+    /** Chart options input */
+    options: import("@angular/core").InputSignal<AXPBarChartOption>;
+    /** Emitted when a bar is clicked */
+    barClick: import("@angular/core").OutputEmitterRef<AXBarChartClickEvent>;
+    private readonly chartContainerEl;
+    protected d3: typeof import('d3');
+    private svg;
+    private chart;
+    private xScale;
+    private yScale;
+    private xAxis;
+    private yAxis;
+    private width;
+    private height;
+    private margin;
+    private _tooltipVisible;
+    private _tooltipPosition;
+    private _tooltipData;
+    private _initialized;
+    private _rendered;
+    protected tooltipVisible: import("@angular/core").Signal<boolean>;
+    protected tooltipPosition: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+    }>;
+    protected tooltipData: import("@angular/core").Signal<AXChartTooltipData>;
+    private configToken;
+    protected effectiveOptions: import("@angular/core").Signal<{
+        width?: number;
+        height?: number;
+        margin?: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        showXAxis?: boolean;
+        showYAxis?: boolean;
+        showGrid?: boolean;
+        xAxisLabel?: string;
+        yAxisLabel?: string;
+        showTooltip?: boolean;
+        barWidth?: number;
+        cornerRadius?: number;
+        animationDuration?: number;
+        animationEasing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "cubic" | "cubic-in" | "cubic-out" | "cubic-in-out";
+    }>;
+    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;
+    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/bar-chart/lib/bar-chart.config.d.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import { AXPBarChartOption } from './bar-chart.type';
+export declare const AXBarChartDefaultConfig: AXPBarChartOption;
+export declare const AX_BAR_CHART_CONFIG: InjectionToken<AXPBarChartOption>;
+export type PartialBarChartConfig = Partial<AXPBarChartOption>;
+export declare function barChartConfig(config?: PartialBarChartConfig): AXPBarChartOption;

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

@@ -0,0 +1,44 @@
+/**
+ * Bar chart data item interface
+ */
+export interface AXPBarChartData {
+    id: string;
+    label: string;
+    value: number;
+    color?: string;
+}
+/**
+ * Bar chart click event interface
+ */
+export interface AXBarChartClickEvent {
+    item: AXPBarChartData;
+    event: MouseEvent;
+}
+/**
+ * Bar chart options interface
+ */
+export interface AXPBarChartOption {
+    width?: number;
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showTooltip?: boolean;
+    barWidth?: number;
+    cornerRadius?: number;
+    animationDuration?: number;
+    animationEasing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic' | 'cubic-in' | 'cubic-out' | 'cubic-in-out';
+}
+/**
+ * Bar chart data type returned by getValue()
+ * Represents an array of bar chart data items
+ */
+export type AXPBarChartValue = AXPBarChartData[];

package/chart-tooltip/README.md

@@ -0,0 +1,3 @@
+# Chart Tooltip
+
+Tooltip component for displaying information on hover in chart components.

package/chart-tooltip/index.d.ts

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

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

@@ -0,0 +1,43 @@
+import { ElementRef, NgZone } from '@angular/core';
+import { AXChartTooltipData } from './chart-tooltip.type';
+import * as i0 from "@angular/core";
+export declare class AXChartTooltipComponent {
+    private ngZone;
+    data: import("@angular/core").InputSignal<AXChartTooltipData>;
+    position: import("@angular/core").InputSignal<{
+        x: number;
+        y: number;
+    }>;
+    visible: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Whether to show the tooltip's percentage badge
+     */
+    showPercentage: import("@angular/core").InputSignal<boolean>;
+    /**
+     * Optional custom styling for the tooltip
+     */
+    style: import("@angular/core").InputSignal<{
+        [key: string]: string;
+    }>;
+    /**
+     * Reference to tooltip container for measuring dimensions
+     */
+    tooltipContainer?: ElementRef<HTMLDivElement>;
+    protected tooltipWidth: number;
+    protected tooltipHeight: number;
+    constructor(ngZone: NgZone);
+    /**
+     * 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: i0.ɵɵFactoryDeclaration<AXChartTooltipComponent, never>;
+    static ɵcmp: i0.ɵɵ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>;
+}

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

@@ -0,0 +1,7 @@
+export interface AXChartTooltipData {
+    title: string;
+    value: number | string;
+    percentage?: string;
+    color?: string;
+    [key: string]: any;
+}

package/donut-chart/README.md

@@ -0,0 +1,3 @@
+# @acorex/chart/donut-chart
+
+Secondary entry point of `@acorex/chart`. It can be used by importing from `@acorex/chart/donut-chart`.

package/donut-chart/index.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/donut-chart.component';
+export * from './lib/donut-chart.config';
+export * from './lib/donut-chart.type';

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

@@ -0,0 +1,143 @@
+import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+import { OnDestroy } from '@angular/core';
+import { AXPDonutChartData, AXPDonutChartOption, AXPDonutChartValue } from './donut-chart.type';
+import * as i0 from "@angular/core";
+export declare const AXDonutChartColors: {
+    defaultColors: string[];
+    getColor: (index: number, customPalette?: string[]) => string;
+};
+/**
+ * Donut Chart Component
+ * Displays data in a circular donut chart with interactive segments
+ */
+export declare class AXDonutChartComponent implements OnDestroy {
+    private cdr;
+    /** Chart data input */
+    data: import("@angular/core").InputSignal<AXPDonutChartValue>;
+    /** Chart options input */
+    options: import("@angular/core").InputSignal<AXPDonutChartOption>;
+    /** Emitted when a segment is clicked */
+    segmentClick: import("@angular/core").OutputEmitterRef<AXPDonutChartData>;
+    /** Emitted when a segment has mouse hover
+     * Can be used by external elements to highlight this segment
+     */
+    segmentHover: import("@angular/core").OutputEmitterRef<AXPDonutChartData>;
+    private readonly chartContainerEl;
+    protected d3: typeof import('d3');
+    private svg;
+    private pieData;
+    private hiddenSegments;
+    private _initialized;
+    private _rendered;
+    private _tooltipVisible;
+    private _tooltipPosition;
+    private _tooltipData;
+    protected tooltipVisible: import("@angular/core").Signal<boolean>;
+    protected tooltipPosition: import("@angular/core").Signal<{
+        x: number;
+        y: number;
+    }>;
+    protected tooltipData: import("@angular/core").Signal<AXChartTooltipData>;
+    private configToken;
+    protected effectiveOptions: import("@angular/core").Signal<{
+        width?: number;
+        height?: number;
+        showTooltip?: boolean;
+        donutWidth?: number;
+        cornerRadius?: number;
+        animationDuration?: number;
+        animationEasing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "cubic" | "cubic-in" | "cubic-out" | "cubic-in-out";
+    }>;
+    protected chartDataArray: import("@angular/core").Signal<AXPDonutChartData[]>;
+    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: AXPDonutChartData): 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 handleSegmentHover;
+    /**
+     * Handles mouse leave from segments
+     */
+    private handleSegmentLeave;
+    /**
+     * Updates tooltip position
+     * 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
+     */
+    private addCenterDisplay;
+    /**
+     * Handles chart rendering errors
+     */
+    private handleChartError;
+    /**
+     * Cleans up chart resources
+     */
+    private cleanupChart;
+    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/donut-chart/lib/donut-chart.config.d.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import { AXPDonutChartOption } from './donut-chart.type';
+export declare const AXDonutChartDefaultConfig: AXPDonutChartOption;
+export declare const AX_DONUT_CHART_CONFIG: InjectionToken<AXPDonutChartOption>;
+export type PartialDonutChartConfig = Partial<AXPDonutChartOption>;
+export declare function donutChartConfig(config?: PartialDonutChartConfig): AXPDonutChartOption;

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

@@ -0,0 +1,25 @@
+/**
+ * Represents a single segment in the donut chart
+ */
+export interface AXPDonutChartData {
+    id: string;
+    name: string;
+    value: number;
+}
+/**
+ * Configuration options for the donut chart
+ */
+export interface AXPDonutChartOption {
+    width?: number;
+    height?: number;
+    showTooltip?: boolean;
+    donutWidth?: number;
+    cornerRadius?: number;
+    animationDuration?: number;
+    animationEasing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic' | 'cubic-in' | 'cubic-out' | 'cubic-in-out';
+}
+/**
+ * Data structure provided to the chart component
+ * Can be an array of AXPDonutChartData directly
+ */
+export type AXPDonutChartValue = AXPDonutChartData[];