@acorex/charts 21.0.1-next.7 → 21.0.1-next.71

package/package.json

@@ -1,48 +1,54 @@
 {
   "name": "@acorex/charts",
-  "version": "21.0.1-next.7",
+  "version": "21.0.1-next.71",
   "peerDependencies": {
-    "@angular/common": "^20.0.0",
-    "@angular/core": "^20.0.0",
-    "d3": "^7.9.0"
+    "d3": ">=7.9.0"
   },
   "sideEffects": false,
   "module": "fesm2022/acorex-charts.mjs",
-  "typings": "index.d.ts",
+  "typings": "types/acorex-charts.d.ts",
   "exports": {
     "./package.json": {
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/acorex-charts.d.ts",
       "default": "./fesm2022/acorex-charts.mjs"
     },
     "./bar-chart": {
-      "types": "./bar-chart/index.d.ts",
+      "types": "./types/acorex-charts-bar-chart.d.ts",
       "default": "./fesm2022/acorex-charts-bar-chart.mjs"
     },
     "./chart-legend": {
-      "types": "./chart-legend/index.d.ts",
+      "types": "./types/acorex-charts-chart-legend.d.ts",
       "default": "./fesm2022/acorex-charts-chart-legend.mjs"
     },
     "./chart-tooltip": {
-      "types": "./chart-tooltip/index.d.ts",
+      "types": "./types/acorex-charts-chart-tooltip.d.ts",
       "default": "./fesm2022/acorex-charts-chart-tooltip.mjs"
     },
     "./donut-chart": {
-      "types": "./donut-chart/index.d.ts",
+      "types": "./types/acorex-charts-donut-chart.d.ts",
       "default": "./fesm2022/acorex-charts-donut-chart.mjs"
     },
+    "./funnel-chart": {
+      "types": "./types/acorex-charts-funnel-chart.d.ts",
+      "default": "./fesm2022/acorex-charts-funnel-chart.mjs"
+    },
     "./gauge-chart": {
-      "types": "./gauge-chart/index.d.ts",
+      "types": "./types/acorex-charts-gauge-chart.d.ts",
       "default": "./fesm2022/acorex-charts-gauge-chart.mjs"
     },
+    "./heatmap-chart": {
+      "types": "./types/acorex-charts-heatmap-chart.d.ts",
+      "default": "./fesm2022/acorex-charts-heatmap-chart.mjs"
+    },
     "./hierarchy-chart": {
-      "types": "./hierarchy-chart/index.d.ts",
+      "types": "./types/acorex-charts-hierarchy-chart.d.ts",
       "default": "./fesm2022/acorex-charts-hierarchy-chart.mjs"
     },
     "./line-chart": {
-      "types": "./line-chart/index.d.ts",
+      "types": "./types/acorex-charts-line-chart.d.ts",
       "default": "./fesm2022/acorex-charts-line-chart.mjs"
     }
   },

package/{bar-chart/index.d.ts → types/acorex-charts-bar-chart.d.ts}

@@ -1,5 +1,6 @@
+import * as _acorex_charts_bar_chart from '@acorex/charts/bar-chart';
 import * as _acorex_charts from '@acorex/charts';
-import { AXAnimationEasing, NXNativeEvent, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
+import { NXNativeEvent, AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, InjectionToken } from '@angular/core';
@@ -116,6 +117,8 @@ declare class AXBarChartComponent extends AXChartComponent implements OnDestroy,
     private readonly X_AXIS_TITLE_GAP;
     private readonly X_AXIS_TITLE_BLOCK_HEIGHT;
     private readonly TOP_EDGE_PADDING;
+    private readonly BOTTOM_EDGE_PADDING;
+    private readonly HORIZONTAL_EDGE_PADDING;
     private readonly FALLBACK_PLOT_HEIGHT;
     private readonly MIN_PLOT_HEIGHT;
     private readonly MIN_TOTAL_WIDTH;
@@ -146,6 +149,8 @@ declare class AXBarChartComponent extends AXChartComponent implements OnDestroy,
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
+    private _tooltipRafId;
+    private _pendingTooltipCoords;
     private _initialized;
     private _rendered;
     protected tooltipVisible: _angular_core.Signal<boolean>;
@@ -172,7 +177,7 @@ declare class AXBarChartComponent extends AXChartComponent implements OnDestroy,
         animationDuration?: number;
         animationDelay?: number;
         animationEasing?: _acorex_charts.AXAnimationEasing;
-        messages?: AXBarChartMessages;
+        messages?: _acorex_charts_bar_chart.AXBarChartMessages;
     }>;
     protected effectiveMessages: _angular_core.Signal<{
         noData: string;
@@ -258,10 +263,6 @@ declare class AXBarChartComponent extends AXChartComponent implements OnDestroy,
      * Handles bar hover event and shows tooltip
      */
     private handleBarHover;
-    /**
-     * Updates tooltip position based on mouse coordinates
-     * Enhanced to handle overflow issues by positioning tooltips more intelligently
-     */
     private updateTooltipPosition;
     /**
      * Enhanced tooltip positioning that considers chart boundaries and prevents overflow

package/{chart-tooltip/index.d.ts → types/acorex-charts-chart-tooltip.d.ts}

@@ -41,6 +41,7 @@ declare class AXChartTooltipComponent {
     protected isTitleArray(): boolean;
     protected titleList(): string[];
     protected colorAt(index: number): string | null;
+    protected formattedValue(): string;
     /**
      * Updates tooltip dimensions after it's rendered
      */

package/{donut-chart/index.d.ts → types/acorex-charts-donut-chart.d.ts}

@@ -1,3 +1,4 @@
+import * as _acorex_charts_donut_chart from '@acorex/charts/donut-chart';
 import * as _acorex_charts from '@acorex/charts';
 import { AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
@@ -145,6 +146,8 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
+    private _tooltipRafId;
+    private _pendingTooltipCoords;
     protected tooltipVisible: _angular_core.Signal<boolean>;
     protected tooltipPosition: _angular_core.Signal<{
         x: number;
@@ -163,7 +166,7 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
         cornerRadius?: number;
         animationDuration?: number;
         animationEasing?: _acorex_charts.AXAnimationEasing;
-        messages?: AXDonutChartMessages;
+        messages?: _acorex_charts_donut_chart.AXDonutChartMessages;
     }>;
     private readonly TOOLTIP_GAP;
     private readonly HIGHLIGHT_TRANSITION_DURATION;
@@ -172,6 +175,7 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
     private readonly LABEL_ANIMATION_DELAY;
     private readonly MIN_CHART_DIMENSION;
     private readonly MIN_CHART_FOR_LABELS;
+    private readonly CHART_INSET;
     private readonly DIMMED_OPACITY;
     private readonly VISIBLE_OPACITY;
     protected effectiveMessages: _angular_core.Signal<{
@@ -248,16 +252,17 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
     private isChartLargeEnoughForLabels;
     private addDataLabels;
     /**
-     * Calculates optimal font size for label based on segment size
-     * Uses smart dynamic sizing with readability constraints
+     * Calculates font size for data labels using the donut ring's physical dimensions.
+     *
+     * Primary driver is the ring width (radial space), with chord length as an
+     * overflow guard and a gentle scale-down for smaller segments to create
+     * visual hierarchy.
      */
     private calculateLabelFontSize;
     private formatPercentage;
-    private buildLabelText;
     /**
-     * Truncates label text to fit within the arc segment
-     * Uses smart truncation: tries full label, then label only, then percentage only, then truncated percentage
-     * Calculates chord length (straight line) since text is rendered horizontally, not along the arc
+     * Returns the best-fit label text for a segment, progressively truncating
+     * from "Label (XX%)" → "Label" → "XX%" → truncated label → truncated percentage.
      */
     private getTruncatedLabelText;
     /**
@@ -281,10 +286,6 @@ declare class AXDonutChartComponent extends AXChartComponent implements OnDestro
      * Handles mouse leave from segments
      */
     private handleSegmentLeave;
-    /**
-     * Updates tooltip position
-     * Ensures the tooltip is visible by adjusting position when near edges
-     */
     private updateTooltipPosition;
     /**
      * Adds center display with total value

package/types/acorex-charts-funnel-chart.d.ts

@@ -0,0 +1,108 @@
+import * as _acorex_charts_funnel_chart from '@acorex/charts/funnel-chart';
+import * as _acorex_charts from '@acorex/charts';
+import { AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
+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';
+
+interface AXFunnelData {
+    id?: string | number;
+    name: string;
+    value: number;
+    color?: string;
+}
+interface AXFunnelChartMessages {
+    noData?: string;
+    noDataIcon?: string;
+}
+interface AXFunnelChartOption {
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    width?: number;
+    height?: number;
+    /** The ratio of the bottom width compared to the top width for the last segment (0 to 1). Default: 0.3 */
+    neckWidth?: number;
+    colors?: string[];
+    /** Color used for the minimum value when `colors` is not provided. */
+    startColor?: string;
+    /** Color used for the maximum value when `colors` is not provided. */
+    endColor?: string;
+    showLabels?: boolean;
+    /** Label offset from the slice edge (px). */
+    labelOffset?: number;
+    showTooltip?: boolean;
+    animationDuration?: number;
+    animationEasing?: AXAnimationEasing;
+    messages?: AXFunnelChartMessages;
+}
+
+declare class AXFunnelChartComponent extends AXChartComponent implements OnDestroy, AXChartComponentBase {
+    data: _angular_core.InputSignal<AXFunnelData[]>;
+    options: _angular_core.InputSignal<AXFunnelChartOption>;
+    /** Emitted when a funnel segment is clicked */
+    segmentClick: _angular_core.OutputEmitterRef<AXFunnelData>;
+    private readonly chartContainerEl;
+    private svgElement;
+    protected d3: typeof d3;
+    private _initialized;
+    private _rendered;
+    private platformService;
+    protected isRtl: _angular_core.WritableSignal<boolean>;
+    private directionSub?;
+    private _tooltipVisible;
+    private _tooltipPosition;
+    private _tooltipData;
+    private _tooltipRafId;
+    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<{
+        margin?: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        width?: number;
+        height?: number;
+        neckWidth?: number;
+        colors?: string[];
+        startColor?: string;
+        endColor?: string;
+        showLabels?: boolean;
+        labelOffset?: number;
+        showTooltip?: boolean;
+        animationDuration?: number;
+        animationEasing?: _acorex_charts.AXAnimationEasing;
+        messages?: _acorex_charts_funnel_chart.AXFunnelChartMessages;
+    }>;
+    constructor();
+    ngOnDestroy(): void;
+    protected loadD3(): Promise<void>;
+    createChart(): void;
+    private resolveSliceColor;
+    private hashStringToUint32;
+    private resolveCssColor;
+    updateChart(): void;
+    private showTooltip;
+    private updateTooltipPosition;
+    private hideTooltip;
+    cleanupChart(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXFunnelChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXFunnelChartComponent, "ax-funnel-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "segmentClick": "segmentClick"; }, never, never, true, never>;
+}
+
+declare const AXFunnelChartDefaultConfig: AXFunnelChartOption;
+declare const AX_FUNNEL_CHART_CONFIG: InjectionToken<AXFunnelChartOption>;
+
+export { AXFunnelChartComponent, AXFunnelChartDefaultConfig, AX_FUNNEL_CHART_CONFIG };
+export type { AXFunnelChartMessages, AXFunnelChartOption, AXFunnelData };

package/{gauge-chart/index.d.ts → types/acorex-charts-gauge-chart.d.ts}

@@ -1,3 +1,4 @@
+import * as _acorex_charts_gauge_chart from '@acorex/charts/gauge-chart';
 import * as _acorex_charts from '@acorex/charts';
 import { AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
@@ -106,6 +107,8 @@ declare class AXGaugeChartComponent extends AXChartComponent implements OnDestro
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
+    private _tooltipRafId;
+    private _pendingTooltipCoords;
     protected tooltipVisible: _angular_core.Signal<boolean>;
     protected tooltipPosition: _angular_core.Signal<{
         x: number;
@@ -130,12 +133,16 @@ declare class AXGaugeChartComponent extends AXChartComponent implements OnDestro
         label?: string;
         animationDuration?: number;
         animationEasing?: _acorex_charts.AXAnimationEasing;
-        messages?: AXGaugeChartMessages;
+        messages?: _acorex_charts_gauge_chart.AXGaugeChartMessages;
     }>;
     private readonly TOOLTIP_GAP;
     private readonly HALF_CIRCLE_RADIANS;
     private readonly QUARTER_CIRCLE_RADIANS;
     private readonly DEGREES_PER_RADIAN;
+    private readonly CHART_EDGE_PADDING;
+    private readonly TICK_LABEL_CHAR_WIDTH_RATIO;
+    private readonly TICK_LABEL_SIDE_PADDING;
+    private readonly LABEL_TICK_CLEARANCE;
     constructor();
     ngOnDestroy(): void;
     /**
@@ -170,10 +177,6 @@ declare class AXGaugeChartComponent extends AXChartComponent implements OnDestro
      * Shows tooltip for the entire range when no thresholds are defined
      */
     private showSingleRangeTooltip;
-    /**
-     * Updates the tooltip position based on the mouse event
-     * For gauge charts, we need simpler coordinate handling since D3 events are already in container coordinates
-     */
     private updateTooltipPosition;
     /**
      * Hides the tooltip
@@ -191,6 +194,14 @@ declare class AXGaugeChartComponent extends AXChartComponent implements OnDestro
      * Draws tick marks and labels around the gauge
      */
     private drawTicks;
+    private getTickCount;
+    private getTickFontSize;
+    private getBaseLabelOffset;
+    private getTickLabelAnchor;
+    private getNearEdgeProjection;
+    private formatTickValue;
+    private estimateLabelWidth;
+    private estimateMaxTickLabelWidth;
     /**
      * Draws the value and label text in the center
      */

package/types/acorex-charts-heatmap-chart.d.ts

@@ -0,0 +1,111 @@
+import * as _acorex_charts_heatmap_chart from '@acorex/charts/heatmap-chart';
+import * as _acorex_charts from '@acorex/charts';
+import { AXAnimationEasing, AXChartComponent } from '@acorex/charts';
+import * as _angular_core from '@angular/core';
+import { OnDestroy, InjectionToken } from '@angular/core';
+import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
+
+interface AXHeatmapData {
+    x: string | number;
+    y: string | number;
+    value: number;
+    label?: string;
+}
+interface AXHeatmapMessages {
+    noData?: string;
+    noDataHelp?: string;
+    noDataIcon?: string;
+}
+interface AXHeatmapChartOption {
+    width?: number;
+    height?: number;
+    margin?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /**
+     * Discrete palette. If provided (non-empty), a (stable) random color is chosen per cell.
+     * If omitted/empty, colors are computed from `startColor` → `endColor` based on the cell value.
+     */
+    colors?: string[];
+    /** Color used for the minimum value when `colors` is not provided. */
+    startColor?: string;
+    /** Color used for the maximum value when `colors` is not provided. */
+    endColor?: string;
+    cellPadding?: number;
+    borderRadius?: number;
+    showXAxis?: boolean;
+    showYAxis?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    showTooltip?: boolean;
+    animationDuration?: number;
+    animationEasing?: AXAnimationEasing;
+    messages?: AXHeatmapMessages;
+}
+
+declare class AXHeatmapChartComponent extends AXChartComponent implements OnDestroy {
+    private readonly defaultConfig;
+    data: _angular_core.InputSignal<AXHeatmapData[]>;
+    options: _angular_core.InputSignal<AXHeatmapChartOption>;
+    /** Emitted when a heatmap cell is clicked */
+    cellClick: _angular_core.OutputEmitterRef<AXHeatmapData>;
+    private readonly containerRef;
+    private svg;
+    protected d3: any;
+    private _d3Ready;
+    private platformService;
+    protected isRtl: _angular_core.WritableSignal<boolean>;
+    private directionSub?;
+    protected tooltipVisible: _angular_core.WritableSignal<boolean>;
+    protected tooltipPosition: _angular_core.WritableSignal<{
+        x: number;
+        y: number;
+    }>;
+    protected tooltipData: _angular_core.WritableSignal<AXChartTooltipData>;
+    private _tooltipRafId;
+    protected effectiveOptions: _angular_core.Signal<{
+        width?: number;
+        height?: number;
+        margin?: {
+            top: number;
+            right: number;
+            bottom: number;
+            left: number;
+        };
+        colors?: string[];
+        startColor?: string;
+        endColor?: string;
+        cellPadding?: number;
+        borderRadius?: number;
+        showXAxis?: boolean;
+        showYAxis?: boolean;
+        xAxisLabel?: string;
+        yAxisLabel?: string;
+        showTooltip?: boolean;
+        animationDuration?: number;
+        animationEasing?: _acorex_charts.AXAnimationEasing;
+        messages?: _acorex_charts_heatmap_chart.AXHeatmapMessages;
+    }>;
+    constructor();
+    private init;
+    private renderChart;
+    private hashStringToUint32;
+    private resolveCssColor;
+    private drawAxis;
+    private showTooltip;
+    private updateTooltipPos;
+    private hideTooltip;
+    ngOnDestroy(): void;
+    private drawAxisLabels;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXHeatmapChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXHeatmapChartComponent, "ax-heatmap-chart", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; }, { "cellClick": "cellClick"; }, never, never, true, never>;
+}
+
+declare const AXHeatmapChartDefaultConfig: AXHeatmapChartOption;
+declare const AX_HEATMAP_CHART_CONFIG: InjectionToken<AXHeatmapChartOption>;
+
+export { AXHeatmapChartComponent, AXHeatmapChartDefaultConfig, AX_HEATMAP_CHART_CONFIG };
+export type { AXHeatmapChartOption, AXHeatmapData, AXHeatmapMessages };

package/{hierarchy-chart/index.d.ts → types/acorex-charts-hierarchy-chart.d.ts}

@@ -1,5 +1,6 @@
 import * as _acorex_charts from '@acorex/charts';
-import { AXAnimationEasing, NXNativeEvent, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
+import { NXNativeEvent, AXAnimationEasing, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
+import * as _acorex_charts_hierarchy_chart from '@acorex/charts/hierarchy-chart';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, InjectionToken } from '@angular/core';
 
@@ -308,7 +309,7 @@ declare class AXHierarchyChartComponent extends AXChartComponent implements AXCh
     protected effectiveOptions: _angular_core.Signal<{
         width?: number;
         height?: number;
-        margin?: AXHierarchyChartMargin;
+        margin?: _acorex_charts_hierarchy_chart.AXHierarchyChartMargin;
         nodeRadius?: number;
         nodeStrokeWidth?: number;
         linkWidth?: number;
@@ -324,7 +325,7 @@ declare class AXHierarchyChartComponent extends AXChartComponent implements AXCh
         className?: string;
         animationDuration?: number;
         animationEasing?: _acorex_charts.AXAnimationEasing;
-        messages?: AXHierarchyChartMessages;
+        messages?: _acorex_charts_hierarchy_chart.AXHierarchyChartMessages;
     }>;
     protected effectiveMessages: _angular_core.Signal<{
         noData: string;

package/{line-chart/index.d.ts → types/acorex-charts-line-chart.d.ts}

@@ -1,3 +1,4 @@
+import * as _acorex_charts_line_chart from '@acorex/charts/line-chart';
 import * as _acorex_charts from '@acorex/charts';
 import { AXAnimationEasing, NXNativeEvent, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
@@ -121,6 +122,8 @@ declare class AXLineChartComponent extends AXChartComponent implements OnInit, A
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
+    private _tooltipRafId;
+    private _pendingTooltipCoords;
     private _initialized;
     private _rendered;
     private hiddenSeries;
@@ -160,7 +163,7 @@ declare class AXLineChartComponent extends AXChartComponent implements OnInit, A
         showCrosshair?: boolean;
         animationDuration?: number;
         animationEasing?: _acorex_charts.AXAnimationEasing;
-        messages?: AXLineChartMessages;
+        messages?: _acorex_charts_line_chart.AXLineChartMessages;
     }>;
     protected effectiveMessages: _angular_core.Signal<{
         noData: string;
@@ -179,6 +182,7 @@ declare class AXLineChartComponent extends AXChartComponent implements OnInit, A
     private readonly MIN_MARGIN_BOTTOM;
     private readonly MIN_MARGIN_LEFT;
     private readonly MAX_EXTRA_MARGIN;
+    private readonly CHART_EDGE_PADDING;
     private readonly DEFAULT_LINE_WIDTH;
     private readonly DEFAULT_POINT_RADIUS;
     private readonly DEFAULT_FILL_OPACITY;