@adaptabletools/adaptable-cjs 22.1.1 → 23.0.0-canary.1

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -0,0 +1,281 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.findIconStyleMappingForValue = exports.getIconRendererForColumn = exports.resolveEffectiveIconStyleMappings = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const Icon_1 = require("../../components/Icon");
+const renderWithAdaptableContext_1 = require("../../View/renderWithAdaptableContext");
+const Helper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/Helper"));
+const IconStylePresets_1 = require("../../Utilities/Helpers/IconStylePresets");
+const shouldRenderStyledColumnOnRow_1 = require("./shouldRenderStyledColumnOnRow");
+const iconStyledColumnColumnSupport_1 = require("../../Utilities/Helpers/iconStyledColumnColumnSupport");
+const AdaptableLogger_1 = require("../AdaptableLogger");
+const DEFAULT_SIZE = 18;
+const DEFAULT_GAP = 4;
+/**
+ * Resolve the **effective** mapping list for an `IconStyle`:
+ *
+ *   `[ ...presetMappings filtered by overrides, ...userMappings ]`
+ *
+ * Authoring contract:
+ *  - `Preset` alone is enough — the renderer pulls the shipped mappings.
+ *  - `Mappings` are *additions and overrides on top of the preset*. Any
+ *    user mapping whose `Key` matches a preset entry replaces the preset
+ *    entry; remaining preset entries pass through as-is.
+ *  - `Mappings` alone (no Preset) behaves exactly as before.
+ *
+ * Equality respects `IconStyle.MatchMode` so a user override with
+ * `Key: 'gbp'` correctly shadows the preset's `'GBP'` when the column
+ * is configured for case-insensitive matching.
+ */
+const resolveEffectiveIconStyleMappings = (iconStyle) => {
+    if (!iconStyle)
+        return [];
+    const presetMappings = iconStyle.Preset
+        ? (0, IconStylePresets_1.getIconStylePresetMappings)(iconStyle.Preset)
+        : [];
+    const userMappings = iconStyle.Mappings ?? [];
+    if (presetMappings.length === 0)
+        return userMappings;
+    if (userMappings.length === 0)
+        return presetMappings;
+    const matchMode = iconStyle.MatchMode ?? 'Exact';
+    const normaliseKey = (k) => {
+        if (typeof k === 'string' && matchMode === 'CaseInsensitive') {
+            return k.toLowerCase();
+        }
+        return k;
+    };
+    const overrideKeys = new Set(userMappings.map((m) => normaliseKey(m.Key)));
+    const filteredPreset = presetMappings.filter((p) => !overrideKeys.has(normaliseKey(p.Key)));
+    return [...filteredPreset, ...userMappings];
+};
+exports.resolveEffectiveIconStyleMappings = resolveEffectiveIconStyleMappings;
+/**
+ * Look up `cellValue` in the mapping list using the configured match mode.
+ *
+ * Strict equality covers the typed case (numeric / boolean keys) — string
+ * comparison falls back to a case-insensitive match when configured so the
+ * same preset works for `'GBP'` and `'gbp'` etc.
+ */
+const findMapping = (mappings, cellValue, matchMode) => {
+    if (!mappings || mappings.length === 0)
+        return undefined;
+    if (matchMode === 'CaseInsensitive' && typeof cellValue === 'string') {
+        const needle = cellValue.toLowerCase();
+        return mappings.find((m) => {
+            if (typeof m.Key === 'string')
+                return m.Key.toLowerCase() === needle;
+            // For non-string keys (number / boolean) compare textually so e.g.
+            // `Key: 1` matches the string `'1'`.
+            return String(m.Key) === cellValue;
+        });
+    }
+    return mappings.find((m) => m.Key === cellValue);
+};
+/**
+ * Returns true when the spec is a plain string (emoji / glyph) — anything
+ * else is an `AdaptableIcon` and goes through `IconComponent`.
+ */
+const isInlineGlyph = (spec) => {
+    return typeof spec === 'string';
+};
+const isAdaptableIconSpec = (spec) => {
+    return (!!spec &&
+        ((0, Icon_1.isAdaptableSystemIcon)(spec) ||
+            (0, Icon_1.isAdaptableCustomIcon)(spec) ||
+            (0, Icon_1.isAdaptableElementIcon)(spec)));
+};
+/**
+ * Renders the icon side of the cell. Strings are rendered as inline
+ * glyphs (emoji-friendly); `AdaptableIcon` specs go through the existing
+ * `IconComponent` so URL / system / element icons all "just work".
+ */
+const renderIconSpec = (spec, size, className) => {
+    if (isInlineGlyph(spec)) {
+        return React.createElement('span', {
+            className,
+            style: {
+                fontSize: size,
+                lineHeight: 1,
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+        }, spec);
+    }
+    if (isAdaptableIconSpec(spec)) {
+        return React.createElement(Icon_1.IconComponent, {
+            icon: { ...spec, size: spec.size ?? size },
+            iconClassName: className,
+        });
+    }
+    return null;
+};
+const renderIconCellTree = (params) => {
+    const { iconSpec, text, textPosition, size, gap } = params;
+    const iconNode = iconSpec
+        ? renderIconSpec(iconSpec, size, 'ab-IconStyle__glyph')
+        : null;
+    const textNode = text
+        ? React.createElement('span', {
+            className: 'ab-IconStyle__text',
+            style: { lineHeight: 1.2 },
+        }, text)
+        : null;
+    if (!iconNode && !textNode) {
+        return null;
+    }
+    if (!textNode) {
+        return iconNode;
+    }
+    if (!iconNode) {
+        return textNode;
+    }
+    const isStacked = textPosition === 'Above' || textPosition === 'Below';
+    const wrapperStyle = {
+        display: 'inline-flex',
+        flexDirection: isStacked ? 'column' : 'row',
+        alignItems: 'center',
+        gap,
+        width: '100%',
+        height: '100%',
+        justifyContent: 'center',
+    };
+    let children;
+    switch (textPosition) {
+        case 'Before':
+        case 'Above':
+            children = [textNode, iconNode];
+            break;
+        case 'After':
+        case 'Below':
+        default:
+            children = [iconNode, textNode];
+            break;
+    }
+    return React.createElement('span', {
+        className: 'ab-IconStyle__wrapper',
+        style: wrapperStyle,
+    }, ...children.map((child, idx) => React.cloneElement(child, { key: idx })));
+};
+const getIconRendererForColumn = (styledColumn, abColumn, api) => {
+    if (!styledColumn.IconStyle) {
+        return;
+    }
+    if ((0, iconStyledColumnColumnSupport_1.isUnsupportedColumnDataTypeForIconStyle)(abColumn.dataType)) {
+        (0, AdaptableLogger_1.errorOnce)(`[AdapTable] Icon Styled Column (“${styledColumn.Name || styledColumn.ColumnId || 'unnamed'}” on column ${styledColumn.ColumnId}) is not supported when the column data type is ${abColumn.dataType}. Use Badge Style for array columns, or remove IconStyle from this column.`);
+        return undefined;
+    }
+    const iconStyle = styledColumn.IconStyle;
+    const size = iconStyle.Size ?? DEFAULT_SIZE;
+    const gap = iconStyle.Gap ?? DEFAULT_GAP;
+    const textPosition = iconStyle.CellTextPosition ?? 'After';
+    const matchMode = iconStyle.MatchMode ?? 'Exact';
+    // Resolve once at column-setup time. Cheap; recomputed when the column
+    // is reconfigured (which is when this factory is re-invoked anyway).
+    const effectiveMappings = (0, exports.resolveEffectiveIconStyleMappings)(iconStyle);
+    return class IconCellRenderer {
+        eGui;
+        unmountReactRoot;
+        getAdaptableInstance(params) {
+            return params.context.__adaptable;
+        }
+        init(params) {
+            const adaptable = this.getAdaptableInstance(params);
+            const adaptableApi = adaptable.api;
+            this.eGui = document.createElement('div');
+            this.eGui.className = 'ab-IconStyle';
+            this.eGui.style.display = 'inline-flex';
+            this.eGui.style.alignItems = 'center';
+            this.eGui.style.height = '100%';
+            this.eGui.style.width = '100%';
+            // Defer to the shared row-scope helper so behaviour is uniform
+            // across every Styled Column type and `StyledColumn.RowScope` can
+            // override the default ("leaf rows only" for Icon).
+            if (!(0, shouldRenderStyledColumnOnRow_1.shouldRenderStyledColumnOnRow)(styledColumn, params.node, adaptableApi)) {
+                if (params.value != undefined) {
+                    this.eGui.append(String(params.value));
+                }
+                return;
+            }
+            const cellValue = params.value;
+            const cellValueIsEmpty = Helper_1.default.objectNotExists(cellValue);
+            const matched = cellValueIsEmpty
+                ? undefined
+                : findMapping(effectiveMappings, cellValue, matchMode);
+            const formatted = params.formatValue?.(cellValue) ??
+                (cellValue != undefined ? String(cellValue) : '');
+            // `CellText` describes the *companion text alongside a matched icon*.
+            // `Fallback` describes *what to do when no mapping matches*. They are
+            // independent: when there is no match, `Fallback` decides on its own
+            // — `CellText` does not get to override `Fallback: 'Hide'`.
+            let iconSpec;
+            let text;
+            let descriptionForTooltip;
+            if (matched) {
+                iconSpec = matched.Icon;
+                descriptionForTooltip = matched.Description;
+                const cellTextTokens = iconStyle.CellText ?? [];
+                const textParts = [];
+                if (cellTextTokens.includes('CellValue') && formatted) {
+                    textParts.push(formatted);
+                }
+                if (cellTextTokens.includes('IconDescription') && matched.Description) {
+                    textParts.push(matched.Description);
+                }
+                text = textParts.length > 0 ? textParts.join(' · ') : undefined;
+            }
+            else if (!cellValueIsEmpty) {
+                // Unmatched, non-empty cell: defer entirely to `Fallback`.
+                const fallback = iconStyle.Fallback ?? 'Hide';
+                if (fallback === 'ShowText') {
+                    text = formatted || undefined;
+                }
+                else if (fallback === 'Icon' && iconStyle.FallbackIcon) {
+                    iconSpec = iconStyle.FallbackIcon;
+                }
+                // 'Hide' (and the unsupported permutations) render nothing.
+            }
+            // else: empty cell → render nothing, regardless of `Fallback`.
+            // If we have nothing to draw, leave the cell empty (and skip mounting
+            // a React root for this row).
+            if (!iconSpec && !text) {
+                return;
+            }
+            const tree = renderIconCellTree({
+                iconSpec,
+                text,
+                textPosition,
+                size,
+                gap,
+                tooltipExtra: descriptionForTooltip,
+            });
+            if (!tree) {
+                return;
+            }
+            this.unmountReactRoot = adaptableApi.internalApi
+                .getAdaptableInstance()
+                .renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)(React.createElement(React.Fragment, { children: tree }), adaptable), this.eGui);
+        }
+        getGui() {
+            return this.eGui;
+        }
+        destroy() {
+            this.unmountReactRoot?.();
+        }
+        refresh(_params) {
+            // Force a re-init on every value change so the matched icon is fresh.
+            return false;
+        }
+    };
+};
+exports.getIconRendererForColumn = getIconRendererForColumn;
+/** Helper exposed for the tooltip getter in `AgGridColumnAdapter`. */
+const findIconStyleMappingForValue = (iconStyle, cellValue) => {
+    if (!iconStyle)
+        return undefined;
+    const effective = (0, exports.resolveEffectiveIconStyleMappings)(iconStyle);
+    return findMapping(effective, cellValue, iconStyle.MatchMode ?? 'Exact');
+};
+exports.findIconStyleMappingForValue = findIconStyleMappingForValue;

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -4,6 +4,99 @@ exports.getPercentBarRendererForColumn = 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");
+/**
+ * Resolve the origin value (in the same numeric space as `min`/`max`) the bar
+ * should grow from.
+ *
+ * - `'Min'` - left edge (legacy behaviour: bar always anchored at min)
+ * - `'Zero'` - always 0 (centred axis)
+ * - `'Auto'` - 0 if any negatives are involved, otherwise min
+ * - `number` - explicit origin
+ */
+const resolveOrigin = (percentBarStyle, cellValue, min, max) => {
+    const origin = percentBarStyle.Origin ?? 'Auto';
+    if (typeof origin === 'number') {
+        return origin;
+    }
+    if (origin === 'Zero') {
+        return 0;
+    }
+    if (origin === 'Min') {
+        return min;
+    }
+    // Auto - centred axis only when negatives are in play.
+    if (min < 0 || max < 0 || cellValue < 0) {
+        return 0;
+    }
+    return min;
+};
+const toFraction = (value, min, max) => {
+    if (max === min) {
+        return 0;
+    }
+    return (0, clamp_1.default)((value - min) / (max - min), 0, 1);
+};
+/** Column-comparison mode: centred 50% axis when Origin is Auto or Zero. */
+const columnComparisonUsesCentredAxis = (origin) => {
+    const o = origin ?? 'Auto';
+    if (typeof o === 'number') {
+        return false;
+    }
+    return o === 'Zero' || o === 'Auto';
+};
+/**
+ * Linear (non-comparison) mode: bar grows from an interior point of the scale
+ * (so positives / negatives can diverge left and right).
+ */
+const linearScaleUsesCentredAxis = (percentBarStyle, cellValue, min, max) => {
+    const origin = percentBarStyle.Origin ?? 'Auto';
+    if (origin === 'Zero') {
+        return true;
+    }
+    if (origin === 'Min') {
+        return false;
+    }
+    if (typeof origin === 'number') {
+        if (max === min) {
+            return false;
+        }
+        const f = toFraction(origin, min, max);
+        return f > 0 && f < 1;
+    }
+    // Auto — same condition as resolveOrigin using 0 as the pivot.
+    return min < 0 || max < 0 || cellValue < 0;
+};
+const resolveCellTextAlignCss = (percentBarStyle, args) => {
+    const mode = percentBarStyle.CellTextAlignment;
+    if (mode == undefined) {
+        return undefined;
+    }
+    if (mode === 'Left') {
+        return 'left';
+    }
+    if (mode === 'Right') {
+        return 'right';
+    }
+    if (mode === 'Center') {
+        return 'center';
+    }
+    // Auto
+    const centred = args.hasColumnComparison
+        ? columnComparisonUsesCentredAxis(percentBarStyle.Origin)
+        : linearScaleUsesCentredAxis(percentBarStyle, args.numericValue, args.min, args.max);
+    if (!centred) {
+        return undefined;
+    }
+    const v = args.hasColumnComparison ? args.percentageValue : args.numericValue;
+    if (v > 0) {
+        return 'right';
+    }
+    if (v < 0) {
+        return 'left';
+    }
+    return 'center';
+};
 const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.PercentBarStyle) {
         return;
@@ -11,106 +104,182 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
     return class PercentBarRenderer {
         eGui;
         init(params) {
-            const min = api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
-            const max = api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
-            let value = params.value;
-            if (Helper_1.default.objectNotExists(value)) {
-                value = 0;
-            }
-            // We no longer support showing Percent Bar in Group Rows as it only made sense for Min / Max
-            if (api.gridApi.isGroupRowNode(params.node)) {
-                if (params.value) {
+            // Defer to the shared row-scope helper. Default behaviour
+            // ("group rows fall back to plain text") is preserved when
+            // `RowScope` is unset.
+            if (!(0, shouldRenderStyledColumnOnRow_1.shouldRenderStyledColumnOnRow)(styledColumn, params.node, api)) {
+                if (params.value != undefined) {
                     this.eGui = document.createElement('div');
-                    this.eGui.append(params.value);
+                    this.eGui.append(String(params.value));
                 }
                 return;
             }
+            const rawCellValue = params.value;
+            // Empty / null cells render as nothing - drawing a 0%-wide bar would
+            // misleadingly suggest the cell value is at the origin.
+            if (Helper_1.default.objectNotExists(rawCellValue)) {
+                this.eGui = document.createElement('div');
+                return;
+            }
+            const numericValue = typeof rawCellValue === 'number' ? rawCellValue : Number(rawCellValue);
+            // Non-numeric strings ('—', 'N/A', etc.) get the same plain-text
+            // treatment as group rows.
+            if (isNaN(numericValue)) {
+                this.eGui = document.createElement('div');
+                this.eGui.append(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
+                return;
+            }
+            const min = api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, rawCellValue);
+            const max = api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, rawCellValue);
             const percentBarStyle = styledColumn.PercentBarStyle;
+            // ----- Compute the bar geometry --------------------------------------
+            // We always lay out the bar with `left%` and `width%` (instead of just
+            // `width%`) so that the bar can be anchored to any origin between min
+            // and max - including a centred 0 axis for columns with negatives.
             let percentageValue;
+            let barLeftPercent;
             let barWidthPercent;
             if (percentBarStyle.ColumnComparison) {
-                // Finance convention: (difference / |base|) * 100 — signed %, use |price| when base is negative
+                // Finance convention: (difference / |base|) * 100 - signed %.
                 const absMax = Math.abs(max);
-                percentageValue = absMax === 0 ? 0 : (Number(value) / absMax) * 100;
-                // Bar width uses |percentage| so 50% and -50% have the same visual width
-                barWidthPercent = Math.min(100, Math.abs(percentageValue));
+                percentageValue = absMax === 0 ? 0 : (numericValue / absMax) * 100;
+                const magnitude = Math.min(100, Math.abs(percentageValue));
+                const origin = percentBarStyle.Origin ?? 'Auto';
+                const isCentred = columnComparisonUsesCentredAxis(origin);
+                if (isCentred) {
+                    // Centred at 50%: positive bars grow right from the centre, negative
+                    // bars grow left. Width is half the magnitude (50 = full half-width).
+                    const halfWidth = magnitude / 2;
+                    if (percentageValue >= 0) {
+                        barLeftPercent = 50;
+                        barWidthPercent = halfWidth;
+                    }
+                    else {
+                        barLeftPercent = 50 - halfWidth;
+                        barWidthPercent = halfWidth;
+                    }
+                }
+                else {
+                    // Legacy behaviour: anchored at left, bar width = |percentage|.
+                    barLeftPercent = 0;
+                    barWidthPercent = magnitude;
+                }
+            }
+            else if (max === min) {
+                // No usable scale - bar is invisible but we still want to fall through
+                // and render the cell text below.
+                percentageValue = 0;
+                barLeftPercent = 0;
+                barWidthPercent = 0;
             }
             else {
-                const clampedValue = (0, clamp_1.default)(value, min, max);
-                percentageValue = ((clampedValue - min) / (max - min)) * 100;
-                barWidthPercent = percentageValue;
+                // Linear value-on-scale.
+                percentageValue = (((0, clamp_1.default)(numericValue, min, max) - min) / (max - min)) * 100;
+                const origin = resolveOrigin(percentBarStyle, numericValue, min, max);
+                const valueFrac = toFraction(numericValue, min, max);
+                const originFrac = toFraction(origin, min, max);
+                const start = Math.min(valueFrac, originFrac);
+                const end = Math.max(valueFrac, originFrac);
+                barLeftPercent = start * 100;
+                barWidthPercent = (end - start) * 100;
             }
+            // ----- Resolve bar colour -------------------------------------------
             let cellBackColor;
             if (percentBarStyle.ColumnComparison) {
                 cellBackColor = percentBarStyle.ColumnComparison.Color;
             }
             else {
-                const matchingRange = api.styledColumnApi.internalApi.findRangeForColumn(percentBarStyle.CellRanges, abColumn, percentBarStyle.RangeValueType, params.value);
+                const matchingRange = api.styledColumnApi.internalApi.findRangeForColumn(percentBarStyle.CellRanges, abColumn, percentBarStyle.RangeValueType, numericValue);
                 if (matchingRange) {
                     cellBackColor = matchingRange.Color;
                 }
             }
+            // ----- Build the DOM -------------------------------------------------
             const hasCellText = percentBarStyle.CellText && percentBarStyle.CellText.length > 0;
             const isTextPositionMerged = percentBarStyle.CellTextPosition === 'Merged';
-            if (cellBackColor) {
-                this.eGui = document.createElement('div');
-                this.eGui.className = 'ab-PercentBar__wrapper';
-                this.eGui.style.height = hasCellText && !isTextPositionMerged ? '80%' : '100%';
-                this.eGui.style.display = 'flex';
-                this.eGui.style.flexDirection = 'column';
-                this.eGui.style.justifyContent = 'center';
-                const barEl = document.createElement('div');
-                barEl.className = 'ab-PercentBar__bar';
-                barEl.style.position = 'relative';
+            this.eGui = document.createElement('div');
+            this.eGui.className = 'ab-PercentBar__wrapper';
+            this.eGui.style.height = hasCellText && !isTextPositionMerged ? '80%' : '100%';
+            this.eGui.style.display = 'flex';
+            this.eGui.style.flexDirection = 'column';
+            this.eGui.style.justifyContent = 'center';
+            // Even when no range matches we still draw the bar track (with its
+            // back colour) so the cell isn't blank - this used to be a silent
+            // failure mode where the entire cell rendered nothing.
+            const barEl = document.createElement('div');
+            barEl.className = 'ab-PercentBar__bar';
+            barEl.style.position = 'relative';
+            if (percentBarStyle.BackColor) {
                 barEl.style.background = percentBarStyle.BackColor;
-                barEl.style.flex = '1';
+            }
+            barEl.style.flex = '1';
+            // Render the inside bar whenever a colour has been resolved, even at
+            // 0% width. A zero-width div is visually identical to skipping the
+            // element but keeps the DOM consistent so tests / tooling can still
+            // read the bar's reported width when a cell sits exactly at the origin
+            // (e.g. a value equal to Col-Min, or a 0 against a `MaxValue` column).
+            if (cellBackColor) {
                 const barInsideEl = document.createElement('div');
                 barInsideEl.className = 'ab-PercentBar__barInside';
                 barInsideEl.style.background = cellBackColor;
                 barInsideEl.style.height = '100%';
-                barInsideEl.style.width = `${barWidthPercent.toFixed(0)}%`;
+                barInsideEl.style.position = 'absolute';
+                // Sub-pixel precision avoids rounding 0.4% values down to 0
+                // (invisible) or making ticking data jump in 1% steps.
+                barInsideEl.style.left = `${barLeftPercent.toFixed(2)}%`;
+                barInsideEl.style.width = `${barWidthPercent.toFixed(2)}%`;
+                barInsideEl.style.top = '0';
                 barEl.append(barInsideEl);
-                this.eGui.append(barEl);
-                if (hasCellText) {
-                    const textEl = document.createElement('div');
-                    textEl.className = 'ab-PercentBar__text';
-                    textEl.style.lineHeight = '1.2';
-                    if (percentBarStyle.CellText.includes('CellValue')) {
-                        textEl.innerText = params.formatValue?.(params.value) ?? params.value;
-                    }
-                    if (percentBarStyle.CellText.includes('PercentageValue')) {
-                        textEl.innerText += ' ' + `${percentageValue.toFixed(0)}%`;
-                    }
-                    switch (percentBarStyle.CellTextPosition) {
-                        case 'Above':
-                            this.eGui.prepend(textEl);
-                            break;
-                        case 'Below':
-                            this.eGui.append(textEl);
-                            break;
-                        case 'Merged':
-                            textEl.style.position = 'absolute';
-                            // This allows to center verticly without knowing the height of the row
-                            textEl.style.top = '50%';
-                            textEl.style.transform = 'translateY(-50%)';
-                            // adds a bit of padding to the start/end of the bar
-                            textEl.style.left = '0';
-                            textEl.style.right = '0';
-                            textEl.style.paddingLeft = '5px';
-                            textEl.style.paddingRight = '5px';
-                            barEl.append(textEl);
-                            break;
-                        default:
-                            this.eGui.append(textEl);
-                            break;
-                    }
+            }
+            this.eGui.append(barEl);
+            if (hasCellText) {
+                const textEl = document.createElement('div');
+                textEl.className = 'ab-PercentBar__text';
+                textEl.style.lineHeight = '1.2';
+                const parts = [];
+                if (percentBarStyle.CellText.includes('CellValue')) {
+                    parts.push(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
+                }
+                if (percentBarStyle.CellText.includes('PercentageValue')) {
+                    parts.push(`${percentageValue.toFixed(0)}%`);
+                }
+                textEl.innerText = parts.join(' ');
+                const textAlignCss = resolveCellTextAlignCss(percentBarStyle, {
+                    numericValue,
+                    percentageValue,
+                    min,
+                    max,
+                    hasColumnComparison: !!percentBarStyle.ColumnComparison,
+                });
+                if (textAlignCss) {
+                    textEl.style.textAlign = textAlignCss;
+                }
+                switch (percentBarStyle.CellTextPosition) {
+                    case 'Above':
+                        this.eGui.prepend(textEl);
+                        break;
+                    case 'Merged':
+                        textEl.style.position = 'absolute';
+                        // Centre vertically without knowing the row height
+                        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';
+                        barEl.append(textEl);
+                        break;
+                    case 'Below':
+                    default:
+                        this.eGui.append(textEl);
+                        break;
                 }
             }
         }
         getGui() {
             return this.eGui;
         }
-        refresh(params) {
+        refresh(_params) {
             // by returning FALSE we force a re-render every time the cell value changes
             return false;
         }

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

@@ -0,0 +1,4 @@
+import { StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
+export declare const getRangeBarRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;