@acorex/charts 21.0.0-next.6 → 21.0.0-next.60

package/bar-chart/index.d.ts

@@ -1,9 +1,8 @@
-import * as _acorex_cdk_common from '@acorex/cdk/common';
-import { AXAnimationEasing, NXNativeEvent, NXComponent } from '@acorex/cdk/common';
+import * as _acorex_charts from '@acorex/charts';
+import { AXAnimationEasing, NXNativeEvent, AXChartComponent, AXChartComponentBase } from '@acorex/charts';
 import * as d3 from 'd3';
 import * as _angular_core from '@angular/core';
 import { OnDestroy, InjectionToken } from '@angular/core';
-import { AXChartComponentBase } from '@acorex/charts';
 import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
 
@@ -75,6 +74,7 @@ interface AXBarChartOption {
     barWidth?: number;
     cornerRadius?: number;
     animationDuration?: number;
+    animationDelay?: number;
     animationEasing?: AXAnimationEasing;
     messages?: AXBarChartMessages;
 }
@@ -88,7 +88,7 @@ type AXBarChartValue = AXBarChartData[] | AXBarChartClusteredData[];
  * Bar Chart Component
  * Renders data as vertical bars with interactive hover effects and animations
  */
-declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
+declare class AXBarChartComponent extends AXChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
     /** Chart data input */
     data: _angular_core.InputSignal<AXBarChartValue>;
     /** Chart options input */
@@ -109,6 +109,39 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
     private margin;
     private readonly CHAR_WIDTH_RATIO;
     private readonly TOOLTIP_GAP;
+    private readonly AXIS_TICK_PADDING;
+    private readonly Y_AXIS_TITLE_THICKNESS;
+    private readonly Y_AXIS_TITLE_PADDING;
+    private readonly X_AXIS_TITLE_FONT_SIZE;
+    private readonly X_AXIS_TITLE_GAP;
+    private readonly X_AXIS_TITLE_BLOCK_HEIGHT;
+    private readonly TOP_EDGE_PADDING;
+    private readonly FALLBACK_PLOT_HEIGHT;
+    private readonly MIN_PLOT_HEIGHT;
+    private readonly MIN_TOTAL_WIDTH;
+    private readonly OUTER_PADDING_CLUSTERED;
+    private readonly INNER_PADDING_CLUSTERED;
+    private readonly MIN_PADDING;
+    private readonly HOVER_TRANSITION_DURATION;
+    private readonly DEFAULT_ANIMATION_DELAY;
+    private readonly LABEL_ANIMATION_DELAY;
+    private readonly MIN_TOP_SPACE_FOR_LABEL;
+    private readonly LABEL_OFFSET;
+    private readonly ROTATION_TOLERANCE_SMALL_DATASET;
+    private readonly SMALL_DATASET_THRESHOLD;
+    private readonly Y_AXIS_PADDING;
+    private readonly TICK_AREA_PADDING;
+    private readonly TICK_AREA_GAP;
+    private readonly DEFAULT_FONT_SIZE;
+    private readonly FONT_WIDTH_MULTIPLIER;
+    private readonly FONT_PADDING;
+    private readonly MAX_LABEL_LENGTH;
+    private readonly MIN_FONT_SIZE_X_AXIS;
+    private readonly MAX_FONT_SIZE_X_AXIS;
+    private readonly MIN_FONT_SIZE_Y_AXIS;
+    private readonly MAX_FONT_SIZE_Y_AXIS;
+    private readonly MANY_ITEMS_THRESHOLD;
+    private readonly VERY_MANY_ITEMS_THRESHOLD;
     private _initialAnimationComplete;
     private _tooltipVisible;
     private _tooltipPosition;
@@ -137,7 +170,8 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
         barWidth?: number;
         cornerRadius?: number;
         animationDuration?: number;
-        animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+        animationDelay?: number;
+        animationEasing?: _acorex_charts.AXAnimationEasing;
         messages?: AXBarChartMessages;
     }>;
     protected effectiveMessages: _angular_core.Signal<{
@@ -148,8 +182,11 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
         noDataIcon: string;
         allHiddenIcon: string;
     }>;
-    private hiddenBars;
-    private hiddenSeries;
+    private readonly hiddenBars;
+    private readonly hiddenSeries;
+    private readonly isClusteredMode;
+    private readonly visibleData;
+    private readonly hasVisibleData;
     private isClusteredData;
     private getClusterSeriesLabels;
     constructor();
@@ -174,6 +211,14 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
      * Sets up chart dimensions and creates SVG with responsive attributes
      */
     private setupDimensions;
+    /**
+     * Calculates plot height based on options and container dimensions
+     */
+    private calculatePlotHeight;
+    /**
+     * Determines if X-axis labels should rotate
+     */
+    private shouldLabelsRotate;
     /**
      * Creates x and y scales for the chart
      */
@@ -215,8 +260,13 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
     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
+     */
+    private computeEnhancedTooltipPosition;
     /**
      * Handles bar click event
      */
@@ -255,7 +305,17 @@ declare class AXBarChartComponent extends NXComponent implements OnDestroy, AXCh
     toggleSegment(id: string): boolean;
     private getContainerElement;
     private clearChartArea;
+    /**
+     * Truncates long labels with ellipsis
+     */
+    private truncateLabel;
+    /**
+     * Gets adaptive font size for X-axis based on width and item count
+     */
     private getXAxisTickFontSizeBasedOnWidth;
+    /**
+     * Gets adaptive font size for Y-axis based on height
+     */
     private getYAxisTickFontSizeBasedOnHeight;
     private buildXAxisCommon;
     private showMessage;

package/donut-chart/index.d.ts

@@ -1,9 +1,8 @@
-import * as _acorex_cdk_common from '@acorex/cdk/common';
-import { AXAnimationEasing } from '@acorex/cdk/common';
+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 { AXChartComponentBase } from '@acorex/charts';
 import { AXChartLegendCompatible, AXChartLegendItem } from '@acorex/charts/chart-legend';
 import { AXChartTooltipData } from '@acorex/charts/chart-tooltip';
 
@@ -122,8 +121,7 @@ type AXDonutChartValue = AXDonutChartData[];
  * Donut Chart Component
  * Displays data in a circular donut chart with interactive segments
  */
-declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
-    #private;
+declare class AXDonutChartComponent extends AXChartComponent implements OnDestroy, AXChartLegendCompatible, AXChartComponentBase {
     private cdr;
     /** Chart data input */
     data: _angular_core.InputSignal<AXDonutChartValue>;
@@ -164,10 +162,18 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
         donutWidth?: number;
         cornerRadius?: number;
         animationDuration?: number;
-        animationEasing?: _acorex_cdk_common.AXAnimationEasing;
+        animationEasing?: _acorex_charts.AXAnimationEasing;
         messages?: AXDonutChartMessages;
     }>;
     private readonly TOOLTIP_GAP;
+    private readonly HIGHLIGHT_TRANSITION_DURATION;
+    private readonly HIGHLIGHT_TRANSITION_NAME;
+    private readonly SEGMENT_ANIMATION_DELAY;
+    private readonly LABEL_ANIMATION_DELAY;
+    private readonly MIN_CHART_DIMENSION;
+    private readonly MIN_CHART_FOR_LABELS;
+    private readonly DIMMED_OPACITY;
+    private readonly VISIBLE_OPACITY;
     protected effectiveMessages: _angular_core.Signal<{
         noData: string;
         noDataHelp: string;
@@ -180,11 +186,16 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     protected getColor(index: number): string;
     protected isSegmentHidden(id: string): boolean;
     constructor();
+    private readonly dataChangeEffect;
     /**
      * Highlights a specific segment by ID
      * @param id The segment ID to highlight, or null to clear highlight
      */
     highlightSegment(id: string | null): void;
+    private clearAllHighlights;
+    private dimNonTargetSegments;
+    private highlightTargetSegment;
+    private getSegmentDataById;
     /**
      * Toggles visibility of a segment by ID
      * @param id Segment ID to toggle
@@ -198,7 +209,7 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     protected loadD3(): Promise<void>;
     protected onSegmentClick(item: AXDonutChartData): void;
     /**
-     * Creates the donut chart
+     * Creates the donut chart from current data
      */
     createChart(): void;
     /**
@@ -227,19 +238,45 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     private renderDonutChart;
     /**
      * Create SVG element with filter definitions for shadows
+     * @returns D3 SVG selection (any type due to dynamic D3 loading)
      */
     private createSvgWithFilters;
     /**
      * Create and render the donut segments with animations
      */
     private createDonutSegments;
+    private isChartLargeEnoughForLabels;
+    private addDataLabels;
     /**
-     * Gets the appropriate D3 easing function based on the option string
+     * Calculates optimal font size for label based on segment size
+     * Uses smart dynamic sizing with readability constraints
      */
+    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
+     */
+    private getTruncatedLabelText;
+    /**
+     * Checks if text fits within available width using conservative estimation
+     * Uses 0.65em per character to account for font variations
+     */
+    private doesTextFit;
+    /**
+     * Truncates text to fit within available width with ellipsis
+     * Uses conservative character width to prevent overflow
+     * Adapts character width estimation based on font size
+     */
+    private truncateTextToFit;
+    private getSegmentColor;
     /**
      * Handle hover effects on a segment
      */
     private handleSliceHover;
+    private showTooltip;
     /**
      * Handles mouse leave from segments
      */
@@ -264,6 +301,7 @@ declare class AXDonutChartComponent implements OnDestroy, AXChartLegendCompatibl
     private renderMessage;
     /**
      * Gets an accessibility label describing the donut chart for screen readers
+     * @returns Descriptive string for screen readers
      */
     protected getAccessibilityLabel(): string;
     /**