@adaptabletools/adaptable 20.0.0-canary.2 → 20.0.0-canary.20

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

@@ -1,214 +1,371 @@
 import * as React from 'react';
-import { Box } from 'rebass';
-import { CheckBox } from '../../../components/CheckBox';
-import { ColorPicker } from '../../../components/ColorPicker';
-import FormLayout, { FormRow } from '../../../components/FormLayout';
-import Input from '../../../components/Input';
+import { Box, Flex } from 'rebass';
 import { Select } from '../../../components/Select';
 import { Tabs } from '../../../components/Tabs';
+import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
+import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { Tag } from '../../../components/Tag';
-import { setInPath } from '../../../Utilities/Extensions/ObjectExtensions';
 import AdaptableInput from '../../Components/AdaptableInput';
-import { LIGHT_BLUE, LIGHT_GRAY, YELLOW } from '../../UIHelper';
-import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
-const CommonProperties = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    const axisTypeOptions = React.useMemo(() => {
-        return [
-            {
-                label: 'Number',
-                value: 'number',
-            },
-            {
-                label: 'Category',
-                value: 'category',
-            },
-            {
-                label: 'Time',
-                value: 'time',
-            },
-        ];
-    }, [data]);
-    return (React.createElement(Tabs, { mb: 2 },
-        React.createElement(Tabs.Tab, null, "Padding"),
-        React.createElement(Tabs.Tab, null, "Axis"),
-        React.createElement(Tabs.Tab, null, "Highlight Style"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Top" },
-                    React.createElement(Input, { onChange: (event) => props.onOptionChange(['padding', 'top'], event.target.value ?? 0), type: "number", value: data.SparkLineStyle.options?.padding?.top })),
-                React.createElement(FormRow, { label: "Bottom" },
-                    React.createElement(Input, { onChange: (event) => props.onOptionChange(['padding', 'bottom'], event.target.value ?? 0), type: "number", value: data.SparkLineStyle.options?.padding?.bottom })),
-                React.createElement(FormRow, { label: "Left" },
-                    React.createElement(Input, { onChange: (event) => props.onOptionChange(['padding', 'left'], event.target.value ?? 0), type: "number", value: data.SparkLineStyle.options?.padding?.left })),
-                React.createElement(FormRow, { label: "Right" },
-                    React.createElement(Input, { onChange: (event) => props.onOptionChange(['padding', 'right'], event.target.value ?? 0), type: "number", value: data.SparkLineStyle.options?.padding?.right })))),
-        React.createElement(Tabs.Content, null,
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Axis Type" },
-                    React.createElement(Box, { maxWidth: 180 },
-                        React.createElement(Select, { value: data?.SparkLineStyle?.options?.axis?.type, options: axisTypeOptions, onChange: (value) => props.onOptionChange(['axis', 'type'], value), placeholder: "Select Axis Type" }))),
-                React.createElement(FormRow, { label: "Stroke Color" },
-                    React.createElement(ColorPicker, { api: api, value: data.SparkLineStyle?.options?.axis?.stroke ?? '#fff', onChange: (color) => props.onOptionChange(['axis', 'stroke'], color) })),
-                React.createElement(FormRow, { label: "Stroke Width" },
-                    React.createElement(AdaptableInput, { type: "number", value: data.SparkLineStyle?.options?.axis?.strokeWidth ?? 0, onChange: (event) => props.onOptionChange(['axis', 'strokeWidth'], parseFloat(event.target.value)) })))),
-        React.createElement(Tabs.Content, null,
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Fill" },
-                    React.createElement(ColorPicker, { api: api, value: data.SparkLineStyle?.options?.highlightStyle?.item?.fill ?? YELLOW, onChange: (color) => props.onOptionChange(['highlightStyle', 'item', 'fill'], color) })),
-                React.createElement(FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker, { api: api, value: data.SparkLineStyle?.options?.highlightStyle?.item?.stroke ?? LIGHT_GRAY, onChange: (color) => props.onOptionChange(['highlightStyle', 'item', 'stroke'], color) })),
-                React.createElement(FormRow, { label: "Stroke Width" },
-                    React.createElement(AdaptableInput, { type: "number", value: data.SparkLineStyle?.options?.highlightStyle?.item?.strokeWidth, onChange: (event) => props.onOptionChange(['highlightStyle', 'item', 'strokeWidth'], parseFloat(event.target.value)) }))))));
-};
-const SparklineMarkerProperties = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    const sparklineOptions = data.SparkLineStyle.options;
-    return (React.createElement(FormLayout, null,
-        React.createElement(FormRow, { label: "Enabled" },
-            React.createElement(CheckBox, { checked: sparklineOptions?.marker?.enabled ?? true, onChange: (checked) => props.onOptionChange(['marker', 'enabled'], checked) })),
-        React.createElement(FormRow, { label: "Size" },
-            React.createElement(AdaptableInput, { type: "number", value: sparklineOptions?.marker?.size ?? 0, onChange: (event) => props.onOptionChange(['marker', 'size'], parseFloat(event.target.value)) })),
-        React.createElement(FormRow, { label: "Fill" },
-            React.createElement(ColorPicker, { api: api, value: sparklineOptions?.marker?.fill ?? LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'fill'], color) })),
-        React.createElement(FormRow, { label: "Stroke" },
-            React.createElement(ColorPicker, { api: api, value: sparklineOptions?.marker?.stroke ?? LIGHT_BLUE, onChange: (color) => props.onOptionChange(['marker', 'stroke'], color) })),
-        React.createElement(FormRow, { label: "Stroke Width" },
-            React.createElement(AdaptableInput, { type: "number", value: sparklineOptions?.marker?.strokeWidth ?? 1, onChange: (event) => props.onOptionChange(['marker', 'strokeWidth'], parseFloat(event.target.value)) }))));
-};
-const SparklineLineProperties = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    const sparklineOptions = data.SparkLineStyle.options;
-    return (React.createElement(FormLayout, null,
-        React.createElement(FormRow, { label: "Stroke" },
-            React.createElement(ColorPicker, { api: api, value: sparklineOptions?.stroke ?? LIGHT_BLUE, onChange: (color) => props.onOptionChange(['stroke'], color) })),
-        React.createElement(FormRow, { label: "Stroke Width" },
-            React.createElement(AdaptableInput, { type: "number", value: sparklineOptions?.strokeWidth, onChange: (event) => props.onOptionChange(['strokeWidth'], parseFloat(event.target.value)) }))));
-};
-const TypeAreaProperties = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    const sparklineOptions = data.SparkLineStyle.options;
-    return (React.createElement(Tabs, { mb: 2 },
-        React.createElement(Tabs.Tab, null, "Stroke"),
-        React.createElement(Tabs.Tab, null, "Line"),
-        React.createElement(Tabs.Tab, null, "Marker"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker, { api: api, value: sparklineOptions?.fill ?? LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })))),
-        React.createElement(Tabs.Content, null,
-            React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
-        React.createElement(Tabs.Content, null,
-            React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange }))));
-};
-const TypeLineProperties = (props) => {
-    return (React.createElement(Tabs, { mb: 2 },
-        React.createElement(Tabs.Tab, null, "Line"),
-        React.createElement(Tabs.Tab, null, "Marker"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
-        React.createElement(Tabs.Content, null,
-            React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange }))));
+import { ColorPicker } from '../../../components/ColorPicker';
+import { CheckBox } from '../../../components/CheckBox';
+const SparklineTypes = {
+    LINE: 'line',
+    AREA: 'area',
+    BAR_VERTICAL: 'bar_vertical',
+    BAR_HORIZONTAL: 'bar_horizontal',
 };
-const TypeColumnBarProperties = (props) => {
+const sparklineTypeOptions = [
+    { label: 'Line', value: SparklineTypes.LINE },
+    { label: 'Area', value: SparklineTypes.AREA },
+    { label: 'Column', value: SparklineTypes.BAR_VERTICAL },
+    { label: 'Bar', value: SparklineTypes.BAR_HORIZONTAL },
+];
+export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    const sparklineOptions = data.SparkLineStyle.options;
-    return (React.createElement(Tabs, { mb: 2 },
-        React.createElement(Tabs.Tab, null, "General"),
-        React.createElement(Tabs.Content, null,
-            React.createElement(FormLayout, null,
-                React.createElement(FormRow, { label: "Fill" },
-                    React.createElement(ColorPicker, { api: api, value: sparklineOptions?.fill ?? LIGHT_BLUE, onChange: (color) => props.onOptionChange(['fill'], color) })),
-                React.createElement(FormRow, { label: "Stroke" },
-                    React.createElement(ColorPicker, { api: api, value: sparklineOptions?.stroke ?? LIGHT_GRAY, onChange: (color) => props.onOptionChange(['stroke'], color) })),
-                React.createElement(FormRow, { label: "Stroke Width" },
-                    React.createElement(AdaptableInput, { type: "number", value: sparklineOptions?.strokeWidth ?? 1, onChange: (event) => props.onOptionChange(['strokeWidth'], event.target.value) }))))));
+    const sparklineOptions = data.SparklineStyle?.options ?? {
+        type: SparklineTypes.LINE,
+    };
+    if (!sparklineOptions.type) {
+        sparklineOptions.type = SparklineTypes.LINE;
+    }
+    const handleOptionsChange = (newOptions) => {
+        const updatedStyledColumn = {
+            ...data,
+            SparklineStyle: { ...data.SparklineStyle, options: newOptions },
+        };
+        onChange(updatedStyledColumn);
+    };
+    const currentType = sparklineOptions.type ?? 'line';
+    const currentDirection = sparklineOptions.direction;
+    const sparklineType = (currentType === 'bar' ? `bar_${currentDirection ?? 'vertical'}` : currentType);
+    const handleTypeChange = (value) => {
+        const [type, direction] = value.split('_');
+        const newOptions = { ...sparklineOptions, type };
+        if (direction) {
+            newOptions.direction = direction;
+        }
+        else {
+            delete newOptions.direction;
+        }
+        handleOptionsChange(newOptions);
+    };
+    const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs, { mb: 2 },
+            React.createElement(Tabs.Tab, null, "Settings"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(FormLayout, null,
+                    React.createElement(FormRow, { label: "Sparkline Type" },
+                        React.createElement(Box, { maxWidth: 160 },
+                            React.createElement(Select, { options: sparklineTypeOptions, value: sparklineType, onChange: handleTypeChange, placeholder: "Select Sparkline Type" }))),
+                    isObjectNumberArray && (React.createElement(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })),
+                    React.createElement(FormRow, { label: "Min Value" },
+                        React.createElement(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)" })),
+                    React.createElement(FormRow, { label: "Max Value" },
+                        React.createElement(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)" }))))),
+        React.createElement(Tabs, { mb: 2 },
+            React.createElement(Tabs.Tab, null, "Theming"),
+            React.createElement(Tabs.Tab, null, "Axis"),
+            React.createElement(Tabs.Tab, { hidden: sparklineOptions.type === 'bar' }, "Marker"),
+            React.createElement(Tabs.Tab, null, "Tooltip"),
+            React.createElement(Tabs.Tab, null, "Highlight Style"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange })),
+            React.createElement(Tabs.Content, null,
+                React.createElement(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange })),
+            React.createElement(Tabs.Content, null,
+                React.createElement(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange })),
+            React.createElement(Tabs.Content, null,
+                React.createElement(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange })),
+            React.createElement(Tabs.Content, null,
+                React.createElement(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange })))));
 };
-const SparklineObjectNumberArrayProperties = (props) => {
+const SparklineObjectArrayProperties = ({ options, onChange, }) => {
     const { data, api } = useOnePageAdaptableWizardContext();
-    const sparkLineOptions = data.SparkLineStyle.options;
-    const [sparklineDataItem, setSparklineDataItem] = React.useState('');
+    const [previewData, setPreviewData] = React.useState('');
     React.useEffect(() => {
+        const column = api.columnApi.getColumnWithColumnId(data.ColumnId);
+        if (!column) {
+            return;
+        }
         try {
-            let cellData = null;
-            const MAX_ROWS_TO_CHECK = 20;
-            let currentRow = 0;
-            while (!cellData || currentRow < MAX_ROWS_TO_CHECK) {
-                const rowWithData = api.gridApi.getRowNodeForIndex(currentRow)?.data;
-                const column = api.columnApi.getColumnWithColumnId(data.ColumnId);
-                if (rowWithData?.[column?.field]?.[0]) {
-                    cellData = rowWithData?.[column?.field]?.[0];
+            for (let row = 0; row < 20; row++) {
+                const rowNode = api.gridApi.getRowNodeForIndex(row);
+                const cellData = rowNode?.data?.[column.field]?.[0];
+                if (cellData) {
+                    const preview = JSON.stringify(cellData, null, 2).replace(/[{}",]/g, '');
+                    setPreviewData(preview);
                     break;
                 }
-                currentRow++;
-            }
-            if (cellData) {
-                const str = JSON.stringify(cellData, null, 2).replace(/[{}",]/g, '');
-                setSparklineDataItem(str);
             }
         }
-        catch (e) {
-            api.logError('Error parsing sparkline data', e);
+        catch (error) {
+            api.logError('Error parsing sparkline data', error);
         }
-    }, [data]);
+    }, [api, data.ColumnId]);
     return (React.createElement(React.Fragment, null,
         React.createElement(FormRow, { label: "X Key" },
-            React.createElement(Input, { onChange: (event) => props.onOptionChange(['xKey'], event.target.value), value: sparkLineOptions?.xKey ?? 'x' })),
+            React.createElement(AdaptableInput, { value: options.xKey ?? 'x', onChange: (e) => onChange({ ...options, xKey: e.target.value }) })),
         React.createElement(FormRow, { label: "Y Key" },
-            React.createElement(Input, { onChange: (event) => props.onOptionChange(['yKey'], event.target.value), value: sparkLineOptions?.yKey ?? 'y' })),
-        sparklineDataItem && (React.createElement(FormRow, { label: "Preview" },
-            React.createElement(Tag, null, sparklineDataItem)))));
+            React.createElement(AdaptableInput, { value: options.yKey ?? 'y', onChange: (e) => onChange({ ...options, yKey: e.target.value }) })),
+        previewData && (React.createElement(FormRow, { label: "Preview" },
+            React.createElement(Tag, null, previewData)))));
 };
-export const StyledColumnSparklineSettingsSection = (props) => {
-    const { data, api } = useOnePageAdaptableWizardContext();
-    const sparklineTypeOptions = React.useMemo(() => [
-        { label: 'Line', value: 'line' },
-        { label: 'Area', value: 'area' },
-        { label: 'Column', value: 'column' },
-        { label: 'Bar', value: 'bar' },
-    ], [data]);
-    const handleOptionChange = React.useCallback((path, value) => {
-        const newOptions = setInPath(data.SparkLineStyle.options ?? {}, path, value);
-        props.onChange({
-            ...data,
-            SparkLineStyle: {
-                ...data.SparkLineStyle,
-                options: newOptions,
+const SparklineThemingOptions = ({ options, onChange, }) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    const sparklineOptions = options;
+    const handleChange = (key, value) => {
+        onChange({ ...options, [key]: value });
+    };
+    const handlePaddingChange = (key, value) => {
+        const currentPadding = sparklineOptions.padding || {};
+        handleChange('padding', { ...currentPadding, [key]: value });
+    };
+    const themes = [
+        { value: 'ag-default', label: 'Default' },
+        { value: 'ag-default-dark', label: 'Default Dark' },
+        { value: 'ag-sheets', label: 'Sheets' },
+        { value: 'ag-sheets-dark', label: 'Sheets Dark' },
+        { value: 'ag-polychroma', label: 'Polychroma' },
+        { value: 'ag-polychroma-dark', label: 'Polychroma Dark' },
+        { value: 'ag-vivid', label: 'Vivid' },
+        { value: 'ag-vivid-dark', label: 'Vivid Dark' },
+        { value: 'ag-material', label: 'Material' },
+        { value: 'ag-material-dark', label: 'Material Dark' },
+        { value: 'ag-financial', label: 'Financial' },
+        { value: 'ag-financial-dark', label: 'Financial Dark' },
+    ];
+    return (React.createElement(FormLayout, null,
+        sparklineOptions.type !== 'line' && (React.createElement(FormRow, { label: "Fill" },
+            React.createElement(ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => handleChange('fill', color) }))),
+        React.createElement(FormRow, { label: "Stroke" },
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => handleChange('stroke', color) }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Width"),
+                React.createElement(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", style: { width: '70px' }, min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) }))),
+        React.createElement(FormRow, { label: "Padding" },
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(Box, { mr: 1 }, "Top"),
+                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), style: { width: '70px' }, title: "The number of pixels of padding at the top of the chart area" }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Right"),
+                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), style: { width: '70px' }, title: "The number of pixels of padding at the right of the chart area" }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Bottom"),
+                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), style: { width: '70px' }, title: "The number of pixels of padding at the bottom of the chart area" }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Left"),
+                React.createElement(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), style: { width: '70px' }, title: "The number of pixels of padding at the left of the chart area" }))),
+        React.createElement(FormRow, { label: "Line Dash" },
+            React.createElement(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
+                            .split(',')
+                            .map(Number)
+                            .filter((n) => !isNaN(n))
+                        : [];
+                    handleChange('lineDash', dashArray);
+                } })),
+        React.createElement(FormRow, { label: "Line Dash Offset" },
+            React.createElement(AdaptableInput, { 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(FormRow, { label: "Background" },
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
+                        ...sparklineOptions.background,
+                        visible,
+                    }) }),
+                React.createElement(Box, { ml: 2 },
+                    React.createElement(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(FormRow, { label: "Theme" },
+            React.createElement(Box, { maxWidth: 160 },
+                React.createElement(Select, { value: sparklineOptions.theme ?? 'ag-default', onChange: (themeName) => handleChange('theme', themeName), options: themes }))))));
+};
+const SparklineAxisOptions = ({ options, onChange, }) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    const sparklineOptions = options ?? {};
+    if (!sparklineOptions.axis?.type) {
+        sparklineOptions.axis = sparklineOptions.axis ?? { type: 'category' };
+        sparklineOptions.axis.type = 'category';
+    }
+    const handleChange = (value) => {
+        onChange({
+            ...options,
+            axis: {
+                ...options.axis,
+                ...value,
             },
         });
-    }, [data]);
-    const isObjectNumberArray = api.columnApi.getColumnWithColumnId(data.ColumnId)?.dataType === 'objectArray';
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Tabs, { mb: 2 },
-            React.createElement(Tabs.Tab, null, "Settings"),
-            React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, null,
-                    React.createElement(FormRow, { label: "Sparkline Type" },
-                        React.createElement(Box, { maxWidth: 160 },
-                            React.createElement(Select, { options: sparklineTypeOptions, value: data.SparkLineStyle.options?.type, onChange: (value) => {
-                                    if (value === 'column') {
-                                        handleOptionChange(['type'], 'bar');
-                                        handleOptionChange(['direction'], 'vertical');
-                                    }
-                                    else if (value === 'bar') {
-                                        handleOptionChange(['type'], 'bar');
-                                        handleOptionChange(['direction'], 'horizontal');
-                                    }
-                                    else {
-                                        handleOptionChange(['type'], value);
-                                    }
-                                }, placeholder: "Select Sparkline Type" }))),
-                    isObjectNumberArray && (React.createElement(SparklineObjectNumberArrayProperties, { onOptionChange: handleOptionChange }))))),
-        React.createElement(CommonProperties, { onOptionChange: handleOptionChange }),
-        (() => {
-            switch (data.SparkLineStyle.options?.type) {
-                case 'line':
-                    return React.createElement(TypeLineProperties, { onOptionChange: handleOptionChange });
-                case 'area':
-                    return React.createElement(TypeAreaProperties, { onOptionChange: handleOptionChange });
-                case 'bar':
-                    // It is the same as column. If they diverge, we can split them out.
-                    return React.createElement(TypeColumnBarProperties, { onOptionChange: handleOptionChange });
-            }
-        })()));
+    };
+    const axisTypes = [
+        { value: 'category', label: 'Category' },
+        { value: 'number', label: 'Number' },
+        { value: 'time', label: 'Time' },
+    ];
+    const isAxisEnabled = sparklineOptions.axis?.visible ?? false;
+    return (React.createElement(FormLayout, null,
+        React.createElement(FormRow, { label: "Show Axis" },
+            React.createElement(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) })),
+        React.createElement(FormRow, { label: "Axis Type" },
+            React.createElement(Box, { maxWidth: 160 },
+                React.createElement(Select, { disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onChange: (type) => handleChange({ type }), options: axisTypes }))),
+        React.createElement(FormRow, { label: "Stroke" },
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: sparklineOptions.axis?.stroke, onChange: (stroke) => handleChange({ stroke }) }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Width"),
+                React.createElement(AdaptableInput, { disabled: !isAxisEnabled, style: { width: '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(FormRow, { label: "Reverse Scale" },
+            React.createElement(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) })),
+        sparklineOptions.axis.type === 'category' && (React.createElement(React.Fragment, null,
+            React.createElement(FormRow, { label: "Padding" },
+                React.createElement(Flex, { alignItems: "center" },
+                    React.createElement(Box, { mr: 1 }, "Inner"),
+                    React.createElement(AdaptableInput, { 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(Box, { ml: 2, mr: 1 }, "Outer"),
+                    React.createElement(AdaptableInput, { 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;
+    const handleChange = (key, value) => {
+        onChange({ ...options, [key]: value });
+    };
+    const isTooltipEnabled = sparklineOptions.tooltip?.enabled;
+    const positionTypes = [
+        { value: 'pointer', label: 'Pointer' },
+        { value: 'node', label: 'Node' },
+        { value: 'top', label: 'Top' },
+        { value: 'right', label: 'Right' },
+        { value: 'bottom', label: 'Bottom' },
+        { value: 'left', label: 'Left' },
+        { value: 'top-left', label: 'Top Left' },
+        { value: 'top-right', label: 'Top Right' },
+        { value: 'bottom-right', label: 'Bottom Right' },
+        { value: 'bottom-left', label: 'Bottom Left' },
+    ];
+    const interactionRanges = [
+        { value: 'exact', label: 'Exact' },
+        { value: 'nearest', label: 'Nearest' },
+    ];
+    return (React.createElement(FormLayout, null,
+        React.createElement(FormRow, { label: "Enabled" },
+            React.createElement(CheckBox, { checked: sparklineOptions.tooltip?.enabled, onChange: (enabled) => handleChange('tooltip', { ...sparklineOptions.tooltip, enabled }) })),
+        React.createElement(FormRow, { label: "Show Arrow" },
+            React.createElement(CheckBox, { disabled: !isTooltipEnabled, checked: sparklineOptions.tooltip?.showArrow, onChange: (showArrow) => handleChange('tooltip', { ...sparklineOptions.tooltip, showArrow }) })),
+        React.createElement(FormRow, { label: "Interaction Enabled" },
+            React.createElement(CheckBox, { disabled: !isTooltipEnabled, checked: sparklineOptions.tooltip?.interaction?.enabled, onChange: (enabled) => handleChange('tooltip', {
+                    ...sparklineOptions.tooltip,
+                    interaction: { enabled },
+                }) })),
+        React.createElement(FormRow, { label: "Range" },
+            React.createElement(Box, { maxWidth: 160 },
+                React.createElement(Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.range ?? 'nearest', onChange: (range) => handleChange('tooltip', { ...sparklineOptions.tooltip, range }), options: interactionRanges }))),
+        React.createElement(FormRow, { label: "Position Type" },
+            React.createElement(Box, { maxWidth: 160 },
+                React.createElement(Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.type ?? 'pointer', onChange: (type) => handleChange('tooltip', {
+                        ...sparklineOptions.tooltip,
+                        position: { ...sparklineOptions.tooltip?.position, type },
+                    }), options: positionTypes }))),
+        React.createElement(FormRow, { label: "Position Offset X" },
+            React.createElement(AdaptableInput, { disabled: !isTooltipEnabled, title: "The horizontal offset in pixels for the position of the tooltip.", type: "number", value: sparklineOptions.tooltip?.position?.xOffset ?? '', onChange: (e) => handleChange('tooltip', {
+                    ...sparklineOptions.tooltip,
+                    position: { ...sparklineOptions.tooltip?.position, xOffset: Number(e.target.value) },
+                }) })),
+        React.createElement(FormRow, { label: "Position Offset Y" },
+            React.createElement(AdaptableInput, { disabled: !isTooltipEnabled, title: "The vertical offset in pixels for the position of the tooltip.", type: "number", value: sparklineOptions.tooltip?.position?.yOffset ?? '', onChange: (e) => handleChange('tooltip', {
+                    ...sparklineOptions.tooltip,
+                    position: { ...sparklineOptions.tooltip?.position, yOffset: Number(e.target.value) },
+                }) }))));
+};
+const SparklineMarkerOptions = ({ options, onChange }) => {
+    const { api } = useOnePageAdaptableWizardContext();
+    const sparklineOptions = options;
+    const handleChange = (value) => {
+        onChange({
+            ...options,
+            marker: {
+                ...options.marker,
+                ...value,
+            },
+        });
+    };
+    const markerShapes = [
+        { value: 'circle', label: 'Circle' },
+        { value: 'cross', label: 'Cross' },
+        { value: 'diamond', label: 'Diamond' },
+        { value: 'heart', label: 'Heart' },
+        { value: 'plus', label: 'Plus' },
+        { value: 'pin', label: 'Pin' },
+        { value: 'square', label: 'Square' },
+        { value: 'star', label: 'Star' },
+        { value: 'triangle', label: 'Triangle' },
+    ];
+    const isMarkerEnabled = sparklineOptions.marker?.enabled ?? false;
+    return (React.createElement(FormLayout, null,
+        React.createElement(FormRow, { label: "Show Markers" },
+            React.createElement(CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) })),
+        React.createElement(FormRow, { label: "Marker Size" },
+            React.createElement(AdaptableInput, { 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(FormRow, { label: "Marker Shape" },
+            React.createElement(Box, { maxWidth: 160 },
+                React.createElement(Select, { disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onChange: (shape) => handleChange({ shape: shape }), options: markerShapes }))),
+        React.createElement(FormRow, { label: "Fill" },
+            React.createElement(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) })),
+        React.createElement(FormRow, { label: "Stroke" },
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: sparklineOptions.marker?.stroke, onChange: (stroke) => handleChange({ stroke }) }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Width"),
+                React.createElement(AdaptableInput, { disabled: !isMarkerEnabled, style: { width: '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 } = useOnePageAdaptableWizardContext();
+    const sparklineOptions = options;
+    const handleItemChange = (value) => {
+        onChange({
+            ...options,
+            highlightStyle: {
+                ...options.highlightStyle,
+                item: {
+                    ...options.highlightStyle?.item,
+                    ...value,
+                },
+            },
+        });
+    };
+    const handleSeriesChange = (value) => {
+        onChange({
+            ...options,
+            highlightStyle: {
+                ...options.highlightStyle,
+                series: {
+                    ...options.highlightStyle?.series,
+                    ...value,
+                },
+            },
+        });
+    };
+    return (React.createElement(FormLayout, null,
+        React.createElement(FormRow, { label: "Item Fill" },
+            React.createElement(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: sparklineOptions.highlightStyle?.item?.fill, onChange: (fill) => handleItemChange({ fill }) })),
+        React.createElement(FormRow, { label: "Item Stroke" },
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: sparklineOptions.highlightStyle?.item?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Width"),
+                React.createElement(AdaptableInput, { style: { width: '70px' }, type: "number", min: 0, value: sparklineOptions.highlightStyle?.item?.strokeWidth ?? '', onChange: (e) => handleItemChange({ strokeWidth: Number(e.target.value) }), title: "The width of the highlighted item stroke in pixels" }))),
+        React.createElement(FormRow, { label: "Series" },
+            React.createElement(Flex, { alignItems: "center" },
+                React.createElement(CheckBox, { checked: sparklineOptions.highlightStyle?.series?.enabled ?? false, onChange: (enabled) => handleSeriesChange({ enabled }) }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Opacity"),
+                React.createElement(AdaptableInput, { disabled: !sparklineOptions.highlightStyle?.series?.enabled, style: { width: '70px' }, type: "number", min: 0, max: 1, step: 0.1, value: sparklineOptions.highlightStyle?.series?.dimOpacity ?? '', onChange: (e) => handleSeriesChange({ dimOpacity: Number(e.target.value) }), title: "The opacity of the whole series when another series is highlighted" }),
+                React.createElement(Box, { ml: 2, mr: 1 }, "Stroke Width"),
+                React.createElement(AdaptableInput, { disabled: !sparklineOptions.highlightStyle?.series?.enabled, style: { width: '70px' }, type: "number", min: 0, value: sparklineOptions.highlightStyle?.series?.strokeWidth ?? '', onChange: (e) => handleSeriesChange({ strokeWidth: Number(e.target.value) }), title: "The stroke width when markers are hovered or tooltip is shown" })))));
+};
+const test = {
+    type: 'line',
+    xName: 'test',
 };

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

@@ -32,7 +32,7 @@ export const StyledColumnWizard = (props) => {
                 delete newData.GradientStyle;
             }
             else if (props.popupParams.column.dataType.includes('Array')) {
-                newData.SparkLineStyle = {};
+                newData.SparklineStyle = {};
                 delete newData.GradientStyle;
             }
         }
@@ -58,7 +58,7 @@ export const StyledColumnWizard = (props) => {
         title: 'Settings',
     };
     const specificSteps = [];
-    if (styledColumn.SparkLineStyle) {
+    if (styledColumn.SparklineStyle) {
         specificSteps.push({
             title: 'Settings',
             render: () => (React.createElement(Box, { p: 2 },

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

@@ -23,7 +23,7 @@ export const StyledColumnWizardColumnSection = (props) => {
     const { data, api } = useOnePageAdaptableWizardContext();
     const sortableCols = React.useMemo(() => {
         let sortableColumns = [];
-        if (data.SparkLineStyle) {
+        if (data.SparklineStyle) {
             sortableColumns = api.columnApi.getNumericArrayColumns();
         }
         else if (data.BadgeStyle) {