@acorex/charts 20.6.30 → 20.6.32

package/funnel-chart/index.d.ts

@@ -9,6 +9,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 {
@@ -27,12 +28,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;
@@ -50,9 +68,8 @@ 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 resizeObserver;
+    private resizeDebounceId;
     private _tooltipVisible;
     private _tooltipPosition;
     private _tooltipData;
@@ -75,9 +92,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;
@@ -86,9 +107,17 @@ declare class AXFunnelChartComponent extends AXChartComponent implements OnDestr
     }>;
     constructor();
     ngOnDestroy(): void;
+    private attachResizeObserver;
+    private detachResizeObserver;
     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/heatmap-chart/index.d.ts

@@ -26,13 +26,25 @@ 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;
@@ -75,8 +87,11 @@ 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;
@@ -92,7 +107,8 @@ declare class AXHeatmapChartComponent extends AXChartComponent implements OnDest
     private init;
     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;

package/index.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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acorex/charts",
-  "version": "20.6.30",
+  "version": "20.6.32",
   "peerDependencies": {
     "d3": ">=7.9.0"
   },
@@ -15,6 +15,10 @@
       "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"
@@ -23,18 +27,14 @@
       "types": "./chart-tooltip/index.d.ts",
       "default": "./fesm2022/acorex-charts-chart-tooltip.mjs"
     },
-    "./bar-chart": {
-      "types": "./bar-chart/index.d.ts",
-      "default": "./fesm2022/acorex-charts-bar-chart.mjs"
+    "./donut-chart": {
+      "types": "./donut-chart/index.d.ts",
+      "default": "./fesm2022/acorex-charts-donut-chart.mjs"
     },
     "./funnel-chart": {
       "types": "./funnel-chart/index.d.ts",
       "default": "./fesm2022/acorex-charts-funnel-chart.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"