@adaptabletools/adaptable 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -4,18 +4,20 @@ 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 { InputGroup } from '../../../components/InputGroup';
+import { ColorPicker, OptionalColorPicker } 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 { RangeBarRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
+import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { BarStyleCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor';
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
     Number: 'Fixed Number',
@@ -45,40 +47,184 @@ const summarizeBound = (bound) => {
     }
     return bound;
 };
-// ---------------------------------------------------------------------------
-// Summary helper (Wizard "Style" step header)
-// ---------------------------------------------------------------------------
+/**
+ * A single joined bound control: a type selector (Fixed Number / Column /
+ * Column Min / Max / Average / Median, plus `None` for the optional Reference)
+ * joined inline with a contextual editor. Mirrors the Column Comparison bound
+ * input so the two read as one block: the select hard-codes `rounded-input`, so
+ * the touching corners are flattened directly (important, to beat it) and the
+ * shared border overlapped via `-ml-px`.
+ *
+ *  - Fixed Number  → editable number input
+ *  - Column        → numeric column selector (excluding the styled column)
+ *  - Col-* (aggregate) → disabled input showing the resolved value (when a
+ *    column is in scope), so the user sees the underlying number
+ *  - None          → no editor (selector only)
+ */
+const RangeBarBoundInput = ({ api, value, optional, fallbackNumber, excludeColumnId, resolved, disabled, onChange }) => {
+    const mode = getBoundMode(value);
+    const handleModeChange = (next) => {
+        if (next === mode)
+            return;
+        if (next === 'None')
+            return onChange(undefined);
+        if (next === 'Number')
+            return onChange(fallbackNumber);
+        if (next === 'Column') {
+            const candidate = api.columnApi
+                .getNumericColumns()
+                .find((c) => c.columnId !== excludeColumnId);
+            return onChange(candidate?.columnId ?? '');
+        }
+        // Col-Min / Col-Max / Col-Avg / Col-Median
+        return onChange(next);
+    };
+    const items = [
+        ...(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'] },
+    ];
+    const hasEditor = mode !== 'None';
+    let editor = null;
+    if (mode === 'Number') {
+        editor = (_jsx(AdaptableInput, { className: "twa:w-full", type: "number", disabled: disabled, value: typeof value === 'number' ? value : '', onChange: (e) => onChange(e.target.value === '' ? 0 : Number(e.target.value)) }));
+    }
+    else if (mode === 'Column') {
+        editor = (_jsx(ColumnSelector, { type: "number", disabled: disabled, value: typeof value === 'string' ? value : '', onChange: (columnId) => onChange(columnId), filterColumn: (c) => c.columnId !== excludeColumnId, placeholder: "Select column" }));
+    }
+    else if (hasEditor) {
+        const resolvedValue = resolved[mode];
+        editor = (_jsx(AdaptableInput, { className: "twa:w-full", type: "number", disabled: true, readOnly: true, value: resolvedValue ?? '', title: "Computed across the column's visible rows" }));
+    }
+    const editorWrapperClassName = [
+        'twa:flex-1 twa:basis-0 twa:min-w-0 twa:-ml-px',
+        'twa:[&_.ab-Input]:w-full twa:[&_.ab-Input]:rounded-l-none!',
+        'twa:[&_[data-slot=input-group]]:w-full! twa:[&_[data-slot=input-group]]:rounded-l-none!',
+    ].join(' ');
+    return (_jsxs(InputGroup, { Component: Flex, className: "twa:items-stretch twa:max-w-[22rem]", children: [_jsx(SingleSelect, { className: `twa:w-[150px] twa:max-w-none twa:shrink-0 twa:box-border${hasEditor ? 'twa:rounded-r-none!' : ''}`, disabled: disabled, value: mode, items: items, onValueChange: (v) => handleModeChange(v) }), hasEditor && _jsx(Box, { className: editorWrapperClassName, children: editor })] }));
+};
+const formatRangeBarCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatRangeBarToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+export const getStyledColumnRangeBarRangeViewValues = (data) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return [];
+    }
+    const items = [
+        `Min: ${summarizeBound(range.Min)}`,
+        `Max: ${summarizeBound(range.Max)}`,
+    ];
+    if (range.Reference?.Value != undefined) {
+        items.push(`Reference: ${summarizeBound(range.Reference.Value)}`);
+    }
+    const bandCount = range.CellRanges?.length ?? 0;
+    if (bandCount > 0) {
+        items.push(`Bands: ${bandCount}`);
+    }
+    if (range.RangeValueType != null) {
+        items.push(`Range Value Type: ${range.RangeValueType}`);
+    }
+    return items;
+};
+const buildStyledColumnRangeBarDisplaySummaryStrings = (range, options) => {
+    const items = [];
+    const valueMarker = range.Marker;
+    const referenceProperties = range.Reference;
+    const referenceMarker = referenceProperties?.Marker;
+    items.push(`Value Marker Shape: ${valueMarker?.Shape ?? 'Diamond'}`);
+    if (valueMarker?.Color) {
+        items.push(`Value Marker Colour: ${valueMarker.Color}`);
+    }
+    if (valueMarker?.Size != null) {
+        items.push(`Value Marker Size: ${valueMarker.Size}px`);
+    }
+    if (referenceProperties?.Value != undefined) {
+        items.push(`Reference Marker Shape: ${referenceMarker?.Shape ?? 'Line'}`);
+        if (referenceMarker?.Color) {
+            items.push(`Reference Marker Colour: ${referenceMarker.Color}`);
+        }
+        if (referenceMarker?.Size != null) {
+            items.push(`Reference Marker Size: ${referenceMarker.Size}px`);
+        }
+    }
+    if (range.Orientation === 'Vertical') {
+        items.push('Orientation: Vertical');
+    }
+    const outOfRangeProperties = range.OutOfRange;
+    const outOfRangeMode = outOfRangeProperties?.Mode ?? 'Clamp';
+    if (outOfRangeMode !== 'Clamp') {
+        items.push(`Out of Range: ${outOfRangeMode}`);
+    }
+    if (outOfRangeProperties?.Color) {
+        items.push(`Out of Range Colour: ${outOfRangeProperties.Color}`);
+    }
+    const trackProperties = range.Track;
+    if (trackProperties?.Color) {
+        items.push(`Track Colour: ${trackProperties.Color}`);
+    }
+    if (trackProperties?.Height != null) {
+        items.push(`Track Height: ${trackProperties.Height}px`);
+    }
+    if (range.BackColor) {
+        items.push(`Back Colour: ${range.BackColor}`);
+    }
+    if (hasBarStyleCellTextConfigured(range.CellTextProperties)) {
+        const tokens = getActiveBarStyleCellTextTokens(range.CellTextProperties);
+        items.push(`Cell Text: ${formatRangeBarCellTextSummary(tokens)}`);
+        const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(range.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
+        }
+    }
+    else if (options.includeEmptyCellText) {
+        items.push('Cell Text: None');
+    }
+    if (range.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatRangeBarToolTipSummary(range.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    return items;
+};
+export const getStyledColumnRangeBarDisplayViewValues = (data) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return [];
+    }
+    return buildStyledColumnRangeBarDisplaySummaryStrings(range, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
 /** 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 })] }));
+    const tagItems = getStyledColumnRangeBarRangeViewValues(data);
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
 };
+export const StyledColumnRangeBarRangeView = ({ data }) => renderStyledColumnRangeBarRangeStepSummary(data);
 /** 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"));
+    const items = buildStyledColumnRangeBarDisplaySummaryStrings(range, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return _jsx(Tag, { children: "No Display Defined" });
     }
-    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 })] }));
+    return renderSummaryStringTags(items);
 };
 /**
  * Combined summary for the Styled Columns list row (preview + key facts).
@@ -88,10 +234,7 @@ export const renderStyledColumnRangeBarSummary = (data) => {
     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" })] }))] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [renderStyledColumnRangeBarRangeStepSummary(data), renderStyledColumnRangeBarDisplayStepSummary(data)] }));
 };
 // ---------------------------------------------------------------------------
 // Wizard validity check (also used by the wizard step config)
@@ -128,19 +271,25 @@ const MARKER_SHAPES = [
 ];
 export const StyledColumnWizardRangeBarSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    const minMaxRangeValues = React.useMemo(() => {
+    const column = React.useMemo(() => {
         const columnId = data.ColumnId;
-        if (!columnId)
+        if (!columnId) {
+            return undefined;
+        }
+        return api.columnApi.getColumnWithColumnId(columnId);
+    }, [data.ColumnId, api]);
+    const minMaxRangeValues = React.useMemo(() => {
+        if (!column) {
             return null;
-        const column = api.columnApi.getColumnWithColumnId(columnId);
+        }
         return {
             min: api.styledColumnApi.internalApi.getMinValueForNumericColumn(column),
             max: api.styledColumnApi.internalApi.getMaxValueForNumericColumn(column),
         };
-    }, [data]);
+    }, [column, api]);
     const scope = { ColumnIds: [data.ColumnId] };
     const range = data.RangeBarStyle ?? {};
-    const disabled = !data.ColumnId;
+    const disabled = !data.ColumnId || !column;
     // -------------------------------------------------------------------------
     // Updaters
     // -------------------------------------------------------------------------
@@ -175,48 +324,81 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             },
         });
     }, [data, range]);
+    const updateBackColor = (color) => {
+        if (color) {
+            update({ BackColor: color });
+            return;
+        }
+        const next = { ...range };
+        delete next.BackColor;
+        props.onChange({ ...data, RangeBarStyle: next });
+    };
+    const updateTrackProperties = (patch) => {
+        const merged = {
+            ...range.Track,
+            ...patch,
+        };
+        const isEmpty = merged.Color == undefined && merged.Height == undefined;
+        update({ Track: isEmpty ? undefined : merged });
+    };
+    const updateOutOfRangeProperties = (patch) => {
+        const merged = {
+            ...range.OutOfRange,
+            ...patch,
+        };
+        // Default mode is `Clamp` with no override colour; drop the wrapper in
+        // that case so empty state serialises cleanly.
+        const isEmpty = (merged.Mode == undefined || merged.Mode === 'Clamp') && merged.Color == undefined;
+        update({ OutOfRange: isEmpty ? undefined : merged });
+    };
+    const updateReferenceProperties = (patch) => {
+        const merged = {
+            Value: range.Reference?.Value,
+            ...range.Reference,
+            ...patch,
+        };
+        update({ Reference: merged });
+    };
     // -- Bound editors ---------------------------------------------------------
+    // Resolved values for the column-wide aggregate bound modes, shown read-only
+    // in the bound editor so the user sees the underlying number.
+    const resolvedBoundValues = {
+        'Col-Min': minMaxRangeValues?.min,
+        'Col-Max': minMaxRangeValues?.max,
+        'Col-Avg': column
+            ? api.styledColumnApi.internalApi.getAvgValueForNumericColumn(column)
+            : undefined,
+        'Col-Median': column
+            ? api.styledColumnApi.internalApi.getMedianValueForNumericColumn(column)
+            : undefined,
+    };
     /**
-     * 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).
+     * Renders one of `Min` / `Max` / `Reference` as a single joined row (type
+     * selector + contextual editor). 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 setBound = (next) => {
+            if (opts.field === 'Reference') {
+                if (next === undefined) {
+                    const cleaned = { ...range };
+                    delete cleaned.Reference;
+                    props.onChange({ ...data, RangeBarStyle: cleaned });
+                    return;
+                }
+                updateReferenceProperties({ Value: next });
+                return;
+            }
+            if (next === undefined) {
                 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" }) }) }))] }));
+        const value = opts.field === 'Reference' ? range.Reference?.Value : range[opts.field];
+        return (_jsx(FormRow, { label: `${opts.label}:`, children: _jsx(RangeBarBoundInput, { api: api, value: value, optional: opts.optional, fallbackNumber: opts.fallbackNumber, excludeColumnId: data.ColumnId, resolved: resolvedBoundValues, disabled: disabled, onChange: setBound }) }));
     };
     // -- Marker editors --------------------------------------------------------
     const updateValueMarker = (patch) => {
@@ -229,10 +411,10 @@ export const StyledColumnWizardRangeBarSection = (props) => {
         });
     };
     const updateReferenceMarker = (patch) => {
-        update({
-            ReferenceMarker: {
+        updateReferenceProperties({
+            Marker: {
                 Shape: 'Line',
-                ...range.ReferenceMarker,
+                ...range.Reference?.Marker,
                 ...patch,
             },
         });
@@ -244,18 +426,20 @@ export const StyledColumnWizardRangeBarSection = (props) => {
         Color: range.Marker?.Color ?? '',
         Size: range.Marker?.Size ?? (range.Marker?.Shape === 'Line' ? 2 : 10),
     };
+    const referenceMarkerCfg = range.Reference?.Marker;
     const referenceMarker = {
-        Shape: range.ReferenceMarker?.Shape ?? 'Line',
-        Color: range.ReferenceMarker?.Color ?? '',
-        Size: range.ReferenceMarker?.Size ?? (range.ReferenceMarker?.Shape === 'Line' ? 2 : 8),
+        Shape: referenceMarkerCfg?.Shape ?? 'Line',
+        Color: referenceMarkerCfg?.Color ?? '',
+        Size: referenceMarkerCfg?.Size ?? (referenceMarkerCfg?.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 toggleCellText = (token, show) => {
+        update(toggleBarStyleCellTextToken(range.CellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: patchBarStyleCellTextPlacement(range.CellTextProperties, token, patch),
+        });
     };
     const toggleToolTipText = (token, checked) => {
         const current = range.ToolTipText ?? [];
@@ -264,19 +448,18 @@ export const StyledColumnWizardRangeBarSection = (props) => {
             : 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." }) }));
+    if (!data.ColumnId || !column) {
+        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
+                    ? 'You need to select a column before styling.'
+                    : `Column "${data.ColumnId}" was not found in the grid.` }) }));
     }
-    const hasReference = range.Reference != undefined;
-    const outOfRangeMode = range.OutOfRangeMode ?? 'Clamp';
+    const hasReference = range.Reference?.Value != undefined;
+    const outOfRangeMode = range.OutOfRange?.Mode ?? '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({
+    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 each row's track scale. A bound can be a fixed number, another column's value (read per row), or a column-wide aggregate (min, max, average, median). Reference is an optional second marker." })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [renderBoundEditor({
                                             label: 'Min',
                                             field: 'Min',
                                             optional: false,
@@ -291,20 +474,18 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                             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
+                                        })] }) })] }), _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: [
+                                                    ] }) }) }), 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: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.Track?.Color, defaultColor: getGraySwatchColor(), onChange: (c) => updateTrackProperties({ Color: 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.Track?.Height ?? '', onChange: (e) => updateTrackProperties({
+                                                        Height: e.target.value === '' ? undefined : Number(e.target.value),
+                                                    }), placeholder: "4" }) }) }), _jsx(FormRow, { label: `Back ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.BackColor ?? undefined, defaultColor: getGraySwatchColor(), onChange: (c) => updateBackColor(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) => updateOutOfRangeProperties({
+                                                        Mode: 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" })] })] }) })] })] }))] }));
+                                                    ] }) }) }), outOfRangeMode === 'Clamp' && (_jsx(FormRow, { label: `Out-of-range ${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: _jsx(OptionalColorPicker, { disabled: disabled, api: api, value: range.OutOfRange?.Color, defaultColor: "crimson", onChange: (c) => updateOutOfRangeProperties({ Color: 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: [_jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: range.CellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }), _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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const getStyledColumnRatingStyleViewValues: (data: StyledColumn) => string[];
 export declare const renderStyledColumnRatingSummary: (data: StyledColumn) => React.JSX.Element;
 export declare const isValidRatingStyle: (data: StyledColumn) => true | string;
 export interface StyledColumnWizardRatingSectionProps {