@adaptabletools/adaptable 23.0.0-canary.4 → 23.0.0-canary.6

package/src/Strategy/FormatColumnModule.js

@@ -3,14 +3,16 @@ import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
 import * as FormatColumnRedux from '../Redux/ActionsReducers/FormatColumnRedux';
 import * as PopupRedux from '../Redux/ActionsReducers/PopupRedux';
 import { FormatColumnWizard } from '../View/FormatColumn/Wizard/FormatColumnWizard';
-import { getFormatColumnFormatSummaryValue } from '../View/FormatColumn/Wizard/FormatColumnFormatWizardSection';
+import { getFormatColumnFormatSummaryValue, hasFormatColumnDisplayFormat } from '../View/FormatColumn/Wizard/FormatColumnFormatWizardSection';
 import { getFormatColumnSettingsViewItems } from './Utilities/FormatColumn/getFormatColumnSettingsViewItems';
 import { MoveFormatColumn } from '../View/FormatColumn/MoveFormatColumn';
 import { getObjectTagsViewItems } from '../Utilities/getObjectTagsViewItems';
 import { getRuleViewItems } from '../Utilities/getRuleViewItems';
 import { getScopeViewItems } from '../Utilities/getScopeViewItems';
 import { getFormatColumnRowTargetItems } from './Utilities/FormatColumn/getFormatColumnRowTargetItems';
-import { renderFormatColumnStyleSummary } from '../View/FormatColumn/Wizard/FormatColumnStyleWizardSection';
+import { getFormatColumnStyleViewValues, hasFormatColumnStyle, } from '../View/FormatColumn/Wizard/FormatColumnStyleWizardSection';
+import { hasFormatColumnCondition } from '../View/FormatColumn/Wizard/FormatColumnRuleWizardSection';
+import { renderFormatColumnPreviewSummary } from '../View/FormatColumn/Wizard/FormatColumnPreview';
 export class FormatColumnModule extends AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.FormatColumnModuleId, ModuleConstants.FormatColumnFriendlyName, 'color-palette', 'FormatColumnPopup', 'Create a column style, display format or cell alignment', api);
@@ -86,19 +88,24 @@ export class FormatColumnModule extends AdaptableModuleBase {
                     name: 'Name',
                     values: [formatColumn.Name],
                 },
+                getFormatColumnSettingsViewItems(formatColumn),
                 getScopeViewItems(formatColumn.Scope, this.api),
                 getFormatColumnRowTargetItems(formatColumn),
-                formatColumn.Rule && getRuleViewItems(formatColumn.Rule, this.api),
-                {
+                hasFormatColumnCondition(formatColumn) &&
+                    getRuleViewItems(formatColumn.Rule, this.api),
+                hasFormatColumnStyle(formatColumn) && {
                     name: 'Style',
-                    view: () => renderFormatColumnStyleSummary(formatColumn, this.api),
+                    values: getFormatColumnStyleViewValues(formatColumn),
                 },
-                {
+                hasFormatColumnDisplayFormat(formatColumn) && {
                     name: 'Display Format',
                     values: [getFormatColumnFormatSummaryValue(formatColumn)],
                 },
-                getFormatColumnSettingsViewItems(formatColumn),
                 getObjectTagsViewItems(formatColumn, this.api),
+                {
+                    name: 'Preview',
+                    view: () => renderFormatColumnPreviewSummary(formatColumn, this.api),
+                },
             ].filter(Boolean),
         };
     }

package/src/Strategy/LayoutModule.js

@@ -9,8 +9,7 @@ import { LayoutCloneButton } from '../View/Layout/LayoutCloneButton';
 import { LayoutWizard } from '../View/Layout/Wizard/LayoutWizard';
 import { getLayoutFilterViewItems } from './Utilities/Layout/getLayoutFilterViewItems';
 import { getLayoutSortViewItems } from './Utilities/Layout/getLayoutSortViewItems';
-import { isParameterizedAggregation } from '../Aggregation/ParameterizedAggregationRegistry';
-import { getParameterizedAggregationDisplayName } from '../Aggregation/parameterizedAggregationHeader';
+import { WEIGHTED_AVERAGE_AGG_FN_NAME } from '../AdaptableState/Common/AggregationColumns';
 import { SHOW_PIVOT_COLUMN_DETAILS } from '../View/Components/Popups/WindowPopups/windowFactory';
 import flattenDeep from '../Utilities/utils/flattenDeep';
 import StringExtensions from '../Utilities/Extensions/StringExtensions';
@@ -338,10 +337,13 @@ export class LayoutModule extends AdaptableModuleBase {
                         if (ColumnId === 'Source' || ColumnId === 'Uuid' || ColumnId === 'AdaptableVersion') {
                             return '';
                         }
-                        if (isParameterizedAggregation(aggFn)) {
-                            return getParameterizedAggregationDisplayName(this.api, aggFn, ColumnId);
+                        let aggFnName = '';
+                        if (typeof aggFn === 'string') {
+                            aggFnName = aggFn;
+                        }
+                        else if (typeof aggFn === 'object' && aggFn.type === 'weightedAverage') {
+                            aggFnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
                         }
-                        const aggFnName = typeof aggFn === 'string' ? aggFn : '';
                         return `${aggFnName}(${columnIdToFriendlyName(ColumnId)})`;
                     }).filter(Boolean),
                 },
@@ -353,10 +355,13 @@ export class LayoutModule extends AdaptableModuleBase {
                         if (ColumnId === 'Source' || ColumnId === 'Uuid' || ColumnId === 'AdaptableVersion') {
                             return '';
                         }
-                        if (isParameterizedAggregation(aggFn)) {
-                            return getParameterizedAggregationDisplayName(this.api, aggFn, ColumnId);
+                        let aggFnName = '';
+                        if (typeof aggFn === 'string') {
+                            aggFnName = aggFn;
+                        }
+                        else if (typeof aggFn === 'object' && aggFn.type === 'weightedAverage') {
+                            aggFnName = WEIGHTED_AVERAGE_AGG_FN_NAME;
                         }
-                        const aggFnName = typeof aggFn === 'string' ? aggFn : '';
                         return `${aggFnName}(${columnIdToFriendlyName(ColumnId)})`;
                     }).filter(Boolean),
                 },

package/src/Strategy/StyledColumnModule.js

@@ -2,17 +2,25 @@ import { AdaptableModuleBase } from './AdaptableModuleBase';
 import * as ModuleConstants from '../Utilities/Constants/ModuleConstants';
 import * as StyledColumnRedux from '../Redux/ActionsReducers/StyledColumnRedux';
 import { StyledColumnWizard } from '../View/StyledColumn/Wizard/StyledColumnWizard';
-import { renderStyledColumnRangesSummary, renderStyledColumnStyleSummary, } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection';
-import { renderStyledColumnGradientStyleSummary } from '../View/StyledColumn/Wizard/StyledColumnWizardGradientSection';
-import { renderStyledColumnBulletRangesSummary, renderStyledColumnBulletStyleSummary, } from '../View/StyledColumn/Wizard/StyledColumnWizardBulletSection';
-import { renderStyledColumnRatingSummary } from '../View/StyledColumn/Wizard/StyledColumnWizardRatingSection';
-import { renderStyledColumnRangeBarDisplayStepSummary, renderStyledColumnRangeBarRangeStepSummary, } from '../View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection';
-import { renderStyledColumnIconStyleSummary, renderStyledColumnIconMappingsSummary, } from '../View/StyledColumn/Wizard/StyledColumnWizardIconSection';
+import { renderStyledColumnRangesSummary, getStyledColumnPercentBarStyleViewValues, } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/StyledColumnWizardStyleSection';
+import { getStyledColumnGradientStyleViewValues } from '../View/StyledColumn/Wizard/StyledColumnWizardGradientSection';
+import { getStyledColumnBulletStyleViewValues, StyledColumnBulletRangesView, } from '../View/StyledColumn/Wizard/StyledColumnWizardBulletSection';
+import { StyledColumnBulletPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
+import { getStyledColumnRatingStyleViewValues } from '../View/StyledColumn/Wizard/StyledColumnWizardRatingSection';
+import { StyledColumnRatingPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { getStyledColumnRangeBarDisplayViewValues, StyledColumnRangeBarRangeView, } from '../View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection';
+import { StyledColumnRangeBarPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
+import { getStyledColumnIconStyleViewValues, StyledColumnIconMappingsView, } from '../View/StyledColumn/Wizard/StyledColumnWizardIconSection';
+import { StyledColumnIconPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
 import { collectIncludedRowKindLabels } from '../View/StyledColumn/Wizard/StyledColumnWizardScopeSection';
 import ObjectFactory from '../Utilities/ObjectFactory';
 import { StyledColumnBadgePreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
+import { StyledColumnGradientPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
+import { StyledColumnPercentBarPreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
+import { getStyledColumnBadgeStyleViewValues, StyledColumnBadgeDefinitionsView, } from '../View/StyledColumn/Wizard/StyledColumnBadgeSection';
+import { getStyledColumnSparklineStyleViewValues } from '../View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection';
+import { StyledColumnSparklinePreview } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
 import { getObjectTagsViewItems } from '../Utilities/getObjectTagsViewItems';
-import { StyledColumnBadgeSettings } from '../View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/StyledColumnBadgeSettings';
 export class StyledColumnModule extends AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.StyledColumnModuleId, ModuleConstants.StyledColumnFriendlyName, 'brush', 'StyledColumnPopup', // to change
@@ -283,80 +291,100 @@ export class StyledColumnModule extends AdaptableModuleBase {
             if (styledColumn.PercentBarStyle) {
                 specificTypeItems.push({
                     name: 'Style',
-                    view: () => {
-                        return renderStyledColumnStyleSummary(styledColumn, this.api);
-                    },
+                    values: getStyledColumnPercentBarStyleViewValues(styledColumn),
+                });
+                specificTypeItems.push({
+                    name: 'Preview',
+                    view: StyledColumnPercentBarPreview,
                 });
             }
             if (styledColumn.GradientStyle) {
                 specificTypeItems.push({
                     name: 'Style',
-                    view: () => {
-                        return renderStyledColumnGradientStyleSummary(styledColumn);
-                    },
+                    values: getStyledColumnGradientStyleViewValues(styledColumn),
+                });
+                specificTypeItems.push({
+                    name: 'Preview',
+                    view: StyledColumnGradientPreview,
                 });
             }
         }
         if (styledColumn.BulletChartStyle) {
             specificTypeItems.push({
                 name: 'Ranges',
-                view: () => {
-                    return renderStyledColumnBulletRangesSummary(styledColumn);
-                },
+                view: StyledColumnBulletRangesView,
             });
             specificTypeItems.push({
                 name: 'Style',
-                view: () => {
-                    return renderStyledColumnBulletStyleSummary(styledColumn);
-                },
+                values: getStyledColumnBulletStyleViewValues(styledColumn),
+            });
+            specificTypeItems.push({
+                name: 'Preview',
+                view: StyledColumnBulletPreview,
             });
         }
         if (styledColumn.RatingStyle) {
             specificTypeItems.push({
                 name: 'Style',
-                view: () => {
-                    return renderStyledColumnRatingSummary(styledColumn);
-                },
+                values: getStyledColumnRatingStyleViewValues(styledColumn),
+            });
+            specificTypeItems.push({
+                name: 'Preview',
+                view: StyledColumnRatingPreview,
             });
         }
         if (styledColumn.RangeBarStyle) {
             specificTypeItems.push({
                 name: 'Style',
-                view: () => {
-                    return renderStyledColumnRangeBarRangeStepSummary(styledColumn);
-                },
+                view: StyledColumnRangeBarRangeView,
             });
             specificTypeItems.push({
                 name: 'Display',
-                view: () => {
-                    return renderStyledColumnRangeBarDisplayStepSummary(styledColumn);
-                },
+                values: getStyledColumnRangeBarDisplayViewValues(styledColumn),
+            });
+            specificTypeItems.push({
+                name: 'Preview',
+                view: StyledColumnRangeBarPreview,
             });
         }
         if (styledColumn.IconStyle) {
             specificTypeItems.push({
                 name: 'Mappings',
-                view: () => {
-                    return renderStyledColumnIconMappingsSummary(styledColumn);
-                },
+                view: StyledColumnIconMappingsView,
             });
             specificTypeItems.push({
                 name: 'Style',
-                view: () => {
-                    return renderStyledColumnIconStyleSummary(styledColumn);
-                },
+                values: getStyledColumnIconStyleViewValues(styledColumn),
+            });
+            specificTypeItems.push({
+                name: 'Preview',
+                view: StyledColumnIconPreview,
             });
         }
         if (styledColumn.BadgeStyle) {
             specificTypeItems.push({
-                name: 'Settings',
-                view: StyledColumnBadgeSettings,
+                name: 'Badges',
+                view: StyledColumnBadgeDefinitionsView,
+            });
+            specificTypeItems.push({
+                name: 'Style',
+                values: getStyledColumnBadgeStyleViewValues(styledColumn, this.api),
             });
             specificTypeItems.push({
                 name: 'Preview',
                 view: StyledColumnBadgePreview,
             });
         }
+        if (styledColumn.SparklineStyle) {
+            specificTypeItems.push({
+                name: 'Style',
+                values: getStyledColumnSparklineStyleViewValues(styledColumn),
+            });
+            specificTypeItems.push({
+                name: 'Preview',
+                view: StyledColumnSparklinePreview,
+            });
+        }
         const includedRowKinds = collectIncludedRowKindLabels(styledColumn);
         return {
             abObject: styledColumn,

package/src/Utilities/Constants/ReduxConstants.d.ts

@@ -1,9 +1,9 @@
 import { SummaryOperation } from '../../AdaptableState/Common/Enums';
-import { AdaptableTheme } from '../../AdaptableState/ThemeState';
+import { SystemThemeEntry } from '../../AdaptableState/ThemeState';
 export declare const CELL_SUMMARY_DEFAULT_OPERATION: SummaryOperation | string;
 export declare const QUICK_SEARCH_DEFAULT_TEXT_BACK_COLOR: string;
 export declare const QUICK_SEARCH_DEFAULT_CELL_BACK_COLOR: string;
 export declare const QUICK_SEARCH_DEFAULT_FORE_COLOR: string;
 export declare const QUICK_SEARCH_DEFAULT_CURRENT_BACK_COLOR: string;
-export declare const SYSTEM_THEMES: AdaptableTheme[];
+export declare const SYSTEM_THEMES: SystemThemeEntry[];
 export declare const THEME_DEFAULT_CURRENT_THEME: string;

package/src/Utilities/Constants/ReduxConstants.js

@@ -10,18 +10,5 @@ export const QUICK_SEARCH_DEFAULT_FORE_COLOR = getSwatchColorVar(1); // black
 export const QUICK_SEARCH_DEFAULT_CURRENT_BACK_COLOR = getSwatchColorVar(20); // orange
 // theme
 // consts for Themes
-export const SYSTEM_THEMES = [
-    {
-        Name: LIGHT_THEME,
-        Description: 'Light Theme',
-    },
-    {
-        Name: DARK_THEME,
-        Description: 'Dark Theme',
-    },
-    {
-        Name: OS_THEME,
-        Description: 'OS Theme',
-    },
-];
+export const SYSTEM_THEMES = [LIGHT_THEME, DARK_THEME, OS_THEME];
 export const THEME_DEFAULT_CURRENT_THEME = LIGHT_THEME;

package/src/Utilities/Helpers/FormatHelper.js

@@ -4,6 +4,20 @@ import sentenceCase from '../utils/sentenceCase';
 import { DEFAULT_DATE_FORMAT_PATTERN } from '../Constants/GeneralConstants';
 import Helper from './Helper';
 import StringExtensions from '../Extensions/StringExtensions';
+const getInputFractionDigitCount = (input) => {
+    const fraction = String(input).split('.')[1];
+    return fraction ? fraction.replace(/0+$/, '').length : 0;
+};
+const getFractionDigitsAfterMultiplier = (input, multiplier, explicitFractionDigits) => {
+    if (explicitFractionDigits != null) {
+        return explicitFractionDigits;
+    }
+    if (multiplier === 1) {
+        return getInputFractionDigitCount(input);
+    }
+    const multiplierPower = Math.round(Math.log10(Math.abs(multiplier)));
+    return Math.max(0, getInputFractionDigitCount(input) - multiplierPower);
+};
 export function NumberFormatter(input, options = {}, rowNode, column, api) {
     let preparedInput;
     if (options.Content) {
@@ -29,9 +43,11 @@ export function NumberFormatter(input, options = {}, rowNode, column, api) {
         return preparedInput.toString();
     }
     let multiplier = options.Multiplier ? options.Multiplier : 1;
+    let multiplierFractionDigits;
     if (options.Multiplier !== undefined) {
         n *= multiplier;
-        n = parseFloat(n.toFixed(12));
+        multiplierFractionDigits = getFractionDigitsAfterMultiplier(preparedInput, options.Multiplier, options.FractionDigits);
+        n = parseFloat(n.toFixed(multiplierFractionDigits));
     }
     // Set Integer and Fraction Digits to a max of 20
     if (options.IntegerDigits > 20) {
@@ -71,6 +87,9 @@ export function NumberFormatter(input, options = {}, rowNode, column, api) {
     else if (options.FractionDigits != null) {
         digitsToUse = options.FractionDigits;
     }
+    else if (multiplierFractionDigits != null) {
+        digitsToUse = multiplierFractionDigits;
+    }
     else {
         let decimalCount = Math.floor(n) === n ? 0 : n.toString().split(fractionsSepatator)[1]?.length || 0;
         digitsToUse = decimalCount;

package/src/Utilities/Helpers/SparklineOptionsHelper.d.ts

@@ -0,0 +1,7 @@
+import type { AgSparklineOptions } from 'ag-charts-types';
+/**
+ * AG Charts sparklines do not resolve Adaptable `var(--ab-color-*)` tokens.
+ * Resolve palette / theme CSS variables to concrete colours at render time so
+ * wizard previews and grid cells match the chosen Fill / Stroke values.
+ */
+export declare function resolveSparklineOptionsForRender(options: AgSparklineOptions): AgSparklineOptions;

package/src/Utilities/Helpers/SparklineOptionsHelper.js

@@ -0,0 +1,65 @@
+import { getVariableColor } from './StyleHelper';
+const resolveCssColor = (color) => {
+    if (color == null || color === '') {
+        return color;
+    }
+    const resolved = getVariableColor(color);
+    return resolved || color;
+};
+const resolveHighlightStyle = (style) => {
+    if (!style) {
+        return style;
+    }
+    const resolved = { ...style };
+    if (style.fill != null) {
+        resolved.fill = resolveCssColor(style.fill);
+    }
+    if (style.stroke != null) {
+        resolved.stroke = resolveCssColor(style.stroke);
+    }
+    return resolved;
+};
+/**
+ * AG Charts sparklines do not resolve Adaptable `var(--ab-color-*)` tokens.
+ * Resolve palette / theme CSS variables to concrete colours at render time so
+ * wizard previews and grid cells match the chosen Fill / Stroke values.
+ */
+export function resolveSparklineOptionsForRender(options) {
+    const resolved = { ...options };
+    if ('fill' in options && options.fill != null) {
+        resolved.fill = resolveCssColor(options.fill);
+    }
+    if (options.stroke != null) {
+        resolved.stroke = resolveCssColor(options.stroke);
+    }
+    if (options.background?.fill != null) {
+        resolved.background = {
+            ...options.background,
+            fill: resolveCssColor(options.background.fill),
+        };
+    }
+    if ('marker' in options && options.marker) {
+        const marker = { ...options.marker };
+        if (marker.fill != null) {
+            marker.fill = resolveCssColor(marker.fill);
+        }
+        if (marker.stroke != null) {
+            marker.stroke = resolveCssColor(marker.stroke);
+        }
+        resolved.marker = marker;
+    }
+    if (options.highlight) {
+        resolved.highlight = {
+            ...options.highlight,
+            highlightedItem: resolveHighlightStyle(options.highlight.highlightedItem),
+            highlightedSeries: resolveHighlightStyle(options.highlight.highlightedSeries),
+        };
+    }
+    if (options.axis && typeof options.axis === 'object' && options.axis.stroke != null) {
+        resolved.axis = {
+            ...options.axis,
+            stroke: resolveCssColor(options.axis.stroke),
+        };
+    }
+    return resolved;
+}

package/src/Utilities/Helpers/StyledColumnGradientHelper.d.ts

@@ -1,4 +1,7 @@
-import { CellColorRange, GradientStyle, NumericStyledColumn } from '../../AdaptableState/StyledColumnState';
+import type { CSSProperties } from 'react';
+import type { IRowNode } from 'ag-grid-community';
+import { CellColorRange, GradientStyle, NumericStyledColumn, StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../Api/AdaptableApi';
 /**
  * Default alpha at the **low** end of a Gradient range when `MinAlpha` is unset.
  * Slightly above zero so the bottom-edge value of every range still shows its
@@ -9,6 +12,25 @@ export declare const DEFAULT_GRADIENT_MIN_ALPHA = 0.15;
  * Default alpha at the **high** end of a Gradient range when `MaxAlpha` is unset.
  */
 export declare const DEFAULT_GRADIENT_MAX_ALPHA = 1;
+export declare const hasGradientRangesConfigured: (gs: GradientStyle | undefined) => boolean;
+/** Number of sample cells shown in Gradient / Percent Bar style previews. */
+export declare const STYLED_COLUMN_PREVIEW_SAMPLE_COUNT = 6;
+/** Illustrative zero-centred scale endpoints for preview geometry. */
+export declare const ZERO_CENTRED_PREVIEW_SCALE_MIN = -20;
+export declare const ZERO_CENTRED_PREVIEW_SCALE_MAX = 20;
+/** @deprecated Use {@link getZeroCentredGradientPreviewValues} — kept for callers using endpoints. */
+export declare const ZERO_CENTRED_GRADIENT_PREVIEW_VALUES: readonly number[];
+export declare const getZeroCentredGradientPreviewValues: () => number[];
+export declare function isDivergingZeroCellRanges(ranges: CellColorRange[] | undefined): boolean;
+export declare function isZeroCentredGradientStyle(gs: GradientStyle): boolean;
+/**
+ * Sample cell values for gradient preview strips — spread across the effective scale.
+ */
+export declare const getGradientPreviewSampleValues: (styledColumn: StyledColumn, api: AdaptableApi) => number[];
+/**
+ * Cell CSS for gradient preview — mirrors `AgGridColumnAdapter.getStyledColumnStyle` gradient path.
+ */
+export declare const getGradientPreviewCellStyle: (cellValue: number, styledColumn: StyledColumn, api: AdaptableApi, rowNode?: IRowNode | null) => CSSProperties;
 /**
  * Effective cell ranges for gradient rendering / range lookup.
  * When `ZeroCentred` is set, expands to the canonical Col-Min…0 and 0…Col-Max bands.

package/src/Utilities/Helpers/StyledColumnGradientHelper.js

@@ -1,3 +1,7 @@
+import tinycolor from 'tinycolor2';
+import { convertAdaptableStyleToCSS } from './StyleHelper';
+import { getVariableColor } from './StyleHelper';
+import clamp from '../utils/clamp';
 /**
  * Default alpha at the **low** end of a Gradient range when `MinAlpha` is unset.
  * Slightly above zero so the bottom-edge value of every range still shows its
@@ -8,6 +12,206 @@ export const DEFAULT_GRADIENT_MIN_ALPHA = 0.15;
  * Default alpha at the **high** end of a Gradient range when `MaxAlpha` is unset.
  */
 export const DEFAULT_GRADIENT_MAX_ALPHA = 1;
+export const hasGradientRangesConfigured = (gs) => !!(gs?.ZeroCentred || gs?.CellRanges?.length || gs?.ColumnComparison);
+const evenlySpacedValues = (min, max, count) => {
+    if (count <= 1) {
+        return [min];
+    }
+    const step = (max - min) / (count - 1);
+    return Array.from({ length: count }, (_, i) => min + step * i);
+};
+/** Number of sample cells shown in Gradient / Percent Bar style previews. */
+export const STYLED_COLUMN_PREVIEW_SAMPLE_COUNT = 6;
+/** Illustrative zero-centred scale endpoints for preview geometry. */
+export const ZERO_CENTRED_PREVIEW_SCALE_MIN = -20;
+export const ZERO_CENTRED_PREVIEW_SCALE_MAX = 20;
+/** @deprecated Use {@link getZeroCentredGradientPreviewValues} — kept for callers using endpoints. */
+export const ZERO_CENTRED_GRADIENT_PREVIEW_VALUES = evenlySpacedValues(ZERO_CENTRED_PREVIEW_SCALE_MIN, ZERO_CENTRED_PREVIEW_SCALE_MAX, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+export const getZeroCentredGradientPreviewValues = () => evenlySpacedValues(ZERO_CENTRED_PREVIEW_SCALE_MIN, ZERO_CENTRED_PREVIEW_SCALE_MAX, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+export function isDivergingZeroCellRanges(ranges) {
+    if (!ranges || ranges.length !== 2) {
+        return false;
+    }
+    const [a, b] = ranges;
+    return a.Max === 0 && b.Min === 0;
+}
+export function isZeroCentredGradientStyle(gs) {
+    return !!(gs.ZeroCentred || isDivergingZeroCellRanges(gs.CellRanges));
+}
+/**
+ * Sample cell values for gradient preview strips — spread across the effective scale.
+ */
+export const getGradientPreviewSampleValues = (styledColumn, api) => {
+    const gs = styledColumn.GradientStyle;
+    if (!gs || !hasGradientRangesConfigured(gs)) {
+        return [];
+    }
+    if (isZeroCentredGradientStyle(gs)) {
+        return getZeroCentredGradientPreviewValues();
+    }
+    if (gs.ColumnComparison) {
+        const min = Number(gs.ColumnComparison.MinValue);
+        const max = Number(gs.ColumnComparison.MaxValue);
+        if (!Number.isNaN(min) && !Number.isNaN(max)) {
+            return evenlySpacedValues(min, max, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+        }
+        return evenlySpacedValues(0, 100, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+    }
+    const column = styledColumn.ColumnId
+        ? api.columnApi.getColumnWithColumnId(styledColumn.ColumnId)
+        : undefined;
+    if (!column) {
+        return evenlySpacedValues(0, 100, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+    }
+    const colMin = api.styledColumnApi.internalApi.getMinValueForNumericColumn(column);
+    const colMax = api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column);
+    if (colMin === colMax) {
+        return [colMin];
+    }
+    return evenlySpacedValues(colMin, colMax, STYLED_COLUMN_PREVIEW_SAMPLE_COUNT);
+};
+const getZeroCentredPreviewColors = (gradientStyle) => {
+    if (gradientStyle.ZeroCentred) {
+        return {
+            negative: gradientStyle.ZeroCentred.NegativeColor,
+            positive: gradientStyle.ZeroCentred.PositiveColor,
+        };
+    }
+    const ranges = gradientStyle.CellRanges;
+    if (isDivergingZeroCellRanges(ranges)) {
+        return {
+            negative: ranges[0].Color,
+            positive: ranges[1].Color,
+        };
+    }
+    return null;
+};
+/**
+ * Zero-centred preview uses a fixed -20…20 illustrative scale so negative
+ * colours always appear — independent of whether the column currently has
+ * negative values (Col-Min may be above zero today).
+ */
+const getZeroCentredGradientPreviewCellStyle = (cellValue, gradientStyle) => {
+    const colors = getZeroCentredPreviewColors(gradientStyle);
+    if (!colors) {
+        return {};
+    }
+    const previewMin = ZERO_CENTRED_PREVIEW_SCALE_MIN;
+    const previewMax = ZERO_CENTRED_PREVIEW_SCALE_MAX;
+    const syntheticRanges = [
+        { Min: previewMin, Max: 0, Color: colors.negative },
+        { Min: 0, Max: previewMax, Color: colors.positive },
+    ];
+    let matchingRange = null;
+    for (const range of syntheticRanges) {
+        const min = range.Min;
+        const max = range.Max;
+        if (cellValue >= min && cellValue <= max) {
+            matchingRange = range;
+            break;
+        }
+    }
+    if (!matchingRange) {
+        return {};
+    }
+    const min = matchingRange.Min;
+    const max = matchingRange.Max;
+    const reverseGradient = matchingRange.Min === previewMin && matchingRange.Max === 0;
+    const minAlphaBound = gradientStyle.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaBound = gradientStyle.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
+    const lo = Math.min(clamp(minAlphaBound, 0, 1), clamp(maxAlphaBound, 0, 1));
+    const hi = Math.max(clamp(minAlphaBound, 0, 1), clamp(maxAlphaBound, 0, 1));
+    const span = Math.abs(max - min);
+    let t = span === 0 ? 0.5 : (Number(cellValue) - min) / span;
+    t = clamp(t, 0, 1);
+    if (reverseGradient) {
+        t = 1 - t;
+    }
+    const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
+    let style = {};
+    const bg = tinycolor(getVariableColor(matchingRange.Color)).setAlpha(alpha);
+    style.backgroundColor = bg.toRgbString();
+    if (gradientStyle.AutoContrastText) {
+        style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+    }
+    const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
+    if (gradientStyle.Font) {
+        style = { ...style, ...convertAdaptableStyleToCSS(gradientStyle.Font) };
+    }
+    if (autoContrastColor) {
+        style.color = autoContrastColor;
+    }
+    if (gradientStyle.Font?.Alignment && gradientStyle.Font.Alignment !== 'Default') {
+        style.textAlign = gradientStyle.Font.Alignment.toLowerCase();
+    }
+    return style;
+};
+/**
+ * Cell CSS for gradient preview — mirrors `AgGridColumnAdapter.getStyledColumnStyle` gradient path.
+ */
+export const getGradientPreviewCellStyle = (cellValue, styledColumn, api, rowNode) => {
+    const gradientStyle = styledColumn.GradientStyle;
+    if (!gradientStyle || !hasGradientRangesConfigured(gradientStyle)) {
+        return {};
+    }
+    if (isZeroCentredGradientStyle(gradientStyle)) {
+        return getZeroCentredGradientPreviewCellStyle(cellValue, gradientStyle);
+    }
+    const column = styledColumn.ColumnId
+        ? api.columnApi.getColumnWithColumnId(styledColumn.ColumnId)
+        : undefined;
+    if (!column) {
+        return {};
+    }
+    const node = rowNode ?? api.gridApi?.getRowNodeForIndex(0) ?? null;
+    const internalApi = api.styledColumnApi.internalApi;
+    let style = {};
+    const min = internalApi.getNumericStyleMinValue(styledColumn, column, node, cellValue);
+    const max = internalApi.getNumericStyleMaxValue(styledColumn, column, node, cellValue);
+    let cellBackColor;
+    let reverseGradient = false;
+    if (gradientStyle.ColumnComparison) {
+        cellBackColor = gradientStyle.ColumnComparison.Color;
+    }
+    else {
+        const matchingRange = internalApi.findRangeForColumn(expandGradientCellRanges(gradientStyle), column, gradientStyleRangeLookupValueType(gradientStyle), cellValue);
+        if (matchingRange) {
+            cellBackColor = matchingRange.Color;
+            reverseGradient =
+                (!!gradientStyle.ZeroCentred && isNegativeZeroCentredBand(matchingRange)) ||
+                    !!matchingRange.ReverseGradient;
+        }
+    }
+    const minAlphaBound = gradientStyle.MinAlpha ?? DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaBound = gradientStyle.MaxAlpha ?? DEFAULT_GRADIENT_MAX_ALPHA;
+    const lo = Math.min(clamp(minAlphaBound, 0, 1), clamp(maxAlphaBound, 0, 1));
+    const hi = Math.max(clamp(minAlphaBound, 0, 1), clamp(maxAlphaBound, 0, 1));
+    const span = Math.abs(max - min);
+    let t = span === 0 ? 0.5 : (Number(cellValue) - min) / span;
+    t = clamp(t, 0, 1);
+    if (reverseGradient) {
+        t = 1 - t;
+    }
+    const alpha = Number((lo + t * (hi - lo)).toPrecision(4));
+    if (cellBackColor) {
+        const bg = tinycolor(getVariableColor(cellBackColor)).setAlpha(alpha);
+        style.backgroundColor = bg.toRgbString();
+        if (gradientStyle.AutoContrastText) {
+            style.color = bg.getLuminance() > 0.45 ? '#111111' : '#ffffff';
+        }
+    }
+    const autoContrastColor = gradientStyle.AutoContrastText && style.color ? style.color : undefined;
+    if (gradientStyle.Font) {
+        style = { ...style, ...convertAdaptableStyleToCSS(gradientStyle.Font) };
+    }
+    if (autoContrastColor) {
+        style.color = autoContrastColor;
+    }
+    if (gradientStyle.Font?.Alignment && gradientStyle.Font.Alignment !== 'Default') {
+        style.textAlign = gradientStyle.Font.Alignment.toLowerCase();
+    }
+    return style;
+};
 /**
  * Effective cell ranges for gradient rendering / range lookup.
  * When `ZeroCentred` is set, expands to the canonical Col-Min…0 and 0…Col-Max bands.