@acorex/charts 21.0.1-next.82 → 21.0.1-next.84

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

@@ -10,6 +10,7 @@ interface AXFunnelData {
     id?: string | number;
     name: string;
     value: number;
+    /** Any CSS `<color>` resolvable in the chart container, e.g. `rgb(var(--ax-sys-color-primary-950))`. */
     color?: string;
 }
 interface AXFunnelChartMessages {
@@ -17,6 +18,10 @@ interface AXFunnelChartMessages {
     noDataIcon?: string;
 }
 interface AXFunnelChartOption {
+    /**
+     * Inset in SVG user units (fixed `viewBox` side length 400). The chart scales to its CSS box;
+     * margins keep the same proportions at any container size.
+     */
     margin?: {
         top: number;
         right: number;
@@ -28,12 +33,29 @@ interface AXFunnelChartOption {
     /** 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;
+    /**
+     * Base color when `colors` is not provided: any CSS `<color>` (hex, `rgb()`, `hsl()`,
+     * `rgb(var(--token))`, `color-mix()`, …) resolved against the chart container’s cascade.
+     * Intensity follows the value position in `valueRange` (or data min–max if `valueRange` is omitted).
+     */
+    color?: string;
+    /**
+     * Inclusive numeric range used to map values to color intensity (0–100% of the base color).
+     * If `valueRange` is omitted, or a bound is missing, that bound uses the dataset’s min or max
+     * value (after sorting: largest slice → max, smallest → min).
+     */
+    valueRange?: {
+        min: number;
+        max: number;
+    };
     showLabels?: boolean;
-    /** Label offset from the slice edge (px). */
+    /**
+     * When `showLabels` is true, also render the numeric value on each segment.
+     * Values still appear in the tooltip when `showTooltip` is enabled.
+     * @default true
+     */
+    showSegmentValues?: boolean;
+    /** @deprecated Labels render inside segments; offset is unused. */
     labelOffset?: number;
     showTooltip?: boolean;
     animationDuration?: number;
@@ -42,6 +64,11 @@ interface AXFunnelChartOption {
 }
 
 declare class AXFunnelChartComponent extends AXChartComponent implements OnDestroy, AXChartComponentBase {
+    /**
+     * Fixed SVG coordinate system; the graphic scales to the container via `width`/`height: 100%` + `viewBox`.
+     * Margins and geometry are expressed in these units (same numeric scale as a ~400px reference viewport).
+     */
+    private static readonly VIEW_BOX_SIZE;
     data: _angular_core.InputSignal<AXFunnelData[]>;
     options: _angular_core.InputSignal<AXFunnelChartOption>;
     /** Emitted when a funnel segment is clicked */
@@ -51,9 +78,6 @@ declare class AXFunnelChartComponent extends AXChartComponent implements OnDestr
     protected d3: typeof d3;
     private _initialized;
     private _rendered;
-    private platformService;
-    protected isRtl: _angular_core.WritableSignal<boolean>;
-    private directionSub?;
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
@@ -76,9 +100,13 @@ declare class AXFunnelChartComponent extends AXChartComponent implements OnDestr
         height?: number;
         neckWidth?: number;
         colors?: string[];
-        startColor?: string;
-        endColor?: string;
+        color?: string;
+        valueRange?: {
+            min: number;
+            max: number;
+        };
         showLabels?: boolean;
+        showSegmentValues?: boolean;
         labelOffset?: number;
         showTooltip?: boolean;
         animationDuration?: number;
@@ -89,7 +117,13 @@ declare class AXFunnelChartComponent extends AXChartComponent implements OnDestr
     ngOnDestroy(): void;
     protected loadD3(): Promise<void>;
     createChart(): void;
+    private trapezoidInteriorMetrics;
+    private computeSegmentLabelTypography;
+    private truncateLabel;
+    private pickOnSliceTextColors;
     private resolveSliceColor;
+    /** `resolvedRgb` must be a computed `rgb()` / `rgba()` string (e.g. from {@link resolveCssColor}). */
+    private applyIntensityToResolvedRgb;
     private hashStringToUint32;
     private resolveCssColor;
     updateChart(): void;

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

@@ -27,19 +27,33 @@ interface AXHeatmapChartOption {
     };
     /**
      * 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.
+     * Entries may use any CSS `<color>` (including `rgb(var(--token))`) resolved against the chart container.
+     * If omitted/empty, the base `color` is shown with intensity from the cell value vs `valueRange`
+     * (or data min–max if `valueRange` is omitted).
      */
     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;
+    /**
+     * Base color when `colors` is not provided: any CSS `<color>` resolved against the chart container
+     * (hex, `rgb()`, `rgb(var(--token))`, `color-mix()`, …).
+     */
+    color?: string;
+    /**
+     * Inclusive numeric range for mapping cell values to color intensity.
+     * If `valueRange` is omitted, or a bound is missing, that bound uses the min or max value
+     * among all cells in the current dataset.
+     */
+    valueRange?: {
+        min: number;
+        max: number;
+    };
     cellPadding?: number;
     borderRadius?: number;
     showXAxis?: boolean;
     showYAxis?: boolean;
     xAxisLabel?: string;
     yAxisLabel?: string;
+    /** Like bar-chart: `true` / `false` forces rotation; `'auto'` picks −45° when labels would overflow each band step. */
+    rotateXAxisLabels?: boolean | 'auto';
     showTooltip?: boolean;
     animationDuration?: number;
     animationEasing?: AXAnimationEasing;
@@ -47,6 +61,18 @@ interface AXHeatmapChartOption {
 }
 
 declare class AXHeatmapChartComponent extends AXChartComponent implements OnDestroy {
+    /** Fixed `viewBox` side; chart scales with CSS `width` / `height` on the host container. */
+    private static readonly VIEW_BOX_SIZE;
+    private readonly CHAR_WIDTH_RATIO;
+    private readonly ROTATION_TOLERANCE_SMALL_DATASET;
+    private readonly SMALL_DATASET_THRESHOLD;
+    private readonly MANY_ITEMS_THRESHOLD;
+    private readonly VERY_MANY_ITEMS_THRESHOLD;
+    private readonly MAX_LABEL_LENGTH;
+    private readonly TICK_AREA_PADDING;
+    private readonly X_AXIS_TITLE_GAP;
+    private readonly MIN_FONT_SIZE_X_AXIS;
+    private readonly MAX_FONT_SIZE_X_AXIS;
     private readonly defaultConfig;
     data: _angular_core.InputSignal<AXHeatmapData[]>;
     options: _angular_core.InputSignal<AXHeatmapChartOption>;
@@ -76,14 +102,18 @@ declare class AXHeatmapChartComponent extends AXChartComponent implements OnDest
             left: number;
         };
         colors?: string[];
-        startColor?: string;
-        endColor?: string;
+        color?: string;
+        valueRange?: {
+            min: number;
+            max: number;
+        };
         cellPadding?: number;
         borderRadius?: number;
         showXAxis?: boolean;
         showYAxis?: boolean;
         xAxisLabel?: string;
         yAxisLabel?: string;
+        rotateXAxisLabels?: boolean | "auto";
         showTooltip?: boolean;
         animationDuration?: number;
         animationEasing?: _acorex_charts.AXAnimationEasing;
@@ -91,15 +121,22 @@ declare class AXHeatmapChartComponent extends AXChartComponent implements OnDest
     }>;
     constructor();
     private init;
+    updateChart(): void;
     private renderChart;
     private hashStringToUint32;
-    private resolveCssColor;
+    /** `resolvedRgb` must be a computed `rgb()` / `rgba()` string (e.g. from {@link resolveCssColorInContext}). */
+    private applyIntensityToResolvedRgb;
     private drawAxis;
     private showTooltip;
     private updateTooltipPos;
     private hideTooltip;
     ngOnDestroy(): void;
     private drawAxisLabels;
+    private getHeatmapXTickFontSize;
+    private getHeatmapXTickPlan;
+    private truncateHeatmapLabel;
+    private shouldRotateHeatmapXLabels;
+    private styleHeatmapXAxisTicks;
     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>;
 }

package/types/acorex-charts.d.ts

@@ -55,6 +55,13 @@ type TooltipPosition = {
     x: number;
     y: number;
 };
+/**
+ * Resolves any CSS `<color>` the browser understands — including
+ * `rgb(var(--token))`, `hsl(var(--token))`, `color-mix()`, etc. — to a computed
+ * `rgb()` / `rgba()` string, using the cascade from `scopeElement` (e.g. the chart
+ * container) so design tokens on ancestors apply.
+ */
+declare function resolveCssColorInContext(scopeElement: HTMLElement, cssColor: string): string;
 /**
  * Compute edge-aware tooltip position with intelligent placement,
  * considering available space in all directions and preventing overflow.
@@ -77,5 +84,5 @@ declare function getEasingFunction(d3: typeof d3, option?: string): (t: number)
 
 declare const AX_CHARTS = "ACOREX_CHARTS";
 
-export { AXChartComponent, AX_CHARTS, AX_CHART_COLOR_PALETTE, computeTooltipPosition, formatLargeNumber, getChartColor, getEasingFunction, mapEasingName };
+export { AXChartComponent, AX_CHARTS, AX_CHART_COLOR_PALETTE, computeTooltipPosition, formatLargeNumber, getChartColor, getEasingFunction, mapEasingName, resolveCssColorInContext };
 export type { AXAnimationEasing, AXChartComponentBase, D3EasingName, NXNativeEvent, TooltipPosition };