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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardRangeBarSection = exports.isValidRangeBarBounds = exports.renderStyledColumnRangeBarSummary = exports.renderStyledColumnRangeBarDisplayStepSummary = exports.renderStyledColumnRangeBarRangeStepSummary = void 0;
+exports.StyledColumnWizardRangeBarSection = exports.isValidRangeBarBounds = exports.renderStyledColumnRangeBarSummary = exports.renderStyledColumnRangeBarDisplayStepSummary = exports.StyledColumnRangeBarRangeView = exports.renderStyledColumnRangeBarRangeStepSummary = exports.getStyledColumnRangeBarDisplayViewValues = exports.getStyledColumnRangeBarRangeViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -18,7 +18,8 @@ const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Ex
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Flex_1 = require("../../../components/Flex");
 const NewSelect_1 = require("../../../components/NewSelect");
-const StyledColumnChartListPreviews_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnChartListPreviews");
+const RangeBarRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection/Components/RangeBarRangesSummaryPreview");
+const StyledColumnRangeBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview");
 const Card_1 = require("../../../components/Card");
 const RANGE_STYLE_FORM_SIZES = ['200px', '1fr'];
 const BOUND_MODE_LABELS = {
@@ -49,41 +50,125 @@ 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(' + ') ?? '';
+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;
+};
+exports.getStyledColumnRangeBarRangeViewValues = getStyledColumnRangeBarRangeViewValues;
+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;
+};
+const getStyledColumnRangeBarDisplayViewValues = (data) => {
+    const range = data.RangeBarStyle;
+    if (!range) {
+        return [];
+    }
+    return buildStyledColumnRangeBarDisplaySummaryStrings(range, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
+exports.getStyledColumnRangeBarDisplayViewValues = getStyledColumnRangeBarDisplayViewValues;
 /** Summary line for the Range wizard step (bounds + bands only). */
 const renderStyledColumnRangeBarRangeStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const bandCount = range.CellRanges?.length ?? 0;
-    const hasReference = range.Reference != undefined;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Min: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Min) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Max: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Max) })] }), hasReference && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Ref: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Reference) })] })), bandCount > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }))] }), (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range })] }));
+    const tagItems = (0, exports.getStyledColumnRangeBarRangeViewValues)(data);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }), (0, jsx_runtime_1.jsx)(RangeBarRangesSummaryPreview_1.RangeBarRangesSummaryPreview, { rangeStyle: range })] }));
 };
 exports.renderStyledColumnRangeBarRangeStepSummary = renderStyledColumnRangeBarRangeStepSummary;
+const StyledColumnRangeBarRangeView = ({ data }) => (0, exports.renderStyledColumnRangeBarRangeStepSummary)(data);
+exports.StyledColumnRangeBarRangeView = StyledColumnRangeBarRangeView;
 /** Summary for the Display wizard step (markers, track, text). */
 const renderStyledColumnRangeBarDisplayStepSummary = (data) => {
     const range = data.RangeBarStyle;
     if (!range) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const isVertical = range.Orientation === 'Vertical';
-    const mode = range.OutOfRangeMode ?? 'Clamp';
-    const parts = [];
-    parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Value marker: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: range.Marker?.Shape ?? 'Diamond' })] }, "vm"));
-    if (range.Reference != undefined) {
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Ref marker: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: range.ReferenceMarker?.Shape ?? 'Line' })] }, "rm"));
-    }
-    if (isVertical) {
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "vertical" })] }, "v"));
+    const items = buildStyledColumnRangeBarDisplaySummaryStrings(range, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Display Defined" });
     }
-    parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Out: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: mode })] }, "orm"));
-    if (range.CellText?.length) {
-        parts.push((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Text: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: range.CellText.join(', ') })] }, "ct"));
-    }
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: parts }), (0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range })] }));
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
 };
 exports.renderStyledColumnRangeBarDisplayStepSummary = renderStyledColumnRangeBarDisplayStepSummary;
 /**
@@ -94,10 +179,7 @@ const renderStyledColumnRangeBarSummary = (data) => {
     if (!range) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const bandCount = range.CellRanges?.length ?? 0;
-    const isVertical = range.Orientation === 'Vertical';
-    const hasReference = range.Reference != undefined;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, jsx_runtime_1.jsx)(StyledColumnChartListPreviews_1.StyledColumnRangeBarListPreview, { range: range }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Min: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Min) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Max: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Max) })] }), hasReference && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Ref: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: summarizeBound(range.Reference) })] })), bandCount > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", bandCount, " ", bandCount === 1 ? 'band' : 'bands'] })), isVertical && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "vertical" })] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [(0, exports.renderStyledColumnRangeBarRangeStepSummary)(data), (0, exports.renderStyledColumnRangeBarDisplayStepSummary)(data)] }));
 };
 exports.renderStyledColumnRangeBarSummary = renderStyledColumnRangeBarSummary;
 // ---------------------------------------------------------------------------
@@ -136,19 +218,25 @@ const MARKER_SHAPES = [
 ];
 const StyledColumnWizardRangeBarSection = (props) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.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
     // -------------------------------------------------------------------------
@@ -278,8 +366,10 @@ const StyledColumnWizardRangeBarSection = (props) => {
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
-    if (!data.ColumnId) {
-        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { className: "twa:mt-2", children: "You need to select a column before styling." }) }));
+    if (!data.ColumnId || !column) {
+        return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (0, jsx_runtime_1.jsx)(ErrorBox_1.default, { 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';
@@ -299,7 +389,7 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                             field: 'Reference',
                                             optional: true,
                                             fallbackNumber: minMaxRangeValues?.max ?? 0,
-                                        })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Ranges" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", (0, jsx_runtime_1.jsx)("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(RangesComponent_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Value Marker" }), (0, jsx_runtime_1.jsx)(Flex_1.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." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Shape:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Size:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Reference Marker" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: hasReference
+                                        })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Ranges" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-700px]", children: ["Optional coloured segments drawn ", (0, jsx_runtime_1.jsx)("em", { children: "behind" }), " track to form qualitative scale;leave empty for a plain track"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(RangesComponent_1.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 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Value Marker" }), (0, jsx_runtime_1.jsx)(Flex_1.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." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Shape:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: valueMarker.Shape, onValueChange: (s) => updateValueMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: valueMarker.Color || undefined, onChange: (c) => updateValueMarker({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Size:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: valueMarker.Size, onChange: (e) => updateValueMarker({ Size: Number(e.target.value) }) }) }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Reference Marker" }), (0, jsx_runtime_1.jsx)(Flex_1.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.' })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: hasReference ? ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Shape:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: referenceMarker.Shape, onValueChange: (s) => updateReferenceMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: `${api.internalApi.getCorrectEnglishVariant('Colour')}:`, children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: referenceMarker.Color || undefined, onChange: (c) => updateReferenceMarker({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Size:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[100px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", min: 1, value: referenceMarker.Size, onChange: (e) => updateReferenceMarker({ Size: Number(e.target.value) }) }) }) })] })) : ((0, jsx_runtime_1.jsx)(Flex_1.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)." })) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Track" }), (0, jsx_runtime_1.jsx)(Flex_1.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." })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...RANGE_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Orientation:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: range.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                         { value: 'Horizontal', label: 'Horizontal' },
@@ -314,6 +404,6 @@ const StyledColumnWizardRangeBarSection = (props) => {
                                                     { label: 'Above Bar', onClick: () => handleCellTextPositionChange('Above') },
                                                     { label: 'Below Bar', onClick: () => handleCellTextPositionChange('Below') },
                                                     { label: 'Merged', onClick: () => handleCellTextPositionChange('Merged') },
-                                                ], children: range.CellTextPosition ?? 'Below' }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] })] }))] }));
+                                                ], children: range.CellTextPosition ?? 'Below' }) }), (0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Tooltip Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: range.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: range.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] })] }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: data })] }))] }));
 };
 exports.StyledColumnWizardRangeBarSection = StyledColumnWizardRangeBarSection;

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,9 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardRatingSection = exports.isValidRatingStyle = exports.renderStyledColumnRatingSummary = void 0;
+exports.StyledColumnWizardRatingSection = exports.isValidRatingStyle = exports.renderStyledColumnRatingSummary = exports.getStyledColumnRatingStyleViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -15,7 +14,7 @@ const NewSelect_1 = require("../../../components/NewSelect");
 const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
-const StyleHelper_1 = require("../../../Utilities/Helpers/StyleHelper");
+const StyledColumnRatingPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
 const ICON_CHOICES = [
     { value: 'Star', label: 'Star' },
@@ -23,13 +22,49 @@ 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 ?? StyledColumnRatingPreview_1.DEFAULT_RATING_MAX}`,
+        `Icon: ${rating.Icon ?? StyledColumnRatingPreview_1.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');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellBoxStyleSummaryItems)(rating.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+const getStyledColumnRatingStyleViewValues = (data) => {
+    const rating = data.RatingStyle;
+    if (!rating) {
+        return [];
+    }
+    return buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: false,
+    });
+};
+exports.getStyledColumnRatingStyleViewValues = getStyledColumnRatingStyleViewValues;
 /**
  * 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
@@ -53,17 +88,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)
@@ -82,63 +110,17 @@ 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 || !(0, StyleHelper_1.hasCellBoxStyle)(cell)) {
-        return {};
-    }
-    return (0, StyleHelper_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { d: d, fill: emptyColor }), fill > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("clipPath", { id: clipId, children: (0, jsx_runtime_1.jsx)("rect", { x: 0, y: 0, width: 24 * fill, height: 24 }) }) }), (0, jsx_runtime_1.jsx)("path", { d: d, fill: filledColor, clipPath: `url(#${clipId})` })] }))] }, i));
-            }), rating.ShowValue && ((0, jsx_runtime_1.jsx)("span", { style: { marginLeft: 6, fontVariantNumeric: 'tabular-nums' }, children: previewValue }))] }));
-};
-// ---------------------------------------------------------------------------
-// Wizard summary
-// ---------------------------------------------------------------------------
 const renderStyledColumnRatingSummary = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const max = rating.Max ?? DEFAULT_MAX;
-    const icon = rating.Icon ?? DEFAULT_ICON;
-    const cellTags = (0, StyledColumnSliceStyleEditors_1.renderCellStyleSummaryTags)(rating.Cell);
-    const toolTipTokens = rating.ToolTipText ?? [];
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:flex-wrap", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:inline-flex twa:items-center twa:gap-2 twa:box-border", style: getRatingCellChromeCss(rating.Cell), children: (0, jsx_runtime_1.jsx)(RatingPreview, { rating: rating }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Out of ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: max })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Icon: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: icon })] }), toolTipTokens.length > 0 && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tooltip: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: toolTipTokens.join(', ') })] })), cellTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Cell: ", cellTags] })] }));
+    const items = buildStyledColumnRatingStyleSummaryStrings(rating, {
+        includeEmptyTooltip: true,
+    });
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
 };
 exports.renderStyledColumnRatingSummary = renderStyledColumnRatingSummary;
-// ---------------------------------------------------------------------------
-// Wizard validation
-// ---------------------------------------------------------------------------
 const isValidRatingStyle = (data) => {
     const rating = data.RatingStyle;
     if (!rating) {
@@ -173,8 +155,7 @@ const StyledColumnWizardRatingSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const previewCellChrome = React.useMemo(() => getRatingCellChromeCss(rating.Cell), [rating.Cell]);
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:mb-3 twa:p-3 twa:rounded-standard twa:border twa:border-border twa:gap-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-3 twa:font-medium", children: "Preview:" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:inline-flex twa:items-center twa:box-border", style: previewCellChrome, children: (0, jsx_runtime_1.jsx)(RatingPreview, { rating: rating }) }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-2 twa:opacity-70", children: ["(sample value ", (rating.Max ?? DEFAULT_MAX) * 0.7, ")"] })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Icon" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Max:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(DEFAULT_MAX), style: { width: 80 }, onChange: (event) => {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Icon" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Max:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 1, step: 1, value: rating.Max ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_MAX), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Max: undefined });
@@ -184,7 +165,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Max: Number.isFinite(parsed) && parsed >= 1 ? Math.floor(parsed) : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: rating.Icon ?? DEFAULT_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Filled Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Empty Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Size (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(DEFAULT_SIZE), style: { width: 80 }, onChange: (event) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.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)" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: rating.Icon ?? StyledColumnRatingPreview_1.DEFAULT_RATING_ICON, onValueChange: (v) => update({ Icon: v }), items: ICON_CHOICES }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Filled Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedFilledColor(rating), onChange: (c) => update({ FilledColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Empty Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: getDisplayedEmptyColor(rating), onChange: (c) => update({ EmptyColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Size (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 4, step: 1, value: rating.Size ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_SIZE), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Size: undefined });
@@ -194,7 +175,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Size: Number.isFinite(parsed) && parsed >= 4 ? parsed : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(DEFAULT_GAP), style: { width: 80 }, onChange: (event) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Square pixel size of each icon" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Icon Gap (px):", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsx)(Input_1.default, { type: "number", min: 0, step: 1, value: rating.Gap ?? '', placeholder: String(StyledColumnRatingPreview_1.DEFAULT_RATING_GAP), style: { width: 80 }, onChange: (event) => {
                                                     const raw = event.target.value;
                                                     if (raw === '' || raw == null) {
                                                         update({ Gap: undefined });
@@ -204,7 +185,7 @@ const StyledColumnWizardRatingSection = (props) => {
                                                     update({
                                                         Gap: Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined,
                                                     });
-                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Allow Half Icons:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.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)" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Text" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Value:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
+                                                } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:min-w-0 twa:shrink", children: "Pixel space between adjacent icons" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Allow Half Icons:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.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)" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Text" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Value:", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-2", checked: rating.ShowValue ?? false, onChange: (checked) => update({ ShowValue: checked }), children: "Display the numeric value beside the icons" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Tooltip:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1 twa:ml-2", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('CellValue') ?? false, onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: rating.ToolTipText?.includes('PercentageValue') ?? false, onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percentage Value (value \u00F7 Max)" })] }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional Cell Style properties overrides Format Column properties)" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: rating.Cell, onChange: (next) => {
                                 if (next) {
                                     update({ Cell: next });
                                 }
@@ -213,6 +194,6 @@ const StyledColumnWizardRatingSection = (props) => {
                                     delete cleaned.Cell;
                                     props.onChange({ ...data, RatingStyle: cleaned });
                                 }
-                            } }) })] })] }));
+                            } }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreviewCard, { data: data })] }));
 };
 exports.StyledColumnWizardRatingSection = StyledColumnWizardRatingSection;

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,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulletRangesSummaryPreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
+const StyleHelper_1 = require("../../../../../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)]';
+const BulletRangesSummaryPreview = ({ bulletStyle }) => {
+    const ranges = bulletStyle.CellRanges ?? [];
+    if (!ranges.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No bands defined" });
+    }
+    let postfix = '';
+    if (bulletStyle.RangeValueType === 'Percentage') {
+        postfix = '%';
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((range, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [range.Min, postfix, " \u2192 ", range.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: stripClassName, style: { background: (0, StyleHelper_1.getVariableColor)(range.Color) } })] }, i))) }));
+};
+exports.BulletRangesSummaryPreview = BulletRangesSummaryPreview;

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

@@ -6,6 +6,7 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const tinycolor2_1 = tslib_1.__importDefault(require("tinycolor2"));
 const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
 const StyleHelper_1 = require("../../../../../Utilities/Helpers/StyleHelper");
 const StyledColumnGradientHelper_1 = require("../../../../../Utilities/Helpers/StyledColumnGradientHelper");
 function clamp01(n) {
@@ -24,16 +25,9 @@ function gradientRangeStripCss(color, reverseGradient, minAlpha, maxAlpha) {
     const c2 = (0, tinycolor2_1.default)(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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: ["Col-Min", postfix, " \u2192 0", postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${stripClassName} twa:w-[200px]`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Col-Min", postfix, " \u2192 0", postfix] }), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["0", postfix, " \u2192 Col-Max", postfix] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${stripClassName} twa:w-[200px]`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
                             background: gradientRangeStripCss(negativeColor, true, minA, maxA),
                         } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
                             background: gradientRangeStripCss(positiveColor, false, minA, maxA),
@@ -52,15 +46,15 @@ const GradientRangesSummaryPreview = (props) => {
         return zeroCentredSplitPreview(props.zeroCentred.NegativeColor, props.zeroCentred.PositiveColor, postfix, minA, maxA);
     }
     const ranges = props.ranges ?? [];
-    if (isDivergingZeroPair(ranges)) {
+    if ((0, StyledColumnGradientHelper_1.isDivergingZeroCellRanges)(ranges)) {
         const [r0, r1] = ranges;
-        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-50", children: "|" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${stripClassName} twa:w-[200px]`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
+        return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [r0.Min, postfix, " \u2192 ", r0.Max, postfix] }), (0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [r1.Min, postfix, " \u2192 ", r1.Max, postfix] })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { className: `${stripClassName} twa:w-[200px]`, children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
                                 background: gradientRangeStripCss(r0.Color, !!r0.ReverseGradient, minA, maxA),
                             } }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:flex-1", style: {
                                 background: gradientRangeStripCss(r1.Color, !!r1.ReverseGradient, minA, maxA),
                             } })] })] }));
     }
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm twa:min-w-[120px]", children: [r.Min, postfix, " to ", r.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: stripClassName, style: {
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: ranges.map((r, i) => ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: [r.Min, postfix, " \u2192 ", r.Max, postfix] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: stripClassName, style: {
                         background: gradientRangeStripCss(r.Color, !!r.ReverseGradient, minA, maxA),
                     } })] }, i))) }));
 };
@@ -71,7 +65,7 @@ const GradientColumnComparisonSummaryPreview = (props) => {
     const fmt = (v) => isNaN(Number(v))
         ? `[${props.api.columnApi.getFriendlyNameForColumnId(String(v))}]`
         : v;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-sm", children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max:", ' ', fmt(props.columnComparison.MaxValue)] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${stripClassName} twa:w-[200px]`, style: {
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Min: ", fmt(props.columnComparison.MinValue), " \u2014 Max: ", fmt(props.columnComparison.MaxValue)] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `${stripClassName} twa:w-[200px]`, style: {
                     background: gradientRangeStripCss(props.columnComparison.Color, false, minA, maxA),
                 } })] }));
 };

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

@@ -5,13 +5,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const AdaptableContext_1 = require("../../../../AdaptableContext");
 const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
 const Flex_1 = require("../../../../../components/Flex");
+const Tag_1 = require("../../../../../components/Tag");
 const PercentBarColumnComparisonPreview = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const columnComparison = props.percentBarStyle.ColumnComparison;
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:mr-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.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, ' '] }), (0, jsx_runtime_1.jsx)(PercentBarStylePreview_1.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 ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2", children: [(0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Min: ", fmt(columnComparison.MinValue), " \u2014 Max: ", fmt(columnComparison.MaxValue)] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[200px]", children: (0, jsx_runtime_1.jsx)(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: columnComparison.Color }) })] }));
 };
 exports.PercentBarColumnComparisonPreview = PercentBarColumnComparisonPreview;