@adaptabletools/adaptable 23.0.0-canary.3 → 23.0.0-canary.5

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

@@ -14,7 +14,8 @@ 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 { StyledColumnRangeBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
 import { Card } from '../../../components/Card';
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
@@ -45,40 +46,121 @@ const summarizeBound = (bound) => {
     }
     return bound;
 };
-// ---------------------------------------------------------------------------
-// Summary helper (Wizard "Style" step header)
-// ---------------------------------------------------------------------------
+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 != undefined) {
+        items.push(`Reference: ${summarizeBound(range.Reference)}`);
+    }
+    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 referenceMarker = range.ReferenceMarker;
+    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 (range.Reference != 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 outOfRangeMode = range.OutOfRangeMode ?? 'Clamp';
+    if (outOfRangeMode !== 'Clamp') {
+        items.push(`Out of Range: ${outOfRangeMode}`);
+    }
+    if (range.OutOfRangeColor) {
+        items.push(`Out of Range Colour: ${range.OutOfRangeColor}`);
+    }
+    if (range.TrackColor) {
+        items.push(`Track Colour: ${range.TrackColor}`);
+    }
+    if (range.TrackHeight != null) {
+        items.push(`Track Height: ${range.TrackHeight}px`);
+    }
+    if (range.BackColor) {
+        items.push(`Back Colour: ${range.BackColor}`);
+    }
+    if (range.CellText?.length) {
+        items.push(`Cell Text: ${formatRangeBarCellTextSummary(range.CellText)}`);
+        items.push(`Cell Text Position: ${range.CellTextPosition ?? 'Below'}`);
+    }
+    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: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => (_jsx(Tag, { children: item }, item))) }), _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 (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };
 /**
  * Combined summary for the Styled Columns list row (preview + key facts).
@@ -88,10 +170,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 +207,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
     // -------------------------------------------------------------------------
@@ -270,8 +355,10 @@ export const StyledColumnWizardRangeBarSection = (props) => {
     // -------------------------------------------------------------------------
     // 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';
@@ -291,7 +378,7 @@ 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' },
@@ -306,5 +393,5 @@ export const StyledColumnWizardRangeBarSection = (props) => {
                                                     { 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" })] })] }) })] })] }))] }));
+                                                ], 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" })] })] }) })] }), _jsx(StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
 };

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 {

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

@@ -1,5 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckBox } from '../../../components/CheckBox';
 import ErrorBox from '../../../components/ErrorBox';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
@@ -9,9 +8,9 @@ import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableW
 import { Box, Flex } from '../../../components/Flex';
 import { SingleSelect } from '../../../components/NewSelect';
 import Input from '../../../components/Input';
-import { renderCellStyleSummaryTags, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
-import { convertAdaptableStyleToCSS, hasCellBoxStyle, } from '../../../Utilities/Helpers/StyleHelper';
+import { DEFAULT_RATING_GAP, DEFAULT_RATING_ICON, DEFAULT_RATING_MAX, DEFAULT_RATING_SIZE, StyledColumnRatingPreviewCard, } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
     { value: 'Star', label: 'Star' },
@@ -19,13 +18,48 @@ const ICON_CHOICES = [
     { 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)';
+const formatRatingToolTipSummary = (toolTipText) => toolTipText
+    ?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percentage Value'))
+    .join(' + ') ?? '';
+const buildStyledColumnRatingStyleSummaryStrings = (rating, options) => {
+    const items = [
+        `Max: ${rating.Max ?? DEFAULT_RATING_MAX}`,
+        `Icon: ${rating.Icon ?? DEFAULT_RATING_ICON}`,
+    ];
+    if (rating.FilledColor) {
+        items.push(`Filled Colour: ${rating.FilledColor}`);
+    }
+    if (rating.EmptyColor) {
+        items.push(`Empty Colour: ${rating.EmptyColor}`);
+    }
+    if (rating.Size != null) {
+        items.push(`Icon Size: ${rating.Size}px`);
+    }
+    if (rating.Gap != null) {
+        items.push(`Icon Gap: ${rating.Gap}px`);
+    }
+    items.push(`Allow Half: ${(rating.AllowHalf ?? true) ? 'Yes' : 'No'}`);
+    items.push(`Show Value: ${rating.ShowValue ? 'Yes' : 'No'}`);
+    if (rating.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatRatingToolTipSummary(rating.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    getCellBoxStyleSummaryItems(rating.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+export const getStyledColumnRatingStyleViewValues = (data) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return [];
+    }
+    return buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: false,
+    });
+};
 /**
  * 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
@@ -49,17 +83,10 @@ const resolveCssVar = (varName, fallbackHex) => {
  * 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.
+ * Best-effort preview colour for the wizard's `Empty Colour` picker.
  */
 const getDisplayedEmptyColor = (rating) => {
     if (rating.EmptyColor)
@@ -78,62 +105,16 @@ const getDisplayedEmptyColor = (rating) => {
     }
     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] })] }));
+    const items = buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: true,
+    });
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };
-// ---------------------------------------------------------------------------
-// Wizard validation
-// ---------------------------------------------------------------------------
 export const isValidRatingStyle = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
@@ -167,8 +148,7 @@ export const StyledColumnWizardRatingSection = (props) => {
             : 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) => {
+    return (_jsxs(Box, { children: [_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_RATING_MAX), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Max: undefined });
@@ -178,7 +158,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     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) => {
+                                                } }), _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_RATING_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_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Size: undefined });
@@ -188,7 +168,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     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) => {
+                                                } }), _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_RATING_GAP), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Gap: undefined });
@@ -198,7 +178,7 @@ export const StyledColumnWizardRatingSection = (props) => {
                                                     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) => {
+                                                } }), _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, className: "twa:mb-3", 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 });
                                 }
@@ -207,5 +187,5 @@ export const StyledColumnWizardRatingSection = (props) => {
                                     delete cleaned.Cell;
                                     props.onChange({ ...data, RatingStyle: cleaned });
                                 }
-                            } }) })] })] }));
+                            } }) })] }), _jsx(StyledColumnRatingPreviewCard, { data: data })] }));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BulletChartStyle } from '../../../../../AdaptableState/StyledColumnState';
+export declare const BulletRangesSummaryPreview: React.FunctionComponent<{
+    bulletStyle: BulletChartStyle;
+}>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
+import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
+const stripClassName = 'twa:h-6 twa:w-[128px] twa:rounded twa:overflow-hidden twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
+export const BulletRangesSummaryPreview = ({ bulletStyle }) => {
+    const ranges = bulletStyle.CellRanges ?? [];
+    if (!ranges.length) {
+        return _jsx(Tag, { children: "No bands defined" });
+    }
+    let postfix = '';
+    if (bulletStyle.RangeValueType === 'Percentage') {
+        postfix = '%';
+    }
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((range, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), _jsx(Box, { className: stripClassName, style: { background: getVariableColor(range.Color) } })] }, i))) }));
+};

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/GradientSummaryPreview.js

@@ -1,8 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import tinycolor from 'tinycolor2';
 import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
 import { getVariableColor } from '../../../../../Utilities/Helpers/StyleHelper';
-import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
+import { DEFAULT_GRADIENT_MAX_ALPHA, DEFAULT_GRADIENT_MIN_ALPHA, isDivergingZeroCellRanges, } from '../../../../../Utilities/Helpers/StyledColumnGradientHelper';
 function clamp01(n) {
     if (Number.isNaN(n)) {
         return 0;
@@ -19,16 +20,9 @@ export function gradientRangeStripCss(color, reverseGradient, minAlpha, maxAlpha
     const c2 = tinycolor(prepared).setAlpha(rightA).toRgbString();
     return `linear-gradient(to right, ${c1}, ${c2})`;
 }
-function isDivergingZeroPair(ranges) {
-    if (!ranges || ranges.length !== 2) {
-        return false;
-    }
-    const [a, b] = ranges;
-    return a.Max === 0 && b.Min === 0;
-}
 const stripClassName = 'twa:h-6 twa:w-[128px] twa:rounded twa:overflow-hidden twa:border twa:border-[color-mix(in_srgb,var(--ab-color-foreground)_15%,transparent)]';
 function zeroCentredSplitPreview(negativeColor, positiveColor, postfix, minA, maxA) {
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: ["Col-Min", postfix, " \u2192 0", postfix] }), _jsx(Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), _jsxs(Box, { className: "twa:text-sm", children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: ["Col-Min", postfix, " \u2192 0", postfix] }), _jsxs(Tag, { children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
                             background: gradientRangeStripCss(negativeColor, true, minA, maxA),
                         } }), _jsx(Box, { className: "twa:flex-1", style: {
                             background: gradientRangeStripCss(positiveColor, false, minA, maxA),
@@ -47,15 +41,15 @@ export const GradientRangesSummaryPreview = (props) => {
         return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
     }
     const ranges = props.ranges ?? [];
-    if (isDivergingZeroPair(ranges)) {
+    if (isDivergingZeroCellRanges(ranges)) {
         const [r0, r1] = ranges;
-        return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), _jsx(Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), _jsxs(Box, { className: "twa:text-sm", children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
+        return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), _jsxs(Tag, { children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), _jsxs(Flex, { className: `${stripClassName} twa:w-[200px]`, children: [_jsx(Box, { className: "twa:flex-1", style: {
                                 background: gradientRangeStripCss(r0.Color, !!r0.ReverseGradient, minA, maxA),
                             } }), _jsx(Box, { className: "twa:flex-1", style: {
                                 background: gradientRangeStripCss(r1.Color, !!r1.ReverseGradient, minA, maxA),
                             } })] })] }));
     }
-    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm twa:min-w-[120px]", children: [r.Min, postfix, " to ", r.Max, postfix] }), _jsx(Box, { className: stripClassName, style: {
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [r.Min, postfix, " \u2192 ", r.Max, postfix] }), _jsx(Box, { className: stripClassName, style: {
                         background: gradientRangeStripCss(r.Color, !!r.ReverseGradient, minA, maxA),
                     } })] }, i))) }));
 };
@@ -65,7 +59,7 @@ export const GradientColumnComparisonSummaryPreview = (props) => {
     const fmt = (v) => isNaN(Number(v))
         ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
         : v;
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Box, { className: "twa:text-sm", children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max:", ' ', fmt(props.columnComparison.MaxValue)] }), _jsx(Box, { className: `${stripClassName} twa:w-[200px]`, style: {
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Tag, { children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max: ", fmt(props.columnComparison.MaxValue)] }), _jsx(Box, { className: `${stripClassName} twa:w-[200px]`, style: {
                     background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
                 } })] }));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarColumnComparisonPreview.js

@@ -2,12 +2,12 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useAdaptable } from '../../../../AdaptableContext';
 import { PercentBarStylePreview } from './PercentBarStylePreview';
 import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
 export const PercentBarColumnComparisonPreview = (props) => {
     const { api } = useAdaptable();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    return (_jsxs(Flex, { alignItems: "center", className: "twa:mr-3", children: [_jsxs(Box, { className: "twa:basis-[120px] twa:mr-3", children: [isNaN(Number(columnComparison.MinValue))
-                        ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
-                        : columnComparison.MinValue, ' ', "to", ' ', isNaN(Number(columnComparison.MaxValue))
-                        ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
-                        : columnComparison.MaxValue, ' '] }), _jsx(PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })] }));
+    const fmt = (v) => isNaN(Number(v))
+        ? `[${api.columnApi.getFriendlyNameForColumnId(String(v))}]`
+        : v;
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2", children: [_jsxs(Tag, { children: ["Min: ", fmt(columnComparison.MinValue), " \u2014 Max: ", fmt(columnComparison.MaxValue)] }), _jsx(Box, { className: "twa:max-w-[200px]", children: _jsx(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: columnComparison.Color }) })] }));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarRangesPreview.js

@@ -1,10 +1,11 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { PercentBarStylePreview } from './PercentBarStylePreview';
-import { Flex } from '../../../../../components/Flex';
+import { Box, Flex } from '../../../../../components/Flex';
+import { Tag } from '../../../../../components/Tag';
 export const PercentBarPreview = (props) => {
     let postfix = '';
     if (props.percentBarStyle.RangeValueType === 'Percentage') {
         postfix = '%';
     }
-    return (_jsx(_Fragment, { children: props.percentBarStyle.CellRanges.map((range, i) => (_jsxs(Flex, { alignItems: "stretch", className: "twa:mr-3 twa:mb-2", children: [_jsxs(Flex, { className: "twa:basis-[120px] twa:mr-3", alignItems: "center", children: [range.Min, postfix, " to ", range.Max, postfix] }), _jsx(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })] }, i))) }));
+    return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-2", children: props.percentBarStyle.CellRanges.map((range, i) => (_jsxs(Flex, { alignItems: "stretch", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), _jsx(Box, { className: "twa:flex-1 twa:min-w-[120px]", children: _jsx(PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color }) })] }, i))) }));
 };

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarStylePreview.d.ts

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { CellTextOptions } from '../../../../../types';
+/**
+ * Compact range-colour strip for Percent Bar range summaries.
+ * Cell text / origin / font are shown in `StyledColumnPercentBarPreview`.
+ */
 export declare const PercentBarStylePreview: React.FunctionComponent<{
-    backgroundColor: string;
+    backgroundColor?: string | null;
     barBackgroundColor?: string;
-    cellText?: CellTextOptions;
-    toolTipText?: CellTextOptions;
 }>;