@adaptabletools/adaptable 23.0.0-canary.3 → 23.0.0-canary.5

package/src/Api/Internal/StyledColumnInternalApi.js

@@ -11,25 +11,25 @@ const isDynamicRangeEndpoint = (value) => typeof value === 'string' &&
     DYNAMIC_RANGE_ENDPOINTS.includes(value);
 export class StyledColumnInternalApi extends ApiBase {
     getMinValueForNumericColumn(column) {
-        if (column.dataType !== 'number') {
+        if (!column || column.dataType !== 'number') {
             return undefined;
         }
         return this._adaptable.getMinMaxCachedValueForColumn(column, 'min');
     }
     getMaxValueForNumericColumn(column) {
-        if (column.dataType !== 'number') {
+        if (!column || column.dataType !== 'number') {
             return undefined;
         }
         return this._adaptable.getMinMaxCachedValueForColumn(column, 'max');
     }
     getAvgValueForNumericColumn(column) {
-        if (column.dataType !== 'number') {
+        if (!column || column.dataType !== 'number') {
             return undefined;
         }
         return this._adaptable.getMinMaxCachedValueForColumn(column, 'avg');
     }
     getMedianValueForNumericColumn(column) {
-        if (column.dataType !== 'number') {
+        if (!column || column.dataType !== 'number') {
             return undefined;
         }
         return this._adaptable.getMinMaxCachedValueForColumn(column, 'median');

package/src/Api/Internal/ThemeInternalApi.d.ts

@@ -3,5 +3,4 @@ export declare class ThemeInternalApi extends ApiBase {
     isSystemTheme(themeName: string): boolean;
     getThemeClassName(theme: string): string;
     getDOMPreferredColorScheme(): 'dark' | 'light';
-    openInWindow(): void;
 }

package/src/Api/Internal/ThemeInternalApi.js

@@ -1,4 +1,3 @@
-import { SHOW_THEME_EDITOR } from '../../View/Components/Popups/WindowPopups/windowFactory';
 import { ApiBase } from '../Implementation/ApiBase';
 export class ThemeInternalApi extends ApiBase {
     isSystemTheme(themeName) {
@@ -12,13 +11,4 @@ export class ThemeInternalApi extends ApiBase {
     getDOMPreferredColorScheme() {
         return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
-    openInWindow() {
-        this.getAdaptableInternalApi().showPopupWindow({
-            id: SHOW_THEME_EDITOR,
-            title: 'Theme',
-            icon: 'theme',
-            factoryId: SHOW_THEME_EDITOR,
-            popupProps: {},
-        });
-    }
 }

package/src/Api/LayoutApi.d.ts

@@ -1,4 +1,4 @@
-import { AdaptableColumn, ColumnSort, ParameterizedAggFunc, PivotLayout, TableLayout } from '../../types';
+import { AdaptableColumn, ColumnSort, PivotLayout, TableLayout } from '../../types';
 import { ExtendedLayout } from '../AdaptableState/Common/ExtendedLayout';
 import { LayoutState, Layout } from '../AdaptableState/LayoutState';
 /**
@@ -180,11 +180,4 @@ export interface LayoutApi {
      * @param columnId Column to add
      */
     addColumnToCurrentLayout(columnId: string): void;
-    /**
-     * Sets a parameterized aggregation (e.g. Weighted Average with a weight column) on a value column
-     * in the current Layout and applies it to the grid.
-     * @param columnId Value column being aggregated
-     * @param parameterizedAgg Parameterized aggregation definition (must be complete)
-     */
-    setColumnParameterizedAggregation(columnId: string, parameterizedAgg: ParameterizedAggFunc): void;
 }

package/src/Api/ThemeApi.d.ts

@@ -1,4 +1,4 @@
-import { AdaptableTheme, ThemeState } from '../AdaptableState/ThemeState';
+import { AdaptableTheme, SystemThemeEntry, ThemeState } from '../AdaptableState/ThemeState';
 /**
  * Provides run-time access to the Theme Module and associated state
  */
@@ -41,21 +41,24 @@ export interface ThemeApi {
      *
      * @param systemThemes system themes to use ('light', 'dark', both, or none)
      */
-    setSystemThemes(systemThemes: AdaptableTheme[]): void;
+    setSystemThemes(systemThemes: SystemThemeEntry[]): void;
     /**
      * Sets available User Themes
      *
      * @param userThemes User themes to set - each has name, description
+     * @deprecated Will be removed in the next major version.
      */
     setUserThemes(userThemes: AdaptableTheme[]): void;
     /**
      * Adds a User Theme to State
      * @param theme
+     * @deprecated Will be removed in the next major version.
      */
     addUserTheme(theme: AdaptableTheme): void;
     /**
      * Deletes a User Theme from State
      * @param theme
+     * @deprecated Will be removed in the next major version.
      */
     deleteUserTheme(theme: AdaptableTheme): void;
     /**
@@ -64,6 +67,7 @@ export interface ThemeApi {
     getSystemThemes(): AdaptableTheme[];
     /**
      * Retrieves User Themes in State
+     * @deprecated Will be removed in the next major version.
      */
     getUserThemes(): AdaptableTheme[];
     /**

package/src/Redux/ActionsReducers/ThemeRedux.d.ts

@@ -1,5 +1,5 @@
 import * as Redux from 'redux';
-import { ThemeState, AdaptableTheme } from '../../AdaptableState/ThemeState';
+import { ThemeState, AdaptableTheme, SystemThemeEntry } from '../../AdaptableState/ThemeState';
 /**
  * @ReduxAction System Themes have been set
  */
@@ -29,7 +29,7 @@ export declare const THEME_ADD = "THEME_ADD";
  */
 export declare const THEME_DELETE = "THEME_DELETE";
 export interface ThemeSetSystemThemesAction extends Redux.Action {
-    SystemThemes: AdaptableTheme[];
+    SystemThemes: SystemThemeEntry[];
 }
 export interface ThemeSetUserThemesAction extends Redux.Action {
     UserThemes: AdaptableTheme[];
@@ -52,7 +52,7 @@ export interface ThemeAddUserThemeAction extends Redux.Action {
 export interface ThemeDeleteUserThemeAction extends Redux.Action {
     theme: AdaptableTheme;
 }
-export declare const ThemeSetSystemThemes: (SystemThemes: AdaptableTheme[]) => ThemeSetSystemThemesAction;
+export declare const ThemeSetSystemThemes: (SystemThemes: SystemThemeEntry[]) => ThemeSetSystemThemesAction;
 export declare const ThemeSetUserThemes: (UserThemes: AdaptableTheme[]) => ThemeSetUserThemesAction;
 export declare const ThemeSelect: (Theme: string) => ThemeSelectAction;
 export declare const ThemeReady: (themeState: ThemeState) => ThemeReadyAction;

package/src/Strategy/CalculatedColumnModule.js

@@ -32,7 +32,9 @@ export class CalculatedColumnModule extends AdaptableModuleBase {
         this.api.internalApi
             .getDataService()
             .on('CellDataChanged', (cellDataChangedInfo) => {
-            if (cellDataChangedInfo.trigger !== 'aggChange' && !cellDataChangedInfo.preventEdit) {
+            if (cellDataChangedInfo.trigger !== 'aggChange' &&
+                cellDataChangedInfo.trigger !== 'calculatedColumnChange' &&
+                !cellDataChangedInfo.preventEdit) {
                 this.api.internalApi
                     .getCalculatedColumnExpressionService()
                     .listentoCellDataChange(cellDataChangedInfo);

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.