"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StyledColumnSparklineSettingsSection = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const rebass_1 = require("rebass");
const Select_1 = require("../../../components/Select");
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");
const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
const ColorPicker_1 = require("../../../components/ColorPicker");
const CheckBox_1 = require("../../../components/CheckBox");
const SparklineTypes = {
    LINE: 'line',
    AREA: 'area',
    BAR_VERTICAL: 'bar_vertical',
    BAR_HORIZONTAL: 'bar_horizontal',
};
const sparklineTypeOptions = [
    { label: 'Line', value: SparklineTypes.LINE },
    { label: 'Area', value: SparklineTypes.AREA },
    { label: 'Column', value: SparklineTypes.BAR_VERTICAL },
    { label: 'Bar', value: SparklineTypes.BAR_HORIZONTAL },
];
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;
    }
    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_1.Tabs, { 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(rebass_1.Box, { maxWidth: 160 },
                            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, { 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 })))));
};
exports.StyledColumnSparklineSettingsSection = StyledColumnSparklineSettingsSection;
const SparklineObjectArrayProperties = ({ options, onChange, }) => {
    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
    const [previewData, setPreviewData] = React.useState('');
    React.useEffect(() => {
        const column = api.columnApi.getColumnWithColumnId(data.ColumnId);
        if (!column) {
            return;
        }
        try {
            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;
                }
            }
        }
        catch (error) {
            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)))));
};
const SparklineThemingOptions = ({ options, onChange, }) => {
    const { api } = (0, OnePageAdaptableWizard_1.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_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(rebass_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(rebass_1.Box, { ml: 2, mr: 1 }, "Width"),
                React.createElement(AdaptableInput_1.default, { 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(FormLayout_1.FormRow, { label: "Padding" },
            React.createElement(rebass_1.Flex, { alignItems: "center" },
                React.createElement(rebass_1.Box, { mr: 1 }, "Top"),
                React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Right"),
                React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Bottom"),
                React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Left"),
                React.createElement(AdaptableInput_1.default, { 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(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(rebass_1.Flex, { alignItems: "center" },
                React.createElement(CheckBox_1.CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
                        ...sparklineOptions.background,
                        visible,
                    }) }),
                React.createElement(rebass_1.Box, { 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(rebass_1.Box, { maxWidth: 160 },
                React.createElement(Select_1.Select, { value: sparklineOptions.theme ?? 'ag-default', onChange: (themeName) => handleChange('theme', themeName), options: 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';
    }
    const handleChange = (value) => {
        onChange({
            ...options,
            axis: {
                ...options.axis,
                ...value,
            },
        });
    };
    const axisTypes = [
        { value: 'category', label: 'Category' },
        { value: 'number', label: 'Number' },
        { 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(rebass_1.Box, { maxWidth: 160 },
                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(rebass_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(rebass_1.Box, { ml: 2, mr: 1 }, "Width"),
                React.createElement(AdaptableInput_1.default, { 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(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(rebass_1.Flex, { alignItems: "center" },
                    React.createElement(rebass_1.Box, { 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(rebass_1.Box, { ml: 2, 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) }) })))))));
};
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_1.default, null,
        React.createElement(FormLayout_1.FormRow, { label: "Enabled" },
            React.createElement(CheckBox_1.CheckBox, { checked: sparklineOptions.tooltip?.enabled, onChange: (enabled) => handleChange('tooltip', { ...sparklineOptions.tooltip, enabled }) })),
        React.createElement(FormLayout_1.FormRow, { label: "Show Arrow" },
            React.createElement(CheckBox_1.CheckBox, { disabled: !isTooltipEnabled, checked: sparklineOptions.tooltip?.showArrow, onChange: (showArrow) => handleChange('tooltip', { ...sparklineOptions.tooltip, showArrow }) })),
        React.createElement(FormLayout_1.FormRow, { label: "Interaction Enabled" },
            React.createElement(CheckBox_1.CheckBox, { disabled: !isTooltipEnabled, checked: sparklineOptions.tooltip?.interaction?.enabled, onChange: (enabled) => handleChange('tooltip', {
                    ...sparklineOptions.tooltip,
                    interaction: { enabled },
                }) })),
        React.createElement(FormLayout_1.FormRow, { label: "Range" },
            React.createElement(rebass_1.Box, { maxWidth: 160 },
                React.createElement(Select_1.Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.range ?? 'nearest', onChange: (range) => handleChange('tooltip', { ...sparklineOptions.tooltip, range }), options: interactionRanges }))),
        React.createElement(FormLayout_1.FormRow, { label: "Position Type" },
            React.createElement(rebass_1.Box, { maxWidth: 160 },
                React.createElement(Select_1.Select, { disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.type ?? 'pointer', onChange: (type) => handleChange('tooltip', {
                        ...sparklineOptions.tooltip,
                        position: { ...sparklineOptions.tooltip?.position, type },
                    }), options: positionTypes }))),
        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('tooltip', {
                    ...sparklineOptions.tooltip,
                    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('tooltip', {
                    ...sparklineOptions.tooltip,
                    position: { ...sparklineOptions.tooltip?.position, yOffset: Number(e.target.value) },
                }) }))));
};
const SparklineMarkerOptions = ({ options, onChange }) => {
    const { api } = (0, OnePageAdaptableWizard_1.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_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(rebass_1.Box, { maxWidth: 160 },
                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(rebass_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(rebass_1.Box, { ml: 2, mr: 1 }, "Width"),
                React.createElement(AdaptableInput_1.default, { 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 } = (0, OnePageAdaptableWizard_1.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_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: sparklineOptions.highlightStyle?.item?.fill, onChange: (fill) => handleItemChange({ fill }) })),
        React.createElement(FormLayout_1.FormRow, { label: "Item Stroke" },
            React.createElement(rebass_1.Flex, { alignItems: "center" },
                React.createElement(ColorPicker_1.ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: sparklineOptions.highlightStyle?.item?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }),
                React.createElement(rebass_1.Box, { ml: 2, mr: 1 }, "Width"),
                React.createElement(AdaptableInput_1.default, { 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(FormLayout_1.FormRow, { label: "Series" },
            React.createElement(rebass_1.Flex, { alignItems: "center" },
                React.createElement(CheckBox_1.CheckBox, { checked: sparklineOptions.highlightStyle?.series?.enabled ?? false, onChange: (enabled) => handleSeriesChange({ enabled }) }),
                React.createElement(rebass_1.Box, { ml: 2, mr: 1 }, "Opacity"),
                React.createElement(AdaptableInput_1.default, { 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(rebass_1.Box, { ml: 2, mr: 1 }, "Stroke Width"),
                React.createElement(AdaptableInput_1.default, { 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',
};
