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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardBulletSection = exports.renderStyledColumnBulletSummary = exports.renderStyledColumnBulletStyleSummary = exports.renderStyledColumnBulletRangesSummary = void 0;
+exports.StyledColumnWizardBulletSection = exports.renderStyledColumnBulletSummary = exports.renderStyledColumnBulletStyleSummary = exports.StyledColumnBulletRangesView = exports.renderStyledColumnBulletRangesSummary = exports.getStyledColumnBulletStyleViewValues = exports.getStyledColumnBulletRangesViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -13,55 +13,152 @@ const RangesComponent_1 = require("../../Components/RangesComponent");
 const ColumnSelector_1 = require("../../Components/Selectors/ColumnSelector");
 const UIHelper_1 = require("../../UIHelper");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
-const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
 const Flex_1 = require("../../../components/Flex");
-const StyledColumnChartListPreviews_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnChartListPreviews");
+const BulletRangesSummaryPreview_1 = require("./StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview");
 const NewSelect_1 = require("../../../components/NewSelect");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
+const BarStylesHelper_1 = require("../../../Utilities/Helpers/StyledColumns/BarStylesHelper");
+const BarStyleCellTextLayoutEditor_1 = require("./StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor");
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
-// ---------------------------------------------------------------------------
-// Summary helpers
-// ---------------------------------------------------------------------------
 const getTargetSummary = (target) => {
     if (target == undefined) {
         return null;
     }
     if (Array.isArray(target)) {
-        return `${target.length} target${target.length === 1 ? '' : 's'}`;
+        return target
+            .map((entry) => formatSingleBulletTargetSummary(entry))
+            .filter(Boolean)
+            .join(', ');
     }
+    return formatSingleBulletTargetSummary(target);
+};
+const formatSingleBulletTargetSummary = (target) => {
     if (typeof target === 'number') {
         return String(target);
     }
     if (typeof target === 'string') {
         return target;
     }
-    // object form
     const t = target;
     return t.Label ?? String(t.Value);
 };
+const formatBulletOriginLabel = (origin) => {
+    if (origin == undefined) {
+        return 'Auto';
+    }
+    if (typeof origin === 'number') {
+        return `Custom (${origin})`;
+    }
+    return origin;
+};
+const formatBulletCellTextSummary = (cellText) => cellText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const formatBulletToolTipSummary = (toolTipText) => toolTipText?.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ') ?? '';
+const getStyledColumnBulletRangesViewValues = (data) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return [];
+    }
+    const bandCount = bullet.CellRanges?.length ?? 0;
+    const items = [`Bands: ${bandCount}`];
+    if (bullet.RangeValueType != null) {
+        items.push(`Range Value Type: ${bullet.RangeValueType}`);
+    }
+    return items;
+};
+exports.getStyledColumnBulletRangesViewValues = getStyledColumnBulletRangesViewValues;
+const buildStyledColumnBulletStyleSummaryStrings = (bullet, options) => {
+    const items = [];
+    const targetProperties = bullet.TargetProperties;
+    const targetSummary = getTargetSummary(targetProperties?.Target);
+    if (targetSummary) {
+        items.push(`Target: ${targetSummary}`);
+    }
+    const marker = targetProperties?.Marker;
+    if (marker?.Shape && marker.Shape !== 'Line') {
+        items.push(`Target Marker Shape: ${marker.Shape}`);
+    }
+    if (marker?.Color) {
+        items.push(`Target Marker Colour: ${marker.Color}`);
+    }
+    if (marker?.Size != null) {
+        items.push(`Target Marker Size: ${marker.Size}px`);
+    }
+    if (bullet.Orientation === 'Vertical') {
+        items.push('Orientation: Vertical');
+    }
+    const barProperties = bullet.Bar;
+    if (barProperties?.Color) {
+        items.push(`Bar Colour: ${barProperties.Color}`);
+    }
+    if (barProperties?.Height != null) {
+        items.push(`${bullet.Orientation === 'Vertical' ? 'Bar Width' : 'Bar Height'}: ${barProperties.Height}px`);
+    }
+    items.push(`Origin: ${formatBulletOriginLabel(bullet.Origin)}`);
+    if (bullet.BackColor) {
+        items.push(`Back Colour: ${bullet.BackColor}`);
+    }
+    if ((0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(bullet.CellTextProperties)) {
+        const tokens = (0, BarStylesHelper_1.getActiveBarStyleCellTextTokens)(bullet.CellTextProperties);
+        items.push(`Cell Text: ${formatBulletCellTextSummary(tokens)}`);
+        const layoutSummary = (0, BarStylesHelper_1.formatBarStyleCellTextLayoutSummary)((0, BarStylesHelper_1.resolveBarStyleCellTextLayout)(bullet.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
+        }
+    }
+    else if (options.includeEmptyCellText) {
+        items.push('Cell Text: None');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellFontStyleSummaryItems)(bullet.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    if (bullet.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatBulletToolTipSummary(bullet.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    return items;
+};
+const getStyledColumnBulletStyleViewValues = (data) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return [];
+    }
+    return buildStyledColumnBulletStyleSummaryStrings(bullet, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
+exports.getStyledColumnBulletStyleViewValues = getStyledColumnBulletStyleViewValues;
 /** Wizard / list-view summary for the Ranges step (qualitative bands). */
 const renderStyledColumnBulletRangesSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
-        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "\u2014" });
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No bands defined" });
     }
-    const bandCount = bullet.CellRanges?.length ?? 0;
-    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.StyledColumnBulletChartListPreview, { bullet: bullet }), (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: [bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }), bullet.RangeValueType != null && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: bullet.RangeValueType })] }))] })] }));
+    const tagItems = (0, exports.getStyledColumnBulletRangesViewValues)(data);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [(0, SummaryColorTag_1.renderSummaryStringTags)(tagItems), (0, jsx_runtime_1.jsx)(BulletRangesSummaryPreview_1.BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
 };
 exports.renderStyledColumnBulletRangesSummary = renderStyledColumnBulletRangesSummary;
+const StyledColumnBulletRangesView = ({ data }) => (0, exports.renderStyledColumnBulletRangesSummary)(data);
+exports.StyledColumnBulletRangesView = StyledColumnBulletRangesView;
 /** Wizard / list-view summary for the Style step (target, bar, text, font). */
 const renderStyledColumnBulletStyleSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const targetSummary = getTargetSummary(bullet.Target);
-    const isVertical = bullet.Orientation === 'Vertical';
-    const fontTags = (0, StyledColumnSliceStyleEditors_1.renderFontStyleSummaryTags)(bullet.Font);
-    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.StyledColumnBulletChartListPreview, { bullet: bullet }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap", children: [targetSummary && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["target: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: targetSummary })] })), isVertical && ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-1", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "vertical" }) })), fontTags && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["Font: ", fontTags] }))] })] }));
+    const items = buildStyledColumnBulletStyleSummaryStrings(bullet, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Style Defined" });
+    }
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnBulletStyleSummary = renderStyledColumnBulletStyleSummary;
 /** Full combined summary (ranges + style); kept for callers that expect one block. */
@@ -70,11 +167,7 @@ const renderStyledColumnBulletSummary = (data) => {
     if (!bullet) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const bandCount = bullet.CellRanges?.length ?? 0;
-    const targetSummary = getTargetSummary(bullet.Target);
-    const isVertical = bullet.Orientation === 'Vertical';
-    const fontTags = (0, StyledColumnSliceStyleEditors_1.renderFontStyleSummaryTags)(bullet.Font);
-    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.StyledColumnBulletChartListPreview, { bullet: bullet }), (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: [bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }), targetSummary && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 target: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: targetSummary })] })), 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" })] })), fontTags && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mr-1", children: ["\u00B7 Font: ", fontTags] }))] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [(0, exports.renderStyledColumnBulletRangesSummary)(data), (0, exports.renderStyledColumnBulletStyleSummary)(data)] }));
 };
 exports.renderStyledColumnBulletSummary = renderStyledColumnBulletSummary;
 /**
@@ -115,20 +208,25 @@ const MARKER_SHAPES = [
 const StyledColumnWizardBulletSection = (props) => {
     const variant = props.variant ?? 'style';
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const minMaxRangeValues = React.useMemo(() => {
+    const column = React.useMemo(() => {
         const columnId = data.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 bullet = data.BulletChartStyle ?? {};
-    const disabled = !data.ColumnId;
+    const disabled = !data.ColumnId || !column;
     // -------------------------------------------------------------------------
     // Updaters
     // -------------------------------------------------------------------------
@@ -171,59 +269,70 @@ const StyledColumnWizardBulletSection = (props) => {
         });
     }, [data, bullet]);
     // -- Target ----------------------------------------------------------------
-    const currentMode = getSimpleTargetMode(bullet.Target);
+    const currentMode = getSimpleTargetMode(bullet.TargetProperties?.Target);
+    const updateTargetProperties = (patch) => {
+        const merged = {
+            ...bullet.TargetProperties,
+            ...patch,
+        };
+        // Strip the wrapper when nothing meaningful is left.
+        const isEmpty = merged.Target == undefined && merged.Marker == undefined;
+        update({ TargetProperties: isEmpty ? undefined : merged });
+    };
+    const setTarget = (target) => updateTargetProperties({ Target: target });
     const handleTargetModeChange = (mode) => {
         if (mode === 'None') {
-            const next = { ...bullet };
-            delete next.Target;
-            props.onChange({ ...data, BulletChartStyle: next });
+            setTarget(undefined);
             return;
         }
         if (mode === 'Col-Avg' || mode === 'Col-Median') {
-            update({ Target: mode });
+            setTarget(mode);
             return;
         }
         if (mode === 'Number') {
-            update({ Target: minMaxRangeValues?.max ?? 0 });
+            setTarget(minMaxRangeValues?.max ?? 0);
             return;
         }
         if (mode === 'Column') {
             // Use the first available numeric column (excluding the styled column itself)
-            const candidate = api.columnApi
-                .getNumericColumns()
-                .find((c) => c.columnId !== data.ColumnId);
-            update({ Target: candidate?.columnId ?? '' });
+            const candidate = api.columnApi.getNumericColumns().find((c) => c.columnId !== data.ColumnId);
+            setTarget(candidate?.columnId ?? '');
             return;
         }
     };
     const handleNumericTargetChange = (value) => {
-        if (value == undefined || isNaN(value)) {
-            update({ Target: 0 });
-        }
-        else {
-            update({ Target: value });
-        }
+        setTarget(value == undefined || isNaN(value) ? 0 : value);
     };
     const handleColumnTargetChange = (columnId) => {
-        update({ Target: columnId });
+        setTarget(columnId);
+    };
+    // -- Bar -------------------------------------------------------------------
+    const updateBar = (patch) => {
+        const merged = {
+            ...bullet.Bar,
+            ...patch,
+        };
+        const isEmpty = merged.Color == undefined && merged.Height == undefined;
+        update({ Bar: isEmpty ? undefined : merged });
     };
     // -- Marker ----------------------------------------------------------------
     const updateMarker = (patch) => {
-        update({
-            TargetMarker: {
+        updateTargetProperties({
+            Marker: {
                 Shape: 'Line',
-                ...bullet.TargetMarker,
+                ...bullet.TargetProperties?.Marker,
                 ...patch,
             },
         });
     };
     // -- Cell text -------------------------------------------------------------
-    const toggleCellText = (token, checked) => {
-        const current = bullet.CellText ?? [];
-        const next = checked
-            ? Array.from(new Set([...current, token]))
-            : current.filter((t) => t !== token);
-        update({ CellText: next });
+    const toggleCellText = (token, show) => {
+        update((0, BarStylesHelper_1.toggleBarStyleCellTextToken)(bullet.CellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: (0, BarStylesHelper_1.patchBarStyleCellTextPlacement)(bullet.CellTextProperties, token, patch),
+        });
     };
     const toggleToolTipText = (token, checked) => {
         const current = bullet.ToolTipText ?? [];
@@ -232,35 +341,41 @@ const StyledColumnWizardBulletSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const handleCellTextPositionChange = (pos) => {
-        update({ CellTextPosition: pos });
-    };
     // -------------------------------------------------------------------------
     // 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.` }) }));
     }
     // ----- Ranges-only variant (wizard step before Style) ---------------------
     if (variant === 'ranges') {
         return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { children: (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.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define qualitative bands for the bullet scale" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(RangesComponent_1.RangesComponent, { disabled: disabled, minMaxRangeValues: minMaxRangeValues, api: api, scope: scope, ranges: bullet.CellRanges, rangeValueType: bullet.RangeValueType, onRangeValueTypeChange: onRangeValueTypeChange, columnComparison: bullet.ColumnComparison, updateRanges: onUpdateRanges, updateColumnComparison: onUpdateColumnComparison, hideColumnComparison: true }) })] }) }));
     }
-    const numericTargetValue = typeof bullet.Target === 'number'
-        ? bullet.Target
-        : typeof bullet.Target?.Value === 'number'
-            ? bullet.Target.Value
+    const primaryTarget = Array.isArray(bullet.TargetProperties?.Target)
+        ? bullet.TargetProperties?.Target?.[0]
+        : bullet.TargetProperties?.Target;
+    const numericTargetValue = typeof primaryTarget === 'number'
+        ? primaryTarget
+        : typeof primaryTarget?.Value === 'number'
+            ? primaryTarget.Value
             : undefined;
-    const columnTargetValue = typeof bullet.Target === 'string' && bullet.Target !== 'Col-Avg' && bullet.Target !== 'Col-Median'
-        ? bullet.Target
-        : typeof bullet.Target?.Value === 'string'
-            ? bullet.Target.Value
+    const columnTargetValue = typeof primaryTarget === 'string' &&
+        primaryTarget !== 'Col-Avg' &&
+        primaryTarget !== 'Col-Median'
+        ? primaryTarget
+        : typeof primaryTarget?.Value === 'string'
+            ? primaryTarget.Value
             : undefined;
+    const markerCfg = bullet.TargetProperties?.Marker;
     const marker = {
-        Shape: bullet.TargetMarker?.Shape ?? 'Line',
-        Color: bullet.TargetMarker?.Color ?? '',
-        Size: bullet.TargetMarker?.Size ?? (bullet.TargetMarker?.Shape === 'Line' ? 2 : 8),
+        Shape: markerCfg?.Shape ?? 'Line',
+        Color: markerCfg?.Color ?? '',
+        Size: markerCfg?.Size ?? (markerCfg?.Shape === 'Line' ? 2 : 8),
     };
-    const cellTextDisabled = ArrayExtensions_1.default.IsNullOrEmpty(bullet.CellText) || disabled;
+    const cellTextProperties = bullet.CellTextProperties;
+    const cellTextDisabled = !(0, BarStylesHelper_1.hasBarStyleCellTextConfigured)(cellTextProperties) || disabled;
     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.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Target" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a target value for the bullet scale" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Target:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[180px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", value: currentMode, onValueChange: (v) => handleTargetModeChange(v), items: [
                                                 { value: 'None', label: 'None' },
                                                 { value: 'Number', label: 'Fixed Number' },
@@ -270,9 +385,9 @@ const StyledColumnWizardBulletSection = (props) => {
                                             ] }) }) }), currentMode === 'Number' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Target Value:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { type: "number", value: numericTargetValue ?? '', onChange: (e) => handleNumericTargetChange(e.target.value === '' ? undefined : Number(e.target.value)) }) }) })), currentMode === 'Column' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Target Column:", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[220px]", children: (0, jsx_runtime_1.jsx)(ColumnSelector_1.ColumnSelector, { type: "number", value: columnTargetValue ?? '', onChange: handleColumnTargetChange, filterColumn: (c) => c.columnId !== data.ColumnId, placeholder: "Select numeric column" }) }) })), currentMode !== 'None' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Marker 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: marker.Shape, onValueChange: (s) => updateMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Marker Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: marker.Color || undefined, onChange: (c) => updateMarker({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Marker 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: marker.Size, onChange: (e) => updateMarker({ 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: "Bar" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the bar orientation and height" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...BULLET_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: bullet.Orientation ?? 'Horizontal', onValueChange: (v) => update({ Orientation: v }), items: [
                                                 { value: 'Horizontal', label: 'Horizontal' },
                                                 { value: 'Vertical', label: 'Vertical' },
-                                            ] }) }) }), bullet.Orientation === 'Vertical' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", (0, jsx_runtime_1.jsx)("code", { children: "rowHeight" }), " on ", (0, jsx_runtime_1.jsx)("code", { children: " gridOptions " }), " or use", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getRowHeight" }), "."] }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Bar Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: bullet.BarColor, onChange: (c) => update({ BarColor: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', 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: bullet.BarHeight ?? '', onChange: (e) => update({
-                                                BarHeight: e.target.value === '' ? undefined : Number(e.target.value),
-                                            }), placeholder: "8" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Origin:", 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: typeof bullet.Origin === 'number' ? 'Number' : (bullet.Origin ?? 'Auto'), onValueChange: (v) => {
+                                            ] }) }) }), bullet.Orientation === 'Vertical' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:text-neutral-500", children: ["Tip: vertical bullet charts need a tall row height to be readable (we recommend at least 60px). Set ", (0, jsx_runtime_1.jsx)("code", { children: "rowHeight" }), " on ", (0, jsx_runtime_1.jsx)("code", { children: " gridOptions " }), " or use", ' ', (0, jsx_runtime_1.jsx)("code", { children: "getRowHeight" }), "."] }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Bar Colour:", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: disabled, api: api, value: bullet.Bar?.Color, onChange: (c) => updateBar({ Color: c }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', 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: bullet.Bar?.Height ?? '', onChange: (e) => updateBar({
+                                                Height: e.target.value === '' ? undefined : Number(e.target.value),
+                                            }), placeholder: "8" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Origin:", 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: typeof bullet.Origin === 'number' ? 'Number' : bullet.Origin ?? 'Auto', onValueChange: (v) => {
                                                 if (v === 'Auto' || v === 'Zero') {
                                                     update({ Origin: v });
                                                 }
@@ -282,20 +397,7 @@ const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), (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 Text" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display text in the cell (and if so, then position and font))" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsxs)(FormLayout_1.FormRow, { label: "Cell Display:", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, checked: bullet.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Cell Display Position:", children: (0, jsx_runtime_1.jsx)(DropdownButton_1.default, { disabled: cellTextDisabled, columns: ['label'], items: [
-                                                {
-                                                    label: 'Above Bar',
-                                                    onClick: () => handleCellTextPositionChange('Above'),
-                                                },
-                                                {
-                                                    label: 'Below Bar',
-                                                    onClick: () => handleCellTextPositionChange('Below'),
-                                                },
-                                                {
-                                                    label: 'Merged',
-                                                    onClick: () => handleCellTextPositionChange('Merged'),
-                                                },
-                                            ], children: bullet.CellTextPosition ?? 'Below' }) })] }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), (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 Text" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Pick which values to display and where each one sits around the bar" })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card.Body, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...BULLET_STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(BarStyleCellTextLayoutEditor_1.BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
                                         if (next) {
                                             update({ Font: next });
                                         }

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

@@ -3,6 +3,7 @@ import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
 export interface StyledColumnWizardGradientSectionProps {
     onChange: (styledColumn: StyledColumn) => void;
 }
+export declare const getStyledColumnGradientStyleViewValues: (data: StyledColumn) => string[];
 /**
  * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
  */

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnWizardGradientSection = exports.renderStyledColumnGradientStyleSummary = void 0;
+exports.StyledColumnWizardGradientSection = exports.renderStyledColumnGradientStyleSummary = exports.getStyledColumnGradientStyleViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
@@ -11,16 +11,42 @@ const Tag_1 = require("../../../components/Tag");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const Flex_1 = require("../../../components/Flex");
 const NumberInput_1 = require("../../../components/Input/NumberInput");
-const StyledColumnGradientHelper_1 = require("../../../Utilities/Helpers/StyledColumnGradientHelper");
+const GradientStyleHelper_1 = require("../../../Utilities/Helpers/StyledColumns/GradientStyleHelper");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const Card_1 = require("../../../components/Card");
+const SummaryColorTag_1 = require("../../Wizard/SummaryColorTag");
 const STYLE_FORM_SIZES = ['200px', '1fr'];
-function formatToolTipText(opts) {
-    if (!opts || opts.length === 0) {
-        return '—';
-    }
-    return opts.map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value')).join(' + ');
+function formatGradientToolTipSummary(opts) {
+    return opts
+        .map((t) => (t === 'CellValue' ? 'Cell Value' : 'Percent Value'))
+        .join(' + ');
 }
+const buildStyledColumnGradientStyleSummaryStrings = (gs, options) => {
+    const minA = gs.MinAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxA = gs.MaxAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    const items = [`Alpha: ${minA} → ${maxA}`];
+    if (gs.AutoContrastText) {
+        items.push('Auto Contrast: On');
+    }
+    if (gs.ToolTipText?.length) {
+        items.push(`Tooltip: ${formatGradientToolTipSummary(gs.ToolTipText)}`);
+    }
+    else if (options.includeEmptyTooltip) {
+        items.push('Tooltip: No Tooltip');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellFontStyleSummaryItems)(gs.Font).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+const getStyledColumnGradientStyleViewValues = (data) => {
+    const gs = data.GradientStyle;
+    if (!gs) {
+        return [];
+    }
+    return buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: false });
+};
+exports.getStyledColumnGradientStyleViewValues = getStyledColumnGradientStyleViewValues;
 /**
  * Summary of Gradient-only style options (alpha bounds, auto-contrast, tooltip).
  */
@@ -29,10 +55,8 @@ const renderStyledColumnGradientStyleSummary = (data) => {
     if (!gs) {
         return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "No Styling Defined" });
     }
-    const minA = gs.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxA = gs.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
-    const fontTags = (0, StyledColumnSliceStyleEditors_1.renderFontStyleSummaryTags)(gs.Font);
-    return ((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, { children: ["Alpha: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: minA }), " \u2192 ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: maxA })] }), gs.AutoContrastText && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Text: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Auto contrast" })] })), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Tooltip: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: formatToolTipText(gs.ToolTipText) })] }), fontTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Font: ", fontTags] })] }));
+    const items = buildStyledColumnGradientStyleSummaryStrings(gs, { includeEmptyTooltip: true });
+    return (0, SummaryColorTag_1.renderSummaryStringTags)(items);
 };
 exports.renderStyledColumnGradientStyleSummary = renderStyledColumnGradientStyleSummary;
 const StyledColumnWizardGradientSection = (props) => {
@@ -65,10 +89,10 @@ const StyledColumnWizardGradientSection = (props) => {
             patchGradient({ ToolTipText: next });
         }
     };
-    const minAlphaDisplay = gs.MinAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
-    const maxAlphaDisplay = gs.MaxAlpha ?? StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
-    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.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Transparency" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: ["Used at low and high ends of range; defaults are ", StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA, " &", ' ', StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA, " (Min 0 fades out lowest values)"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Alpha range:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:flex-wrap twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm", children: "Min" }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: minAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
-                                                        if (v === StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MIN_ALPHA) {
+    const minAlphaDisplay = gs.MinAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA;
+    const maxAlphaDisplay = gs.MaxAlpha ?? GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA;
+    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.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Transparency" }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[480px]", children: ["Used at low and high ends of range; defaults are ", GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA, " &", ' ', GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA, " (Min 0 fades out lowest values)"] })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Alpha range:", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:ml-2 twa:flex-wrap twa:gap-3", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm", children: "Min" }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: minAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
+                                                        if (v === GradientStyleHelper_1.DEFAULT_GRADIENT_MIN_ALPHA) {
                                                             const { MinAlpha: _m, ...rest } = gs;
                                                             props.onChange({ ...data, GradientStyle: rest });
                                                         }
@@ -76,7 +100,7 @@ const StyledColumnWizardGradientSection = (props) => {
                                                             patchGradient({ MinAlpha: v });
                                                         }
                                                     } })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm", children: "Max" }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { disabled: disabled, className: "twa:w-20", value: maxAlphaDisplay, min: 0, max: 1, step: 0.05, onChange: (v) => {
-                                                        if (v === StyledColumnGradientHelper_1.DEFAULT_GRADIENT_MAX_ALPHA) {
+                                                        if (v === GradientStyleHelper_1.DEFAULT_GRADIENT_MAX_ALPHA) {
                                                             const { MaxAlpha: _m, ...rest } = gs;
                                                             props.onChange({ ...data, GradientStyle: rest });
                                                         }

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const getStyledColumnIconMappingsViewValues: (data: StyledColumn) => string[];
+export declare const getStyledColumnIconStyleViewValues: (data: StyledColumn) => string[];
 /** Mappings step summary. */
 export declare const renderStyledColumnIconMappingsSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnIconMappingsView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
 /** Style step summary (size, text, tooltip, font / cell). */
 export declare const renderStyledColumnIconStyleSummary: (data: StyledColumn) => React.JSX.Element;
 /**