@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/View/StyledColumn/Wizard/StyledColumnWizardRangeBarSection.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { CheckBox } from '../../../components/CheckBox';
+import ErrorBox from '../../../components/ErrorBox';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { Tag } from '../../../components/Tag';
+import { ColorPicker } from '../../../components/ColorPicker';
+import { RangesComponent } from '../../Components/RangesComponent';
+import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
+import { getGraySwatchColor } from '../../UIHelper';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import DropdownButton from '../../../components/DropdownButton';
+import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
+import AdaptableInput from '../../Components/AdaptableInput';
+import { Box, Flex } from '../../../components/Flex';
+import { SingleSelect } from '../../../components/NewSelect';
+import { StyledColumnRangeBarListPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnChartListPreviews';
+import { Card } from '../../../components/Card';
+const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
+const BOUND_MODE_LABELS = {
+    Number: 'Fixed Number',
+    Column: 'Column',
+    'Col-Min': 'Column Min',
+    'Col-Max': 'Column Max',
+    'Col-Avg': 'Column Average',
+    'Col-Median': 'Column Median',
+};
+const getBoundMode = (bound) => {
+    if (bound == undefined)
+        return 'None';
+    if (typeof bound === 'number')
+        return 'Number';
+    if (bound === 'Col-Min' || bound === 'Col-Max' || bound === 'Col-Avg' || bound === 'Col-Median') {
+        return bound;
+    }
+    return 'Column';
+};
+const summarizeBound = (bound) => {
+    if (bound == undefined)
+        return '—';
+    if (typeof bound === 'number')
+        return String(bound);
+    if (bound === 'Col-Min' || bound === 'Col-Max' || bound === 'Col-Avg' || bound === 'Col-Median') {
+        return BOUND_MODE_LABELS[bound];
+    }
+    return bound;
+};
+// ---------------------------------------------------------------------------
+// Summary helper (Wizard "Style" step header)
+// ---------------------------------------------------------------------------
+/** Summary line for the Range wizard step (bounds + bands only). */
+export const renderStyledColumnRangeBarRangeStepSummary = (data) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return _jsx(Tag, { children: "No Styling Defined" });
+    }
+    const bandCount = range.CellRanges?.length ?? 0;
+    const hasReference = range.Reference != undefined;
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: ["Min: ", _jsx(Tag, { children: summarizeBound(range.Min) })] }), _jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Max: ", _jsx(Tag, { children: summarizeBound(range.Max) })] }), hasReference && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Ref: ", _jsx(Tag, { children: summarizeBound(range.Reference) })] })), bandCount > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 ", bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }))] }), _jsx(StyledColumnRangeBarListPreview, { range: range })] }));
+};
+/** Summary for the Display wizard step (markers, track, text). */
+export const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return _jsx(Tag, { children: "No Styling Defined" });
+    }
+    const isVertical = range.Orientation === 'Vertical';
+    const mode = range.OutOfRangeMode ?? 'Clamp';
+    const parts = [];
+    parts.push(_jsxs(Box, { className: "twa:mr-1", children: ["Value marker: ", _jsx(Tag, { children: range.Marker?.Shape ?? 'Diamond' })] }, "vm"));
+    if (range.Reference != undefined) {
+        parts.push(_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Ref marker: ", _jsx(Tag, { children: range.ReferenceMarker?.Shape ?? 'Line' })] }, "rm"));
+    }
+    if (isVertical) {
+        parts.push(_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 ", _jsx(Tag, { children: "vertical" })] }, "v"));
+    }
+    parts.push(_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Out: ", _jsx(Tag, { children: mode })] }, "orm"));
+    if (range.CellText?.length) {
+        parts.push(_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Text: ", _jsx(Tag, { children: range.CellText.join(', ') })] }, "ct"));
+    }
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap", children: parts }), _jsx(StyledColumnRangeBarListPreview, { range: range })] }));
+};
+/**
+ * Combined summary for the Styled Columns list row (preview + key facts).
+ */
+export const renderStyledColumnRangeBarSummary = (data) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return _jsx(Tag, { children: "No Styling Defined" });
+    }
+    const bandCount = range.CellRanges?.length ?? 0;
+    const isVertical = range.Orientation === 'Vertical';
+    const hasReference = range.Reference != undefined;
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(StyledColumnRangeBarListPreview, { range: range }), _jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: ["Min: ", _jsx(Tag, { children: summarizeBound(range.Min) })] }), _jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Max: ", _jsx(Tag, { children: summarizeBound(range.Max) })] }), hasReference && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Ref: ", _jsx(Tag, { children: summarizeBound(range.Reference) })] })), bandCount > 0 && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 ", bandCount, " ", bandCount === 1 ? 'band' : 'bands'] })), isVertical && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 ", _jsx(Tag, { children: "vertical" })] }))] })] }));
+};
+// ---------------------------------------------------------------------------
+// Wizard validity check (also used by the wizard step config)
+// ---------------------------------------------------------------------------
+/**
+ * Returns `true` if the Range Bar's bounds are well-formed, otherwise an
+ * error string explaining what's missing. Used as the wizard step's
+ * `isValid` callback.
+ */
+/** Bounds + bands step — Min / Max required and numeric pair must span. */
+export const isValidRangeBarBounds = (data) => {
+    const range = data.RangeBarStyle;
+    if (!range)
+        return 'Define Min and Max bounds';
+    if (range.Min == undefined)
+        return 'Define a Min bound for the Range Bar';
+    if (range.Max == undefined)
+        return 'Define a Max bound for the Range Bar';
+    if (typeof range.Min === 'number' && typeof range.Max === 'number') {
+        if (range.Max <= range.Min) {
+            return 'Max must be greater than Min';
+        }
+    }
+    return true;
+};
+// ---------------------------------------------------------------------------
+// Section
+// ---------------------------------------------------------------------------
+const MARKER_SHAPES = [
+    { value: 'Diamond', label: 'Diamond' },
+    { value: 'Line', label: 'Line' },
+    { value: 'Triangle', label: 'Triangle' },
+    { value: 'Dot', label: 'Dot' },
+];
+export const StyledColumnWizardRangeBarSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const minMaxRangeValues = React.useMemo(() => {
+        const columnId = data.ColumnId;
+        if (!columnId)
+            return null;
+        const column = api.columnApi.getColumnWithColumnId(columnId);
+        return {
+            min: api.styledColumnApi.internalApi.getMinValueForNumericColumn(column),
+            max: api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column),
+        };
+    }, [data]);
+    const scope = { ColumnIds: [data.ColumnId] };
+    const range = data.RangeBarStyle ?? {};
+    const disabled = !data.ColumnId;
+    // -------------------------------------------------------------------------
+    // Updaters
+    // -------------------------------------------------------------------------
+    const update = (patch) => {
+        props.onChange({
+            ...data,
+            RangeBarStyle: {
+                ...range,
+                ...patch,
+            },
+        });
+    };
+    const onUpdateRanges = (ranges) => {
+        update({ CellRanges: ranges });
+    };
+    // The Range Bar wizard hides the column-comparison toggle (bounds *are*
+    // the per-row range here). Stub kept to satisfy the RangesComponent prop
+    // contract.
+    const onUpdateColumnComparison = (columnComparison) => {
+        update({ ColumnComparison: columnComparison });
+    };
+    const onRangeValueTypeChange = React.useCallback((rangeValueType) => {
+        const ranges = rangeValueType === 'Number'
+            ? api.columnScopeApi.createCellColorRangesForScope(scope)
+            : [{ Min: 0, Max: 100, Color: getGraySwatchColor() }];
+        props.onChange({
+            ...data,
+            RangeBarStyle: {
+                ...range,
+                CellRanges: ranges,
+                RangeValueType: rangeValueType,
+            },
+        });
+    }, [data, range]);
+    // -- Bound editors ---------------------------------------------------------
+    /**
+     * Renders the mode + value pair for one of `Min` / `Max` / `Reference`.
+     * Centralised so the three controls stay visually and behaviourally
+     * identical (only the field name differs).
+     */
+    const renderBoundEditor = (opts) => {
+        const value = range[opts.field];
+        const mode = getBoundMode(value);
+        const handleModeChange = (next) => {
+            if (next === 'None') {
+                const cleaned = { ...range };
+                delete cleaned[opts.field];
+                props.onChange({ ...data, RangeBarStyle: cleaned });
+                return;
+            }
+            if (next === 'Number') {
+                update({ [opts.field]: opts.fallbackNumber });
+                return;
+            }
+            if (next === 'Column') {
+                const candidate = api.columnApi
+                    .getNumericColumns()
+                    .find((c) => c.columnId !== data.ColumnId);
+                update({ [opts.field]: candidate?.columnId ?? '' });
+                return;
+            }
+            // Col-Min / Col-Max / Col-Avg / Col-Median
+            update({ [opts.field]: next });
+        };
+        const items = [
+            ...(opts.optional ? [{ value: 'None', label: 'None' }] : []),
+            { value: 'Number', label: BOUND_MODE_LABELS.Number },
+            { value: 'Column', label: BOUND_MODE_LABELS.Column },
+            { value: 'Col-Min', label: BOUND_MODE_LABELS['Col-Min'] },
+            { value: 'Col-Max', label: BOUND_MODE_LABELS['Col-Max'] },
+            { value: 'Col-Avg', label: BOUND_MODE_LABELS['Col-Avg'] },
+            { value: 'Col-Median', label: BOUND_MODE_LABELS['Col-Median'] },
+        ];
+        return (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: `${opts.label}:`, children: _jsx(Box, { className: "twa:max-w-[180px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: mode, onValueChange: (v) => handleModeChange(v), items: items }) }) }), mode === 'Number' && (_jsx(FormRow, { label: `${opts.label} Value:`, children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { type: "number", value: typeof value === 'number' ? value : '', onChange: (e) => update({
+                                [opts.field]: e.target.value === '' ? 0 : Number(e.target.value),
+                            }) }) }) })), mode === 'Column' && (_jsx(FormRow, { label: `${opts.label} Column:`, children: _jsx(Box, { className: "twa:max-w-[220px]", children: _jsx(ColumnSelector, { type: "number", value: typeof value === 'string' ? value : '', onChange: (columnId) => update({ [opts.field]: columnId }), filterColumn: (c) => c.columnId !== data.ColumnId, placeholder: "Select numeric column" }) }) }))] }));
+    };
+    // -- Marker editors --------------------------------------------------------
+    const updateValueMarker = (patch) => {
+        update({
+            Marker: {
+                Shape: 'Diamond',
+                ...range.Marker,
+                ...patch,
+            },
+        });
+    };
+    const updateReferenceMarker = (patch) => {
+        update({
+            ReferenceMarker: {
+                Shape: 'Line',
+                ...range.ReferenceMarker,
+                ...patch,
+            },
+        });
+    };
+    // Defaults applied locally for displaying current values in the editor —
+    // the renderer applies its own defaults if these stay undefined in state.
+    const valueMarker = {
+        Shape: range.Marker?.Shape ?? 'Diamond',
+        Color: range.Marker?.Color ?? '',
+        Size: range.Marker?.Size ?? (range.Marker?.Shape === 'Line' ? 2 : 10),
+    };
+    const referenceMarker = {
+        Shape: range.ReferenceMarker?.Shape ?? 'Line',
+        Color: range.ReferenceMarker?.Color ?? '',
+        Size: range.ReferenceMarker?.Size ?? (range.ReferenceMarker?.Shape === 'Line' ? 2 : 8),
+    };
+    // -- Cell text -------------------------------------------------------------
+    const toggleCellText = (token, checked) => {
+        const current = range.CellText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, token]))
+            : current.filter((t) => t !== token);
+        update({ CellText: next });
+    };
+    const toggleToolTipText = (token, checked) => {
+        const current = range.ToolTipText ?? [];
+        const next = checked
+            ? Array.from(new Set([...current, token]))
+            : current.filter((t) => t !== token);
+        update({ ToolTipText: next });
+    };
+    const handleCellTextPositionChange = (pos) => {
+        update({ CellTextPosition: pos });
+    };
+    // -------------------------------------------------------------------------
+    // Render
+    // -------------------------------------------------------------------------
+    if (!data.ColumnId) {
+        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." }) }));
+    }
+    const hasReference = range.Reference != undefined;
+    const outOfRangeMode = range.OutOfRangeMode ?? 'Clamp';
+    const isRangeVariant = props.variant === 'range';
+    return (_jsxs(Box, { children: [isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bounds" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the Min, Max and Reference values for the range bar" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [renderBoundEditor({
+                                            label: 'Min',
+                                            field: 'Min',
+                                            optional: false,
+                                            fallbackNumber: minMaxRangeValues?.min ?? 0,
+                                        }), renderBoundEditor({
+                                            label: 'Max',
+                                            field: 'Max',
+                                            optional: false,
+                                            fallbackNumber: minMaxRangeValues?.max ?? 100,
+                                        }), renderBoundEditor({
+                                            label: 'Reference',
+                                            field: 'Reference',
+                                            optional: true,
+                                            fallbackNumber: minMaxRangeValues?.max ?? 0,
+                                        })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", _jsx("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), _jsx(Card.Body, { children: _jsx(RangesComponent, { allowEmptyRanges: true, disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: range.CellRanges, rangeValueType: range.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: range.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] })] })), !isRangeVariant && (_jsxs(_Fragment, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Value Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Drawn at the cell value's position along the track." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Reference Marker" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
+                                            ? 'Drawn at the Reference value (e.g. previous close, target, midpoint).'
+                                            : 'Optional second marker when a Reference bound is set on the Style step.' })] }), _jsx(Card.Body, { children: hasReference ? (_jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : (_jsx(Box, { className: "twa:text-xs twa:opacity-60 twa:max-w-[520px]", children: "Add a Reference value on the Style step (Bounds section) to enable this marker (e.g. previous close, target, midpoint)." })) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Track" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "The line representing the [Min, Max] interval, plus optional cell background." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
+                                                        { value: 'Horizontal', label: 'Horizontal' },
+                                                        { value: 'Vertical', label: 'Vertical' },
+                                                    ] }) }) }), range.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(Box, { className: "twa:text-xs twa:text-neutral-500 twa:max-w-[520px]", children: ["Tip: vertical Range Bars need a tall row height to be readable (we recommend at least 60px). Set ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use ", _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: `Track ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!range.TrackColor, onChange: (checked) => update({ TrackColor: checked ? getGraySwatchColor() : undefined }), className: "twa:mr-2" }), range.TrackColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: range.TrackColor, onChange: (c) => update({ TrackColor: c }) }))] }) }), _jsx(FormRow, { label: range.Orientation === 'Vertical' ? 'Track Width (px):' : 'Track Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: range.TrackHeight ?? '', onChange: (e) => update({
+                                                        TrackHeight: e.target.value === '' ? undefined : Number(e.target.value),
+                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!range.BackColor, onChange: (checked) => update({ BackColor: checked ? getGraySwatchColor() : null }), className: "twa:mr-2" }), range.BackColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: range.BackColor, onChange: (c) => update({ BackColor: c }) }))] }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Out of Range" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "How to draw the value marker when the cell value falls outside [Min, Max]." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Behaviour:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: outOfRangeMode, onValueChange: (v) => update({ OutOfRangeMode: v }), items: [
+                                                        { value: 'Clamp', label: 'Clamp to edge' },
+                                                        { value: 'Overflow', label: 'Show outside' },
+                                                        { value: 'Hide', label: 'Hide marker' },
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { disabled: disabled, checked: !!range.OutOfRangeColor, onChange: (checked) => update({ OutOfRangeColor: checked ? 'crimson' : undefined }), className: "twa:mr-2" }), range.OutOfRangeColor != undefined && (_jsx(ColorPicker, { disabled: disabled, api: api, value: range.OutOfRangeColor, onChange: (c) => update({ OutOfRangeColor: c }) }))] }) }))] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Text & Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Optional cell-text overlay and AG Grid tooltip content." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(DropdownButton, { disabled: ArrayExtensions.IsNullOrEmpty(range.CellText) || disabled, columns: ['label'], items: [
+                                                    { label: 'Above Bar', onClick: () => handleCellTextPositionChange('Above') },
+                                                    { label: 'Below Bar', onClick: () => handleCellTextPositionChange('Below') },
+                                                    { label: 'Merged', onClick: () => handleCellTextPositionChange('Merged') },
+                                                ], children: range.CellTextPosition ?? 'Below' }) }), _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizardRatingSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const renderStyledColumnRatingSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const isValidRatingStyle: (data: StyledColumn) => true | string;
+export interface StyledColumnWizardRatingSectionProps {
+    onChange: (styledColumn: StyledColumn) => void;
+}
+export declare const StyledColumnWizardRatingSection: React.FunctionComponent<StyledColumnWizardRatingSectionProps>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardRatingSection.js

@@ -0,0 +1,211 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { CheckBox } from '../../../components/CheckBox';
+import ErrorBox from '../../../components/ErrorBox';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
+import { Tag } from '../../../components/Tag';
+import { ColorPicker } from '../../../components/ColorPicker';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import { Box, Flex } from '../../../components/Flex';
+import { SingleSelect } from '../../../components/NewSelect';
+import Input from '../../../components/Input';
+import { renderCellStyleSummaryTags, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { Card } from '../../../components/Card';
+import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../Utilities/Helpers/StyleHelper';
+const STYLE_FORM_SIZES = ['200px', '1fr'];
+const ICON_CHOICES = [
+    { value: 'Star', label: 'Star' },
+    { value: 'Heart', label: 'Heart' },
+    { value: 'Circle', label: 'Circle' },
+    { value: 'Thumb', label: 'Thumb' },
+];
+// Mirrors the renderer defaults so the wizard preview/summary stay in sync.
+const DEFAULT_MAX = 5;
+const DEFAULT_SIZE = 14;
+const DEFAULT_GAP = 2;
+const DEFAULT_ICON = 'Star';
+const DEFAULT_FILLED_COLOR = 'var(--ab-color-warn, #f5a623)';
+const DEFAULT_EMPTY_COLOR = 'color-mix(in srgb, currentColor 22%, transparent)';
+/**
+ * Resolve a CSS custom property (e.g. `--ab-color-warn`) to its computed
+ * value at runtime. Returns the fallback hex on SSR or when the variable
+ * isn't defined for the current theme.
+ */
+const resolveCssVar = (varName, fallbackHex) => {
+    if (typeof window === 'undefined')
+        return fallbackHex;
+    try {
+        const v = getComputedStyle(document.documentElement)
+            .getPropertyValue(varName)
+            .trim();
+        return v || fallbackHex;
+    }
+    catch {
+        return fallbackHex;
+    }
+};
+/**
+ * Best-effort preview colour for the wizard's `Filled Colour` picker when
+ * the user hasn't chosen one. The renderer uses `var(--ab-color-warn,
+ * #f5a623)`, but `ColorPicker` can't parse a `var(...)` with a fallback,
+ * so we resolve the variable manually and pass a concrete hex.
+ *
+ * State remains untouched - the picker only writes to state when the user
+ * actively picks a colour, so we never accidentally bake the resolved
+ * theme value into the saved styled column.
+ */
+const getDisplayedFilledColor = (rating) => rating.FilledColor || resolveCssVar('--ab-color-warn', '#f5a623');
+/**
+ * Best-effort preview colour for the wizard's `Empty Colour` picker. The
+ * renderer's actual default is `color-mix(in srgb, currentColor 22%,
+ * transparent)`, which the picker can't parse either; we approximate it
+ * by reading the document foreground colour and setting alpha to 0.22.
+ */
+const getDisplayedEmptyColor = (rating) => {
+    if (rating.EmptyColor)
+        return rating.EmptyColor;
+    if (typeof window === 'undefined')
+        return 'rgba(127, 127, 127, 0.22)';
+    try {
+        const fg = getComputedStyle(document.body).color || 'rgb(0, 0, 0)';
+        const m = fg.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+        if (m) {
+            return `rgba(${m[1]}, ${m[2]}, ${m[3]}, 0.22)`;
+        }
+    }
+    catch {
+        /* fall through */
+    }
+    return 'rgba(127, 127, 127, 0.22)';
+};
+// ---------------------------------------------------------------------------
+// Inline preview (also reused by the wizard summary so the user sees a
+// pixel-accurate idea of the resulting cell at all times).
+// ---------------------------------------------------------------------------
+const ICON_PATHS = {
+    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: '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',
+    Circle: 'M12 4 a8 8 0 1 0 0.0001 0 Z',
+    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 clamp = (n, lo, hi) => Math.max(lo, Math.min(hi, n));
+function getRatingCellChromeCss(cell) {
+    if (!cell || !hasCellBoxStyle(cell)) {
+        return {};
+    }
+    return convertAdaptableStyleToCSS(cell);
+}
+const RatingPreview = ({ rating, value, }) => {
+    const max = rating.Max ?? DEFAULT_MAX;
+    const size = rating.Size ?? DEFAULT_SIZE;
+    const gap = rating.Gap ?? DEFAULT_GAP;
+    const icon = rating.Icon ?? DEFAULT_ICON;
+    const filledColor = rating.FilledColor ?? DEFAULT_FILLED_COLOR;
+    const emptyColor = rating.EmptyColor ?? DEFAULT_EMPTY_COLOR;
+    const allowHalf = rating.AllowHalf ?? true;
+    const previewValue = value ?? Math.max(1, Math.min(max, max * 0.7));
+    const effective = allowHalf ? previewValue : Math.round(previewValue);
+    const d = ICON_PATHS[icon];
+    return (_jsxs("span", { style: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: `${gap}px`,
+            lineHeight: 1,
+        }, "aria-hidden": "true", children: [Array.from({ length: max }).map((_, i) => {
+                const fill = clamp(effective - i, 0, 1);
+                const clipId = `ab-rating-preview-clip-${i}-${icon}-${size}`;
+                return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [_jsx("path", { d: d, fill: emptyColor }), fill > 0 && (_jsxs(_Fragment, { children: [_jsx("defs", { children: _jsx("clipPath", { id: clipId, children: _jsx("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), _jsx("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
+            }), rating.ShowValue && (_jsx("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: previewValue }))] }));
+};
+// ---------------------------------------------------------------------------
+// Wizard summary
+// ---------------------------------------------------------------------------
+export const renderStyledColumnRatingSummary = (data) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return _jsx(Tag, { children: "No Styling Defined" });
+    }
+    const max = rating.Max ?? DEFAULT_MAX;
+    const icon = rating.Icon ?? DEFAULT_ICON;
+    const cellTags = renderCellStyleSummaryTags(rating.Cell);
+    const toolTipTokens = rating.ToolTipText ?? [];
+    return (_jsxs(Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [_jsx(Box, { className: "twa:inline-flex twa:items-center twa:gap-2 twa:box-border", style: getRatingCellChromeCss(rating.Cell), children: _jsx(RatingPreview, { rating: rating }) }), _jsxs(Box, { children: ["Out of ", _jsx(Tag, { children: max })] }), _jsxs(Box, { children: ["Icon: ", _jsx(Tag, { children: icon })] }), toolTipTokens.length > 0 && (_jsxs(Box, { children: ["Tooltip: ", _jsx(Tag, { children: toolTipTokens.join(', ') })] })), cellTags && _jsxs(Box, { children: ["Cell: ", cellTags] })] }));
+};
+// ---------------------------------------------------------------------------
+// Wizard validation
+// ---------------------------------------------------------------------------
+export const isValidRatingStyle = (data) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return 'Rating Style is missing';
+    }
+    if (rating.Max != undefined && (rating.Max < 1 || !Number.isFinite(rating.Max))) {
+        return 'Max must be a positive number';
+    }
+    if (rating.Size != undefined && rating.Size < 4) {
+        return 'Icon size must be at least 4 pixels';
+    }
+    return true;
+};
+export const StyledColumnWizardRatingSection = (props) => {
+    const { data, api } = useOnePageAdaptableWizardContext();
+    const rating = data.RatingStyle ?? {};
+    const disabled = !data.ColumnId;
+    if (!data.ColumnId) {
+        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." }) }));
+    }
+    const update = (patch) => {
+        props.onChange({
+            ...data,
+            RatingStyle: { ...rating, ...patch },
+        });
+    };
+    const toggleToolTipText = (token, checked) => {
+        const current = rating.ToolTipText ?? [];
+        const next = checked
+            ? [...current.filter((t) => t !== token), token]
+            : current.filter((t) => t !== token);
+        update({ ToolTipText: next });
+    };
+    const previewCellChrome = React.useMemo(() => getRatingCellChromeCss(rating.Cell), [rating.Cell]);
+    return (_jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", className: "twa:mb-3 twa:p-3 twa:rounded-standard twa:border twa:border-border twa:gap-3", children: [_jsx(Box, { className: "twa:text-3 twa:font-medium", children: "Preview:" }), _jsx(Box, { className: "twa:inline-flex twa:items-center twa:box-border", style: previewCellChrome, children: _jsx(RatingPreview, { rating: rating }) }), _jsxs(Box, { className: "twa:text-2 twa:opacity-70", children: ["(sample value ", (rating.Max ?? DEFAULT_MAX) * 0.7, ")"] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Icon" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Max:", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(DEFAULT_MAX), style: { width: 80 }, onChange: (event) => {
+                                                    const raw = event.target.value;
+                                                    if (raw === '' || raw == null) {
+                                                        update({ Max: undefined });
+                                                        return;
+                                                    }
+                                                    const parsed = Number(raw);
+                                                    update({
+                                                        Max: Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : undefined,
+                                                    });
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Icon count and rating cap (no auto scaling is applied)" })] }) }), _jsx(FormRow, { label: "Icon:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), _jsx(FormRow, { label: "Filled Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), _jsx(FormRow, { label: "Empty Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), _jsx(FormRow, { label: "Icon Size (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_SIZE), style: { width: 80 }, onChange: (event) => {
+                                                    const raw = event.target.value;
+                                                    if (raw === '' || raw == null) {
+                                                        update({ Size: undefined });
+                                                        return;
+                                                    }
+                                                    const parsed = Number(raw);
+                                                    update({
+                                                        Size: Number.isFinite(parsed) && parsed >= 4 ? parsed : undefined,
+                                                    });
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), _jsx(FormRow, { label: "Icon Gap (px):", children: _jsxs(Flex, { alignItems: "center", className: "twa:gap-2", children: [_jsx(Input, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(DEFAULT_GAP), style: { width: 80 }, onChange: (event) => {
+                                                    const raw = event.target.value;
+                                                    if (raw === '' || raw == null) {
+                                                        update({ Gap: undefined });
+                                                        return;
+                                                    }
+                                                    const parsed = Number(raw);
+                                                    update({
+                                                        Gap: Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined,
+                                                    });
+                                                } }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), _jsx(FormRow, { label: "Allow Half Icons:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.AllowHalf ?? true, onChange: (checked) => update({ AllowHalf: checked }), children: "Render fractional values as a partial icon (e.g. 3.5 \u2192 \u2605\u2605\u2605\u00BD\u2606)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Text" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Show Value:", children: _jsx(CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), _jsx(FormRow, { label: "Tooltip:", children: _jsxs(Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [_jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), _jsx(CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
+                                if (next) {
+                                    update({ Cell: next });
+                                }
+                                else {
+                                    const cleaned = { ...rating };
+                                    delete cleaned.Cell;
+                                    props.onChange({ ...data, RatingStyle: cleaned });
+                                }
+                            } }) })] })] }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizardScopeSection.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+import type { AdaptableApi } from '../../../types';
+export declare const renderStyledColumnScopeSummary: (data: StyledColumn) => React.JSX.Element;
+/** Used by the styled column list view (one-line "Rows: Data, Group, …"). */
+export declare const collectIncludedRowKindLabels: (styledColumn: StyledColumn) => string[];
+export declare const isValidStyledColumnScope: (data: StyledColumn, api: AdaptableApi) => true | string;
+export type StyledColumnWizardScopeSectionProps = {
+    onChange: (data: StyledColumn) => void;
+    isNew: boolean;
+};
+export declare const StyledColumnWizardScopeSection: (props: StyledColumnWizardScopeSectionProps) => React.JSX.Element;