@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.1

package/src/agGrid/cellRenderers/BulletChartRenderer.js

@@ -0,0 +1,391 @@
+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_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;
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (value === 'Col-Avg') {
+        return internalApi.getAvgValueForNumericColumn(abColumn);
+    }
+    if (value === 'Col-Median') {
+        return internalApi.getMedianValueForNumericColumn(abColumn);
+    }
+    if (typeof value === 'string') {
+        if (!api.columnApi.isColumnInGrid(value)) {
+            return undefined;
+        }
+        const raw = api.gridApi.getRawValueFromRowNode(rowNode, value);
+        return typeof raw === 'number' ? raw : Number(raw);
+    }
+    return undefined;
+};
+const normaliseMarker = (override, base) => {
+    const shape = override?.Shape ?? base?.Shape ?? 'Line';
+    return {
+        Shape: shape,
+        Color: override?.Color ?? base?.Color ?? DEFAULT_MARKER_COLOR,
+        Size: override?.Size ??
+            base?.Size ??
+            (shape === 'Line' ? DEFAULT_MARKER_LINE_THICKNESS : DEFAULT_MARKER_SHAPE_SIZE),
+    };
+};
+const resolveTargets = (bulletStyle, styledColumn, abColumn, rowNode, api) => {
+    if (bulletStyle.Target == undefined) {
+        return [];
+    }
+    const targets = Array.isArray(bulletStyle.Target)
+        ? bulletStyle.Target
+        : [bulletStyle.Target];
+    const resolved = [];
+    for (const target of targets) {
+        const value = resolveTargetValue(target, styledColumn, abColumn, rowNode, api);
+        if (value == undefined || isNaN(value)) {
+            continue;
+        }
+        const marker = normaliseMarker(isTargetDefinition(target) ? target.Marker : undefined, bulletStyle.TargetMarker);
+        resolved.push({
+            value,
+            marker,
+            label: isTargetDefinition(target) ? target.Label : undefined,
+        });
+    }
+    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') {
+        return origin;
+    }
+    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;
+    }
+    return clamp((value - min) / (max - min), 0, 1);
+};
+export const getBulletChartRendererForColumn = (styledColumn, abColumn, api) => {
+    if (!styledColumn.BulletChartStyle) {
+        return;
+    }
+    const bulletStyle = styledColumn.BulletChartStyle;
+    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');
+                    this.eGui.append(String(params.value));
+                }
+                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));
+                return;
+            }
+            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));
+                return;
+            }
+            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.BarHeight ?? DEFAULT_BAR_HEIGHT;
+            const bandThickness = Math.max(barThickness + 6, DEFAULT_BAND_HEIGHT);
+            const hasCellText = bulletStyle.CellText && bulletStyle.CellText.length > 0;
+            const isTextMerged = bulletStyle.CellTextPosition === 'Merged';
+            // 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 = hasCellText && !isTextMerged ? '80%' : '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));
+                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}`);
+            }
+            // 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));
+                    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 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);
+                svg.appendChild(back);
+            }
+            else {
+                for (const range of ranges) {
+                    const bandMin = api.styledColumnApi.internalApi.getCellColorRangeMinValue(range, abColumn, bulletStyle.RangeValueType);
+                    const bandMax = api.styledColumnApi.internalApi.getCellColorRangeMaxValue(range, abColumn, bulletStyle.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);
+                }
+            }
+            // Actual bar
+            const valueFraction = toFraction(numericValue, min, max);
+            const originFraction = toFraction(origin, min, max);
+            const valueCoord = valueAxisCoord(valueFraction);
+            const originCoord = valueAxisCoord(originFraction);
+            const barCrossOffset = (bandThickness - barThickness) / 2;
+            const bar = document.createElementNS(SVG_NS, 'rect');
+            setRectAxes(bar, Math.min(valueCoord, originCoord), Math.abs(valueCoord - originCoord), barCrossOffset, barThickness);
+            bar.setAttribute('fill', bulletStyle.BarColor ?? DEFAULT_BAR_COLOR);
+            bar.setAttribute('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);
+                if (marker) {
+                    marker.setAttribute('class', 'ab-BulletChart__marker');
+                    svg.appendChild(marker);
+                }
+            }
+            this.eGui.appendChild(svg);
+            if (hasCellText) {
+                const textEl = document.createElement('div');
+                textEl.className = 'ab-BulletChart__text';
+                textEl.style.lineHeight = '1.2';
+                const parts = [];
+                if (bulletStyle.CellText.includes('CellValue')) {
+                    parts.push(params.formatValue?.(cellValue) ?? String(cellValue));
+                }
+                if (bulletStyle.CellText.includes('PercentageValue')) {
+                    parts.push(`${(valueFraction * 100).toFixed(0)}%`);
+                }
+                textEl.innerText = parts.join(' ');
+                switch (bulletStyle.CellTextPosition) {
+                    case 'Above':
+                        this.eGui.prepend(textEl);
+                        break;
+                    case 'Merged':
+                        textEl.style.position = 'absolute';
+                        textEl.style.top = '50%';
+                        textEl.style.transform = 'translateY(-50%)';
+                        textEl.style.left = '0';
+                        textEl.style.right = '0';
+                        textEl.style.paddingLeft = '5px';
+                        textEl.style.paddingRight = '5px';
+                        textEl.style.pointerEvents = 'none';
+                        this.eGui.appendChild(textEl);
+                        break;
+                    case 'Below':
+                    default:
+                        this.eGui.appendChild(textEl);
+                        break;
+                }
+            }
+        }
+        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 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 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);
+            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));
+            // 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;
+        }
+        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));
+            // 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),
+                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;
+            // 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),
+                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/IconRenderer.d.ts

@@ -0,0 +1,23 @@
+import { IconStyle, IconStyleMapping, StyledColumn } from '../../AdaptableState/StyledColumnState';
+import { AdaptableApi } from '../../Api/AdaptableApi';
+import { AdaptableColumn } from '../../AdaptableState/Common/AdaptableColumn';
+/**
+ * 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 declare const resolveEffectiveIconStyleMappings: (iconStyle: IconStyle | undefined) => IconStyleMapping[];
+export declare const getIconRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;
+/** Helper exposed for the tooltip getter in `AgGridColumnAdapter`. */
+export declare const findIconStyleMappingForValue: (iconStyle: IconStyle | undefined, cellValue: any) => IconStyleMapping | undefined;