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

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderCellStyleSummaryTags = exports.renderFontStyleSummaryTags = exports.StyledColumnCellStyleEditor = exports.StyledColumnFontStyleEditor = void 0;
+exports.renderCellStyleSummaryTags = exports.getCellBoxStyleSummaryItems = exports.renderFontStyleSummaryTags = exports.getCellFontStyleSummaryItems = exports.StyledColumnCellStyleEditor = exports.StyledColumnFontStyleEditor = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const React = tslib_1.__importStar(require("react"));
 const CheckBox_1 = require("../../../components/CheckBox");
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
@@ -74,9 +75,11 @@ exports.StyledColumnFontStyleEditor = StyledColumnFontStyleEditor;
  */
 const StyledColumnCellStyleEditor = (props) => {
     const cell = props.value ?? {};
+    const cellRef = React.useRef(cell);
+    cellRef.current = cell;
     const { disabled } = props;
     const update = (patch) => {
-        const next = { ...cell, ...patch };
+        const next = { ...cellRef.current, ...patch };
         Object.keys(next).forEach((k) => {
             const v = next[k];
             if (v === undefined || v === null || v === '') {
@@ -94,53 +97,73 @@ const StyledColumnCellStyleEditor = (props) => {
 };
 exports.StyledColumnCellStyleEditor = StyledColumnCellStyleEditor;
 /**
- * Compact summary tags for the Font slice; used by wizard summary panels.
+ * Descriptive font properties for summary panels (`Label: value` strings).
  */
-const renderFontStyleSummaryTags = (font) => {
-    if (!font)
-        return null;
-    const tags = [];
+const getCellFontStyleSummaryItems = (font) => {
+    if (!font) {
+        return [];
+    }
+    const items = [];
     if (font.ForeColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Text ", font.ForeColor] }, "fg"));
+        items.push({ label: 'Fore Colour', value: font.ForeColor });
     }
     if (font.FontWeight === 'Bold') {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Bold" }, "b"));
+        items.push({ label: 'Font Weight', value: 'Bold' });
     }
     if (font.FontStyle === 'Italic') {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "Italic" }, "i"));
+        items.push({ label: 'Font Style', value: 'Italic' });
     }
     if (font.TextDecoration && font.TextDecoration !== 'None') {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: font.TextDecoration }, "td"));
+        items.push({ label: 'Text Decoration', value: font.TextDecoration });
     }
     if (font.FontSize) {
-        tags.push((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: font.FontSize }, "fs"));
+        items.push({ label: 'Font Size', value: font.FontSize });
     }
     if (font.Alignment && font.Alignment !== 'Default') {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Align ", font.Alignment] }, "al"));
+        items.push({ label: 'Alignment', value: font.Alignment });
     }
-    if (tags.length === 0)
+    return items;
+};
+exports.getCellFontStyleSummaryItems = getCellFontStyleSummaryItems;
+/**
+ * Compact summary tags for the Font slice; used by wizard summary panels.
+ */
+const renderFontStyleSummaryTags = (font) => {
+    const items = (0, exports.getCellFontStyleSummaryItems)(font);
+    if (!items.length) {
         return null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
 };
 exports.renderFontStyleSummaryTags = renderFontStyleSummaryTags;
 /**
- * Compact summary tags for the Cell slice; used by wizard summary panels.
+ * Descriptive cell box properties for summary panels (`Label: value` strings).
  */
-const renderCellStyleSummaryTags = (cell) => {
-    if (!cell)
-        return null;
-    const tags = [];
+const getCellBoxStyleSummaryItems = (cell) => {
+    if (!cell) {
+        return [];
+    }
+    const items = [];
     if (cell.BackColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Bg ", cell.BackColor] }, "bg"));
+        items.push({ label: 'Back Colour', value: cell.BackColor });
     }
     if (cell.BorderColor) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Border ", cell.BorderColor] }, "bc"));
+        items.push({ label: 'Border Colour', value: cell.BorderColor });
     }
     if (cell.BorderRadius != null) {
-        tags.push((0, jsx_runtime_1.jsxs)(Tag_1.Tag, { children: ["Radius ", cell.BorderRadius, "px"] }, "br"));
+        items.push({ label: 'Border Radius', value: `${cell.BorderRadius}px` });
     }
-    if (tags.length === 0)
+    return items;
+};
+exports.getCellBoxStyleSummaryItems = getCellBoxStyleSummaryItems;
+/**
+ * Compact summary tags for the Cell slice; used by wizard summary panels.
+ */
+const renderCellStyleSummaryTags = (cell) => {
+    const items = (0, exports.getCellBoxStyleSummaryItems)(cell);
+    if (!items.length) {
         return null;
-    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: tags }));
+    }
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-1 twa:flex-wrap", children: items.map(({ label, value }) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${label}: ${value}` }, label))) }));
 };
 exports.renderCellStyleSummaryTags = renderCellStyleSummaryTags;

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,11 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnSparklineSettingsSection = exports.isValidSparklineSettings = exports.renderSparklineSummary = void 0;
+exports.StyledColumnSparklineSettingsSection = exports.isValidSparklineSettings = exports.renderSparklineSummary = exports.getStyledColumnSparklineStyleViewValues = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const NewSelect_1 = require("../../../components/NewSelect");
-const Tabs_1 = require("../../../components/Tabs");
 const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
 const Tag_1 = require("../../../components/Tag");
@@ -14,6 +13,12 @@ const ColorPicker_1 = require("../../../components/ColorPicker");
 const CheckBox_1 = require("../../../components/CheckBox");
 const Flex_1 = require("../../../components/Flex");
 const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
+const Card_1 = require("../../../components/Card");
+const ErrorBox_1 = tslib_1.__importDefault(require("../../../components/ErrorBox"));
+const StyledColumnSparklinePreview_1 = require("./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',
@@ -34,22 +39,68 @@ 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');
+    }
+    (0, StyledColumnSliceStyleEditors_1.getCellBoxStyleSummaryItems)(sparkline.Cell).forEach(({ label, value }) => {
+        items.push(`${label}: ${value}`);
+    });
+    return items;
+};
+const getStyledColumnSparklineStyleViewValues = (data) => {
+    const sparkline = data.SparklineStyle;
+    if (!sparkline) {
+        return [];
+    }
+    return buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
+        includeEmptyFeatures: false,
+    });
+};
+exports.getStyledColumnSparklineStyleViewValues = getStyledColumnSparklineStyleViewValues;
 /**
- * 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.
  */
 const renderSparklineSummary = (data) => {
-    const opts = data.SparklineStyle?.options;
-    if (!opts) {
-        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "\u2014" });
+    const sparkline = data.SparklineStyle;
+    if (!sparkline?.options) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.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 = (0, StyledColumnSliceStyleEditors_1.renderCellStyleSummaryTags)(data.SparklineStyle?.Cell);
-    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: ["Type: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: type })] }), theme && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Theme: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: theme })] })), (min != null || max != null) && ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Range: ", (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: `${min ?? 'auto'} → ${max ?? 'auto'}` })] })), cellTags && (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: ["Cell: ", cellTags] })] }));
+    const items = buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
+        includeEmptyFeatures: true,
+    });
+    return ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", className: "twa:flex-wrap twa:gap-2", children: items.map((item) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: item }, item))) }));
 };
 exports.renderSparklineSummary = renderSparklineSummary;
 /**
@@ -97,23 +148,32 @@ const StyledColumnSparklineSettingsSection = ({ onChange }) => {
         }
         handleOptionsChange(newOptions);
     };
-    const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mb-3", children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Sparkline Type", 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", items: sparklineTypeOptions, value: sparklineType, onValueChange: handleTypeChange, placeholder: "Select Sparkline Type" }) }) }), isObjectNumberArray && ((0, jsx_runtime_1.jsx)(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Min Value", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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)" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Max Value", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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)" }) })] }) }), (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { className: "twa:mb-2", children: [(0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Theming" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Axis" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { hidden: sparklineOptions.type === 'bar', children: "Marker" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Tab, { children: "Highlight Style" }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) }), (0, jsx_runtime_1.jsx)(Tabs_1.Tabs.Content, { children: (0, jsx_runtime_1.jsx)(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), (0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:mt-3", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:font-semibold twa:text-sm", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.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." }), (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.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 ((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.` }) }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Chart" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsxs)(FormLayout_1.default, { sizes: [...STYLE_FORM_SIZES], children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Type:", 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", disabled: disabled, items: sparklineTypeOptions, value: sparklineType, onValueChange: handleTypeChange, placeholder: "Select Sparkline Type" }) }) }), isObjectNumberArray && ((0, jsx_runtime_1.jsx)(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Min Value:", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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)" }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Max Value:", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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)" }) })] }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Theming" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Axis" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), sparklineOptions.type !== 'bar' && ((0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Markers" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] })), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { children: "Highlight" }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { shadow: false, className: "twa:mb-3", children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:font-medium", children: "Cell" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional cell-box styling behind the sparkline" })] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { children: (0, jsx_runtime_1.jsx)(StyledColumnSliceStyleEditors_1.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 });
+                            } }) })] }), (0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.StyledColumnSparklinePreviewCard, { data: data })] }));
 };
 exports.StyledColumnSparklineSettingsSection = StyledColumnSparklineSettingsSection;
 const SparklineObjectArrayProperties = ({ options, onChange, }) => {
@@ -147,11 +207,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' },
@@ -165,7 +231,9 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         { value: 'ag-financial', label: 'Financial' },
         { value: 'ag-financial-dark', label: 'Financial Dark' },
     ];
-    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [sparklineOptions.type !== 'line' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fill", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => handleChange('fill', color) }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Stroke", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => handleChange('stroke', color) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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)) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Padding", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-1", children: "Top" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Line Dash", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [sparklineOptions.type !== 'line' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fill", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => applySeriesColour({ fill: color }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Stroke", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { children: [(0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => applySeriesColour({ stroke: color }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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)) })] }), (0, jsx_runtime_1.jsx)(Flex_1.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.' })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Padding", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:mr-1", children: "Top" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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" }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Line Dash", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { 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
@@ -180,7 +248,15 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
                             }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.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' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Theme", 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: sparklineOptions.theme ?? 'ag-default', onValueChange: (themeName) => handleChange('theme', themeName), items: themes }) }) }))] }));
+                                }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Theme", children: (0, jsx_runtime_1.jsxs)(Flex_1.Box, { 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: 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 }) }), (0, jsx_runtime_1.jsx)(Flex_1.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 } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();

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

@@ -21,6 +21,14 @@ const StyledColumnWizardIconSection_1 = require("./StyledColumnWizardIconSection
 const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
 const StyledColumnBadgeSection_1 = require("./StyledColumnBadgeSection");
 const Flex_1 = require("../../../components/Flex");
+const StyledColumnGradientPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview");
+const StyledColumnPercentBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview");
+const StyledColumnBadgePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview");
+const StyledColumnRatingPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview");
+const StyledColumnIconPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnIconPreview");
+const StyledColumnBulletPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview");
+const StyledColumnRangeBarPreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview");
+const StyledColumnSparklinePreview_1 = require("./StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview");
 /**
  * Mirrors the migration default in `VersionUpgrade23.patchStyledColumnName` and
  * the auto-fill logic in `StyledColumnWizardTypeSection` so users opening the
@@ -144,7 +152,7 @@ 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: StyledColumnWizardGradientSection_1.renderStyledColumnGradientStyleSummary,
                 render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardGradientSection_1.StyledColumnWizardGradientSection, { onChange: setStyledColumn }) })),
                 title: 'Style',
@@ -155,7 +163,7 @@ const StyledColumnWizard = (props) => {
         specificSteps.push({
             title: 'Ranges',
             details: 'Create Cell Ranges',
-            renderSummary: () => (0, StyledColumnWizardBulletSection_1.renderStyledColumnBulletRangesSummary)(styledColumn),
+            renderSummary: StyledColumnWizardBulletSection_1.renderStyledColumnBulletRangesSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardBulletSection_1.StyledColumnWizardBulletSection, { variant: "ranges", onChange: setStyledColumn }) })),
             isValid: () => {
                 const bs = styledColumn.BulletChartStyle;
@@ -168,7 +176,7 @@ const StyledColumnWizard = (props) => {
         specificSteps.push({
             title: 'Style',
             details: 'Target, bar appearance, cell text, tooltip, background and font',
-            renderSummary: () => (0, StyledColumnWizardBulletSection_1.renderStyledColumnBulletStyleSummary)(styledColumn),
+            renderSummary: StyledColumnWizardBulletSection_1.renderStyledColumnBulletStyleSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardBulletSection_1.StyledColumnWizardBulletSection, { variant: "style", onChange: setStyledColumn }) })),
             isValid: () => true,
         });
@@ -178,7 +186,7 @@ const StyledColumnWizard = (props) => {
             title: 'Style',
             details: 'Configure the Icon, Text and Cell styles',
             isValid: () => (0, StyledColumnWizardRatingSection_1.isValidRatingStyle)(styledColumn),
-            renderSummary: () => (0, StyledColumnWizardRatingSection_1.renderStyledColumnRatingSummary)(styledColumn),
+            renderSummary: StyledColumnWizardRatingSection_1.renderStyledColumnRatingSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardRatingSection_1.StyledColumnWizardRatingSection, { onChange: setStyledColumn }) })),
         });
     }
@@ -187,14 +195,14 @@ const StyledColumnWizard = (props) => {
             title: 'Style',
             details: 'Set Bounds and optional Ranges',
             isValid: () => (0, StyledColumnWizardRangeBarSection_1.isValidRangeBarBounds)(styledColumn),
-            renderSummary: () => (0, StyledColumnWizardRangeBarSection_1.renderStyledColumnRangeBarRangeStepSummary)(styledColumn),
+            renderSummary: StyledColumnWizardRangeBarSection_1.renderStyledColumnRangeBarRangeStepSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardRangeBarSection_1.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: () => (0, StyledColumnWizardRangeBarSection_1.renderStyledColumnRangeBarDisplayStepSummary)(styledColumn),
+            renderSummary: StyledColumnWizardRangeBarSection_1.renderStyledColumnRangeBarDisplayStepSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardRangeBarSection_1.StyledColumnWizardRangeBarSection, { variant: "appearance", onChange: setStyledColumn }) })),
         });
     }
@@ -203,14 +211,14 @@ const StyledColumnWizard = (props) => {
             title: 'Mappings',
             details: 'Select a preset or define key → icon mappings',
             isValid: () => (0, StyledColumnWizardIconSection_1.isValidIconStyleMappings)(styledColumn),
-            renderSummary: () => (0, StyledColumnWizardIconSection_1.renderStyledColumnIconMappingsSummary)(styledColumn),
+            renderSummary: StyledColumnWizardIconSection_1.renderStyledColumnIconMappingsSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardIconSection_1.StyledColumnWizardIconSection, { variant: "mappings", onChange: setStyledColumn }) })),
         });
         specificSteps.push({
             title: 'Style',
             details: 'Set Styles for sizing, cell text, tooltips, font and cell',
             isValid: () => true,
-            renderSummary: () => (0, StyledColumnWizardIconSection_1.renderStyledColumnIconStyleSummary)(styledColumn),
+            renderSummary: StyledColumnWizardIconSection_1.renderStyledColumnIconStyleSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnWizardIconSection_1.StyledColumnWizardIconSection, { variant: "style", onChange: setStyledColumn }) })),
         });
     }
@@ -228,13 +236,13 @@ const StyledColumnWizard = (props) => {
                 }
                 return true;
             },
-            renderSummary: () => (0, StyledColumnBadgeSection_1.renderBadgeSummary)(styledColumn),
+            renderSummary: StyledColumnBadgeSection_1.renderBadgeSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnBadgeSection_1.StyledColumnBadgeSection, { onChange: setStyledColumn }) })),
         });
         specificSteps.push({
             title: 'Style',
             details: 'Set Cell Density and Cell Style',
-            renderSummary: () => (0, StyledColumnBadgeSection_1.renderBadgeStyleSummary)(styledColumn),
+            renderSummary: StyledColumnBadgeSection_1.renderBadgeStyleSummary,
             render: () => ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(StyledColumnBadgeSection_1.StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
         });
     }
@@ -283,7 +291,7 @@ const StyledColumnWizard = (props) => {
                 title: 'Summary',
                 details: 'Review your Styled Column',
                 render: () => {
-                    return ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:p-2", children: (0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}) }));
+                    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: [(0, jsx_runtime_1.jsx)(OnePageAdaptableWizard_1.OnePageWizardSummary, {}), styledColumn.GradientStyle && ((0, jsx_runtime_1.jsx)(StyledColumnGradientPreview_1.StyledColumnGradientPreviewCard, { data: styledColumn })), styledColumn.PercentBarStyle && ((0, jsx_runtime_1.jsx)(StyledColumnPercentBarPreview_1.StyledColumnPercentBarPreviewCard, { data: styledColumn })), styledColumn.BadgeStyle && ((0, jsx_runtime_1.jsx)(StyledColumnBadgePreview_1.StyledColumnBadgePreviewCard, { data: styledColumn })), styledColumn.RatingStyle && ((0, jsx_runtime_1.jsx)(StyledColumnRatingPreview_1.StyledColumnRatingPreviewCard, { data: styledColumn })), styledColumn.IconStyle && ((0, jsx_runtime_1.jsx)(StyledColumnIconPreview_1.StyledColumnIconPreviewCard, { data: styledColumn })), styledColumn.BulletChartStyle && ((0, jsx_runtime_1.jsx)(StyledColumnBulletPreview_1.StyledColumnBulletPreviewCard, { data: styledColumn })), styledColumn.RangeBarStyle && ((0, jsx_runtime_1.jsx)(StyledColumnRangeBarPreview_1.StyledColumnRangeBarPreviewCard, { data: styledColumn })), styledColumn.SparklineStyle && ((0, jsx_runtime_1.jsx)(StyledColumnSparklinePreview_1.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. */