@acorex/charts 19.13.2

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

@@ -0,0 +1,227 @@
+/**
+ * Represents a node in the hierarchy chart.
+ */
+export interface AXHierarchyChartNode {
+    /**
+     * Unique identifier for the node
+     */
+    id: string;
+    /**
+     * Display name for the node
+     */
+    name?: string;
+    /**
+     * Display label for the node (alternative to name)
+     */
+    label?: string;
+    /**
+     * Value associated with the node (used for calculations if needed)
+     */
+    value?: number;
+    /**
+     * Optional tooltip text to display on hover
+     */
+    tooltip?: string;
+    /**
+     * Optional subtitle text to be displayed
+     */
+    subtitle?: string;
+    /**
+     * Optional description or additional information
+     */
+    description?: string;
+    /**
+     * Optional icon to be displayed with the node
+     */
+    icon?: string;
+    /**
+     * Optional type category for the node
+     */
+    type?: string;
+    /**
+     * Optional color to apply to the node
+     */
+    color?: string;
+    /**
+     * Whether the node is initially expanded (if it has children)
+     */
+    isExpanded?: boolean;
+    /**
+     * Child nodes
+     */
+    children?: AXHierarchyChartNode[];
+    /**
+     * Reference to parent node ID
+     */
+    parentId?: string | null;
+    /**
+     * Additional metadata (can be used for custom rendering or logic)
+     */
+    metadata?: Record<string, any>;
+    /**
+     * Current expanded state (set by component during rendering)
+     * @internal
+     */
+    expanded?: boolean;
+    /**
+     * Function to toggle the expanded state of this node (set by component during rendering)
+     * @internal
+     */
+    toggleExpanded?: () => void;
+}
+/**
+ * Hierarchy chart data type
+ */
+export type AXHierarchyChartData = AXHierarchyChartNode;
+/**
+ * Margin configuration for the chart
+ */
+export interface AXHierarchyChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * Configuration options for the hierarchy chart
+ */
+export interface AXHierarchyChartOption {
+    /**
+     * Fixed width for the chart (px). If not provided, container width is used.
+     */
+    width?: number;
+    /**
+     * Fixed height for the chart (px). If not provided, container height is used.
+     */
+    height?: number;
+    /**
+     * Margins around the chart content
+     */
+    margin?: AXHierarchyChartMargin;
+    /**
+     * Node radius in pixels (used when no custom node template is provided)
+     */
+    nodeRadius?: number;
+    /**
+     * Node fill color (used when no custom node template is provided)
+     */
+    nodeColor?: string;
+    /**
+     * Node stroke color (used when no custom node template is provided)
+     */
+    nodeStrokeColor?: string;
+    /**
+     * Node stroke width (used when no custom node template is provided)
+     */
+    nodeStrokeWidth?: number;
+    /**
+     * Link (connection) color
+     */
+    linkColor?: string;
+    /**
+     * Link (connection) width
+     */
+    linkWidth?: number;
+    /**
+     * Style of the links between nodes
+     * 'straight': Direct straight lines between parent and child
+     * 'curved': Default curved lines
+     * 'rounded': Curved lines with rounded corners
+     * 'step': L-shaped stepped lines
+     */
+    linkStyle?: 'straight' | 'curved' | 'rounded' | 'step';
+    /**
+     * Whether to show tooltips on hover
+     */
+    showTooltip?: boolean;
+    /**
+     * Direction of the hierarchy chart layout
+     * 'vertical': top-to-bottom flow
+     * 'horizontal': left-to-right flow
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Fixed node dimensions when using custom node templates
+     */
+    nodeWidth?: number;
+    nodeHeight?: number;
+    /**
+     * Spacing between nodes
+     */
+    nodeSpacingX?: number;
+    nodeSpacingY?: number;
+    /**
+     * Whether to allow node expansion/collapse
+     */
+    collapsible?: boolean;
+    /**
+     * Whether to initially expand all nodes
+     */
+    expandAll?: boolean;
+    /**
+     * Custom CSS class to apply to the chart container
+     */
+    className?: string;
+    /**
+     * Duration of the animation in milliseconds
+     */
+    animationDuration?: number;
+    /**
+     * Type of easing function to use for animations
+     */
+    animationEasing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic' | 'cubic-in' | 'cubic-out' | 'cubic-in-out';
+}
+/**
+ * Context data for node template rendering.
+ * This object is passed to the custom node template.
+ * The node with expanded state and toggle function is passed as $implicit.
+ *
+ * @example
+ * ```html
+ * <ng-template #nodeTemplate let-node>
+ *   <div>{{ node.name }}</div>
+ *   <button (click)="node.toggleExpanded()" *ngIf="node.children?.length">
+ *     {{ node.expanded ? 'Collapse' : 'Expand' }}
+ *   </button>
+ * </ng-template>
+ * ```
+ */
+export interface AXHierarchyChartNodeContext {
+    /**
+     * The node data with expanded state and toggle function (passed as $implicit parameter)
+     */
+    $implicit: AXHierarchyChartNode & {
+        expanded: boolean;
+        toggleExpanded: () => void;
+    };
+}
+/**
+ * Event data for node click events
+ */
+export interface AXHierarchyChartClickEvent {
+    /**
+     * The original DOM event
+     */
+    event: MouseEvent;
+    /**
+     * The data item that was clicked
+     */
+    item: AXHierarchyChartNode;
+    /**
+     * The DOM element that was clicked
+     */
+    element: HTMLElement;
+}
+/**
+ * Event data for node toggle events
+ */
+export interface AXHierarchyChartToggleEvent {
+    /**
+     * The node that was toggled
+     */
+    node: AXHierarchyChartNode;
+    /**
+     * The new expansion state
+     */
+    expanded: boolean;
+}

package/index.d.ts

@@ -0,0 +1 @@
+export declare const AX_CHARTS = "ACOREX_CHARTS";

package/line-chart/README.md

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

package/line-chart/index.d.ts

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

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

@@ -0,0 +1,96 @@
+import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+import { NXComponent } from '@acorex/components/common';
+import { AfterViewInit, OnDestroy, OnInit } from '@angular/core';
+import { AXLineChartOption, AXLineChartPointClickEvent, AXLineChartValue } from './line-chart.type';
+import * as i0 from "@angular/core";
+export declare const AXPLineChartColors: {
+    defaultColors: string[];
+    getColor: (index: number, customPalette?: string[]) => string;
+};
+/**
+ * Line Chart Component for rendering data as lines with interactive hover effects and animations
+ */
+export declare class AXLineChartComponent extends NXComponent implements OnInit, AfterViewInit, OnDestroy {
+    #private;
+    data: import("@angular/core").InputSignal<AXLineChartValue>;
+    options: import("@angular/core").InputSignal<AXLineChartOption>;
+    pointClick: import("@angular/core").OutputEmitterRef<AXLineChartPointClickEvent>;
+    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;
+        margins?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        };
+        showXAxis?: boolean;
+        showYAxis?: boolean;
+        showGrid?: boolean;
+        showVerticalGrid?: boolean;
+        xAxisLabel?: string;
+        yAxisLabel?: string;
+        yAxisStartsAtZero?: boolean;
+        axisPadding?: number;
+        showTooltip?: boolean;
+        lineWidth?: number;
+        showPoints?: boolean;
+        pointRadius?: number;
+        smoothLine?: boolean;
+        fillArea?: boolean;
+        fillOpacity?: number;
+        showCrosshair?: boolean;
+        animationDuration?: number;
+        animationEasing?: "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "cubic" | "cubic-in" | "cubic-out" | "cubic-in-out";
+    }>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    protected loadD3(): Promise<void>;
+    protected createChart(): void;
+    protected updateChart(): void;
+    protected cleanupChart(): void;
+    private setupDimensions;
+    private calculateMargins;
+    private setupScales;
+    private createAxes;
+    private renderLines;
+    private handlePointGroupEnter;
+    private handlePointGroupLeave;
+    private getReducedDataPoints;
+    private handlePointHover;
+    private showCrosshairLines;
+    private updateTooltipPosition;
+    private handlePointClick;
+    private showNoDataMessage;
+    private handleOverlappingPointsHover;
+    /**
+     * Gets the appropriate D3 easing function based on the option string
+     */
+    private getEasingFunction;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXLineChartComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXLineChartComponent, "ax-line-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "pointClick": "pointClick"; }, never, never, true, never>;
+}

package/line-chart/lib/line-chart.config.d.ts

@@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+import { AXLineChartOption } from './line-chart.type';
+export declare const AXLineChartDefaultConfig: AXLineChartOption;
+export declare const AX_LINE_CHART_CONFIG: InjectionToken<AXLineChartOption>;
+export type PartialLineChartConfig = Partial<AXLineChartOption>;
+export declare function lineChartConfig(config?: PartialLineChartConfig): AXLineChartOption;

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

@@ -0,0 +1,61 @@
+import { NXNativeEvent } from '@acorex/components/common';
+/**
+ * Line chart data point interface
+ */
+export interface AXLineChartData {
+    id?: string;
+    label?: string;
+    lineColor?: string;
+    fillColor?: string;
+    data: Array<{
+        x: number | string;
+        y: number;
+    }>;
+}
+/**
+ * Line chart options interface
+ */
+export interface AXLineChartOption {
+    width?: number;
+    height?: number;
+    margins?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    showGrid?: boolean;
+    showVerticalGrid?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    yAxisStartsAtZero?: boolean;
+    axisPadding?: number;
+    showTooltip?: boolean;
+    lineWidth?: number;
+    showPoints?: boolean;
+    pointRadius?: number;
+    smoothLine?: boolean;
+    fillArea?: boolean;
+    fillOpacity?: number;
+    showCrosshair?: boolean;
+    animationDuration?: number;
+    animationEasing?: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic' | 'cubic-in' | 'cubic-out' | 'cubic-in-out';
+}
+/**
+ * Line chart point click event interface
+ */
+export interface AXLineChartPointClickEvent {
+    series: AXLineChartData;
+    point: {
+        x: number | string;
+        y: number;
+    };
+    event: NXNativeEvent;
+}
+/**
+ * Line chart data type
+ * Supports both single series and array of series
+ */
+export type AXLineChartValue = AXLineChartData[] | AXLineChartData;

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@acorex/charts",
+  "version": "19.13.2",
+  "peerDependencies": {
+    "@angular/common": "^19.2.0",
+    "@angular/core": "^19.2.0",
+    "d3": "^7.9.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/acorex-charts.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/acorex-charts.mjs"
+    },
+    "./bar-chart": {
+      "types": "./bar-chart/index.d.ts",
+      "default": "./fesm2022/acorex-charts-bar-chart.mjs"
+    },
+    "./chart-tooltip": {
+      "types": "./chart-tooltip/index.d.ts",
+      "default": "./fesm2022/acorex-charts-chart-tooltip.mjs"
+    },
+    "./donut-chart": {
+      "types": "./donut-chart/index.d.ts",
+      "default": "./fesm2022/acorex-charts-donut-chart.mjs"
+    },
+    "./gauge-chart": {
+      "types": "./gauge-chart/index.d.ts",
+      "default": "./fesm2022/acorex-charts-gauge-chart.mjs"
+    },
+    "./hierarchy-chart": {
+      "types": "./hierarchy-chart/index.d.ts",
+      "default": "./fesm2022/acorex-charts-hierarchy-chart.mjs"
+    },
+    "./line-chart": {
+      "types": "./line-chart/index.d.ts",
+      "default": "./fesm2022/acorex-charts-line-chart.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}