@acorex/charts 0.0.1

package/line-chart/index.d.ts

@@ -0,0 +1,184 @@
+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 { OnInit, AfterViewInit, OnDestroy, InjectionToken } from '@angular/core';
+import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
+import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+
+/**
+ * Line chart data point interface
+ */
+interface AXLineChartData {
+    id?: string;
+    label?: string;
+    tooltipLabel?: string;
+    lineColor?: string;
+    fillColor?: string;
+    data: Array<{
+        x: number | string;
+        y: number;
+        tooltipLabel?: string;
+    }>;
+}
+/**
+ * Line chart options interface
+ *
+ * Component supports the following CSS custom properties (design tokens):
+ * - `--ax-comp-line-chart-labels-color`: Color for axis labels.
+ *   Default: `--ax-sys-color-on-lightest-surface` (applied with 0.7 opacity where needed)
+ * - `--ax-comp-line-chart-axis-color`: Color for X/Y axis lines.
+ *   Default: `--ax-sys-color-on-lightest-surface` (applied with 0.2 opacity)
+ * - `--ax-comp-line-chart-grid-lines-color`: Color for grid lines.
+ *   Default: `--ax-sys-color-on-lightest-surface` (applied with 0.2 opacity)
+ * - `--ax-comp-line-chart-bg-color`: Background color for the chart.
+ *   Default: `--ax-sys-color-lightest-surface`
+ * - `--ax-comp-line-chart-text-color`: Color for text elements like labels and no data message.
+ *   Default: `--ax-sys-color-on-lightest-surface`
+ */
+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?: AXAnimationEasing;
+}
+/**
+ * Line chart point click event interface
+ */
+interface AXLineChartPointClickEvent {
+    series: AXLineChartData;
+    point: {
+        x: number | string;
+        y: number;
+    };
+    event: NXNativeEvent;
+}
+/**
+ * Line chart data type
+ * Supports both single series and array of series
+ */
+type AXLineChartValue = AXLineChartData[] | AXLineChartData;
+
+/**
+ * Line Chart Component for rendering data as lines with interactive hover effects and animations
+ */
+declare class AXLineChartComponent extends NXComponent implements OnInit, AfterViewInit, OnDestroy, AXChartLegendCompatible {
+    #private;
+    data: _angular_core.InputSignal<AXLineChartValue>;
+    options: _angular_core.InputSignal<AXLineChartOption>;
+    pointClick: _angular_core.OutputEmitterRef<AXLineChartPointClickEvent>;
+    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 _tooltipVisible;
+    private _tooltipPosition;
+    private _tooltipData;
+    private _initialized;
+    private _rendered;
+    private hiddenSeries;
+    private _fullNormalizedData;
+    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;
+        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?: _acorex_cdk_common.AXAnimationEasing;
+    }>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    getLegendItems(): AXChartLegendItem[];
+    highlightSegment(id: string | null): void;
+    toggleSegment(id: string): boolean;
+    protected loadD3(): Promise<void>;
+    protected createChart(): void;
+    protected updateChart(): void;
+    protected cleanupChart(): void;
+    private setupDimensions;
+    private calculateMargins;
+    private setupScales;
+    private createAxes;
+    private renderLines;
+    private enablePointerEventsAfterAnimation;
+    private handlePointGroupEnter;
+    private handlePointGroupLeave;
+    private getReducedDataPoints;
+    private handlePointHover;
+    private showCrosshairLines;
+    private updateTooltipPosition;
+    private handlePointClick;
+    private showNoDataMessage;
+    private showAllSeriesHiddenMessage;
+    private handleOverlappingPointsHover;
+    private getEasingFunction;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXLineChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵ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>;
+}
+
+declare const AXLineChartDefaultConfig: AXLineChartOption;
+declare const AX_LINE_CHART_CONFIG: InjectionToken<AXLineChartOption>;
+type PartialLineChartConfig = Partial<AXLineChartOption>;
+declare function lineChartConfig(config?: PartialLineChartConfig): AXLineChartOption;
+
+export { AXLineChartComponent, AXLineChartDefaultConfig, AX_LINE_CHART_CONFIG, lineChartConfig };
+export type { AXLineChartData, AXLineChartOption, AXLineChartPointClickEvent, AXLineChartValue, PartialLineChartConfig };

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@acorex/charts",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^20.0.0",
+    "@angular/core": "^20.0.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-legend": {
+      "types": "./chart-legend/index.d.ts",
+      "default": "./fesm2022/acorex-charts-chart-legend.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"
+  }
+}