@adaptabletools/adaptable-cjs 23.0.0-canary.0 → 23.0.0-canary.10

package/src/agGrid/AgGridMenuAdapter.js

@@ -6,8 +6,133 @@ const Icon_1 = require("../components/Icon");
 const icons_1 = require("../components/icons");
 const ArrayExtensions_1 = tslib_1.__importDefault(require("../Utilities/Extensions/ArrayExtensions"));
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
-const parameterizedAggregationColumnMenu_1 = require("../Aggregation/parameterizedAggregationColumnMenu");
-const parameterizedAggregationHelpers_1 = require("../Aggregation/parameterizedAggregationHelpers");
+const AggregationColumns_1 = require("../AdaptableState/Common/AggregationColumns");
+/**
+ * Creates an AG Grid icon element for the given icon name.
+ *
+ * Mimics AG Grid's internal icon creation, producing a
+ * `<span class="ag-icon ag-icon-{name}" role="presentation" unselectable="on">`
+ * so the icon picks up AG Grid's own icon font/theme styling.
+ *
+ * @see https://github.com/ag-grid/ag-grid/blob/5ca14e73188f6f52fd7d545d595c067bf1b72168/packages/ag-grid-community/src/utils/icon.ts#L139
+ */
+function createAgGridIcon(name) {
+    const element = document.createElement('span');
+    element.className = `ag-icon ag-icon-${name}`;
+    element.setAttribute('role', 'presentation');
+    element.setAttribute('unselectable', 'on');
+    return element;
+}
+const toFuncLabel = (funcName) => {
+    if (funcName === 'avg') {
+        return 'Average';
+    }
+    if (funcName === 'weightedAvg') {
+        return 'Weighted Average';
+    }
+    return funcName ? funcName.charAt(0).toUpperCase() + funcName.slice(1) : funcName;
+};
+/**
+ * Builds the replacement for AG Grid's built-in `valueAggSubMenu` column menu item.
+ *
+ * AG Grid does not allow customizing the built-in submenu, so we rebuild an
+ * equivalent one: the column's existing aggregation functions plus a
+ * `Weighted Average` item whose submenu lists the numeric columns that can be
+ * used as the weight parameter.
+ *
+ * Both standard and weighted selections persist through the current Layout
+ * (`updateCurrentLayout`), so the existing `weightedAvg` aggFunc can read the
+ * chosen `weightedColumnId` back from the Layout.
+ *
+ * Weighted Average is never used in Pivot Layouts, so this only deals with the
+ * Table Layout aggregations and the caller skips it entirely in Pivot mode.
+ */
+function buildValueAggregationMenuItem(adaptableApi, menuContext) {
+    const column = menuContext.adaptableColumn;
+    const columnId = column.columnId;
+    const currentLayout = adaptableApi.layoutApi.getCurrentLayout();
+    const aggregationColumns = currentLayout.TableAggregationColumns || [];
+    const currentAggFunc = aggregationColumns.find((agg) => agg.ColumnId === columnId)?.AggFunc;
+    let activeAggFuncName;
+    if (currentAggFunc != null) {
+        const aggFuncName = (0, AggregationColumns_1.getAggFuncName)(currentAggFunc);
+        activeAggFuncName = aggFuncName === true ? column.aggregationFunction : aggFuncName;
+    }
+    const activeWeightColumnId = (0, AggregationColumns_1.isWeightedAverageAggregation)(currentAggFunc)
+        ? currentAggFunc.weightedColumnId
+        : undefined;
+    const applyAggregation = (aggFuncValue) => {
+        const upsert = (cols) => {
+            const list = cols ? [...cols] : [];
+            const index = list.findIndex((col) => col.ColumnId === columnId);
+            if (index >= 0) {
+                list[index] = { ...list[index], AggFunc: aggFuncValue };
+            }
+            else {
+                list.push({ ColumnId: columnId, AggFunc: aggFuncValue });
+            }
+            return list;
+        };
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: upsert(tableLayout.TableAggregationColumns),
+            };
+        });
+    };
+    const removeAggregation = () => {
+        adaptableApi.layoutApi.updateCurrentLayout((layout) => {
+            const tableLayout = layout;
+            return {
+                ...tableLayout,
+                TableAggregationColumns: (tableLayout.TableAggregationColumns || []).filter((col) => col.ColumnId !== columnId),
+            };
+        });
+    };
+    // 'None' clears any aggregation for the column and is checked when none is set
+    const subMenu = [
+        {
+            name: 'None',
+            checked: activeAggFuncName == null,
+            action: () => removeAggregation(),
+        },
+    ];
+    // getDisplayAggFuncNames already positions weightedAvg right after 'avg'
+    // (and only includes it when the column is eligible)
+    const aggFuncItems = (0, AggregationColumns_1.getDisplayAggFuncNames)(column).map((funcName) => {
+        // Weighted Average needs a weight column parameter, so instead of a plain
+        // action it gets a submenu listing the numeric columns usable as the weight.
+        if (funcName === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME) {
+            const weightColumnItems = adaptableApi.columnApi
+                .getNumericColumns()
+                .filter((numericColumn) => numericColumn.columnId !== columnId)
+                .map((numericColumn) => ({
+                name: numericColumn.friendlyName ?? numericColumn.columnId,
+                checked: activeWeightColumnId === numericColumn.columnId,
+                action: () => applyAggregation({
+                    type: 'weightedAverage',
+                    weightedColumnId: numericColumn.columnId,
+                }),
+            }));
+            return {
+                name: 'Weighted Average',
+                checked: activeAggFuncName === AggregationColumns_1.WEIGHTED_AVERAGE_AGG_FN_NAME,
+                subMenu: weightColumnItems,
+            };
+        }
+        return {
+            name: toFuncLabel(funcName),
+            checked: activeAggFuncName === funcName,
+            action: () => applyAggregation(funcName),
+        };
+    });
+    subMenu.push(...aggFuncItems);
+    return {
+        name: 'Value Aggregation',
+        subMenu,
+    };
+}
 class AgGridMenuAdapter {
     _adaptableInstance;
     constructor(_adaptableInstance) {
@@ -59,42 +184,25 @@ class AgGridMenuAdapter {
                 .filter(Boolean);
         }
         // 2. if not, return the default context menu
-        let defaultContextMenu = [
-            ...agGridMenuItems,
+        // AG Grid does not allow customizing the built-in `valueAggSubMenu`, so we
+        // replace it with an Adaptable-built equivalent that also offers a Weighted
+        // Average aggregation (with a submenu to pick the weight column).
+        // Weighted Average is never used in Pivot Layouts, so we leave the AG Grid
+        // default item untouched there.
+        const isPivotLayout = this.adaptableApi.layoutApi.isCurrentLayoutPivot();
+        const mappedAgGridMenuItems = agGridMenuItems.map((itemName) => itemName === 'valueAggSubMenu' && !isPivotLayout
+            ? {
+                ...buildValueAggregationMenuItem(this.adaptableApi, menuContext),
+                icon: createAgGridIcon('aggregation'),
+            }
+            : itemName);
+        const defaultContextMenu = [
+            ...mappedAgGridMenuItems,
             'separator',
             ...defaultColumnMenuStructure.map((adaptableItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(adaptableItem)),
         ];
-        defaultContextMenu = this.injectParameterizedAggregationColumnMenuItems(defaultContextMenu, adaptableColumn);
         return this.removeConsecutiveSeparators(defaultContextMenu);
     }
-    injectParameterizedAggregationColumnMenuItems(menuItems, column) {
-        const consolidatedAggregationMenuItem = (0, parameterizedAggregationColumnMenu_1.buildConsolidatedAggregationColumnMenuItem)(this.adaptableApi, column, (columnId, parameterizedAgg) => {
-            this.adaptableApi.layoutApi.setColumnParameterizedAggregation(columnId, parameterizedAgg);
-        }, (columnId, aggFunc) => {
-            this.adaptableApi.layoutApi.updateCurrentLayout((layout) => {
-                if (aggFunc == null) {
-                    (0, parameterizedAggregationHelpers_1.removeColumnAggregationFromLayout)(layout, columnId);
-                }
-                else {
-                    (0, parameterizedAggregationHelpers_1.upsertColumnAggregationInLayout)(layout, columnId, aggFunc);
-                }
-                return layout;
-            });
-            this.adaptableApi.agGridApi.setColumnAggFunc(columnId, aggFunc);
-        });
-        if (!consolidatedAggregationMenuItem) {
-            return menuItems;
-        }
-        consolidatedAggregationMenuItem.icon = this.mapAdaptableIconToAgGridIcon({ name: 'equation' });
-        const originalValueAggMenuIndex = menuItems.findIndex((item) => (0, parameterizedAggregationColumnMenu_1.isValueAggregationMenuItem)(item));
-        const menuItemsWithoutValueAgg = menuItems.filter((item) => !(0, parameterizedAggregationColumnMenu_1.isValueAggregationMenuItem)(item));
-        const result = [...menuItemsWithoutValueAgg];
-        const insertIndex = originalValueAggMenuIndex !== -1
-            ? Math.min(originalValueAggMenuIndex, result.length)
-            : (0, parameterizedAggregationColumnMenu_1.findParameterizedAggMenuInsertIndex)(menuItemsWithoutValueAgg);
-        result.splice(insertIndex, 0, consolidatedAggregationMenuItem);
-        return result;
-    }
     buildContextMenu(params, originalGetContextMenuItems) {
         if (!params.column) {
             return [];
@@ -273,7 +381,7 @@ class AgGridMenuAdapter {
                     ? () => this.adaptableApi.internalApi.dispatchReduxAction(fullMenuItem.reduxAction)
                     : undefined,
             icon: this.mapAdaptableIconToAgGridIcon(fullMenuItem.icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             }),
             subMenu: fullMenuItem.subItems?.map((subMenuItem) => this.mapAdaptableMenuItemToAgGridMenuDefinition(subMenuItem)),
         };
@@ -286,7 +394,7 @@ class AgGridMenuAdapter {
             return {
                 name: customMenuItem.label,
                 icon: this.mapAdaptableIconToAgGridIcon(customMenuItem.icon, {
-                    fill: 'var(--ab-color-text-on-primary)',
+                    fill: 'var(--ab-color-primary-foreground)',
                 }),
                 disabled: customMenuItem.disabled,
                 subMenu: !customMenuItem.disabled
@@ -314,7 +422,7 @@ class AgGridMenuAdapter {
             name: userMenuItem.label,
             action: () => (userMenuItem.onClick ? userMenuItem.onClick(menuContext) : null),
             icon: this.mapAdaptableIconToAgGridIcon(userMenuItem.icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             }),
             disabled: userMenuItem.disabled,
             subMenu: userMenuItem.subMenuItems
@@ -739,7 +847,7 @@ class AgGridMenuAdapter {
         }
         else {
             return (0, icons_1.iconToString)(icon, {
-                fill: 'var(--ab-color-text-on-primary)',
+                fill: 'var(--ab-color-primary-foreground)',
             });
         }
     }

package/src/agGrid/cellRenderers/ActionColumnRenderer.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionColumnRenderer = exports.ReactActionColumnRenderer = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
+const DropdownButton_1 = require("../../components/DropdownButton");
 const React = tslib_1.__importStar(require("react"));
 const Icon_1 = require("../../components/Icon");
 const AdaptableButton_1 = require("../../View/Components/AdaptableButton");
@@ -17,10 +17,7 @@ function getActionColumnButtonProps(button, index, adaptableApi, context, rerend
     }
     const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
     const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
-    const identifier = button.label ??
-        button.icon?.name ??
-        button.tooltip ??
-        `${index + 1}`;
+    const identifier = button.label ?? button.icon?.name ?? button.tooltip ?? `${index + 1}`;
     return {
         button,
         buttonLabel,
@@ -56,7 +53,7 @@ const ActionColumnDropdown = (props) => {
         });
         return {
             label: buttonLabel || buttonTooltip,
-            icon: menuIcon ? ((0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: menuIcon })) : undefined,
+            icon: menuIcon ? (0, jsx_runtime_1.jsx)(Icon_1.IconComponent, { icon: menuIcon }) : undefined,
             disabled,
             onClick: () => {
                 actionButton.onClick?.(actionButton, context);
@@ -68,7 +65,7 @@ const ActionColumnDropdown = (props) => {
     if (!items.length) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.default, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, collapseOnItemClick: true, listMinWidth: 140, showToggleIcon: true, accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: dropdownLabel }));
+    return ((0, jsx_runtime_1.jsx)(DropdownButton_1.NewDropdownButton, { "data-name": "action-column-dropdown", variant: "outlined", tone: "neutral", items: items, accessLevel: GeneralConstants_1.ACCESS_LEVEL_FULL, children: dropdownLabel }));
 };
 const ActionColumnCellContent = (props) => {
     const { buttons, actionColumn, adaptableApi, context, rerender } = props;

package/src/agGrid/cellRenderers/BadgeRenderer.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const Badge_1 = require("../../View/Components/Badge");
 const renderWithAdaptableContext_1 = require("../../View/renderWithAdaptableContext");
 const React = tslib_1.__importStar(require("react"));
-const shouldRenderStyledColumnOnRow_1 = require("./shouldRenderStyledColumnOnRow");
+const StyledColumnHelper_1 = require("../../Utilities/Helpers/StyledColumns/StyledColumnHelper");
 const OVERFLOW_CLASS = {
     Truncate: 'ab-Badge__wrapper--truncate',
     Wrap: 'ab-Badge__wrapper--wrap',
@@ -56,7 +56,7 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.style.setProperty('justify-content', rowJustify);
                 this.eGui.style.setProperty('width', '100%');
             }
-            if (!(0, shouldRenderStyledColumnOnRow_1.shouldRenderStyledColumnOnRow)(styledColumn, params.node, adaptableApi)) {
+            if (!(0, StyledColumnHelper_1.shouldRenderStyledColumnOnRow)(styledColumn, params.node, adaptableApi)) {
                 const formattedValue = params.formatValue?.(params.value) ?? params.value ?? '';
                 this.eGui.innerHTML = formattedValue;
                 return;
@@ -87,7 +87,9 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     ...adaptableApi.internalApi.buildBaseContext(),
                 };
                 const badge = api.styledColumnApi.internalApi.getApplicableBadge(badgeStyle, predicateDefHandlerContext);
-                const formattedValue = badge?.IconOnly ? '' : params.formatValue?.(value) ?? value ?? '';
+                const formattedValue = badge?.IconProperties?.IconOnly
+                    ? ''
+                    : params.formatValue?.(value) ?? value ?? '';
                 const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
                 if (!isNullValue) {
                     const config = { value: formattedValue };
@@ -117,7 +119,7 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            if (badge.IconOnly) {
+            if (badge.IconProperties?.IconOnly) {
                 formattedValue = '';
             }
             this.renderBadges([
@@ -141,11 +143,11 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                     key: index,
                     pillStyle: badge.PillStyle,
                     children: value,
-                    icon: badge.Icon,
-                    iconPosition: badge.IconPosition ?? 'start',
+                    icon: badge.IconProperties?.Icon,
+                    iconPosition: badge.IconProperties?.Position ?? 'start',
                     shape: badge.Shape,
                     density: badgeStyle.Density ?? 'Normal',
-                    iconGap: badge.IconGap,
+                    iconGap: badge.IconProperties?.Gap,
                 });
             });
             this.unmountReactRoot = api.internalApi

package/src/agGrid/cellRenderers/BulletChartRenderer.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBulletChartRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
-const clamp_1 = tslib_1.__importDefault(require("../../Utilities/utils/clamp"));
-const shouldRenderStyledColumnOnRow_1 = require("./shouldRenderStyledColumnOnRow");
+const NumberExtensions_1 = require("../../Utilities/Extensions/NumberExtensions");
+const BarStylesHelper_1 = require("../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const StyledColumnHelper_1 = require("../../Utilities/Helpers/StyledColumns/StyledColumnHelper");
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const DEFAULT_BAR_HEIGHT = 8;
 const DEFAULT_BAND_HEIGHT = 14;
@@ -56,19 +57,18 @@ const normaliseMarker = (override, base) => {
     };
 };
 const resolveTargets = (bulletStyle, styledColumn, abColumn, rowNode, api) => {
-    if (bulletStyle.Target == undefined) {
+    const targetSpec = bulletStyle.TargetProperties?.Target;
+    if (targetSpec == undefined) {
         return [];
     }
-    const targets = Array.isArray(bulletStyle.Target)
-        ? bulletStyle.Target
-        : [bulletStyle.Target];
+    const targets = Array.isArray(targetSpec) ? targetSpec : [targetSpec];
     const resolved = [];
     for (const target of targets) {
         const value = resolveTargetValue(target, styledColumn, abColumn, rowNode, api);
         if (value == undefined || isNaN(value)) {
             continue;
         }
-        const marker = normaliseMarker(isTargetDefinition(target) ? target.Marker : undefined, bulletStyle.TargetMarker);
+        const marker = normaliseMarker(isTargetDefinition(target) ? target.Marker : undefined, bulletStyle.TargetProperties?.Marker);
         resolved.push({
             value,
             marker,
@@ -106,7 +106,7 @@ const toFraction = (value, min, max) => {
     if (max === min) {
         return 0;
     }
-    return (0, clamp_1.default)((value - min) / (max - min), 0, 1);
+    return (0, NumberExtensions_1.clamp)((value - min) / (max - min), 0, 1);
 };
 const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.BulletChartStyle) {
@@ -117,7 +117,7 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
         eGui;
         init(params) {
             // Defer to the shared row-scope helper.
-            if (!(0, shouldRenderStyledColumnOnRow_1.shouldRenderStyledColumnOnRow)(styledColumn, params.node, api)) {
+            if (!(0, StyledColumnHelper_1.shouldRenderStyledColumnOnRow)(styledColumn, params.node, api)) {
                 if (params.value != undefined) {
                     this.eGui = document.createElement('div');
                     this.eGui.append(String(params.value));
@@ -156,10 +156,10 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
             // `BarThickness` is the bar's *short* axis (height in horizontal,
             // width in vertical). `BandThickness` is the matching short-axis
             // size of the surrounding bands.
-            const barThickness = bulletStyle.BarHeight ?? DEFAULT_BAR_HEIGHT;
+            const barThickness = bulletStyle.Bar?.Height ?? DEFAULT_BAR_HEIGHT;
             const bandThickness = Math.max(barThickness + 6, DEFAULT_BAND_HEIGHT);
-            const hasCellText = bulletStyle.CellText && bulletStyle.CellText.length > 0;
-            const isTextMerged = bulletStyle.CellTextPosition === 'Merged';
+            const cellTextProperties = bulletStyle.CellTextProperties;
+            const hasCellText = (0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties);
             // Map a 0..1 value fraction onto the long-axis viewBox (0..100).
             // In horizontal: 0 -> left, 1 -> right.
             // In vertical:   0 -> bottom, 1 -> top (SVG y origin is at the top so
@@ -176,7 +176,7 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
             this.eGui.style.alignItems = isVertical ? 'center' : 'stretch';
             this.eGui.style.justifyContent = 'center';
             this.eGui.style.position = 'relative';
-            this.eGui.style.height = hasCellText && !isTextMerged ? '80%' : '100%';
+            this.eGui.style.height = '100%';
             // SVG chart - we let `preserveAspectRatio="none"` stretch the long axis
             // (viewBox 0..100) to fill the cell while the short axis stays fixed
             // in pixels.
@@ -247,7 +247,7 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
             const barCrossOffset = (bandThickness - barThickness) / 2;
             const bar = document.createElementNS(SVG_NS, 'rect');
             setRectAxes(bar, Math.min(valueCoord, originCoord), Math.abs(valueCoord - originCoord), barCrossOffset, barThickness);
-            bar.setAttribute('fill', bulletStyle.BarColor ?? DEFAULT_BAR_COLOR);
+            bar.setAttribute('fill', bulletStyle.Bar?.Color ?? DEFAULT_BAR_COLOR);
             bar.setAttribute('class', 'ab-BulletChart__bar');
             svg.appendChild(bar);
             // Target markers
@@ -259,39 +259,40 @@ const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
                     svg.appendChild(marker);
                 }
             }
-            this.eGui.appendChild(svg);
+            // Wrap the SVG in a positioned container so a `Merged` text row can
+            // be absolute-positioned to the centre of the *bar* (matching Percent
+            // Bar's behaviour) instead of falling through to the wrapper centre,
+            // which would otherwise overlap an `Above` / `Below` band.
+            const svgContainer = document.createElement('div');
+            svgContainer.style.position = 'relative';
+            svgContainer.style.display = 'flex';
+            svgContainer.style.alignItems = 'center';
+            svgContainer.style.justifyContent = 'center';
+            // Horizontal: take the SVG's natural (bandThickness) height.
+            // Vertical: stretch to fill the wrapper so the SVG's `height: 100%`
+            // resolves against a real size.
+            if (isVertical) {
+                svgContainer.style.flex = '1 1 auto';
+                svgContainer.style.minHeight = '0';
+            }
+            else {
+                svgContainer.style.flex = '0 0 auto';
+            }
+            svgContainer.appendChild(svg);
+            this.eGui.appendChild(svgContainer);
             if (hasCellText) {
-                const textEl = document.createElement('div');
-                textEl.className = 'ab-BulletChart__text';
-                textEl.style.lineHeight = '1.2';
-                const parts = [];
-                if (bulletStyle.CellText.includes('CellValue')) {
-                    parts.push(params.formatValue?.(cellValue) ?? String(cellValue));
-                }
-                if (bulletStyle.CellText.includes('PercentageValue')) {
-                    parts.push(`${(valueFraction * 100).toFixed(0)}%`);
-                }
-                textEl.innerText = parts.join(' ');
-                switch (bulletStyle.CellTextPosition) {
-                    case 'Above':
-                        this.eGui.prepend(textEl);
-                        break;
-                    case 'Merged':
-                        textEl.style.position = 'absolute';
-                        textEl.style.top = '50%';
-                        textEl.style.transform = 'translateY(-50%)';
-                        textEl.style.left = '0';
-                        textEl.style.right = '0';
-                        textEl.style.paddingLeft = '5px';
-                        textEl.style.paddingRight = '5px';
-                        textEl.style.pointerEvents = 'none';
-                        this.eGui.appendChild(textEl);
-                        break;
-                    case 'Below':
-                    default:
-                        this.eGui.appendChild(textEl);
-                        break;
-                }
+                // See PercentBarRenderer: `params.formatValue` on a column without a
+                // `valueFormatter` returns the raw value (a number here), so coerce
+                // to string before it flows into the helpers.
+                const formattedCellValue = String(params.formatValue?.(cellValue) ?? cellValue);
+                const labels = (0, BarStylesHelper_1.buildBarStyleCellTextLabels)(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
+                (0, BarStylesHelper_1.mountBarStyleCellText)({
+                    wrapperEl: this.eGui,
+                    mergedOverlayEl: svgContainer,
+                    textClassName: 'ab-BulletChart__text',
+                    cellTextProperties,
+                    labels,
+                });
             }
         }
         getGui() {

package/src/agGrid/cellRenderers/IconRenderer.d.ts

@@ -1,4 +1,5 @@
-import { IconStyle, IconStyleMapping, StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { IconStyle, IconStyleMapping } from '../../AdaptableState/StyledColumns/IconStyle';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
 /**
@@ -18,6 +19,12 @@ import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
  * is configured for case-insensitive matching.
  */
 export declare const resolveEffectiveIconStyleMappings: (iconStyle: IconStyle | undefined) => IconStyleMapping[];
+/**
+ * Mapping list for wizard / settings summaries: custom mappings first so
+ * user-authored entries are always visible, then any remaining preset
+ * entries (after override filtering).
+ */
+export declare const resolveIconStyleMappingsForSummaryPreview: (iconStyle: IconStyle | undefined) => IconStyleMapping[];
 export declare const getIconRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;
 /** Helper exposed for the tooltip getter in `AgGridColumnAdapter`. */
 export declare const findIconStyleMappingForValue: (iconStyle: IconStyle | undefined, cellValue: any) => IconStyleMapping | undefined;