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

package/src/agGrid/cellRenderers/RangeBarRenderer.js

@@ -0,0 +1,352 @@
+import Helper from '../../Utilities/Helpers/Helper';
+import clamp from '../../Utilities/utils/clamp';
+import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const DEFAULT_TRACK_HEIGHT = 4;
+const DEFAULT_BAND_HEIGHT = 14;
+const DEFAULT_VALUE_MARKER_SIZE = 10;
+const DEFAULT_LINE_MARKER_THICKNESS = 2;
+const DEFAULT_TRACK_COLOR = 'var(--ab-color-foreground, #888)';
+const DEFAULT_VALUE_MARKER_COLOR = 'var(--ab-color-accent, #07c)';
+const DEFAULT_REFERENCE_MARKER_COLOR = 'var(--ab-color-foreground, #111)';
+const DEFAULT_BACK_COLOR = 'transparent';
+const resolveBoundValue = (bound, abColumn, rowNode, api) => {
+    if (bound == undefined) {
+        return undefined;
+    }
+    if (typeof bound === 'number') {
+        return bound;
+    }
+    const internalApi = api.styledColumnApi.internalApi;
+    if (bound === 'Col-Min') {
+        return internalApi.getMinValueForNumericColumn(abColumn);
+    }
+    if (bound === 'Col-Max') {
+        return internalApi.getMaxValueForNumericColumn(abColumn);
+    }
+    if (bound === 'Col-Avg') {
+        return internalApi.getAvgValueForNumericColumn(abColumn);
+    }
+    if (bound === 'Col-Median') {
+        return internalApi.getMedianValueForNumericColumn(abColumn);
+    }
+    // string column id - read the row's value in that column
+    if (typeof bound === 'string') {
+        if (!api.columnApi.isColumnInGrid(bound)) {
+            return undefined;
+        }
+        const raw = api.gridApi.getRawValueFromRowNode(rowNode, bound);
+        const num = typeof raw === 'number' ? raw : Number(raw);
+        return isNaN(num) ? undefined : num;
+    }
+    return undefined;
+};
+const normaliseMarker = (override, defaults) => {
+    const shape = override?.Shape ?? defaults.Shape;
+    return {
+        Shape: shape,
+        Color: override?.Color ?? defaults.Color,
+        Size: override?.Size ??
+            (shape === 'Line' ? DEFAULT_LINE_MARKER_THICKNESS : defaults.Size),
+    };
+};
+/**
+ * Convert a numeric value into a 0..1 fraction along the chart axis,
+ * clamped into range. Callers that need to know whether the value was
+ * out-of-range should compare against the original `min` / `max`.
+ */
+const toFraction = (value, min, max) => {
+    if (max === min) {
+        return 0;
+    }
+    return clamp((value - min) / (max - min), 0, 1);
+};
+export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
+    if (!styledColumn.RangeBarStyle) {
+        return;
+    }
+    const rangeStyle = styledColumn.RangeBarStyle;
+    return class RangeBarRenderer {
+        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');
+                    this.eGui.append(String(params.value));
+                }
+                return;
+            }
+            const rawCellValue = params.value;
+            if (Helper.objectNotExists(rawCellValue)) {
+                this.eGui = document.createElement('div');
+                return;
+            }
+            const numericValue = typeof rawCellValue === 'number' ? rawCellValue : Number(rawCellValue);
+            if (isNaN(numericValue)) {
+                this.eGui = document.createElement('div');
+                this.eGui.append(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
+                return;
+            }
+            const min = resolveBoundValue(rangeStyle.Min, abColumn, params.node, api);
+            const max = resolveBoundValue(rangeStyle.Max, abColumn, params.node, api);
+            // Without a usable [min, max] interval we can't draw the track.
+            if (min == undefined || max == undefined || max <= min) {
+                this.eGui = document.createElement('div');
+                this.eGui.append(params.formatValue?.(rawCellValue) ?? String(rawCellValue));
+                return;
+            }
+            const referenceValue = rangeStyle.Reference != undefined
+                ? resolveBoundValue(rangeStyle.Reference, abColumn, params.node, api)
+                : undefined;
+            // Markers - resolve user overrides against per-marker defaults.
+            const valueMarker = normaliseMarker(rangeStyle.Marker, {
+                Shape: 'Diamond',
+                Color: DEFAULT_VALUE_MARKER_COLOR,
+                Size: DEFAULT_VALUE_MARKER_SIZE,
+            });
+            const referenceMarker = normaliseMarker(rangeStyle.ReferenceMarker, {
+                Shape: 'Line',
+                Color: DEFAULT_REFERENCE_MARKER_COLOR,
+                Size: DEFAULT_LINE_MARKER_THICKNESS,
+            });
+            // Out-of-range handling
+            const outOfRangeMode = rangeStyle.OutOfRangeMode ?? 'Clamp';
+            const isOutOfRange = numericValue < min || numericValue > max;
+            const hideValueMarker = isOutOfRange && outOfRangeMode === 'Hide';
+            // Layout
+            const isVertical = rangeStyle.Orientation === 'Vertical';
+            const trackThickness = rangeStyle.TrackHeight ?? DEFAULT_TRACK_HEIGHT;
+            const bandThickness = Math.max(trackThickness + 6, DEFAULT_BAND_HEIGHT);
+            const hasCellText = rangeStyle.CellText && rangeStyle.CellText.length > 0;
+            const isTextMerged = rangeStyle.CellTextPosition === 'Merged';
+            // Map a 0..1 fraction onto the long-axis viewBox (0..100). Vertical
+            // orientation inverts so that lower values appear at the bottom of
+            // the cell, matching user expectation.
+            const valueAxisCoord = (fraction) => isVertical ? (1 - fraction) * 100 : fraction * 100;
+            // Wrapper
+            this.eGui = document.createElement('div');
+            this.eGui.className = 'ab-RangeBar__wrapper';
+            this.eGui.style.display = 'flex';
+            this.eGui.style.flexDirection = 'column';
+            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%';
+            const svg = document.createElementNS(SVG_NS, 'svg');
+            svg.setAttribute('class', 'ab-RangeBar__svg');
+            svg.setAttribute('preserveAspectRatio', 'none');
+            // Snap rect edges to whole pixels so adjacent bands meet flush
+            // (mirrors Bullet Chart's anti-aliasing fix).
+            svg.setAttribute('shape-rendering', 'crispEdges');
+            if (isVertical) {
+                svg.setAttribute('width', String(bandThickness));
+                svg.setAttribute('height', '100%');
+                svg.setAttribute('viewBox', `0 0 ${bandThickness} 100`);
+            }
+            else {
+                svg.setAttribute('width', '100%');
+                svg.setAttribute('height', String(bandThickness));
+                svg.setAttribute('viewBox', `0 0 100 ${bandThickness}`);
+            }
+            const setRectAxes = (rect, primaryStart, primaryLen, crossStart, crossLen) => {
+                if (isVertical) {
+                    rect.setAttribute('x', String(crossStart));
+                    rect.setAttribute('y', String(primaryStart));
+                    rect.setAttribute('width', String(crossLen));
+                    rect.setAttribute('height', String(primaryLen));
+                }
+                else {
+                    rect.setAttribute('x', String(primaryStart));
+                    rect.setAttribute('y', String(crossStart));
+                    rect.setAttribute('width', String(primaryLen));
+                    rect.setAttribute('height', String(crossLen));
+                }
+            };
+            // Bands (qualitative scale) drawn behind the track.
+            const ranges = rangeStyle.CellRanges ?? [];
+            if (ranges.length === 0) {
+                const back = document.createElementNS(SVG_NS, 'rect');
+                setRectAxes(back, 0, 100, 0, bandThickness);
+                back.setAttribute('fill', rangeStyle.BackColor ?? DEFAULT_BACK_COLOR);
+                svg.appendChild(back);
+            }
+            else {
+                for (const range of ranges) {
+                    const bandMin = api.styledColumnApi.internalApi.getCellColorRangeMinValue(range, abColumn, rangeStyle.RangeValueType);
+                    const bandMax = api.styledColumnApi.internalApi.getCellColorRangeMaxValue(range, abColumn, rangeStyle.RangeValueType);
+                    if (bandMin == undefined || bandMax == undefined) {
+                        continue;
+                    }
+                    const a = valueAxisCoord(toFraction(bandMin, min, max));
+                    const b = valueAxisCoord(toFraction(bandMax, min, max));
+                    const bandRect = document.createElementNS(SVG_NS, 'rect');
+                    setRectAxes(bandRect, Math.min(a, b), Math.abs(b - a), 0, bandThickness);
+                    bandRect.setAttribute('fill', range.Color);
+                    svg.appendChild(bandRect);
+                }
+            }
+            // Track (the line representing min..max). Drawn over bands so the
+            // [min, max] interval reads clearly even when bands extend beyond.
+            const trackCrossOffset = (bandThickness - trackThickness) / 2;
+            const track = document.createElementNS(SVG_NS, 'rect');
+            setRectAxes(track, 0, 100, trackCrossOffset, trackThickness);
+            track.setAttribute('fill', rangeStyle.TrackColor ?? DEFAULT_TRACK_COLOR);
+            track.setAttribute('class', 'ab-RangeBar__track');
+            // Slight transparency by default so the track doesn't drown out the
+            // band colours; honour explicit user TrackColor as-is.
+            if (rangeStyle.TrackColor == undefined) {
+                // With no bands the cell background is often plain — the same muted
+                // foreground at 0.35 opacity can disappear (only the accent marker reads).
+                // Bands provide contrast underneath, so keep the subtle blend there.
+                track.setAttribute('opacity', ranges.length === 0 ? '0.8' : '0.35');
+            }
+            svg.appendChild(track);
+            // Reference marker (drawn first so the cell-value marker sits on top).
+            if (referenceValue != undefined && !isNaN(referenceValue)) {
+                const refCoord = valueAxisCoord(toFraction(referenceValue, min, max));
+                const refEl = createMarkerElement(referenceMarker, refCoord, bandThickness, isVertical);
+                if (refEl) {
+                    refEl.setAttribute('class', 'ab-RangeBar__referenceMarker');
+                    svg.appendChild(refEl);
+                }
+            }
+            // Cell-value marker
+            if (!hideValueMarker) {
+                // Position depends on out-of-range mode. `Overflow` lets the marker
+                // sit beyond the [0..100] viewBox edge at its true projected position;
+                // `Clamp` snaps to the nearest end.
+                let valueFraction;
+                if (outOfRangeMode === 'Overflow') {
+                    valueFraction = max === min ? 0 : (numericValue - min) / (max - min);
+                }
+                else {
+                    valueFraction = toFraction(numericValue, min, max);
+                }
+                const valueCoord = valueAxisCoord(valueFraction);
+                const effectiveMarker = isOutOfRange && outOfRangeMode === 'Clamp' && rangeStyle.OutOfRangeColor
+                    ? { ...valueMarker, Color: rangeStyle.OutOfRangeColor }
+                    : valueMarker;
+                const markerEl = createMarkerElement(effectiveMarker, valueCoord, bandThickness, isVertical);
+                if (markerEl) {
+                    markerEl.setAttribute('class', 'ab-RangeBar__valueMarker');
+                    svg.appendChild(markerEl);
+                }
+            }
+            this.eGui.appendChild(svg);
+            if (hasCellText) {
+                const textEl = document.createElement('div');
+                textEl.className = 'ab-RangeBar__text';
+                textEl.style.lineHeight = '1.2';
+                const parts = [];
+                if (rangeStyle.CellText.includes('CellValue')) {
+                    parts.push(params.formatValue?.(numericValue) ?? String(numericValue));
+                }
+                if (rangeStyle.CellText.includes('PercentageValue')) {
+                    const pct = clamp((numericValue - min) / (max - min), 0, 1) * 100;
+                    parts.push(`${pct.toFixed(0)}%`);
+                }
+                textEl.innerText = parts.join(' ');
+                switch (rangeStyle.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;
+                }
+            }
+        }
+        getGui() {
+            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 bars this is X; for vertical bars this is Y.
+ */
+valueCoord, 
+/**
+ * Length of the cross (short) axis in viewBox units = px.
+ * The marker is centred on this axis at `crossLen / 2`.
+ */
+crossLen, isVertical) => {
+    const xy = (primary, cross) => isVertical ? [cross, primary] : [primary, cross];
+    switch (marker.Shape) {
+        case 'Line': {
+            // Reference / line markers span 80% of the cross axis, centred.
+            const crossA = crossLen * 0.1;
+            const crossB = crossLen * 0.9;
+            const [x1, y1] = xy(valueCoord, crossA);
+            const [x2, y2] = xy(valueCoord, crossB);
+            const line = document.createElementNS(SVG_NS, 'line');
+            line.setAttribute('x1', String(x1));
+            line.setAttribute('x2', String(x2));
+            line.setAttribute('y1', String(y1));
+            line.setAttribute('y2', String(y2));
+            line.setAttribute('stroke', marker.Color);
+            line.setAttribute('stroke-width', String(marker.Size));
+            line.setAttribute('vector-effect', 'non-scaling-stroke');
+            return line;
+        }
+        case 'Dot': {
+            const [cx, cy] = xy(valueCoord, crossLen / 2);
+            const circle = document.createElementNS(SVG_NS, 'circle');
+            circle.setAttribute('cx', String(cx));
+            circle.setAttribute('cy', String(cy));
+            circle.setAttribute('r', String(marker.Size / 2));
+            circle.setAttribute('fill', marker.Color);
+            circle.setAttribute('shape-rendering', 'geometricPrecision');
+            return circle;
+        }
+        case 'Diamond': {
+            const half = marker.Size / 2;
+            const crossMid = crossLen / 2;
+            const ptList = [
+                xy(valueCoord, crossMid - half),
+                xy(valueCoord + half, crossMid),
+                xy(valueCoord, crossMid + half),
+                xy(valueCoord - half, crossMid),
+            ];
+            const polygon = document.createElementNS(SVG_NS, 'polygon');
+            polygon.setAttribute('points', ptList.map((p) => p.join(',')).join(' '));
+            polygon.setAttribute('fill', marker.Color);
+            polygon.setAttribute('shape-rendering', 'geometricPrecision');
+            return polygon;
+        }
+        case 'Triangle': {
+            const half = marker.Size / 2;
+            const crossMid = crossLen / 2;
+            const ptList = [
+                xy(valueCoord - half, crossMid + half),
+                xy(valueCoord + half, crossMid + half),
+                xy(valueCoord, crossMid - half),
+            ];
+            const polygon = document.createElementNS(SVG_NS, 'polygon');
+            polygon.setAttribute('points', ptList.map((p) => p.join(',')).join(' '));
+            polygon.setAttribute('fill', marker.Color);
+            polygon.setAttribute('shape-rendering', 'geometricPrecision');
+            return polygon;
+        }
+        default:
+            return undefined;
+    }
+};

package/src/agGrid/cellRenderers/RatingRenderer.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 getRatingRendererForColumn: (styledColumn: StyledColumn, _abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/cellRenderers/RatingRenderer.js

@@ -0,0 +1,157 @@
+import Helper from '../../Utilities/Helpers/Helper';
+import clamp from '../../Utilities/utils/clamp';
+import { shouldRenderStyledColumnOnRow } from './shouldRenderStyledColumnOnRow';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const DEFAULT_MAX = 5;
+const DEFAULT_SIZE = 14;
+const DEFAULT_GAP = 2;
+const DEFAULT_ICON = 'Star';
+// Theme-aware default colours: warm amber for the filled portion (reads on
+// both light and dark themes); a translucent tint of the foreground for the
+// empty portion so users can always see the maximum rating at a glance.
+const DEFAULT_FILLED_COLOR = 'var(--ab-color-warn, #f5a623)';
+const DEFAULT_EMPTY_COLOR = 'color-mix(in srgb, currentColor 22%, transparent)';
+/**
+ * Each icon is drawn inside a unit square (0..24 viewBox) and a
+ * left-anchored `<clipPath>` is used to expose the filled portion.
+ *
+ * Returning two paths - filled and empty - gives crisp anti-aliased
+ * outlines on both halves regardless of fill ratio.
+ */
+const ICON_PATHS = {
+    // 5-pointed star, classic rating shape
+    Star: 'M12 2 L14.9 8.6 L22 9.3 L16.7 14.1 L18.2 21 L12 17.4 L5.8 21 L7.3 14.1 L2 9.3 L9.1 8.6 Z',
+    // Heart - rounded twin lobes, ideal for "favourites"
+    Heart: 'M12 21 C 12 21 3 14.5 3 8.5 C 3 5.5 5.5 3 8.5 3 C 10.3 3 11.7 4 12 5.2 C 12.3 4 13.7 3 15.5 3 C 18.5 3 21 5.5 21 8.5 C 21 14.5 12 21 12 21 Z',
+    // Filled circle - useful for compact "score" cells
+    Circle: 'M12 4 a8 8 0 1 0 0.0001 0 Z',
+    // Thumb up - binary-style ratings
+    Thumb: 'M2 11 h4 v10 h-4 z M7 11 l4 -8 c.5 -1 2 -1 2 0 l-1 5 h6 c1 0 2 1 1.7 2 l-2 8 c-.3 1 -1 1.6 -2 1.6 H7 z',
+};
+const resolveValue = (raw) => {
+    if (Helper.objectNotExists(raw))
+        return undefined;
+    const n = typeof raw === 'number' ? raw : Number(raw);
+    return isNaN(n) ? undefined : n;
+};
+/**
+ * Build a single rating icon (an SVG `<g>`) showing `fill` × full
+ * coverage on the filled colour over an empty-coloured background.
+ *
+ * Implementation notes:
+ *  - The icon path is rendered twice; the empty copy underneath is fully
+ *    visible, the filled copy is wrapped in a `<clipPath>` rectangle that
+ *    exposes only the leftmost `fill * 24` viewBox units.
+ *  - `clipPath` ids are scoped per renderer instance + index to prevent
+ *    cross-cell collision when multiple cells share the DOM.
+ */
+const createIconElement = (shape, fill, filledColor, emptyColor, size, uid) => {
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', String(size));
+    svg.setAttribute('height', String(size));
+    svg.setAttribute('viewBox', '0 0 24 24');
+    svg.setAttribute('aria-hidden', 'true');
+    // The shape is drawn with anti-aliased curves, so let the browser do
+    // sub-pixel rendering for smoother edges (default).
+    const d = ICON_PATHS[shape];
+    // Empty layer (full-width) underneath - draws the outline at low opacity.
+    const empty = document.createElementNS(SVG_NS, 'path');
+    empty.setAttribute('d', d);
+    empty.setAttribute('fill', emptyColor);
+    svg.appendChild(empty);
+    if (fill > 0) {
+        const clipId = `ab-rating-clip-${uid}`;
+        const defs = document.createElementNS(SVG_NS, 'defs');
+        const clipPath = document.createElementNS(SVG_NS, 'clipPath');
+        clipPath.setAttribute('id', clipId);
+        const clipRect = document.createElementNS(SVG_NS, 'rect');
+        clipRect.setAttribute('x', '0');
+        clipRect.setAttribute('y', '0');
+        clipRect.setAttribute('width', String(24 * clamp(fill, 0, 1)));
+        clipRect.setAttribute('height', '24');
+        clipPath.appendChild(clipRect);
+        defs.appendChild(clipPath);
+        svg.appendChild(defs);
+        const filled = document.createElementNS(SVG_NS, 'path');
+        filled.setAttribute('d', d);
+        filled.setAttribute('fill', filledColor);
+        filled.setAttribute('clip-path', `url(#${clipId})`);
+        svg.appendChild(filled);
+    }
+    return svg;
+};
+export const getRatingRendererForColumn = (styledColumn, _abColumn, api) => {
+    if (!styledColumn.RatingStyle) {
+        return;
+    }
+    const ratingStyle = styledColumn.RatingStyle;
+    return class RatingRenderer {
+        eGui;
+        init(params) {
+            // Defer to the shared row-scope helper. Default (no `RowScope`)
+            // matches the previous "group rows only fall back to plain text"
+            // behaviour; users can opt other row kinds in / out explicitly.
+            if (!shouldRenderStyledColumnOnRow(styledColumn, params.node, api)) {
+                this.eGui = document.createElement('div');
+                if (params.value != undefined) {
+                    this.eGui.append(String(params.value));
+                }
+                return;
+            }
+            const value = resolveValue(params.value);
+            if (value == undefined) {
+                // Empty / non-numeric cells render as nothing - drawing empty icons
+                // would imply a value of `0` which isn't the same as "no rating".
+                this.eGui = document.createElement('div');
+                return;
+            }
+            const max = ratingStyle.Max ?? DEFAULT_MAX;
+            const size = ratingStyle.Size ?? DEFAULT_SIZE;
+            const gap = ratingStyle.Gap ?? DEFAULT_GAP;
+            const allowHalf = ratingStyle.AllowHalf ?? true;
+            const icon = ratingStyle.Icon ?? DEFAULT_ICON;
+            const filledColor = ratingStyle.FilledColor ?? DEFAULT_FILLED_COLOR;
+            const emptyColor = ratingStyle.EmptyColor ?? DEFAULT_EMPTY_COLOR;
+            const showValue = ratingStyle.ShowValue ?? false;
+            // Quantise the value if half-icons aren't allowed.
+            const clampedValue = clamp(value, 0, max);
+            const effectiveValue = allowHalf
+                ? clampedValue
+                : Math.round(clampedValue);
+            // Stable per-render uid so the clipPath ids never collide between
+            // adjacent cells - AG Grid reuses cell DOM nodes across rows so a
+            // simple counter on `init` is enough.
+            const uid = `${Math.random().toString(36).slice(2, 8)}`;
+            this.eGui = document.createElement('div');
+            this.eGui.className = 'ab-Rating__wrapper';
+            this.eGui.style.display = 'inline-flex';
+            this.eGui.style.alignItems = 'center';
+            this.eGui.style.gap = `${gap}px`;
+            this.eGui.style.height = '100%';
+            this.eGui.style.lineHeight = '1';
+            for (let i = 0; i < max; i++) {
+                // Fill ratio for icon `i`: full when value >= i+1, partial when
+                // value falls between i and i+1, empty otherwise.
+                const fill = clamp(effectiveValue - i, 0, 1);
+                const iconEl = createIconElement(icon, fill, filledColor, emptyColor, size, `${uid}-${i}`);
+                iconEl.setAttribute('class', 'ab-Rating__icon');
+                this.eGui.appendChild(iconEl);
+            }
+            if (showValue) {
+                const textEl = document.createElement('span');
+                textEl.className = 'ab-Rating__text';
+                textEl.style.marginLeft = '6px';
+                textEl.style.fontVariantNumeric = 'tabular-nums';
+                textEl.innerText = params.formatValue?.(value) ?? String(value);
+                this.eGui.appendChild(textEl);
+            }
+        }
+        getGui() {
+            return this.eGui;
+        }
+        refresh(_params) {
+            // Force a re-render on every value change.
+            return false;
+        }
+    };
+};

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

@@ -0,0 +1,30 @@
+import type { IRowNode } from 'ag-grid-enterprise';
+import type { AdaptableApi } from '../../Api/AdaptableApi';
+import type { StyledColumn } from '../../AdaptableState/StyledColumnState';
+/**
+ * Returns `true` when the Styled Column should render on the given row.
+ *
+ * Single source of truth consulted by every styled-column cell renderer
+ * (Badge / Icon / Rating / Percent Bar / Bullet Chart / Range Bar) and
+ * by `getStyledColumnStyle` (Gradient / Percent Bar cellStyle).
+ *
+ * Semantics:
+ *  - **Type capabilities** first: some types never target certain row kinds
+ *    (see `styledColumnRowKindSupport.ts`). Unsupported kinds always
+ *    return `false` regardless of `RowScope`.
+ *  - When `StyledColumn.RowScope` is **set**, the explicit `Exclude*`
+ *    flags win. Unset flags default to "include" — i.e. `RowScope: {}`
+ *    means "render on every *supported* row kind".
+ *  - When `StyledColumn.RowScope` is **unset**, the historical per-type
+ *    default applies:
+ *      - Badge: render on every row kind (that the type supports).
+ *      - All other types: render on every row kind *except* group rows
+ *        (matches the hardcoded "isGroupRowNode → plain text" check that
+ *        every other styled-column renderer used to carry), again
+ *        intersected with type capabilities (e.g. Sparkline → data only).
+ *
+ * The per-type default lets us promote `RowScope` cleanly without
+ * altering existing user-visible behaviour: state that doesn't mention
+ * `RowScope` keeps rendering exactly as before.
+ */
+export declare const shouldRenderStyledColumnOnRow: (styledColumn: StyledColumn, node: IRowNode, api: AdaptableApi) => boolean;

package/src/agGrid/cellRenderers/shouldRenderStyledColumnOnRow.js

@@ -0,0 +1,54 @@
+import { getStyledColumnRowKindForNode, isStyledColumnRowKindSupported, } from '../../Utilities/Helpers/styledColumnRowKindSupport';
+/**
+ * Returns `true` when the Styled Column should render on the given row.
+ *
+ * Single source of truth consulted by every styled-column cell renderer
+ * (Badge / Icon / Rating / Percent Bar / Bullet Chart / Range Bar) and
+ * by `getStyledColumnStyle` (Gradient / Percent Bar cellStyle).
+ *
+ * Semantics:
+ *  - **Type capabilities** first: some types never target certain row kinds
+ *    (see `styledColumnRowKindSupport.ts`). Unsupported kinds always
+ *    return `false` regardless of `RowScope`.
+ *  - When `StyledColumn.RowScope` is **set**, the explicit `Exclude*`
+ *    flags win. Unset flags default to "include" — i.e. `RowScope: {}`
+ *    means "render on every *supported* row kind".
+ *  - When `StyledColumn.RowScope` is **unset**, the historical per-type
+ *    default applies:
+ *      - Badge: render on every row kind (that the type supports).
+ *      - All other types: render on every row kind *except* group rows
+ *        (matches the hardcoded "isGroupRowNode → plain text" check that
+ *        every other styled-column renderer used to carry), again
+ *        intersected with type capabilities (e.g. Sparkline → data only).
+ *
+ * The per-type default lets us promote `RowScope` cleanly without
+ * altering existing user-visible behaviour: state that doesn't mention
+ * `RowScope` keeps rendering exactly as before.
+ */
+export const shouldRenderStyledColumnOnRow = (styledColumn, node, api) => {
+    const rowKind = getStyledColumnRowKindForNode(node, api);
+    if (!isStyledColumnRowKindSupported(styledColumn, rowKind)) {
+        return false;
+    }
+    const isGroup = api.gridApi.isGroupRowNode(node);
+    const isTotal = api.gridApi.isGrandTotalRowNode(node);
+    const isSummary = !isTotal && api.gridApi.isSummaryNode(node);
+    const isLeaf = !isGroup && !isSummary && !isTotal;
+    const scope = styledColumn.RowScope;
+    if (scope) {
+        if (isLeaf && scope.ExcludeDataRows)
+            return false;
+        if (isGroup && scope.ExcludeGroupRows)
+            return false;
+        if (isSummary && scope.ExcludeSummaryRows)
+            return false;
+        if (isTotal && scope.ExcludeTotalRows)
+            return false;
+        return true;
+    }
+    // No explicit RowScope → fall back to historical per-type behaviour.
+    if (styledColumn.BadgeStyle) {
+        return true;
+    }
+    return !isGroup;
+};

package/src/agGrid/editors/AdaptableDateEditor/InternalAdaptableDateEditor.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import { parseISO } from 'date-fns';
 import useProperty from '../../../components/utils/useProperty';
@@ -52,12 +53,10 @@ export const InternalAdaptableDateEditor = React.forwardRef((props, ref) => {
     const onChange = React.useCallback((event) => {
         setValue(event.target.value);
     }, []);
-    return (React.createElement("div", { style: hostStyle },
-        React.createElement(DatepickerContext.Provider, { value: {
+    return (_jsx("div", { style: hostStyle, children: _jsx(DatepickerContext.Provider, { value: {
                 onHide: (keyboardEventKey) => {
                     props.onStopEdit?.(keyboardEventKey);
                 },
                 onShow: () => { },
-            } },
-            React.createElement(AdaptableInput, { type: 'date', value: stringValue, onChange: onChange, style: inputStyle, ref: inputRef }))));
+            }, children: _jsx(AdaptableInput, { type: 'date', value: stringValue, onChange: onChange, style: inputStyle, ref: inputRef }) }) }));
 });

package/src/agGrid/editors/AdaptableDateEditor/index.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { renderWithAdaptableContext } from '../../../View/renderWithAdaptableContext';
 import { InternalAdaptableDateEditor, } from './InternalAdaptableDateEditor';
 import { KeyCode } from 'ag-grid-enterprise';
@@ -41,7 +41,7 @@ export const AdaptableReactDateEditor = forwardRef((props, ref) => {
             },
         };
     });
-    const editorElement = (React.createElement(InternalAdaptableDateEditor, { defaultValue: initialValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
+    const editorElement = (_jsx(InternalAdaptableDateEditor, { defaultValue: initialValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
             const invalid = isNaN(+value);
             if (valueParser) {
                 const params = {
@@ -81,7 +81,7 @@ export const AdaptableReactDateEditor = forwardRef((props, ref) => {
             editorRef.current = editor;
             editor?.focus();
         } }));
-    return React.createElement("div", { style: style }, renderWithAdaptableContext(editorElement, adaptable));
+    return _jsx("div", { style: style, children: renderWithAdaptableContext(editorElement, adaptable) });
 });
 /**
  * Used by default for all `date` columns.
@@ -134,7 +134,7 @@ export class AdaptableDateEditor {
     afterGuiAttached() {
         const adaptable = this.getAdaptableInstance(this.params);
         const defaultValue = shouldClearExistingValue(this.params) ? '' : this.params.value;
-        const editorElement = (React.createElement(InternalAdaptableDateEditor, { defaultValue: defaultValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
+        const editorElement = (_jsx(InternalAdaptableDateEditor, { defaultValue: defaultValue, dateFormat: adaptable.adaptableOptions.userInterfaceOptions.dateInputOptions.dateFormat, onValueChange: (value) => {
                 const invalid = isNaN(+value);
                 if (this.valueParser) {
                     const params = {