@acorex/charts 0.0.1

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,211 @@
+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/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,54 @@
+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/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`.