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

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

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledColumnSparklineSettingsSection = void 0;
+exports.StyledColumnSparklineSettingsSection = exports.isValidSparklineSettings = exports.renderSparklineSummary = void 0;
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
-const Select_1 = require("../../../components/Select");
+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"));
@@ -12,6 +13,7 @@ const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/Adapt
 const ColorPicker_1 = require("../../../components/ColorPicker");
 const CheckBox_1 = require("../../../components/CheckBox");
 const Flex_1 = require("../../../components/Flex");
+const StyledColumnSliceStyleEditors_1 = require("./StyledColumnSliceStyleEditors");
 const SparklineTypes = {
     LINE: 'line',
     AREA: 'area',
@@ -24,14 +26,56 @@ const sparklineTypeOptions = [
     { label: 'Column', value: SparklineTypes.BAR_VERTICAL },
     { label: 'Bar', value: SparklineTypes.BAR_HORIZONTAL },
 ];
+const sparklineTypeLabel = (opts) => {
+    const type = opts?.type ?? 'line';
+    if (type === 'bar') {
+        const direction = opts?.direction ?? 'vertical';
+        return direction === 'horizontal' ? 'Bar (horizontal)' : 'Column (vertical)';
+    }
+    return type.charAt(0).toUpperCase() + type.slice(1);
+};
+/**
+ * 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.
+ */
+const renderSparklineSummary = (data) => {
+    const opts = data.SparklineStyle?.options;
+    if (!opts) {
+        return (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: "\u2014" });
+    }
+    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] })] }));
+};
+exports.renderSparklineSummary = renderSparklineSummary;
+/**
+ * Validation for the Sparkline Settings wizard step.
+ * - Sparkline type must be set (defaulted to `line` so this is mostly a safety net).
+ * - When Min and Max overrides are both provided, Min must be strictly less than Max.
+ */
+const isValidSparklineSettings = (data) => {
+    const opts = data.SparklineStyle?.options;
+    if (!opts?.type) {
+        return 'Choose a Sparkline Type';
+    }
+    if (typeof opts.min === 'number' && typeof opts.max === 'number' && opts.min >= opts.max) {
+        return 'Min Value must be less than Max Value';
+    }
+    return true;
+};
+exports.isValidSparklineSettings = isValidSparklineSettings;
 const StyledColumnSparklineSettingsSection = ({ onChange }) => {
     const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const sparklineOptions = data.SparklineStyle?.options ?? {
-        type: SparklineTypes.LINE,
-    };
-    if (!sparklineOptions.type) {
-        sparklineOptions.type = SparklineTypes.LINE;
-    }
+    // Compute defaults non-destructively — never mutate persisted state during
+    // render. The chart `type` is required so default it to `line` if absent.
+    const persistedOptions = data.SparklineStyle?.options;
+    const sparklineOptions = persistedOptions
+        ? { ...persistedOptions, type: persistedOptions.type ?? SparklineTypes.LINE }
+        : { type: SparklineTypes.LINE };
     const handleOptionsChange = (newOptions) => {
         const updatedStyledColumn = {
             ...data,
@@ -54,41 +98,22 @@ const StyledColumnSparklineSettingsSection = ({ onChange }) => {
         handleOptionsChange(newOptions);
     };
     const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs_1.Tabs, { className: "twa:mb-2" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Settings"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(FormLayout_1.default, null,
-                    React.createElement(FormLayout_1.FormRow, { label: "Sparkline Type" },
-                        React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
-                            React.createElement(Select_1.Select, { options: sparklineTypeOptions, value: sparklineType, onChange: handleTypeChange, placeholder: "Select Sparkline Type" }))),
-                    isObjectNumberArray && (React.createElement(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Min Value" },
-                        React.createElement(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)" })),
-                    React.createElement(FormLayout_1.FormRow, { label: "Max Value" },
-                        React.createElement(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)" }))))),
-        React.createElement(Tabs_1.Tabs, { className: "twa:mb-2" },
-            React.createElement(Tabs_1.Tabs.Tab, null, "Theming"),
-            React.createElement(Tabs_1.Tabs.Tab, null, "Axis"),
-            React.createElement(Tabs_1.Tabs.Tab, { hidden: sparklineOptions.type === 'bar' }, "Marker"),
-            React.createElement(Tabs_1.Tabs.Tab, null, "Tooltip"),
-            React.createElement(Tabs_1.Tabs.Tab, null, "Highlight Style"),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange })),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange })),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange })),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange })),
-            React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange })))));
+    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 });
+                        } })] })] }));
 };
 exports.StyledColumnSparklineSettingsSection = StyledColumnSparklineSettingsSection;
 const SparklineObjectArrayProperties = ({ options, onChange, }) => {
@@ -114,13 +139,7 @@ const SparklineObjectArrayProperties = ({ options, onChange, }) => {
             api.logError('Error parsing sparkline data', error);
         }
     }, [api, data.ColumnId]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormLayout_1.FormRow, { label: "X Key" },
-            React.createElement(AdaptableInput_1.default, { value: options.xKey ?? 'x', onChange: (e) => onChange({ ...options, xKey: e.target.value }) })),
-        React.createElement(FormLayout_1.FormRow, { label: "Y Key" },
-            React.createElement(AdaptableInput_1.default, { value: options.yKey ?? 'y', onChange: (e) => onChange({ ...options, yKey: e.target.value }) })),
-        previewData && (React.createElement(FormLayout_1.FormRow, { label: "Preview" },
-            React.createElement(Tag_1.Tag, null, previewData)))));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "X Key", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { value: options.xKey ?? 'x', onChange: (e) => onChange({ ...options, xKey: e.target.value }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Y Key", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { value: options.yKey ?? 'y', onChange: (e) => onChange({ ...options, yKey: e.target.value }) }) }), previewData && ((0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Preview", children: (0, jsx_runtime_1.jsx)(Tag_1.Tag, { children: previewData }) }))] }));
 };
 const SparklineThemingOptions = ({ options, onChange, }) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -146,59 +165,34 @@ const SparklineThemingOptions = ({ options, onChange, }) => {
         { value: 'ag-financial', label: 'Financial' },
         { value: 'ag-financial-dark', label: 'Financial Dark' },
     ];
-    return (React.createElement(FormLayout_1.default, null,
-        sparklineOptions.type !== 'line' && (React.createElement(FormLayout_1.FormRow, { label: "Fill" },
-            React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => handleChange('fill', color) }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => handleChange('stroke', color) }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
-                React.createElement(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)) }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Padding" },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(Flex_1.Box, { className: "twa:mr-1" }, "Top"),
-                React.createElement(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" }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Right"),
-                React.createElement(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" }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Bottom"),
-                React.createElement(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" }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Left"),
-                React.createElement(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" }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Line Dash" },
-            React.createElement(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
-                            .split(',')
-                            .map(Number)
-                            .filter((n) => !isNaN(n))
-                        : [];
-                    handleChange('lineDash', dashArray);
-                } })),
-        React.createElement(FormLayout_1.FormRow, { label: "Line Dash Offset" },
-            React.createElement(AdaptableInput_1.default, { title: "The offset of the line dash pattern in pixels", type: "number", min: 0, value: sparklineOptions.lineDashOffset ?? '', onChange: (e) => handleChange('lineDashOffset', Number(e.target.value)) })),
-        React.createElement(FormLayout_1.FormRow, { label: "Background" },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(CheckBox_1.CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
-                        ...sparklineOptions.background,
-                        visible,
-                    }) }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2" },
-                    React.createElement(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' && (React.createElement(FormLayout_1.FormRow, { label: "Theme" },
-            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
-                React.createElement(Select_1.Select, { value: sparklineOptions.theme ?? 'ag-default', onChange: (themeName) => handleChange('theme', themeName), options: themes }))))));
+    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) => {
+                        const value = e.target.value;
+                        const dashArray = value
+                            ? value
+                                .split(',')
+                                .map(Number)
+                                .filter((n) => !isNaN(n))
+                            : [];
+                        handleChange('lineDash', dashArray);
+                    } }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Line Dash Offset", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { title: "The offset of the line dash pattern in pixels", type: "number", min: 0, value: sparklineOptions.lineDashOffset ?? '', onChange: (e) => handleChange('lineDashOffset', Number(e.target.value)) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Background", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
+                                ...sparklineOptions.background,
+                                visible,
+                            }) }), (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 }) }) }))] }));
 };
 const SparklineAxisOptions = ({ options, onChange, }) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
-    const sparklineOptions = options ?? {};
-    if (!sparklineOptions.axis?.type) {
-        sparklineOptions.axis = sparklineOptions.axis ?? { type: 'category' };
-        sparklineOptions.axis.type = 'category';
-    }
+    // Non-destructive default for the axis sub-tree so we never mutate the
+    // persisted options object during render.
+    const sparklineOptions = {
+        ...(options ?? {}),
+        axis: {
+            type: 'category',
+            ...(options?.axis ?? {}),
+        },
+    };
     const handleChange = (value) => {
         onChange({
             ...options,
@@ -214,26 +208,7 @@ const SparklineAxisOptions = ({ options, onChange, }) => {
         { value: 'time', label: 'Time' },
     ];
     const isAxisEnabled = sparklineOptions.axis?.visible ?? false;
-    return (React.createElement(FormLayout_1.default, null,
-        React.createElement(FormLayout_1.FormRow, { label: "Show Axis" },
-            React.createElement(CheckBox_1.CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) })),
-        React.createElement(FormLayout_1.FormRow, { label: "Axis Type" },
-            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
-                React.createElement(Select_1.Select, { disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onChange: (type) => handleChange({ type }), options: axisTypes }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(ColorPicker_1.ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: sparklineOptions.axis?.stroke, onChange: (stroke) => handleChange({ stroke }) }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
-                React.createElement(AdaptableInput_1.default, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Reverse Scale" },
-            React.createElement(CheckBox_1.CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) })),
-        sparklineOptions.axis.type === 'category' && (React.createElement(React.Fragment, null,
-            React.createElement(FormLayout_1.FormRow, { label: "Padding" },
-                React.createElement(Flex_1.Flex, { alignItems: "center" },
-                    React.createElement(Flex_1.Box, { className: "twa:mr-1" }, "Inner"),
-                    React.createElement(AdaptableInput_1.default, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }),
-                    React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Outer"),
-                    React.createElement(AdaptableInput_1.default, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })))))));
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Axis", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Axis 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: !isAxisEnabled, value: sparklineOptions.axis.type, onValueChange: (type) => handleChange({ type }), items: axisTypes }) }) }), (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, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: sparklineOptions.axis?.stroke, onChange: (stroke) => handleChange({ stroke }) }), (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, { disabled: !isAxisEnabled, className: "twa:w-[70px]", title: "The width in pixels of the axis line", type: "number", min: 0, value: sparklineOptions.axis?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }) })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Reverse Scale", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) }) }), sparklineOptions.axis.type === 'category' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (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: "Inner" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { disabled: !isAxisEnabled, title: "The size of the gap between categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingInner ?? '', onChange: (e) => handleChange({ paddingInner: Number(e.target.value) }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Outer" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { disabled: !isAxisEnabled, title: "The padding on the outside of first and last categories (0-1)", type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.axis?.paddingOuter ?? '', onChange: (e) => handleChange({ paddingOuter: Number(e.target.value) }) })] }) }) }))] }));
 };
 const SparklineTooltipOptions = ({ options, onChange, }) => {
     const sparklineOptions = options;
@@ -263,31 +238,19 @@ const SparklineTooltipOptions = ({ options, onChange, }) => {
         { value: 'top-left', label: 'Top Left' },
         { value: 'center', label: 'Center' },
     ];
-    return (React.createElement(FormLayout_1.default, null,
-        React.createElement(FormLayout_1.FormRow, { label: "Show Tooltip" },
-            React.createElement(CheckBox_1.CheckBox, { checked: isTooltipEnabled, onChange: (enabled) => handleChange('enabled', enabled) })),
-        React.createElement(FormLayout_1.FormRow, { label: "Anchor To" },
-            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
-                React.createElement(Select_1.Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.anchorTo, onChange: (value) => handleChange('position', {
-                        ...sparklineOptions.tooltip?.position,
-                        anchorTo: value,
-                    }), options: anchorToOptions }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Placement" },
-            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
-                React.createElement(Select_1.Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.placement, onChange: (value) => handleChange('position', {
-                        ...sparklineOptions.tooltip?.position,
-                        placement: value,
-                    }), options: placementOptions }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Position Offset X" },
-            React.createElement(AdaptableInput_1.default, { disabled: !isTooltipEnabled, title: "The horizontal offset in pixels for the position of the tooltip.", type: "number", value: sparklineOptions.tooltip?.position?.xOffset ?? '', onChange: (e) => handleChange('position', {
-                    ...sparklineOptions.tooltip?.position,
-                    xOffset: Number(e.target.value),
-                }) })),
-        React.createElement(FormLayout_1.FormRow, { label: "Position Offset Y" },
-            React.createElement(AdaptableInput_1.default, { disabled: !isTooltipEnabled, title: "The vertical offset in pixels for the position of the tooltip.", type: "number", value: sparklineOptions.tooltip?.position?.yOffset ?? '', onChange: (e) => handleChange('position', {
-                    ...sparklineOptions.tooltip?.position,
-                    yOffset: Number(e.target.value),
-                }) }))));
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Tooltip", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isTooltipEnabled, onChange: (enabled) => handleChange('enabled', enabled) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Anchor To", 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: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.anchorTo, onValueChange: (value) => handleChange('position', {
+                            ...sparklineOptions.tooltip?.position,
+                            anchorTo: value,
+                        }), items: anchorToOptions }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Placement", 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: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.placement, onValueChange: (value) => handleChange('position', {
+                            ...sparklineOptions.tooltip?.position,
+                            placement: value,
+                        }), items: placementOptions }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position Offset X", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { disabled: !isTooltipEnabled, title: "The horizontal offset in pixels for the position of the tooltip.", type: "number", className: "twa:w-full", value: sparklineOptions.tooltip?.position?.xOffset ?? '', onChange: (e) => handleChange('position', {
+                            ...sparklineOptions.tooltip?.position,
+                            xOffset: Number(e.target.value),
+                        }) }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Position Offset Y", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { className: "twa:w-full", disabled: !isTooltipEnabled, title: "The vertical offset in pixels for the position of the tooltip.", type: "number", value: sparklineOptions.tooltip?.position?.yOffset ?? '', onChange: (e) => handleChange('position', {
+                            ...sparklineOptions.tooltip?.position,
+                            yOffset: Number(e.target.value),
+                        }) }) }) })] }));
 };
 const SparklineMarkerOptions = ({ options, onChange }) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -313,21 +276,7 @@ const SparklineMarkerOptions = ({ options, onChange }) => {
         { value: 'triangle', label: 'Triangle' },
     ];
     const isMarkerEnabled = sparklineOptions.marker?.enabled ?? false;
-    return (React.createElement(FormLayout_1.default, null,
-        React.createElement(FormLayout_1.FormRow, { label: "Show Markers" },
-            React.createElement(CheckBox_1.CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) })),
-        React.createElement(FormLayout_1.FormRow, { label: "Marker Size" },
-            React.createElement(AdaptableInput_1.default, { disabled: !isMarkerEnabled, type: "number", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" })),
-        React.createElement(FormLayout_1.FormRow, { label: "Marker Shape" },
-            React.createElement(Flex_1.Box, { className: "twa:max-w-[160px]" },
-                React.createElement(Select_1.Select, { disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onChange: (shape) => handleChange({ shape: shape }), options: markerShapes }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Fill" },
-            React.createElement(ColorPicker_1.ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) })),
-        React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(ColorPicker_1.ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: sparklineOptions.marker?.stroke, onChange: (stroke) => handleChange({ stroke }) }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
-                React.createElement(AdaptableInput_1.default, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })))));
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Show Markers", children: (0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Marker Size", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { disabled: !isMarkerEnabled, type: "number", className: "twa:w-full", min: 1, value: sparklineOptions.marker?.size ?? '', onChange: (e) => handleChange({ size: Number(e.target.value) }), title: "The size in pixels of the markers" }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Marker Shape", children: (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:max-w-[160px]", children: (0, jsx_runtime_1.jsx)(NewSelect_1.SingleSelect, { className: "twa:w-full", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onValueChange: (shape) => handleChange({ shape: shape }), items: markerShapes }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Fill", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) }) }), (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, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: sparklineOptions.marker?.stroke, onChange: (stroke) => handleChange({ stroke }) }), (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, { disabled: !isMarkerEnabled, className: "twa:w-[70px]", type: "number", min: 0, value: sparklineOptions.marker?.strokeWidth ?? '', onChange: (e) => handleChange({ strokeWidth: Number(e.target.value) }), title: "The width of the marker stroke in pixels" })] }) })] }));
 };
 const SparklineHighlightOptions = ({ options, onChange, }) => {
     const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
@@ -365,17 +314,5 @@ const SparklineHighlightOptions = ({ options, onChange, }) => {
             },
         });
     };
-    return (React.createElement(FormLayout_1.default, null,
-        React.createElement(FormLayout_1.FormRow, { label: "Item Fill" },
-            React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) })),
-        React.createElement(FormLayout_1.FormRow, { label: "Item Stroke" },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: highlightOptions?.highlightedItem?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Width"),
-                React.createElement(AdaptableInput_1.default, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" }))),
-        React.createElement(FormLayout_1.FormRow, { label: "Series" },
-            React.createElement(Flex_1.Flex, { alignItems: "center" },
-                React.createElement(CheckBox_1.CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }),
-                React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:mr-1" }, "Stroke Width"),
-                React.createElement(AdaptableInput_1.default, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })))));
+    return ((0, jsx_runtime_1.jsxs)(FormLayout_1.default, { children: [(0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Item Fill", children: (0, jsx_runtime_1.jsx)(ColorPicker_1.ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Item 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 highlighted item stroke", api: api, value: highlightOptions?.highlightedItem?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }), (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, { className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedItem?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" })] }) }), (0, jsx_runtime_1.jsx)(FormLayout_1.FormRow, { label: "Series", children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", children: [(0, jsx_runtime_1.jsx)(CheckBox_1.CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:ml-2 twa:mr-1", children: "Stroke Width" }), (0, jsx_runtime_1.jsx)(AdaptableInput_1.default, { disabled: !highlightOptions?.enabled, className: "twa:w-[70px]", type: "number", min: 0, value: highlightOptions?.highlightedSeries?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })] }) })] }));
 };