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

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

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import type { StyledColumn } from '../../../types';
+export declare const getStyledColumnSparklineStyleViewValues: (data: StyledColumn) => string[];
 /**
- * Wizard-step summary for the Sparkline Settings step, mirroring the
- * pattern used by Bullet / Badge / Gradient / Percent Bar so the nav row
- * isn't blank when this step is collapsed.
+ * Wizard-step summary for the Sparkline Settings step.
  */
 export declare const renderSparklineSummary: (data: StyledColumn) => React.ReactNode;
 /**

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { SingleSelect } from '../../../components/NewSelect';
-import { Tabs } from '../../../components/Tabs';
 import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
@@ -9,7 +8,13 @@ import AdaptableInput from '../../Components/AdaptableInput';
 import { ColorPicker } from '../../../components/ColorPicker';
 import { CheckBox } from '../../../components/CheckBox';
 import { Box, Flex } from '../../../components/Flex';
-import { renderCellStyleSummaryTags, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { Card } from '../../../components/Card';
+import ErrorBox from '../../../components/ErrorBox';
+import { StyledColumnSparklinePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
+const STYLE_FORM_SIZES = ['200px', '1fr'];
+/** Sentinel for the theme dropdown — persisted options omit `theme` when this is chosen. */
+const SPARKLINE_CUSTOM_COLOURS_THEME = '__custom__';
 const SparklineTypes = {
     LINE: 'line',
     AREA: 'area',
@@ -30,22 +35,67 @@ const sparklineTypeLabel = (opts) => {
     }
     return type.charAt(0).toUpperCase() + type.slice(1);
 };
+const buildStyledColumnSparklineStyleSummaryStrings = (sparkline, options) => {
+    const opts = sparkline.options;
+    if (!opts) {
+        return [];
+    }
+    const items = [`Type: ${sparklineTypeLabel(opts)}`];
+    if (typeof opts.theme === 'string' && opts.theme !== 'ag-default') {
+        items.push(`Theme: ${opts.theme.replace(/^ag-/, '')}`);
+    }
+    if (typeof opts.min === 'number' || typeof opts.max === 'number') {
+        items.push(`Range: ${opts.min ?? 'auto'} → ${opts.max ?? 'auto'}`);
+    }
+    if (opts.xKey || opts.yKey) {
+        items.push(`Keys: x=${opts.xKey ?? 'x'}, y=${opts.yKey ?? 'y'}`);
+    }
+    const markerEnabled = opts.type !== 'bar' &&
+        opts.marker?.enabled;
+    if (markerEnabled) {
+        items.push('Markers: On');
+    }
+    else if (options.includeEmptyFeatures && opts.type !== 'bar') {
+        items.push('Markers: Off');
+    }
+    if (opts.tooltip?.enabled) {
+        items.push('Tooltip: On');
+    }
+    else if (options.includeEmptyFeatures) {
+        items.push('Tooltip: Off');
+    }
+    if (opts.axis?.visible) {
+        items.push('Axis: On');
+    }
+    else if (options.includeEmptyFeatures) {
+        items.push('Axis: Off');
+    }
+    getCellBoxStyleSummaryItems(sparkline.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+export const getStyledColumnSparklineStyleViewValues = (data) => {
+    const sparkline = data.SparklineStyle;
+    if (!sparkline) {
+        return [];
+    }
+    return buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
+        includeEmptyFeatures: false,
+    });
+};
 /**
- * Wizard-step summary for the Sparkline Settings step, mirroring the
- * pattern used by Bullet / Badge / Gradient / Percent Bar so the nav row
- * isn't blank when this step is collapsed.
+ * Wizard-step summary for the Sparkline Settings step.
  */
 export const renderSparklineSummary = (data) => {
-    const opts = data.SparklineStyle?.options;
-    if (!opts) {
-        return _jsx(Tag, { children: "\u2014" });
+    const sparkline = data.SparklineStyle;
+    if (!sparkline?.options) {
+        return _jsx(Tag, { children: "No Styling Defined" });
     }
-    const type = sparklineTypeLabel(opts);
-    const theme = typeof opts.theme === 'string' ? opts.theme.replace(/^ag-/, '') : null;
-    const min = typeof opts.min === 'number' ? opts.min : null;
-    const max = typeof opts.max === 'number' ? opts.max : null;
-    const cellTags = renderCellStyleSummaryTags(data.SparklineStyle?.Cell);
-    return (_jsxs(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: [_jsxs(Box, { children: ["Type: ", _jsx(Tag, { children: type })] }), theme && (_jsxs(Box, { children: ["Theme: ", _jsx(Tag, { children: theme })] })), (min != null || max != null) && (_jsxs(Box, { children: ["Range: ", _jsx(Tag, { children: `${min ?? 'auto'} → ${max ?? 'auto'}` })] })), cellTags && _jsxs(Box, { children: ["Cell: ", cellTags] })] }));
+    const items = buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
+        includeEmptyFeatures: true,
+    });
+    return (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };
 /**
  * Validation for the Sparkline Settings wizard step.
@@ -91,23 +141,32 @@ export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
         }
         handleOptionsChange(newOptions);
     };
-    const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:mb-3", children: _jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Sparkline Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", items: sparklineTypeOptions, value: sparklineType, onValueChange: handleTypeChange, placeholder: "Select Sparkline Type" }) }) }), isObjectNumberArray && (_jsx(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })), _jsx(FormRow, { label: "Min Value", children: _jsx(AdaptableInput, { type: "number", value: sparklineOptions.min ?? '', onChange: (e) => handleOptionsChange({
-                                    ...sparklineOptions,
-                                    min: e.target.value === '' ? undefined : Number(e.target.value),
-                                }), placeholder: 'Auto', title: "User override for the automatically determined min value (based on series data)" }) }), _jsx(FormRow, { label: "Max Value", children: _jsx(AdaptableInput, { type: "number", value: sparklineOptions.max ?? '', onChange: (e) => handleOptionsChange({
-                                    ...sparklineOptions,
-                                    max: e.target.value === '' ? undefined : Number(e.target.value),
-                                }), placeholder: 'Auto', title: "User override for the automatically determined max value (based on series data)" }) })] }) }), _jsxs(Tabs, { className: "twa:mb-2", children: [_jsx(Tabs.Tab, { children: "Theming" }), _jsx(Tabs.Tab, { children: "Axis" }), _jsx(Tabs.Tab, { hidden: sparklineOptions.type === 'bar', children: "Marker" }), _jsx(Tabs.Tab, { children: "Tooltip" }), _jsx(Tabs.Tab, { children: "Highlight Style" }), _jsx(Tabs.Content, { children: _jsx(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), _jsx(Tabs.Content, { children: _jsx(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), _jsx(Tabs.Content, { children: _jsx(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), _jsx(Tabs.Content, { children: _jsx(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), _jsx(Tabs.Content, { children: _jsx(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Box, { className: "twa:mt-3", children: [_jsx(Box, { className: "twa:ml-2 twa:font-semibold twa:text-sm", children: "Cell" }), _jsx(Box, { className: "twa:ml-2 twa:text-xs twa:opacity-70 twa:mt-1 twa:max-w-[480px] twa:mb-1", children: "Optional cell-box styling (background, border, radius) applied to the cell behind the sparkline. When any property is set, this column ignores Cell-box properties from any matching Format Column." }), _jsx(StyledColumnCellStyleEditor, { api: api, value: data.SparklineStyle?.Cell, onChange: (next) => {
-                            const sparkStyle = { ...(data.SparklineStyle ?? {}) };
-                            if (next) {
-                                sparkStyle.Cell = next;
-                            }
-                            else {
-                                delete sparkStyle.Cell;
-                            }
-                            onChange({ ...data, SparklineStyle: sparkStyle });
-                        } })] })] }));
+    const column = data.ColumnId
+        ? api.columnApi.getColumnWithColumnId(data.ColumnId)
+        : undefined;
+    const disabled = !data.ColumnId || !column;
+    const isObjectNumberArray = column?.dataType === 'objectArray';
+    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.` }) }));
+    }
+    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Chart" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Type:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: disabled, items: sparklineTypeOptions, value: sparklineType, onValueChange: handleTypeChange, placeholder: "Select Sparkline Type" }) }) }), isObjectNumberArray && (_jsx(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })), _jsx(FormRow, { label: "Min Value:", children: _jsx(AdaptableInput, { disabled: disabled, type: "number", value: sparklineOptions.min ?? '', onChange: (e) => handleOptionsChange({
+                                            ...sparklineOptions,
+                                            min: e.target.value === '' ? undefined : Number(e.target.value),
+                                        }), placeholder: 'Auto', title: "User override for the automatically determined min value (based on series data)" }) }), _jsx(FormRow, { label: "Max Value:", children: _jsx(AdaptableInput, { disabled: disabled, type: "number", value: sparklineOptions.max ?? '', onChange: (e) => handleOptionsChange({
+                                            ...sparklineOptions,
+                                            max: e.target.value === '' ? undefined : Number(e.target.value),
+                                        }), placeholder: 'Auto', title: "User override for the automatically determined max value (based on series data)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Theming" }), _jsx(Card.Body, { children: _jsx(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Axis" }), _jsx(Card.Body, { children: _jsx(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), sparklineOptions.type !== 'bar' && (_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Markers" }), _jsx(Card.Body, { children: _jsx(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] })), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Tooltip" }), _jsx(Card.Body, { children: _jsx(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Highlight" }), _jsx(Card.Body, { children: _jsx(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional cell-box styling behind the sparkline" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: data.SparklineStyle?.Cell, onChange: (next) => {
+                                const sparkStyle = { ...(data.SparklineStyle ?? {}) };
+                                if (next) {
+                                    sparkStyle.Cell = next;
+                                }
+                                else {
+                                    delete sparkStyle.Cell;
+                                }
+                                onChange({ ...data, SparklineStyle: sparkStyle });
+                            } }) })] }), _jsx(StyledColumnSparklinePreviewCard, { data: data })] }));
 };
 const SparklineObjectArrayProperties = ({ options, onChange, }) => {
     const { data, api } = useOnePageAdaptableWizardContext();
@@ -140,11 +199,17 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
     const handleChange = (key, value) => {
         onChange({ ...options, [key]: value });
     };
+    const applySeriesColour = (patch) => {
+        const next = { ...options, ...patch };
+        delete next.theme;
+        onChange(next);
+    };
     const handlePaddingChange = (key, value) => {
         const currentPadding = sparklineOptions.padding || {};
         handleChange('padding', { ...currentPadding, [key]: value });
     };
     const themes = [
+        { value: SPARKLINE_CUSTOM_COLOURS_THEME, label: 'Custom colours' },
         { value: 'ag-default', label: 'Default' },
         { value: 'ag-default-dark', label: 'Default Dark' },
         { value: 'ag-sheets', label: 'Sheets' },
@@ -158,7 +223,9 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         { value: 'ag-financial', label: 'Financial' },
         { value: 'ag-financial-dark', label: 'Financial Dark' },
     ];
-    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => handleChange('fill', color) }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => handleChange('stroke', color) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
+    return (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
+                                ? 'Line colour. Marker colours are in the Markers card.'
+                                : 'Outline colour — increase width to see it on bars and columns.' })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
                         const value = e.target.value;
                         const dashArray = value
                             ? value
@@ -173,7 +240,15 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
                             }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: sparklineOptions.background?.fill, onChange: (fill) => handleChange('background', {
                                     ...sparklineOptions.background,
                                     fill,
-                                }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && (_jsx(FormRow, { label: "Theme", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: sparklineOptions.theme ?? 'ag-default', onValueChange: (themeName) => handleChange('theme', themeName), items: themes }) }) }))] }));
+                                }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && (_jsx(FormRow, { label: "Theme", children: _jsxs(Box, { children: [_jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: sparklineOptions.theme ?? SPARKLINE_CUSTOM_COLOURS_THEME, onValueChange: (themeName) => {
+                                    if (themeName === SPARKLINE_CUSTOM_COLOURS_THEME) {
+                                        const next = { ...options };
+                                        delete next.theme;
+                                        onChange(next);
+                                        return;
+                                    }
+                                    handleChange('theme', themeName);
+                                }, items: themes }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Palette preset. Use Custom colours when Fill / Stroke above should control the chart." })] }) }))] }));
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
     const { api } = useOnePageAdaptableWizardContext();

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
@@ -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 { StyledColumnGradientPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
+import { StyledColumnPercentBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
+import { StyledColumnBadgePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
+import { StyledColumnRatingPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
+import { StyledColumnIconPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
+import { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
+import { StyledColumnRangeBarPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
+import { StyledColumnSparklinePreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
 /**
  * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
  * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
@@ -140,7 +148,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 +159,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 +172,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 +182,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 +191,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 +207,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,13 +232,13 @@ 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 }) })),
         });
     }
@@ -279,7 +287,7 @@ export const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) }));
+                    return (_jsxs(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [_jsx(OnePageWizardSummary, {}), styledColumn.GradientStyle && (_jsx(StyledColumnGradientPreviewCard, { data: styledColumn })), styledColumn.PercentBarStyle && (_jsx(StyledColumnPercentBarPreviewCard, { data: styledColumn })), styledColumn.BadgeStyle && (_jsx(StyledColumnBadgePreviewCard, { data: styledColumn })), styledColumn.RatingStyle && (_jsx(StyledColumnRatingPreviewCard, { data: styledColumn })), styledColumn.IconStyle && (_jsx(StyledColumnIconPreviewCard, { data: styledColumn })), styledColumn.BulletChartStyle && (_jsx(StyledColumnBulletPreviewCard, { data: styledColumn })), styledColumn.RangeBarStyle && (_jsx(StyledColumnRangeBarPreviewCard, { data: styledColumn })), styledColumn.SparklineStyle && (_jsx(StyledColumnSparklinePreviewCard, { data: styledColumn }))] }));
                 },
             },
         ] }));

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

@@ -13,9 +13,10 @@ 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 { StyledColumnBulletPreviewCard } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
 import { SingleSelect } from '../../../components/NewSelect';
-import { renderFontStyleSummaryTags, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
+import { getCellFontStyleSummaryItems, StyledColumnFontStyleEditor, } from './StyledColumnSliceStyleEditors';
 import { Card } from '../../../components/Card';
 const BULLET_STYLE_FORM_SIZES = ['200px', '1fr'];
 // ---------------------------------------------------------------------------
@@ -26,37 +27,131 @@ const getTargetSummary = (target) => {
         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 targetSummary = getTargetSummary(bullet.Target);
+    if (targetSummary) {
+        items.push(`Target: ${targetSummary}`);
+    }
+    const marker = bullet.TargetMarker;
+    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');
+    }
+    if (bullet.BarColor) {
+        items.push(`Bar Colour: ${bullet.BarColor}`);
+    }
+    if (bullet.BarHeight != null) {
+        items.push(`${bullet.Orientation === 'Vertical' ? 'Bar Width' : 'Bar Height'}: ${bullet.BarHeight}px`);
+    }
+    items.push(`Origin: ${formatBulletOriginLabel(bullet.Origin)}`);
+    if (bullet.BackColor) {
+        items.push(`Back Colour: ${bullet.BackColor}`);
+    }
+    if (bullet.CellText?.length) {
+        items.push(`Cell Text: ${formatBulletCellTextSummary(bullet.CellText)}`);
+        items.push(`Cell Text Position: ${bullet.CellTextPosition ?? 'Below'}`);
+    }
+    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: [_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: tagItems.map((item) => (_jsx(Tag, { children: item }, item))) }), _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 (_jsx(Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => (_jsx(Tag, { children: item }, item))) }));
 };
 /** Full combined summary (ranges + style); kept for callers that expect one block. */
 export const renderStyledColumnBulletSummary = (data) => {
@@ -64,11 +159,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 +199,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
     // -------------------------------------------------------------------------
@@ -231,8 +327,10 @@ export const StyledColumnWizardBulletSection = (props) => {
     // -------------------------------------------------------------------------
     // Render
     // -------------------------------------------------------------------------
-    if (!data.ColumnId) {
-        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: "You need to select a column before styling." }) }));
+    if (!data.ColumnId || !column) {
+        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
+                    ? 'You need to select a column before styling.'
+                    : `Column "${data.ColumnId}" was not found in the grid.` }) }));
     }
     // ----- Ranges-only variant (wizard step before Style) ---------------------
     if (variant === 'ranges') {
@@ -297,5 +395,5 @@ export const StyledColumnWizardBulletSection = (props) => {
                                             delete cleaned.Font;
                                             props.onChange({ ...data, BulletChartStyle: cleaned });
                                         }
-                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] })] }));
+                                    } }) })] })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Tooltip" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a tooltip" })] }), _jsx(Card.Body, { children: _jsx(FormLayout, { sizes: [...BULLET_STYLE_FORM_SIZES], children: _jsxs(FormRow, { label: "Tooltip Display:", children: [_jsx(CheckBox, { disabled: disabled, checked: bullet.ToolTipText?.includes('CellValue'), onChange: (checked) => toggleToolTipText('CellValue', checked), children: "Cell Value" }), ' ', _jsx(CheckBox, { disabled: disabled, className: "twa:ml-3", checked: bullet.ToolTipText?.includes('PercentageValue'), onChange: (checked) => toggleToolTipText('PercentageValue', checked), children: "Percent Value" })] }) }) })] }), _jsx(StyledColumnBulletPreviewCard, { data: data })] }));
 };

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).
  */