@acorex/charts 0.0.1

package/gauge-chart/index.d.ts

@@ -0,0 +1,218 @@
+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 { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+
+/**
+ * Gauge chart data item interface
+ */
+interface AXGaugeChartData {
+    id: string;
+    value: number;
+    color?: string;
+}
+/**
+ * Gauge chart options interface
+ *
+ * ## Design Tokens
+ * The component supports the following CSS custom properties:
+ *
+ * ### `--ax-comp-gauge-chart-bg-color`
+ * Background color for the chart area.
+ * Default: `var(--ax-sys-color-lightest-surface)`
+ * Usage: `rgb(var(--ax-comp-gauge-chart-bg-color))`
+ *
+ * ### `--ax-comp-gauge-chart-text-color`
+ * Text color for all labels, values, and indicators.
+ * Default: `var(--ax-sys-color-on-lightest-surface)`
+ * Usage: `rgb(var(--ax-comp-gauge-chart-text-color))`
+ *
+ * ### `--ax-comp-gauge-chart-track-color`
+ * Color for the gauge track (background arc).
+ * Default: `var(--ax-sys-color-gray-200)`
+ * Usage: `rgb(var(--ax-comp-gauge-chart-track-color))`
+ *
+ * ### `--ax-comp-gauge-chart-needle-color`
+ * Color for the gauge needle indicator.
+ * Default: `var(--ax-sys-color-primary-500)`
+ * Usage: `rgb(var(--ax-comp-gauge-chart-needle-color))`
+ *
+ * ## Usage
+ * Override these tokens in your CSS to customize the chart's appearance:
+ * ```css
+ * ax-gauge-chart {
+ *   --ax-comp-gauge-chart-bg-color: var(--your-custom-background);
+ *   --ax-comp-gauge-chart-text-color: var(--your-custom-text-color);
+ *   --ax-comp-gauge-chart-track-color: var(--your-custom-track-color);
+ *   --ax-comp-gauge-chart-needle-color: var(--your-custom-needle-color);
+ * }
+ * ```
+ */
+interface AXGaugeChartOption {
+    minValue?: number;
+    maxValue?: number;
+    width?: number;
+    height?: number;
+    gaugeWidth?: number;
+    cornerRadius?: number;
+    showValue?: boolean;
+    showTooltip?: boolean;
+    thresholds?: {
+        value: number;
+        color: string;
+        label?: string;
+    }[];
+    label?: string;
+    animationDuration?: number;
+    animationEasing?: AXAnimationEasing;
+}
+/**
+ * Gauge chart data type
+ * Represents a single gauge value
+ */
+type AXGaugeChartValue = number;
+
+/**
+ * Gauge Chart Component
+ * Renders a semi-circular gauge chart with animated needle and thresholds
+ */
+declare class AXGaugeChartComponent implements OnDestroy {
+    private cdr;
+    /** Chart value input */
+    value: _angular_core.InputSignal<number>;
+    /** Chart options input */
+    options: _angular_core.InputSignal<AXGaugeChartOption>;
+    private readonly chartContainerEl;
+    private svgElement;
+    protected d3: typeof d3;
+    private _initialized;
+    private _rendered;
+    private _prevValue;
+    private _prevOptionsString;
+    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;
+    protected effectiveOptions: _angular_core.Signal<{
+        minValue?: number;
+        maxValue?: number;
+        width?: number;
+        height?: number;
+        gaugeWidth?: number;
+        cornerRadius?: number;
+        showValue?: boolean;
+        showTooltip?: boolean;
+        thresholds?: {
+            value: number;
+            color: string;
+            label?: string;
+        }[];
+        label?: string;
+        animationDuration?: number;
+        animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+    }>;
+    constructor();
+    ngOnDestroy(): void;
+    /**
+     * Loads D3.js dynamically
+     */
+    protected loadD3(): Promise<void>;
+    /**
+     * Creates the gauge chart with all elements
+     */
+    protected createChart(): void;
+    /**
+     * Updates the chart when options change
+     */
+    protected updateChart(): void;
+    /**
+     * Updates only the value display and dial position without recreating the chart
+     */
+    protected updateValueAndDial(value: number): void;
+    /**
+     * Draw the background arc
+     */
+    private drawBackgroundArc;
+    /**
+     * Draw the thresholds arcs
+     */
+    private drawThresholds;
+    /**
+     * Shows tooltip for a threshold arc
+     */
+    private showThresholdTooltip;
+    /**
+     * Shows tooltip for the entire range when no thresholds are defined
+     */
+    private showSingleRangeTooltip;
+    /**
+     * Updates the tooltip position based on the mouse event
+     */
+    private updateTooltipPosition;
+    /**
+     * Hides the tooltip
+     */
+    private hideTooltip;
+    /**
+     * Cleans up chart resources
+     */
+    protected cleanupChart(): void;
+    /**
+     * Creates gradient definitions for thresholds
+     */
+    private createGradients;
+    /**
+     * Draws tick marks and labels around the gauge
+     */
+    private drawTicks;
+    /**
+     * Draws the value and label text in the center
+     */
+    private drawValueDisplay;
+    /**
+     * Draws the dial/needle pointing to the current value with animation
+     */
+    private drawDial;
+    /**
+     * Gets the appropriate D3 easing function based on the option string
+     */
+    private getEasingFunction;
+    /**
+     * Creates a path string for the needle
+     */
+    private createNeedlePath;
+    /**
+     * Scales a value to an angle (in radians)
+     */
+    private scaleValueToAngle;
+    /**
+     * Scales a value to an angle for color arcs (in radians)
+     */
+    private scaleValueToColorAngle;
+    /**
+     * Converts an angle back to a value
+     */
+    private angleToValue;
+    /**
+     * Converts radians to degrees
+     */
+    private radiansToDegrees;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXGaugeChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXGaugeChartComponent, "ax-gauge-chart", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare const AXGaugeChartDefaultConfig: AXGaugeChartOption;
+declare const AX_GAUGE_CHART_CONFIG: InjectionToken<AXGaugeChartOption>;
+type PartialGaugeChartConfig = Partial<AXGaugeChartOption>;
+declare function gaugeChartConfig(config?: PartialGaugeChartConfig): AXGaugeChartOption;
+
+export { AXGaugeChartComponent, AXGaugeChartDefaultConfig, AX_GAUGE_CHART_CONFIG, gaugeChartConfig };
+export type { AXGaugeChartData, AXGaugeChartOption, AXGaugeChartValue, PartialGaugeChartConfig };

package/hierarchy-chart/README.md

@@ -0,0 +1,61 @@
+# Acorex Hierarchy Tree Chart
+
+A responsive, interactive tree chart component for visualizing hierarchical data structures.
+
+## Features
+
+- Vertical or horizontal orientation
+- Collapsible nodes
+- Customizable styling
+- Interactive tooltips
+- Zoom and pan support
+- Multiple link styles (curved, straight, elbow)
+
+## Usage
+
+```typescript
+// Component template
+<ax-hierarchy-chart
+  [data]="treeData()"
+  [options]="chartOptions()"
+  (nodeClick)="handleNodeClick($event)"
+  (nodeCollapse)="handleNodeCollapse($event)"
+></ax-hierarchy-chart>
+
+// Component class
+import { AXHierarchyTreeData, AXHierarchyTreeOption } from '@acorex/chart/hierarchy-chart';
+
+treeData = signal<AXHierarchyTreeData>({
+  rootNodes: [
+    {
+      id: 'root',
+      label: 'Root',
+      children: [
+        {
+          id: 'child1',
+          label: 'Child 1',
+          children: [
+            { id: 'child1-1', label: 'Child 1.1' },
+            { id: 'child1-2', label: 'Child 1.2' }
+          ]
+        },
+        {
+          id: 'child2',
+          label: 'Child 2',
+          children: [
+            { id: 'child2-1', label: 'Child 2.1' }
+          ]
+        }
+      ]
+    }
+  ]
+});
+
+chartOptions = signal<AXHierarchyTreeOption>({
+  orientation: 'vertical',
+  linkStyle: 'curved',
+  showTooltip: true,
+  expandOnClick: true,
+  enableZoom: true
+});
+```

package/hierarchy-chart/index.d.ts

@@ -0,0 +1,368 @@
+import * as _acorex_cdk_common from '@acorex/cdk/common';
+import { AXAnimationEasing, NXNativeEvent, NXComponent } from '@acorex/cdk/common';
+import * as _angular_core from '@angular/core';
+import { TemplateRef, InjectionToken } from '@angular/core';
+
+/**
+ * Represents a node in the hierarchy chart.
+ */
+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
+ */
+type AXHierarchyChartData = AXHierarchyChartNode;
+/**
+ * Margin configuration for the chart
+ */
+interface AXHierarchyChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+/**
+ * Configuration options for the hierarchy chart
+ *
+ * ## Design Tokens
+ * The component supports the following CSS custom properties:
+ *
+ * ### `--ax-comp-hierarchy-chart-node-color`
+ * Fill color for nodes when no custom template is used.
+ * Default: `var(--ax-sys-color-primary-500)`
+ * Usage: `rgb(var(--ax-comp-hierarchy-chart-node-color))`
+ *
+ * ### `--ax-comp-hierarchy-chart-node-stroke-color`
+ * Stroke color for node outlines when no custom template is used.
+ * Default: `var(--ax-sys-color-primary-400)`
+ * Usage: `rgb(var(--ax-comp-hierarchy-chart-node-stroke-color))`
+ *
+ * ### `--ax-comp-hierarchy-chart-link-color`
+ * Color for the connection lines between nodes.
+ * Default: `var(--ax-sys-color-primary-400)`
+ * Usage: `rgb(var(--ax-comp-hierarchy-chart-link-color))`
+ *
+ * ### `--ax-comp-hierarchy-chart-text-color`
+ * Text color for labels and other text content.
+ * Default: `var(--ax-sys-color-on-lightest-surface)`
+ * Usage: `rgb(var(--ax-comp-hierarchy-chart-text-color))`
+ *
+ * ### `--ax-comp-hierarchy-chart-bg-color`
+ * Background color for the chart area.
+ * Default: `var(--ax-sys-color-lightest-surface)`
+ * Usage: `rgb(var(--ax-comp-hierarchy-chart-bg-color))`
+ *
+ * ## Usage
+ * Override these tokens in your CSS to customize the chart's appearance:
+ * ```css
+ * ax-hierarchy-chart {
+ *   --ax-comp-hierarchy-chart-node-color: var(--your-custom-color);
+ *   --ax-comp-hierarchy-chart-node-stroke-color: var(--your-custom-stroke);
+ *   --ax-comp-hierarchy-chart-link-color: var(--your-custom-link-color);
+ *   --ax-comp-hierarchy-chart-text-color: var(--your-custom-text-color);
+ *   --ax-comp-hierarchy-chart-bg-color: var(--your-custom-bg-color);
+ * }
+ * ```
+ */
+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 stroke width (used when no custom node template is provided)
+     */
+    nodeStrokeWidth?: number;
+    /**
+     * 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?: AXAnimationEasing;
+}
+/**
+ * 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>
+ *   @if (node.children?.length) {
+ *     <button (click)="node.toggleExpanded()">
+ *       {{ node.expanded ? 'Collapse' : 'Expand' }}
+ *     </button>
+ *   }
+ * </ng-template>
+ * ```
+ */
+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
+ */
+interface AXHierarchyChartClickEvent {
+    /**
+     * The original DOM event
+     */
+    event: NXNativeEvent;
+    /**
+     * The data item that was clicked
+     */
+    item: AXHierarchyChartNode;
+    /**
+     * The DOM element that was clicked
+     */
+    element: HTMLElement;
+}
+/**
+ * Event data for node expansion/collapse events
+ */
+interface AXHierarchyChartToggleEvent {
+    /**
+     * The node that was toggled
+     */
+    node: AXHierarchyChartNode;
+    /**
+     * The new expansion state
+     */
+    expanded: boolean;
+}
+
+/**
+ * A highly customizable hierarchical visualization component that can be used for:
+ * - Organization charts
+ * - Tree diagrams
+ * - Dependency visualizations
+ * - Process flows
+ *
+ * Supports both default node styling and custom node templates.
+ */
+declare class AXHierarchyChartComponent extends NXComponent {
+    private chartContainer;
+    customNodeTemplate: _angular_core.Signal<TemplateRef<AXHierarchyChartNodeContext>>;
+    private ngZone;
+    private viewContainerRef;
+    private configToken;
+    private d3;
+    private _expandedNodes;
+    private _initialized;
+    private _rendered;
+    private _dimensions;
+    private _nodeElements;
+    private _chartData;
+    data: _angular_core.InputSignal<AXHierarchyChartNode | AXHierarchyChartNode[]>;
+    options: _angular_core.InputSignal<AXHierarchyChartOption>;
+    nodeTemplate: _angular_core.InputSignal<TemplateRef<AXHierarchyChartNodeContext>>;
+    itemClick: _angular_core.OutputEmitterRef<AXHierarchyChartClickEvent>;
+    nodeToggle: _angular_core.OutputEmitterRef<AXHierarchyChartToggleEvent>;
+    protected processedData: _angular_core.Signal<AXHierarchyChartNode>;
+    protected hasCustomTemplate: _angular_core.Signal<boolean>;
+    protected effectiveOptions: _angular_core.Signal<{
+        width?: number;
+        height?: number;
+        margin?: AXHierarchyChartMargin;
+        nodeRadius?: number;
+        nodeStrokeWidth?: number;
+        linkWidth?: number;
+        linkStyle?: "straight" | "curved" | "rounded" | "step";
+        showTooltip?: boolean;
+        direction?: "vertical" | "horizontal";
+        nodeWidth?: number;
+        nodeHeight?: number;
+        nodeSpacingX?: number;
+        nodeSpacingY?: number;
+        collapsible?: boolean;
+        expandAll?: boolean;
+        className?: string;
+        animationDuration?: number;
+        animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+    }>;
+    constructor();
+    /**
+     * Initialize the expanded state for all nodes
+     */
+    private initializeExpandedState;
+    /**
+     * Dynamically load D3.js to reduce initial bundle size
+     */
+    protected loadD3(): Promise<void>;
+    /**
+     * Update dimensions based on container size
+     */
+    private updateDimensions;
+    /**
+     * Create and render the hierarchy chart
+     */
+    private createChart;
+    /**
+     * Toggle node expansion state
+     */
+    toggleNode(nodeId: string): void;
+    /**
+     * Update just the toggle indicator without redrawing the chart
+     */
+    private updateToggleIndicator;
+    /**
+     * Find a node by ID
+     */
+    private findNodeById;
+    /**
+     * Handle node click events
+     */
+    private handleNodeClick;
+    /**
+     * Clear existing chart
+     */
+    private clearChart;
+    /**
+     * Get D3 easing function from string name
+     */
+    private getEasingFunction;
+    /**
+     * Shows a message when no data is available
+     */
+    private showNoDataMessage;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXHierarchyChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXHierarchyChartComponent, "ax-hierarchy-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "nodeTemplate": { "alias": "nodeTemplate"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "nodeToggle": "nodeToggle"; }, ["customNodeTemplate"], never, true, never>;
+}
+
+declare const AXHierarchyChartDefaultConfig: AXHierarchyChartOption;
+declare const AX_HIERARCHY_CHART_CONFIG: InjectionToken<AXHierarchyChartOption>;
+type PartialHierarchyChartConfig = Partial<AXHierarchyChartOption>;
+declare function hierarchyChartConfig(config?: PartialHierarchyChartConfig): AXHierarchyChartOption;
+
+export { AXHierarchyChartComponent, AXHierarchyChartDefaultConfig, AX_HIERARCHY_CHART_CONFIG, hierarchyChartConfig };
+export type { AXHierarchyChartClickEvent, AXHierarchyChartData, AXHierarchyChartMargin, AXHierarchyChartNode, AXHierarchyChartNodeContext, AXHierarchyChartOption, AXHierarchyChartToggleEvent, PartialHierarchyChartConfig };

package/index.d.ts

@@ -0,0 +1,14 @@
+import { InjectionToken } from '@angular/core';
+
+declare const AX_CHART_COLOR_PALETTE: InjectionToken<string[]>;
+/**
+ * Helper function to get a color from the palette by index
+ * @param index The index of the color to get
+ * @param palette The color palette to use
+ * @returns The color at the specified index
+ */
+declare function getChartColor(index: number, palette: string[]): string;
+
+declare const AX_CHARTS = "ACOREX_CHARTS";
+
+export { AX_CHARTS, AX_CHART_COLOR_PALETTE, getChartColor };

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`.