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

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

@@ -17,6 +17,14 @@ import { isValidIconStyleMappings, renderStyledColumnIconStyleSummary, renderSty
 import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
 import { renderBadgeStyleSummary, renderBadgeSummary, StyledColumnBadgeStyleSection, StyledColumnBadgeSection, } from './StyledColumnBadgeSection';
 import { Box } from '../../../components/Flex';
+import { StyledColumnGradientPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
+import { StyledColumnPercentBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
+import { StyledColumnBadgePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
+import { StyledColumnRatingPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { StyledColumnIconPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
+import { StyledColumnBulletPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
+import { StyledColumnRangeBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
+import { StyledColumnSparklinePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
 /**
  * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
  * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
@@ -45,10 +53,33 @@ const computeDefaultStyledColumnName = (sc) => {
     }
     return `${typeKey}-${sc.ColumnId || 'column'}`;
 };
+/** First wizard step to open when editing an existing Styled Column (column menu, settings list, etc.). */
+export const getStyledColumnEditDefaultSectionName = (styledColumn) => {
+    if (styledColumn.BadgeStyle) {
+        return 'Badges';
+    }
+    if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
+        return 'Ranges';
+    }
+    if (styledColumn.BulletChartStyle) {
+        return 'Ranges';
+    }
+    if (styledColumn.RangeBarStyle) {
+        return 'Style';
+    }
+    if (styledColumn.IconStyle) {
+        return 'Mappings';
+    }
+    return 'Style';
+};
 export const StyledColumnWizard = (props) => {
     const data = props.data ?? props.popupParams?.value;
     const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
-    const defaultCurrentSectionName = props.defaultCurrentSectionName ?? popupDefaultCurrentSectionName;
+    const hasExistingData = Boolean(data);
+    const isEdit = hasExistingData && props.popupParams?.action !== 'New';
+    const defaultCurrentSectionName = props.defaultCurrentSectionName ??
+        popupDefaultCurrentSectionName ??
+        (isEdit ? getStyledColumnEditDefaultSectionName(data) : undefined);
     const allStyledColumns = useSelector((state) => state.StyledColumn?.StyledColumns ?? []);
     const [styledColumn, setStyledColumn] = useState(() => {
         if (data) {
@@ -103,7 +134,7 @@ export const StyledColumnWizard = (props) => {
     }
     else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
         specificSteps.push({
-            details: 'Define the Cell Ranges or a Column Comparison',
+            details: 'Select type of Cell Range and configure contents',
             renderSummary: renderStyledColumnRangesSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangesSection, { onChange: setStyledColumn }) })),
             title: 'Ranges',
@@ -140,7 +171,7 @@ export const StyledColumnWizard = (props) => {
         }
         if (styledColumn.GradientStyle) {
             specificSteps.push({
-                details: 'Set Transparency, Auto Contrast, Tooltip and Font properties',
+                details: 'Set the Style for the Gradient',
                 renderSummary: renderStyledColumnGradientStyleSummary,
                 render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardGradientSection, { onChange: setStyledColumn }) })),
                 title: 'Style',
@@ -151,7 +182,7 @@ export const StyledColumnWizard = (props) => {
         specificSteps.push({
             title: 'Ranges',
             details: 'Create Cell Ranges',
-            renderSummary: () => renderStyledColumnBulletRangesSummary(styledColumn),
+            renderSummary: renderStyledColumnBulletRangesSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardBulletSection, { variant: "ranges", onChange: setStyledColumn }) })),
             isValid: () => {
                 const bs = styledColumn.BulletChartStyle;
@@ -164,7 +195,7 @@ export const StyledColumnWizard = (props) => {
         specificSteps.push({
             title: 'Style',
             details: 'Target, bar appearance, cell text, tooltip, background and font',
-            renderSummary: () => renderStyledColumnBulletStyleSummary(styledColumn),
+            renderSummary: renderStyledColumnBulletStyleSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardBulletSection, { variant: "style", onChange: setStyledColumn }) })),
             isValid: () => true,
         });
@@ -174,7 +205,7 @@ export const StyledColumnWizard = (props) => {
             title: 'Style',
             details: 'Configure the Icon, Text and Cell styles',
             isValid: () => isValidRatingStyle(styledColumn),
-            renderSummary: () => renderStyledColumnRatingSummary(styledColumn),
+            renderSummary: renderStyledColumnRatingSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRatingSection, { onChange: setStyledColumn }) })),
         });
     }
@@ -183,14 +214,14 @@ export const StyledColumnWizard = (props) => {
             title: 'Style',
             details: 'Set Bounds and optional Ranges',
             isValid: () => isValidRangeBarBounds(styledColumn),
-            renderSummary: () => renderStyledColumnRangeBarRangeStepSummary(styledColumn),
+            renderSummary: renderStyledColumnRangeBarRangeStepSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangeBarSection, { variant: "range", onChange: setStyledColumn }) })),
         });
         specificSteps.push({
             title: 'Display',
-            details: 'Markers, track, out-of-range behaviour, cell text and tooltip',
+            details: 'Configure the Display for the Range Bar',
             isValid: () => true,
-            renderSummary: () => renderStyledColumnRangeBarDisplayStepSummary(styledColumn),
+            renderSummary: renderStyledColumnRangeBarDisplayStepSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangeBarSection, { variant: "appearance", onChange: setStyledColumn }) })),
         });
     }
@@ -199,14 +230,14 @@ export const StyledColumnWizard = (props) => {
             title: 'Mappings',
             details: 'Select a preset or define key → icon mappings',
             isValid: () => isValidIconStyleMappings(styledColumn),
-            renderSummary: () => renderStyledColumnIconMappingsSummary(styledColumn),
+            renderSummary: renderStyledColumnIconMappingsSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardIconSection, { variant: "mappings", onChange: setStyledColumn }) })),
         });
         specificSteps.push({
             title: 'Style',
             details: 'Set Styles for sizing, cell text, tooltips, font and cell',
             isValid: () => true,
-            renderSummary: () => renderStyledColumnIconStyleSummary(styledColumn),
+            renderSummary: renderStyledColumnIconStyleSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardIconSection, { variant: "style", onChange: setStyledColumn }) })),
         });
     }
@@ -224,22 +255,51 @@ export const StyledColumnWizard = (props) => {
                 }
                 return true;
             },
-            renderSummary: () => renderBadgeSummary(styledColumn),
+            renderSummary: renderBadgeSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeSection, { onChange: setStyledColumn }) })),
         });
         specificSteps.push({
             title: 'Style',
             details: 'Set Cell Density and Cell Style',
-            renderSummary: () => renderBadgeStyleSummary(styledColumn),
+            renderSummary: renderBadgeStyleSummary,
             render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
         });
     }
+    // Persistent live preview shown at the top of the section content on
+    // every step. We render the bare preview (no Card chrome) so it sits
+    // flush above the form. Only one of these can apply at a time — the
+    // styled column owns exactly one of these style buckets.
+    let headerPreview = null;
+    if (styledColumn.GradientStyle) {
+        headerPreview = _jsx(StyledColumnGradientPreview, { data: styledColumn });
+    }
+    else if (styledColumn.PercentBarStyle) {
+        headerPreview = _jsx(StyledColumnPercentBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BadgeStyle) {
+        headerPreview = _jsx(StyledColumnBadgePreview, { data: styledColumn });
+    }
+    else if (styledColumn.RatingStyle) {
+        headerPreview = _jsx(StyledColumnRatingPreview, { data: styledColumn });
+    }
+    else if (styledColumn.IconStyle) {
+        headerPreview = _jsx(StyledColumnIconPreview, { data: styledColumn });
+    }
+    else if (styledColumn.BulletChartStyle) {
+        headerPreview = _jsx(StyledColumnBulletPreview, { data: styledColumn });
+    }
+    else if (styledColumn.RangeBarStyle) {
+        headerPreview = _jsx(StyledColumnRangeBarPreview, { data: styledColumn });
+    }
+    else if (styledColumn.SparklineStyle) {
+        headerPreview = _jsx(StyledColumnSparklinePreview, { data: styledColumn });
+    }
     return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, 
         // Display the picked type in the header (e.g. "Gradient Column",
         // "Percent Bar Column") so the user always knows which kind of
         // column they're configuring. Falls back to "Styled Column"
         // before a type has been selected.
-        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+        moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
             {
                 details: 'Enter a Name and select a Styled Column Type',
                 isValid: (data) => {
@@ -261,9 +321,7 @@ export const StyledColumnWizard = (props) => {
                 isValid: isValidStyledColumnScope,
                 renderSummary: renderStyledColumnScopeSummary,
                 details: 'Select the Column and Rows where Style should render',
-                render: () => {
-                    return (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(StyledColumnWizardScopeSection, { isNew: props.isNew, onChange: setStyledColumn }) }));
-                },
+                render: () => (_jsx(StyledColumnWizardScopeSection, { isNew: props.isNew, onChange: setStyledColumn })),
                 title: 'Scope',
             },
             ...specificSteps,
@@ -279,7 +337,7 @@ export const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
+                    return (_jsx(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: _jsx(OnePageWizardSummary, {}) }));
                 },
             },
         ] }));

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

@@ -1,7 +1,12 @@
 import * as React from 'react';
 import { StyledColumn } from '../../../AdaptableState/StyledColumnState';
+export declare const getStyledColumnBulletRangesViewValues: (data: StyledColumn) => string[];
+export declare const getStyledColumnBulletStyleViewValues: (data: StyledColumn) => string[];
 /** Wizard / list-view summary for the Ranges step (qualitative bands). */
 export declare const renderStyledColumnBulletRangesSummary: (data: StyledColumn) => React.JSX.Element;
+export declare const StyledColumnBulletRangesView: React.FunctionComponent<React.PropsWithChildren<{
+    data: StyledColumn;
+}>>;
 /** Wizard / list-view summary for the Style step (target, bar, text, font). */
 export declare const renderStyledColumnBulletStyleSummary: (data: StyledColumn) => React.JSX.Element;
 /** Full combined summary (ranges + style); kept for callers that expect one block. */

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

@@ -9,54 +9,148 @@ import { RangesComponent } from '../../Components/RangesComponent';
 import { ColumnSelector } from '../../Components/Selectors/ColumnSelector';
 import { getGraySwatchColor } from '../../UIHelper';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-import DropdownButton from '../../../components/DropdownButton';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import AdaptableInput from '../../Components/AdaptableInput';
 import { Box, Flex } from '../../../components/Flex';
-import { StyledColumnBulletChartListPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnChartListPreviews';
+import { BulletRangesSummaryPreview } from './StyledColumnWizardStyleSection/Components/BulletRangesSummaryPreview';
 import { SingleSelect } from '../../../components/NewSelect';
-import { renderFontStyleSummaryTags, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
+import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
+import { formatBarStyleCellTextLayoutSummary, getActiveBarStyleCellTextTokens, hasBarStyleCellTextConfigured, patchBarStyleCellTextPlacement, resolveBarStyleCellTextLayout, toggleBarStyleCellTextToken, } from '../../../Utilities/Helpers/StyledColumns/BarStylesHelper';
+import { BarStyleCellTextLayoutEditor } from './StyledColumnWizardStyleSection/Components/BarStyleCellTextLayoutEditor';
 const 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(' + ') ?? '';
+export 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;
+};
+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 (hasBarStyleCellTextConfigured(bullet.CellTextProperties)) {
+        const tokens = getActiveBarStyleCellTextTokens(bullet.CellTextProperties);
+        items.push(`Cell Text: ${formatBulletCellTextSummary(tokens)}`);
+        const layoutSummary = formatBarStyleCellTextLayoutSummary(resolveBarStyleCellTextLayout(bullet.CellTextProperties));
+        if (layoutSummary) {
+            items.push(`Placement: ${layoutSummary}`);
+        }
+    }
+    else if (options.includeEmptyCellText) {
+        items.push('Cell Text: None');
+    }
+    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;
+};
+export const getStyledColumnBulletStyleViewValues = (data) => {
+    const bullet = data.BulletChartStyle;
+    if (!bullet) {
+        return [];
+    }
+    return buildStyledColumnBulletStyleSummaryStrings(bullet, {
+        includeEmptyCellText: false,
+        includeEmptyTooltip: false,
+    });
+};
 /** Wizard / list-view summary for the Ranges step (qualitative bands). */
 export const renderStyledColumnBulletRangesSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
-        return _jsx(Tag, { children: "\u2014" });
+        return _jsx(Tag, { children: "No bands defined" });
     }
-    const bandCount = bullet.CellRanges?.length ?? 0;
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(StyledColumnBulletChartListPreview, { bullet: bullet }), _jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: [bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }), bullet.RangeValueType != null && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 ", _jsx(Tag, { children: bullet.RangeValueType })] }))] })] }));
+    const tagItems = getStyledColumnBulletRangesViewValues(data);
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [renderSummaryStringTags(tagItems), _jsx(BulletRangesSummaryPreview, { bulletStyle: bullet })] }));
 };
+export const StyledColumnBulletRangesView = ({ data }) => renderStyledColumnBulletRangesSummary(data);
 /** Wizard / list-view summary for the Style step (target, bar, text, font). */
 export const renderStyledColumnBulletStyleSummary = (data) => {
     const bullet = data.BulletChartStyle;
     if (!bullet) {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const targetSummary = getTargetSummary(bullet.Target);
-    const isVertical = bullet.Orientation === 'Vertical';
-    const fontTags = renderFontStyleSummaryTags(bullet.Font);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(StyledColumnBulletChartListPreview, { bullet: bullet }), _jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [targetSummary && (_jsxs(Box, { className: "twa:mr-1", children: ["target: ", _jsx(Tag, { children: targetSummary })] })), isVertical && (_jsx(Box, { className: "twa:mr-1", children: _jsx(Tag, { children: "vertical" }) })), fontTags && (_jsxs(Box, { className: "twa:mr-1", children: ["Font: ", fontTags] }))] })] }));
+    const items = buildStyledColumnBulletStyleSummaryStrings(bullet, {
+        includeEmptyCellText: true,
+        includeEmptyTooltip: true,
+    });
+    if (!items.length) {
+        return _jsx(Tag, { children: "No Style Defined" });
+    }
+    return renderSummaryStringTags(items);
 };
 /** Full combined summary (ranges + style); kept for callers that expect one block. */
 export const renderStyledColumnBulletSummary = (data) => {
@@ -64,11 +158,7 @@ export const renderStyledColumnBulletSummary = (data) => {
     if (!bullet) {
         return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const bandCount = bullet.CellRanges?.length ?? 0;
-    const targetSummary = getTargetSummary(bullet.Target);
-    const isVertical = bullet.Orientation === 'Vertical';
-    const fontTags = renderFontStyleSummaryTags(bullet.Font);
-    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-2 twa:items-start", children: [_jsx(StyledColumnBulletChartListPreview, { bullet: bullet }), _jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap", children: [_jsxs(Box, { className: "twa:mr-1", children: [bandCount, " ", bandCount === 1 ? 'band' : 'bands'] }), targetSummary && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 target: ", _jsx(Tag, { children: targetSummary })] })), isVertical && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 ", _jsx(Tag, { children: "vertical" })] })), fontTags && (_jsxs(Box, { className: "twa:mr-1", children: ["\u00B7 Font: ", fontTags] }))] })] }));
+    return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:items-start", children: [renderStyledColumnBulletRangesSummary(data), renderStyledColumnBulletStyleSummary(data)] }));
 };
 /**
  * Maps the structured `BulletChartStyle.Target` field to one of the simple
@@ -108,20 +198,25 @@ const MARKER_SHAPES = [
 export const StyledColumnWizardBulletSection = (props) => {
     const variant = props.variant ?? 'style';
     const { data, api } = 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
     // -------------------------------------------------------------------------
@@ -164,59 +259,70 @@ export 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(toggleBarStyleCellTextToken(bullet.CellTextProperties, token, show));
+    };
+    const onCellTextPlacementChange = (token, patch) => {
+        update({
+            CellTextProperties: patchBarStyleCellTextPlacement(bullet.CellTextProperties, token, patch),
+        });
     };
     const toggleToolTipText = (token, checked) => {
         const current = bullet.ToolTipText ?? [];
@@ -225,35 +331,41 @@ export const StyledColumnWizardBulletSection = (props) => {
             : current.filter((t) => t !== token);
         update({ ToolTipText: next });
     };
-    const handleCellTextPositionChange = (pos) => {
-        update({ CellTextPosition: pos });
-    };
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
-    if (!data.ColumnId) {
-        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." }) }));
+    if (!data.ColumnId || !column) {
+        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
+                    ? 'You need to select a column before styling.'
+                    : `Column "${data.ColumnId}" was not found in the grid.` }) }));
     }
     // ----- Ranges-only variant (wizard step before Style) ---------------------
     if (variant === 'ranges') {
         return (_jsx(Box, { children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Ranges" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Define qualitative bands for the bullet scale" })] }), _jsx(Card.Body, { children: _jsx(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.IsNullOrEmpty(bullet.CellText) || disabled;
+    const cellTextProperties = bullet.CellTextProperties;
+    const cellTextDisabled = !hasBarStyleCellTextConfigured(cellTextProperties) || disabled;
     return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Target" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Select a target value for the bullet scale" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Target:", children: _jsx(Box, { className: "twa:max-w-[180px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: currentMode, onValueChange: (v) => handleTargetModeChange(v), items: [
                                                 { value: 'None', label: 'None' },
                                                 { value: 'Number', label: 'Fixed Number' },
@@ -263,9 +375,9 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             ] }) }) }), currentMode === 'Number' && (_jsx(FormRow, { label: "Target Value:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { type: "number", value: numericTargetValue ?? '', onChange: (e) => handleNumericTargetChange(e.target.value === '' ? undefined : Number(e.target.value)) }) }) })), currentMode === 'Column' && (_jsx(FormRow, { label: "Target Column:", children: _jsx(Box, { className: "twa:max-w-[220px]", children: _jsx(ColumnSelector, { type: "number", value: columnTargetValue ?? '', onChange: handleColumnTargetChange, filterColumn: (c) => c.columnId !== data.ColumnId, placeholder: "Select numeric column" }) }) })), currentMode !== 'None' && (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "Marker Shape:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: marker.Shape, onValueChange: (s) => updateMarker({ Shape: s }), items: MARKER_SHAPES.map((s) => ({ value: s.value, label: s.label })) }) }) }), _jsx(FormRow, { label: "Marker Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: marker.Color || undefined, onChange: (c) => updateMarker({ Color: c }) }) }), _jsx(FormRow, { label: "Marker Size:", children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: marker.Size, onChange: (e) => updateMarker({ Size: Number(e.target.value) }) }) }) })] }))] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Bar" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Set the bar orientation and height" })] }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Orientation:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(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' && (_jsx(FormRow, { label: "", children: _jsxs(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 ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use", ' ', _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: "Bar Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: bullet.BarColor, onChange: (c) => update({ BarColor: c }) }) }), _jsx(FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: bullet.BarHeight ?? '', onChange: (e) => update({
-                                                BarHeight: e.target.value === '' ? undefined : Number(e.target.value),
-                                            }), placeholder: "8" }) }) }), _jsx(FormRow, { label: "Origin:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : (bullet.Origin ?? 'Auto'), onValueChange: (v) => {
+                                            ] }) }) }), bullet.Orientation === 'Vertical' && (_jsx(FormRow, { label: "", children: _jsxs(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 ", _jsx("code", { children: "rowHeight" }), " on ", _jsx("code", { children: " gridOptions " }), " or use", ' ', _jsx("code", { children: "getRowHeight" }), "."] }) })), _jsx(FormRow, { label: "Bar Colour:", children: _jsx(ColorPicker, { disabled: disabled, api: api, value: bullet.Bar?.Color, onChange: (c) => updateBar({ Color: c }) }) }), _jsx(FormRow, { label: bullet.Orientation === 'Vertical' ? 'Bar Width (px):' : 'Bar Height (px):', children: _jsx(Box, { className: "twa:max-w-[100px]", children: _jsx(AdaptableInput, { type: "number", min: 1, value: bullet.Bar?.Height ?? '', onChange: (e) => updateBar({
+                                                Height: e.target.value === '' ? undefined : Number(e.target.value),
+                                            }), placeholder: "8" }) }) }), _jsx(FormRow, { label: "Origin:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: typeof bullet.Origin === 'number' ? 'Number' : bullet.Origin ?? 'Auto', onValueChange: (v) => {
                                                 if (v === 'Auto' || v === 'Zero') {
                                                     update({ Origin: v });
                                                 }
@@ -275,20 +387,7 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             }, items: [
                                                 { value: 'Auto', label: 'Auto' },
                                                 { value: 'Zero', label: 'Zero' },
-                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(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))" })] }), _jsxs(Card.Body, { children: [_jsxs(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: [_jsxs(FormRow, { label: "Cell Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.CellText?.includes('CellValue'), onChange: (checked) => toggleCellText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.CellText?.includes('PercentageValue'), onChange: (checked) => toggleCellText('PercentageValue', checked), children: "Percent Value" })] }), _jsx(FormRow, { label: "Cell Display Position:", children: _jsx(DropdownButton, { 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' }) })] }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(StyledColumnFontStyleEditor, { api: api, disabled: cellTextDisabled, value: bullet.Font, onChange: (next) => {
+                                            ] }) }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell Text" }), _jsx(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" })] }), _jsxs(Card.Body, { children: [_jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsx(BarStyleCellTextLayoutEditor, { disabled: disabled, cellTextProperties: cellTextProperties, onToggle: toggleCellText, onPlacementChange: onCellTextPlacementChange }) }), _jsx(Box, { className: `twa:mt-3 twa:pt-3 twa:border-t twa:border-foreground/15 ${cellTextDisabled ? 'twa:opacity-50' : ''}`, children: _jsx(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).
  */