@adaptabletools/adaptable 23.0.4 → 23.0.5-canary.1

package/src/agGrid/cellRenderers/BulletChartRenderer.js

@@ -7,20 +7,10 @@ const DEFAULT_BAR_HEIGHT = 8;
 const DEFAULT_BAND_HEIGHT = 14;
 const DEFAULT_MARKER_LINE_THICKNESS = 2;
 const DEFAULT_MARKER_SHAPE_SIZE = 8;
-// AdapTable's `--ab-color-primary` is a *background* tone (near-white in the
-// light theme, near-black in the dark theme), so it would make the bar
-// invisible. `--ab-color-accent` is the canonical brand colour (a saturated
-// blue by default) and reads well on both themes.
 const DEFAULT_BAR_COLOR = 'var(--ab-color-accent, #07c)';
-// `--ab-color-foreground` is theme-aware (dark on light theme, light on dark
-// theme) and is the right pick for marker contrast against the cell.
 const DEFAULT_MARKER_COLOR = 'var(--ab-color-foreground, #111)';
 const DEFAULT_BACK_COLOR = 'transparent';
 const isTargetDefinition = (t) => !!t && typeof t === 'object' && 'Value' in t;
-/**
- * Returns the resolved numeric value for a single Target. Returns `undefined`
- * if the target cannot be resolved (e.g. a column id that's not in the grid).
- */
 const resolveTargetValue = (target, styledColumn, abColumn, rowNode, api) => {
     const internalApi = api.styledColumnApi.internalApi;
     const value = isTargetDefinition(target) ? target.Value : target;
@@ -73,14 +63,6 @@ const resolveTargets = (bulletStyle, styledColumn, abColumn, rowNode, api) => {
     }
     return resolved;
 };
-/**
- * Decide where the actual bar starts.
- *
- * - `'Auto'` - origin is `min` unless any negative value/range endpoint is in
- *   play, in which case origin is `0` (centred axis)
- * - `'Zero'` - origin is always `0`
- * - any number - explicit origin
- */
 const resolveOrigin = (bulletStyle, cellValue, min, max) => {
     const origin = bulletStyle.Origin ?? 'Auto';
     if (typeof origin === 'number') {
@@ -89,15 +71,11 @@ const resolveOrigin = (bulletStyle, cellValue, min, max) => {
     if (origin === 'Zero') {
         return 0;
     }
-    // Auto - flip to 0 origin if any negatives are involved
     if (min < 0 || max < 0 || cellValue < 0) {
         return 0;
     }
     return min;
 };
-/**
- * Convert a numeric value into a 0..1 fraction along the chart axis.
- */
 const toFraction = (value, min, max) => {
     if (max === min) {
         return 0;
@@ -112,7 +90,6 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
     return class BulletChartRenderer {
         eGui;
         init(params) {
-            // Defer to the shared row-scope helper.
             if (!shouldRenderStyledColumnOnRow(styledColumn, params.node, api)) {
                 if (params.value != undefined) {
                     this.eGui = document.createElement('div');
@@ -121,14 +98,11 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
                 return;
             }
             const rawCellValue = params.value;
-            // Empty / null cells render as nothing - drawing bands + marker without
-            // a bar would falsely suggest the cell value is at the origin (0 / min).
             if (Helper.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 empty treatment.
             if (isNaN(numericValue)) {
                 this.eGui = document.createElement('div');
                 this.eGui.append(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
@@ -136,9 +110,6 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             }
             const min = api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, rawCellValue);
             const max = api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, rawCellValue);
-            // Without a usable scale we can't draw anything meaningful (e.g. when
-            // every cell in the column has the same value, or when there are no
-            // bands and no numeric range can be derived).
             if (min == undefined || max == undefined || max <= min) {
                 this.eGui = document.createElement('div');
                 this.eGui.append(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
@@ -147,43 +118,23 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             const cellValue = numericValue;
             const targets = resolveTargets(bulletStyle, styledColumn, abColumn, params.node, api);
             const origin = resolveOrigin(bulletStyle, numericValue, min, max);
-            // Layout
             const isVertical = bulletStyle.Orientation === 'Vertical';
-            // `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.Bar?.Height ?? DEFAULT_BAR_HEIGHT;
             const bandThickness = Math.max(barThickness + 6, DEFAULT_BAND_HEIGHT);
             const cellTextProperties = bulletStyle.CellTextProperties;
             const hasCellText = 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
-            //                we invert; lower values appear at the bottom of the
-            //                cell which matches user expectation).
             const valueAxisCoord = (fraction) => isVertical ? (1 - fraction) * 100 : fraction * 100;
-            // Wrapper
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-BulletChart__wrapper';
             this.eGui.style.display = 'flex';
             this.eGui.style.flexDirection = 'column';
-            // In vertical mode we centre horizontally so the chart sits in the
-            // middle of the cell rather than hugging the left edge.
             this.eGui.style.alignItems = isVertical ? 'center' : 'stretch';
             this.eGui.style.justifyContent = 'center';
             this.eGui.style.position = 'relative';
             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.
             const svg = document.createElementNS(SVG_NS, 'svg');
             svg.setAttribute('class', 'ab-BulletChart__svg');
             svg.setAttribute('preserveAspectRatio', 'none');
-            // Snap rect edges to whole pixels so adjacent bands meet flush. Without
-            // this, sub-pixel anti-aliasing on the rect edges shows through as a
-            // hairline seam where bands meet (especially when band colours are
-            // semi-transparent, since each edge anti-aliases against the row
-            // background rather than the neighbouring band).
             svg.setAttribute('shape-rendering', 'crispEdges');
             if (isVertical) {
                 svg.setAttribute('width', String(bandThickness));
@@ -195,8 +146,6 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
                 svg.setAttribute('height', String(bandThickness));
                 svg.setAttribute('viewBox', `0 0 100 ${bandThickness}`);
             }
-            // Helper - apply rect attributes given primary-axis (along value) and
-            // cross-axis (across the bar) coords/lengths.
             const setRectAxes = (rect, primaryStart, primaryLen, crossStart, crossLen) => {
                 if (isVertical) {
                     rect.setAttribute('x', String(crossStart));
@@ -211,10 +160,8 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
                     rect.setAttribute('height', String(crossLen));
                 }
             };
-            // Bands (qualitative scale) - drawn behind everything else
             const ranges = bulletStyle.CellRanges ?? [];
             if (ranges.length === 0) {
-                // No bands defined - draw a back-fill so the chart area is visible.
                 const back = document.createElementNS(SVG_NS, 'rect');
                 setRectAxes(back, 0, 100, 0, bandThickness);
                 back.setAttribute('fill', bulletStyle.BackColor ?? DEFAULT_BACK_COLOR);
@@ -235,7 +182,6 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
                     svg.appendChild(bandRect);
                 }
             }
-            // Actual bar
             const valueFraction = toFraction(numericValue, min, max);
             const originFraction = toFraction(origin, min, max);
             const valueCoord = valueAxisCoord(valueFraction);
@@ -246,7 +192,6 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             bar.setAttribute('fill', bulletStyle.Bar?.Color ?? DEFAULT_BAR_COLOR);
             bar.setAttribute('class', 'ab-BulletChart__bar');
             svg.appendChild(bar);
-            // Target markers
             for (const target of targets) {
                 const tCoord = valueAxisCoord(toFraction(target.value, min, max));
                 const marker = createMarkerElement(target.marker, tCoord, bandThickness, isVertical);
@@ -255,18 +200,11 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
                     svg.appendChild(marker);
                 }
             }
-            // 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';
@@ -277,9 +215,6 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             svgContainer.appendChild(svg);
             this.eGui.appendChild(svgContainer);
             if (hasCellText) {
-                // 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 = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${(valueFraction * 100).toFixed(0)}%`);
                 mountBarStyleCellText({
@@ -295,30 +230,14 @@ export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) =>
             return this.eGui;
         }
         refresh(_params) {
-            // by returning FALSE we force a re-render every time the cell value changes
             return false;
         }
     };
 };
-const createMarkerElement = (marker, 
-/**
- * Coordinate along the value (long) axis in viewBox units (0..100).
- * For horizontal charts this is X; for vertical charts this is Y.
- */
-valueCoord, 
-/**
- * Length of the cross (short) axis in viewBox units = px.
- * For horizontal charts this is the band height; for vertical charts the
- * band width. The marker is centred on this axis at `crossLen / 2`.
- */
-crossLen, isVertical) => {
-    // Helper: given a primary (along-value) coord and a cross coord, return the
-    // (x, y) pair appropriate for the orientation. In horizontal mode primary
-    // is x; in vertical mode primary is y.
+const createMarkerElement = (marker, valueCoord, crossLen, isVertical) => {
     const xy = (primary, cross) => isVertical ? [cross, primary] : [primary, cross];
     switch (marker.Shape) {
         case 'Line': {
-            // A target line spans 80% of the cross axis, centred.
             const crossA = crossLen * 0.1;
             const crossB = crossLen * 0.9;
             const [x1, y1] = xy(valueCoord, crossA);
@@ -330,10 +249,6 @@ crossLen, isVertical) => {
             line.setAttribute('y2', String(y2));
             line.setAttribute('stroke', marker.Color);
             line.setAttribute('stroke-width', String(marker.Size));
-            // The long axis of the viewBox stretches to fit the cell, so without
-            // non-scaling-stroke the line thickness would distort. (For Line markers
-            // the stroke is along the cross axis which doesn't stretch, but we keep
-            // this for safety in case a future change introduces a diagonal.)
             line.setAttribute('vector-effect', 'non-scaling-stroke');
             return line;
         }
@@ -342,21 +257,14 @@ crossLen, isVertical) => {
             const circle = document.createElementNS(SVG_NS, 'circle');
             circle.setAttribute('cx', String(cx));
             circle.setAttribute('cy', String(cy));
-            // r is in viewBox units; size is in px - approximate by using a small
-            // viewBox-relative radius but rely on vector-effect for the stroke.
             circle.setAttribute('r', String(marker.Size / 2));
             circle.setAttribute('fill', marker.Color);
-            // Re-enable anti-aliasing for curved/diagonal markers - the SVG itself
-            // sets shape-rendering="crispEdges" so band rects meet flush, but that
-            // makes circles/polygons look jagged.
             circle.setAttribute('shape-rendering', 'geometricPrecision');
             return circle;
         }
         case 'Diamond': {
             const half = marker.Size / 2;
             const crossMid = crossLen / 2;
-            // Diamond is rotationally symmetric so we can use the same point set
-            // in both orientations - just thread coords through `xy`.
             const ptList = [
                 xy(valueCoord, crossMid - half),
                 xy(valueCoord + half, crossMid),
@@ -372,9 +280,6 @@ crossLen, isVertical) => {
         case 'Triangle': {
             const half = marker.Size / 2;
             const crossMid = crossLen / 2;
-            // Horizontal: triangle points up (apex at top of band, base at bottom).
-            // Vertical: rotate 90deg counter-clockwise so the apex points right
-            // (into the cell rather than against the bar's growth direction).
             const ptList = [
                 xy(valueCoord - half, crossMid + half),
                 xy(valueCoord + half, crossMid + half),

package/src/agGrid/cellRenderers/IconRenderer.js

@@ -26,22 +26,6 @@ const resolveIconStyleMappingParts = (iconStyle) => {
     const filteredPreset = presetMappings.filter((p) => !overrideKeys.has(normaliseIconMappingKey(p.Key, matchMode)));
     return { presetMappings: filteredPreset, userMappings };
 };
-/**
- * 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.
- */
 export const resolveEffectiveIconStyleMappings = (iconStyle) => {
     if (!iconStyle)
         return [];
@@ -53,11 +37,6 @@ export const resolveEffectiveIconStyleMappings = (iconStyle) => {
     }
     return [...presetMappings, ...userMappings];
 };
-/**
- * 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 const resolveIconStyleMappingsForSummaryPreview = (iconStyle) => {
     if (!iconStyle)
         return [];
@@ -73,13 +52,6 @@ export const resolveIconStyleMappingsForSummaryPreview = (iconStyle) => {
     }
     return [...userMappings, ...presetMappings];
 };
-/**
- * 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;
@@ -88,17 +60,11 @@ const findMapping = (mappings, cellValue, matchMode) => {
         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';
 };
@@ -108,11 +74,6 @@ const isAdaptableIconSpec = (spec) => {
             isAdaptableCustomIcon(spec) ||
             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', {
@@ -196,8 +157,6 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
     const textPosition = cellTextProperties?.CellTextPosition ?? 'After';
     const cellTextTokens = cellTextProperties?.CellText ?? [];
     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 = resolveEffectiveIconStyleMappings(iconStyle);
     return class IconCellRenderer {
         eGui;
@@ -214,9 +173,6 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
             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 (!shouldRenderStyledColumnOnRow(styledColumn, params.node, adaptableApi)) {
                 if (params.value != undefined) {
                     this.eGui.append(String(params.value));
@@ -230,10 +186,6 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
                 : findMapping(effectiveMappings, cellValue, matchMode);
             const formatted = params.formatValue?.(cellValue) ??
                 (cellValue != undefined ? String(cellValue) : '');
-            // `CellText` describes the *companion text alongside a matched icon*.
-            // `FallbackProperties.Mode` describes *what to do when no mapping matches*.
-            // They are independent: when there is no match, the fallback decides
-            // on its own — `CellText` does not get to override `Mode: 'Hide'`.
             let iconSpec;
             let text;
             let descriptionForTooltip;
@@ -250,7 +202,6 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
                 text = textParts.length > 0 ? textParts.join(' · ') : undefined;
             }
             else if (!cellValueIsEmpty) {
-                // Unmatched, non-empty cell: defer entirely to the fallback config.
                 const fallbackMode = iconStyle.FallbackProperties?.Mode ?? 'Hide';
                 const fallbackIcon = iconStyle.FallbackProperties?.Icon;
                 if (fallbackMode === 'ShowText') {
@@ -259,11 +210,7 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
                 else if (fallbackMode === 'Icon' && fallbackIcon) {
                     iconSpec = fallbackIcon;
                 }
-                // 'Hide' (and the unsupported permutations) render nothing.
             }
-            // else: empty cell → render nothing, regardless of fallback config.
-            // If we have nothing to draw, leave the cell empty (and skip mounting
-            // a React root for this row).
             if (!iconSpec && !text) {
                 return;
             }
@@ -289,12 +236,10 @@ export const getIconRendererForColumn = (styledColumn, abColumn, api) => {
             this.unmountReactRoot?.();
         }
         refresh(_params) {
-            // Force a re-init on every value change so the matched icon is fresh.
             return false;
         }
     };
 };
-/** Helper exposed for the tooltip getter in `AgGridColumnAdapter`. */
 export const findIconStyleMappingForValue = (iconStyle, cellValue) => {
     if (!iconStyle)
         return undefined;

package/src/agGrid/cellRenderers/PercentBarRenderer.js

@@ -2,15 +2,6 @@ import Helper from '../../Utilities/Helpers/Helper';
 import { clamp } from '../../Utilities/Extensions/NumberExtensions';
 import { shouldRenderStyledColumnOnRow } from '../../Utilities/Helpers/StyledColumns/StyledColumnHelper';
 import { buildBarStyleCellTextLabels, hasBarStyleCellTextConfigured, mountBarStyleCellText, } from '../../Utilities/Helpers/StyledColumns/BarStylesHelper';
-/**
- * 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') {
@@ -22,7 +13,6 @@ const resolveOrigin = (percentBarStyle, cellValue, min, max) => {
     if (origin === 'Min') {
         return min;
     }
-    // Auto - centred axis only when negatives are in play.
     if (min < 0 || max < 0 || cellValue < 0) {
         return 0;
     }
@@ -34,7 +24,6 @@ const toFraction = (value, min, max) => {
     }
     return clamp((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') {
@@ -49,9 +38,6 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
     return class PercentBarRenderer {
         eGui;
         init(params) {
-            // Defer to the shared row-scope helper. Default behaviour
-            // ("group rows fall back to plain text") is preserved when
-            // `RowScope` is unset.
             if (!shouldRenderStyledColumnOnRow(styledColumn, params.node, api)) {
                 if (params.value != undefined) {
                     this.eGui = document.createElement('div');
@@ -60,15 +46,11 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 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.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));
@@ -77,23 +59,16 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             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 %.
                 const absMax = Math.abs(max);
                 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;
@@ -105,20 +80,16 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                     }
                 }
                 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 {
-                // Linear value-on-scale.
                 percentageValue = ((clamp(numericValue, min, max) - min) / (max - min)) * 100;
                 const origin = resolveOrigin(percentBarStyle, numericValue, min, max);
                 const valueFrac = toFraction(numericValue, min, max);
@@ -128,7 +99,6 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 barLeftPercent = start * 100;
                 barWidthPercent = (end - start) * 100;
             }
-            // ----- Resolve bar colour -------------------------------------------
             let cellBackColor;
             if (percentBarStyle.ColumnComparison) {
                 cellBackColor = percentBarStyle.ColumnComparison.Color;
@@ -139,21 +109,14 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                     cellBackColor = matchingRange.Color;
                 }
             }
-            // ----- Build the DOM -------------------------------------------------
             const cellTextProperties = percentBarStyle.CellTextProperties;
             const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
-            // Wrapper always fills the cell. The bar is the flex-grow child so it
-            // claims whatever space the (compact) text rows leave, with a small
-            // floor to stay visible even on short rows.
             this.eGui = document.createElement('div');
             this.eGui.className = 'ab-PercentBar__wrapper';
             this.eGui.style.height = '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';
@@ -161,22 +124,13 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 barEl.style.background = percentBarStyle.BackColor;
             }
             barEl.style.flex = '1 1 0';
-            // Floor so the bar can't be squeezed out of existence when both
-            // `Above` and `Below` bands are populated on a short row.
             barEl.style.minHeight = '6px';
-            // 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.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';
@@ -184,10 +138,6 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             }
             this.eGui.append(barEl);
             if (hasCellText) {
-                // Coerce to string: when no `valueFormatter` is set on the column,
-                // `params.formatValue` returns the raw value (a number for numeric
-                // columns), which then propagates through the helpers as a non-string
-                // and breaks string-only operations (e.g. `.length` checks).
                 const formattedCellValue = String(params.formatValue?.(rawCellValue) ?? rawCellValue);
                 const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${percentageValue.toFixed(0)}%`);
                 mountBarStyleCellText({
@@ -204,7 +154,6 @@ export const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
             return this.eGui;
         }
         refresh(_params) {
-            // by returning FALSE we force a re-render every time the cell value changes
             return false;
         }
     };