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

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 {
@@ -28,10 +29,21 @@ 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). */
     labelOffset?: number;
@@ -76,8 +88,11 @@ 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;
         labelOffset?: number;
         showTooltip?: boolean;
@@ -90,6 +105,8 @@ declare class AXFunnelChartComponent extends AXChartComponent implements OnDestr
     protected loadD3(): Promise<void>;
     createChart(): void;
     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,13 +27,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;
@@ -76,8 +88,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;
@@ -93,7 +108,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/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 };