@adaptabletools/adaptable 23.0.4-canary.0 → 23.0.5-canary.0

package/src/agGrid/cellRenderers/RangeBarRenderer.js

@@ -31,7 +31,6 @@ const resolveBoundValue = (bound, abColumn, rowNode, api) => {
     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;
@@ -50,11 +49,6 @@ const normaliseMarker = (override, defaults) => {
         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;
@@ -69,7 +63,6 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
     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');
@@ -90,7 +83,6 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             }
             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));
@@ -100,7 +92,6 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             const referenceValue = referenceProperties?.Value != undefined
                 ? resolveBoundValue(referenceProperties.Value, 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,
@@ -111,24 +102,18 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                 Color: DEFAULT_REFERENCE_MARKER_COLOR,
                 Size: DEFAULT_LINE_MARKER_THICKNESS,
             });
-            // Out-of-range handling
             const outOfRangeProperties = rangeStyle.OutOfRange;
             const outOfRangeMode = outOfRangeProperties?.Mode ?? 'Clamp';
             const outOfRangeColor = outOfRangeProperties?.Color;
             const isOutOfRange = numericValue < min || numericValue > max;
             const hideValueMarker = isOutOfRange && outOfRangeMode === 'Hide';
-            // Layout
             const isVertical = rangeStyle.Orientation === 'Vertical';
             const trackProperties = rangeStyle.Track;
             const trackThickness = trackProperties?.Height ?? DEFAULT_TRACK_HEIGHT;
             const bandThickness = Math.max(trackThickness + 6, DEFAULT_BAND_HEIGHT);
             const cellTextProperties = rangeStyle.CellTextProperties;
             const hasCellText = hasBarStyleCellTextConfigured(cellTextProperties);
-            // 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';
@@ -140,8 +125,6 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             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));
@@ -167,7 +150,6 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                     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');
@@ -190,23 +172,15 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                     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', trackProperties?.Color ?? 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 Track.Color as-is.
             if (trackProperties?.Color == 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);
@@ -215,11 +189,7 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                     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);
@@ -237,10 +207,6 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
                     svg.appendChild(markerEl);
                 }
             }
-            // Wrap the SVG in a positioned container so a `Merged` text row sits
-            // centred on the *bar*, not on the cell — see BulletChartRenderer for
-            // the same fix and Percent Bar for the matching behaviour via its
-            // `barEl`.
             const svgContainer = document.createElement('div');
             svgContainer.style.position = 'relative';
             svgContainer.style.display = 'flex';
@@ -257,9 +223,6 @@ export const getRangeBarRendererForColumn = (styledColumn, abColumn, api) => {
             this.eGui.appendChild(svgContainer);
             if (hasCellText) {
                 const pct = clamp((numericValue - min) / (max - min), 0, 1) * 100;
-                // 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?.(numericValue) ?? numericValue);
                 const labels = buildBarStyleCellTextLabels(cellTextProperties, formattedCellValue, `${pct.toFixed(0)}%`);
                 mountBarStyleCellText({
@@ -275,26 +238,14 @@ export const getRangeBarRendererForColumn = (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 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 createMarkerElement = (marker, valueCoord, 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);

package/src/agGrid/cellRenderers/RatingRenderer.js

@@ -6,26 +6,12 @@ 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) => {
@@ -34,27 +20,13 @@ const resolveValue = (raw) => {
     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);
@@ -88,9 +60,6 @@ export const getRatingRendererForColumn = (styledColumn, _abColumn, api) => {
     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) {
@@ -100,8 +69,6 @@ export const getRatingRendererForColumn = (styledColumn, _abColumn, api) => {
             }
             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;
             }
@@ -113,14 +80,10 @@ export const getRatingRendererForColumn = (styledColumn, _abColumn, api) => {
             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';
@@ -130,8 +93,6 @@ export const getRatingRendererForColumn = (styledColumn, _abColumn, api) => {
             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');
@@ -150,7 +111,6 @@ export const getRatingRendererForColumn = (styledColumn, _abColumn, api) => {
             return this.eGui;
         }
         refresh(_params) {
-            // Force a re-render on every value change.
             return false;
         }
     };

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

@@ -35,7 +35,6 @@ export const AdaptableReactDateEditor = forwardRef((props, ref) => {
             focusIn() {
                 editorRef.current?.focus();
             },
-            // the final value to send to the grid, on completion of editing
             getValue() {
                 return valueRef.current;
             },
@@ -58,7 +57,6 @@ export const AdaptableReactDateEditor = forwardRef((props, ref) => {
                         });
                     },
                 };
-                // @ts-ignore it will be fixed with https://github.com/AdaptableTools/adaptable/issues/2230
                 valueRef.current = valueParser(params);
                 props.onValueChange?.(valueRef.current);
             }
@@ -83,16 +81,6 @@ export const AdaptableReactDateEditor = forwardRef((props, ref) => {
         } }));
     return _jsx("div", { style: style, children: renderWithAdaptableContext(editorElement, adaptable) });
 });
-/**
- * Used by default for all `date` columns.
- *
- *
- * When the colDef has a `valueParser` provided as a function, it will be used before setting the value for the cell.
- * This is useful because dates can be stored as strings, numbers or Date instances - the value parser will be called with a `Date` instance,
- * and it's your responsibility to transform that to whatever format you want to use for persisting it to the grid.
- *
- * We strongly recommend you specify a `colDef.valueParser` function
- */
 export class AdaptableDateEditor {
     value;
     el;
@@ -109,16 +97,12 @@ export class AdaptableDateEditor {
         }
         this.el = document.createElement('div');
         Object.keys(style).forEach((key) => {
-            //@ts-ignore
             this.el.style[key] = style[key];
         });
     }
-    /* Component Editor Lifecycle methods */
-    // gets called once when grid ready to insert the element
     getGui() {
         return this.el;
     }
-    // the final value to send to the grid, on completion of editing
     getValue() {
         return this.value;
     }
@@ -130,7 +114,6 @@ export class AdaptableDateEditor {
         const adaptable = params.context.__adaptable;
         return adaptable;
     }
-    // after this component has been created and inserted into the grid
     afterGuiAttached() {
         const adaptable = this.getAdaptableInstance(this.params);
         const defaultValue = shouldClearExistingValue(this.params) ? '' : this.params.value;
@@ -151,7 +134,6 @@ export class AdaptableDateEditor {
                             });
                         },
                     };
-                    // @ts-ignore it will be fixed with https://github.com/AdaptableTools/adaptable/issues/2230
                     this.value = this.valueParser(params);
                 }
                 else {

package/src/agGrid/editors/AdaptableNumberEditor/InternalAdaptableNumberEditor.js

@@ -27,7 +27,6 @@ const inputStyle = {
 };
 const disallowedChars = new Set(['e', 'E']);
 const preventDisallowedChars = (e) => {
-    // prevent the user from entering the 'e' character - issue #2839
     if (disallowedChars.has(e.key)) {
         e.preventDefault();
     }
@@ -46,8 +45,6 @@ export const InternalAdaptableNumberEditor = React.forwardRef(function InternalA
         },
     });
     React.useEffect(() => {
-        // When the editor is opened by typing, the value is not set, even if the user
-        // dismisses the editing by pressing enter or clicking outside, this forces the value to be set.
         setValue(props.defaultValue);
     }, []);
     React.useImperativeHandle(ref, () => {

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

@@ -7,9 +7,7 @@ function shouldClearExistingValue(params) {
     return params.eventKey === KeyCode.BACKSPACE || params.eventKey === KeyCode.DELETE;
 }
 function isValidChar(char) {
-    // allow only digits
     return ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(char);
-    // we do NOT allow key shortcuts for starting non-digits (minus sign, decimal separators) as the input[number] handling is very buggy and we would open a can of worms
 }
 export function getStartValue(params) {
     if (shouldClearExistingValue(params)) {
@@ -54,7 +52,6 @@ export const AdaptableReactNumberEditor = forwardRef((props, ref) => {
             focusIn() {
                 editorRef.current?.focus();
             },
-            // the final value to send to the grid, on completion of editing
             getValue() {
                 return valueRef.current;
             },
@@ -77,9 +74,6 @@ export const AdaptableReactNumberEditor = forwardRef((props, ref) => {
     return (_jsx("div", { style: style, onKeyDown: onKeyDown, children: renderWithAdaptableContext(editorElement, adaptable) }));
 });
 AdaptableReactNumberEditor.displayName = 'AdaptableReactNumberEditor';
-/**
- * Number Editor provided by AdapTable and used by default for all `number` columns
- */
 export class AdaptableNumberEditor {
     value;
     columnId;
@@ -98,16 +92,12 @@ export class AdaptableNumberEditor {
         }
         this.el = document.createElement('div');
         Object.keys(style).forEach((key) => {
-            //@ts-ignore
             this.el.style[key] = style[key];
         });
     }
-    /* Component Editor Lifecycle methods */
-    // gets called once when grid ready to insert the element
     getGui() {
         return this.el;
     }
-    // the final value to send to the grid, on completion of editing
     getValue() {
         return this.value;
     }
@@ -115,7 +105,6 @@ export class AdaptableNumberEditor {
         this.editor?.focus();
     }
     focusOut() { }
-    // after this component has been created and inserted into the grid
     afterGuiAttached() {
         const adaptable = this.params.context.__adaptable;
         const defaultValue = this.value;

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

@@ -38,7 +38,6 @@ export const AdaptableReactPercentageEditor = forwardRef((props, ref) => {
             focusIn() {
                 editorRef.current?.focus();
             },
-            // the final value to send to the grid, on completion of editing
             getValue() {
                 return NumberExtensions.divideBy100(valueRef.current);
             },
@@ -61,9 +60,6 @@ export const AdaptableReactPercentageEditor = forwardRef((props, ref) => {
     return (_jsx("div", { style: style, onKeyDown: onKeyDown, children: renderWithAdaptableContext(editorElement, adaptable) }));
 });
 AdaptableReactPercentageEditor.displayName = 'AdaptableReactPercentageEditor';
-/**
- * Used to edit percentage columns as percentages (similar to how its done in Excel)
- */
 export class AdaptablePercentageEditor {
     value;
     columnId;
@@ -82,16 +78,12 @@ export class AdaptablePercentageEditor {
         }
         this.el = document.createElement('div');
         Object.keys(style).forEach((key) => {
-            //@ts-ignore
             this.el.style[key] = style[key];
         });
     }
-    /* Component Editor Lifecycle methods */
-    // gets called once when grid ready to insert the element
     getGui() {
         return this.el;
     }
-    // the final value to send to the grid, on completion of editing
     getValue() {
         return this.value;
     }
@@ -99,7 +91,6 @@ export class AdaptablePercentageEditor {
         this.editor?.focus();
     }
     focusOut() { }
-    // after this component has been created and inserted into the grid
     afterGuiAttached() {
         const adaptable = this.params.context.__adaptable;
         const defaultValue = NumberExtensions.timesBy100(this.value);

package/src/agGrid/index.js

@@ -1,14 +1,6 @@
-import { Adaptable, 
-//init as initFn,
-AdaptableNoCodeWizard as ABWizard, } from './Adaptable';
+import { Adaptable, AdaptableNoCodeWizard as ABWizard, } from './Adaptable';
 import { AdaptableLogger as ABLogger } from './AdaptableLogger';
 export { default as AdaptableWizardView } from '../View/AdaptableWizardView';
 export default Adaptable;
-/**
- * AdapTable's No Code Wizard
- */
 export const AdaptableNoCodeWizard = ABWizard;
-/**
- * AdapTable's Logger
- */
 export const AdaptableLogger = ABLogger;