@adaptabletools/adaptable/src/View/StyledColumn/Wizard/StyledColumnSparklineSettingsSection.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import * as React from 'react';
import { SingleSelect } from '../../../components/NewSelect';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import { Tag } from '../../../components/Tag';
import { renderSummaryStringTags } from '../../Wizard/SummaryColorTag';
import AdaptableInput from '../../Components/AdaptableInput';
import { ColorPicker } from '../../../components/ColorPicker';
import { CheckBox } from '../../../components/CheckBox';
import { Box, Flex } from '../../../components/Flex';
import { getCellBoxStyleSummaryItems, StyledColumnCellStyleEditor, } from './StyledColumnSliceStyleEditors';
import { Card } from '../../../components/Card';
import ErrorBox from '../../../components/ErrorBox';
const STYLE_FORM_SIZES = ['200px', '1fr'];
const SPARKLINE_CUSTOM_COLOURS_THEME = '__custom__';
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 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);
};
const buildStyledColumnSparklineStyleSummaryStrings = (sparkline, options) => {
    const opts = sparkline.options;
    if (!opts) {
        return [];
    }
    const items = [`Type: ${sparklineTypeLabel(opts)}`];
    if (typeof opts.theme === 'string' && opts.theme !== 'ag-default') {
        items.push(`Theme: ${opts.theme.replace(/^ag-/, '')}`);
    }
    if (typeof opts.min === 'number' || typeof opts.max === 'number') {
        items.push(`Range: ${opts.min ?? 'auto'} → ${opts.max ?? 'auto'}`);
    }
    if (opts.xKey || opts.yKey) {
        items.push(`Keys: x=${opts.xKey ?? 'x'}, y=${opts.yKey ?? 'y'}`);
    }
    const markerEnabled = opts.type !== 'bar' &&
        opts.marker?.enabled;
    if (markerEnabled) {
        items.push('Markers: On');
    }
    else if (options.includeEmptyFeatures && opts.type !== 'bar') {
        items.push('Markers: Off');
    }
    if (opts.tooltip?.enabled) {
        items.push('Tooltip: On');
    }
    else if (options.includeEmptyFeatures) {
        items.push('Tooltip: Off');
    }
    if (opts.axis?.visible) {
        items.push('Axis: On');
    }
    else if (options.includeEmptyFeatures) {
        items.push('Axis: Off');
    }
    getCellBoxStyleSummaryItems(sparkline.Cell).forEach(({ label, value }) => {
        items.push(`${label}: ${value}`);
    });
    return items;
};
export const getStyledColumnSparklineStyleViewValues = (data) => {
    const sparkline = data.SparklineStyle;
    if (!sparkline) {
        return [];
    }
    return buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
        includeEmptyFeatures: false,
    });
};
export const renderSparklineSummary = (data) => {
    const sparkline = data.SparklineStyle;
    if (!sparkline?.options) {
        return _jsx(Tag, { children: "No Styling Defined" });
    }
    const items = buildStyledColumnSparklineStyleSummaryStrings(sparkline, {
        includeEmptyFeatures: true,
    });
    return renderSummaryStringTags(items);
};
export 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;
};
export const StyledColumnSparklineSettingsSection = ({ onChange }) => {
    const { data, api } = useOnePageAdaptableWizardContext();
    const persistedOptions = data.SparklineStyle?.options;
    const sparklineOptions = persistedOptions
        ? { ...persistedOptions, type: persistedOptions.type ?? SparklineTypes.LINE }
        : { 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 column = data.ColumnId
        ? api.columnApi.getColumnWithColumnId(data.ColumnId)
        : undefined;
    const disabled = !data.ColumnId || !column;
    const isObjectNumberArray = column?.dataType === 'objectArray';
    if (!data.ColumnId || !column) {
        return (_jsx(Box, { children: _jsx(ErrorBox, { className: "twa:mt-2", children: !data.ColumnId
                    ? 'You need to select a column before styling.'
                    : `Column "${data.ColumnId}" was not found in the grid.` }) }));
    }
    return (_jsxs(Box, { children: [_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Chart" }), _jsx(Card.Body, { children: _jsxs(FormLayout, { sizes: [...STYLE_FORM_SIZES], children: [_jsx(FormRow, { label: "Type:", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: disabled, items: sparklineTypeOptions, value: sparklineType, onValueChange: handleTypeChange, placeholder: "Select Sparkline Type" }) }) }), isObjectNumberArray && (_jsx(SparklineObjectArrayProperties, { options: sparklineOptions, onChange: handleOptionsChange })), _jsx(FormRow, { label: "Min Value:", children: _jsx(AdaptableInput, { disabled: disabled, type: "number", value: sparklineOptions.min ?? '', onChange: (e) => handleOptionsChange({
                                            ...sparklineOptions,
                                            min: e.target.value === '' ? undefined : Number(e.target.value),
                                        }), placeholder: 'Auto', title: "User override for the automatically determined min value (based on series data)" }) }), _jsx(FormRow, { label: "Max Value:", children: _jsx(AdaptableInput, { disabled: disabled, type: "number", value: sparklineOptions.max ?? '', onChange: (e) => handleOptionsChange({
                                            ...sparklineOptions,
                                            max: e.target.value === '' ? undefined : Number(e.target.value),
                                        }), placeholder: 'Auto', title: "User override for the automatically determined max value (based on series data)" }) })] }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Theming" }), _jsx(Card.Body, { children: _jsx(SparklineThemingOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Axis" }), _jsx(Card.Body, { children: _jsx(SparklineAxisOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), sparklineOptions.type !== 'bar' && (_jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Markers" }), _jsx(Card.Body, { children: _jsx(SparklineMarkerOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] })), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Tooltip" }), _jsx(Card.Body, { children: _jsx(SparklineTooltipOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsx(Card.Title, { children: "Highlight" }), _jsx(Card.Body, { children: _jsx(SparklineHighlightOptions, { options: sparklineOptions, onChange: handleOptionsChange }) })] }), _jsxs(Card, { shadow: false, className: "twa:mb-3", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Cell" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[500px]", children: "Optional cell-box styling behind the sparkline" })] }), _jsx(Card.Body, { children: _jsx(StyledColumnCellStyleEditor, { api: api, disabled: disabled, value: data.SparklineStyle?.Cell, onChange: (next) => {
                                const sparkStyle = { ...(data.SparklineStyle ?? {}) };
                                if (next) {
                                    sparkStyle.Cell = next;
                                }
                                else {
                                    delete sparkStyle.Cell;
                                }
                                onChange({ ...data, SparklineStyle: sparkStyle });
                            } }) })] })] }));
};
const SparklineObjectArrayProperties = ({ options, onChange, }) => {
    const { data, api } = 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 (_jsxs(_Fragment, { children: [_jsx(FormRow, { label: "X Key", children: _jsx(AdaptableInput, { value: options.xKey ?? 'x', onChange: (e) => onChange({ ...options, xKey: e.target.value }) }) }), _jsx(FormRow, { label: "Y Key", children: _jsx(AdaptableInput, { value: options.yKey ?? 'y', onChange: (e) => onChange({ ...options, yKey: e.target.value }) }) }), previewData && (_jsx(FormRow, { label: "Preview", children: _jsx(Tag, { children: previewData }) }))] }));
};
const SparklineThemingOptions = ({ options, onChange, }) => {
    const { api } = useOnePageAdaptableWizardContext();
    const sparklineOptions = options;
    const handleChange = (key, value) => {
        onChange({ ...options, [key]: value });
    };
    const applySeriesColour = (patch) => {
        const next = { ...options, ...patch };
        delete next.theme;
        onChange(next);
    };
    const handlePaddingChange = (key, value) => {
        const currentPadding = sparklineOptions.padding || {};
        handleChange('padding', { ...currentPadding, [key]: value });
    };
    const themes = [
        { value: SPARKLINE_CUSTOM_COLOURS_THEME, label: 'Custom colours' },
        { value: 'ag-default', label: 'Default' },
        { value: 'ag-default-dark', label: 'Default Dark' },
        { value: 'ag-sheets', label: 'Sheets' },
        { 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 (_jsxs(FormLayout, { children: [sparklineOptions.type !== 'line' && (_jsx(FormRow, { label: "Fill", children: _jsxs(Box, { children: [_jsx(ColorPicker, { title: "The colour for filling shapes", api: api, value: sparklineOptions.fill, onChange: (color) => applySeriesColour({ fill: color }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Bar, column, and area body colour." })] }) })), _jsx(FormRow, { label: "Stroke", children: _jsxs(Box, { children: [_jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the stroke", api: api, value: sparklineOptions.stroke, onChange: (color) => applySeriesColour({ stroke: color }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { title: "The width of the stroke in pixels", type: "number", className: "twa:w-[70px]", min: 0, value: sparklineOptions.strokeWidth ?? '', onChange: (e) => handleChange('strokeWidth', Number(e.target.value)) })] }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: sparklineOptions.type === 'line'
                                ? 'Line colour. Marker colours are in the Markers card.'
                                : 'Outline colour — increase width to see it on bars and columns.' })] }) }), _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Top" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.top ?? '', onChange: (e) => handlePaddingChange('top', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the top of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Right" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.right ?? '', onChange: (e) => handlePaddingChange('right', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the right of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Bottom" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.bottom ?? '', onChange: (e) => handlePaddingChange('bottom', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the bottom of the chart area" }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Left" }), _jsx(AdaptableInput, { type: "number", min: 0, value: sparklineOptions.padding?.left ?? '', onChange: (e) => handlePaddingChange('left', Number(e.target.value)), className: "twa:w-[70px]", title: "The number of pixels of padding at the left of the chart area" })] }) }), _jsx(FormRow, { label: "Line Dash", children: _jsx(AdaptableInput, { title: "Length of dashes and gaps in pixels (comma-separated values, e.g. '3,6,9')", value: sparklineOptions.lineDash?.join(',') ?? '', onChange: (e) => {
                        const value = e.target.value;
                        const dashArray = value
                            ? value
                                .split(',')
                                .map(Number)
                                .filter((n) => !isNaN(n))
                            : [];
                        handleChange('lineDash', dashArray);
                    } }) }), _jsx(FormRow, { label: "Line Dash Offset", children: _jsx(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)) }) }), _jsx(FormRow, { label: "Background", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: sparklineOptions.background?.visible ?? false, onChange: (visible) => handleChange('background', {
                                ...sparklineOptions.background,
                                visible,
                            }) }), _jsx(Box, { className: "twa:ml-2", children: _jsx(ColorPicker, { disabled: !sparklineOptions.background?.visible, title: "The colour of the chart background", api: api, value: sparklineOptions.background?.fill, onChange: (fill) => handleChange('background', {
                                    ...sparklineOptions.background,
                                    fill,
                                }) }) })] }) }), typeof sparklineOptions.theme !== 'object' && (_jsx(FormRow, { label: "Theme", children: _jsxs(Box, { children: [_jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", value: sparklineOptions.theme ?? SPARKLINE_CUSTOM_COLOURS_THEME, onValueChange: (themeName) => {
                                    if (themeName === SPARKLINE_CUSTOM_COLOURS_THEME) {
                                        const next = { ...options };
                                        delete next.theme;
                                        onChange(next);
                                        return;
                                    }
                                    handleChange('theme', themeName);
                                }, items: themes }) }), _jsx(Box, { className: "twa:mt-1 twa:text-1 twa:opacity-70", children: "Palette preset. Use Custom colours when Fill / Stroke above should control the chart." })] }) }))] }));
};
const SparklineAxisOptions = ({ options, onChange, }) => {
    const { api } = useOnePageAdaptableWizardContext();
    const sparklineOptions = {
        ...(options ?? {}),
        axis: {
            type: 'category',
            ...(options?.axis ?? {}),
        },
    };
    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 (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Axis", children: _jsx(CheckBox, { checked: isAxisEnabled, onChange: (visible) => handleChange({ visible }) }) }), _jsx(FormRow, { label: "Axis Type", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isAxisEnabled, value: sparklineOptions.axis.type, onValueChange: (type) => handleChange({ type }), items: axisTypes }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isAxisEnabled, title: "The colour of the axis line", api: api, value: sparklineOptions.axis?.stroke, onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { 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) }) })] }) }), _jsx(FormRow, { label: "Reverse Scale", children: _jsx(CheckBox, { disabled: !isAxisEnabled, checked: sparklineOptions.axis?.reverse, onChange: (reverse) => handleChange({ reverse }) }) }), sparklineOptions.axis.type === 'category' && (_jsx(_Fragment, { children: _jsx(FormRow, { label: "Padding", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(Box, { className: "twa:mr-1", children: "Inner" }), _jsx(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) }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Outer" }), _jsx(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 isTooltipEnabled = sparklineOptions.tooltip?.enabled ?? false;
    const handleChange = (property, value) => {
        onChange({
            ...options,
            tooltip: {
                ...options.tooltip,
                [property]: value,
            },
        });
    };
    const anchorToOptions = [
        { value: 'pointer', label: 'Pointer' },
        { value: 'node', label: 'Node' },
        { value: 'chart', label: 'Chart' },
    ];
    const placementOptions = [
        { value: 'top', label: 'Top' },
        { value: 'right', label: 'Right' },
        { value: 'bottom', label: 'Bottom' },
        { value: 'left', label: 'Left' },
        { value: 'top-right', label: 'Top Right' },
        { value: 'bottom-right', label: 'Bottom Right' },
        { value: 'bottom-left', label: 'Bottom Left' },
        { value: 'top-left', label: 'Top Left' },
        { value: 'center', label: 'Center' },
    ];
    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Tooltip", children: _jsx(CheckBox, { checked: isTooltipEnabled, onChange: (enabled) => handleChange('enabled', enabled) }) }), _jsx(FormRow, { label: "Anchor To", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.anchorTo, onValueChange: (value) => handleChange('position', {
                            ...sparklineOptions.tooltip?.position,
                            anchorTo: value,
                        }), items: anchorToOptions }) }) }), _jsx(FormRow, { label: "Placement", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isTooltipEnabled, value: sparklineOptions.tooltip?.position?.placement, onValueChange: (value) => handleChange('position', {
                            ...sparklineOptions.tooltip?.position,
                            placement: value,
                        }), items: placementOptions }) }) }), _jsx(FormRow, { label: "Position Offset X", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { 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),
                        }) }) }) }), _jsx(FormRow, { label: "Position Offset Y", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { 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 } = 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 (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Show Markers", children: _jsx(CheckBox, { checked: isMarkerEnabled, onChange: (enabled) => handleChange({ enabled }) }) }), _jsx(FormRow, { label: "Marker Size", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(AdaptableInput, { 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" }) }) }), _jsx(FormRow, { label: "Marker Shape", children: _jsx(Box, { className: "twa:max-w-[160px]", children: _jsx(SingleSelect, { className: "twa:w-full", disabled: !isMarkerEnabled, value: sparklineOptions.marker?.shape, onValueChange: (shape) => handleChange({ shape: shape }), items: markerShapes }) }) }), _jsx(FormRow, { label: "Fill", children: _jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for filling markers", api: api, value: sparklineOptions.marker?.fill, onChange: (fill) => handleChange({ fill }) }) }), _jsx(FormRow, { label: "Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { disabled: !isMarkerEnabled, title: "The colour for the marker stroke", api: api, value: sparklineOptions.marker?.stroke, onChange: (stroke) => handleChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { 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 } = useOnePageAdaptableWizardContext();
    const highlightOptions = options.highlight;
    const handleBaseChange = (value) => {
        onChange({
            ...options,
            highlight: {
                ...options.highlight,
                ...value,
            },
        });
    };
    const handleItemChange = (value) => {
        onChange({
            ...options,
            highlight: {
                ...options.highlight,
                highlightedItem: {
                    ...options.highlight?.highlightedItem,
                    ...value,
                },
            },
        });
    };
    const handleSeriesChange = (value) => {
        onChange({
            ...options,
            highlight: {
                ...options.highlight,
                highlightedSeries: {
                    ...options.highlight?.highlightedSeries,
                    ...value,
                },
            },
        });
    };
    return (_jsxs(FormLayout, { children: [_jsx(FormRow, { label: "Item Fill", children: _jsx(ColorPicker, { title: "The colour for filling highlighted items", api: api, value: highlightOptions?.highlightedItem?.fill, onChange: (fill) => handleItemChange({ fill }) }) }), _jsx(FormRow, { label: "Item Stroke", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(ColorPicker, { title: "The colour for the highlighted item stroke", api: api, value: highlightOptions?.highlightedItem?.stroke, onChange: (stroke) => handleItemChange({ stroke }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Width" }), _jsx(AdaptableInput, { 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" })] }) }), _jsx(FormRow, { label: "Series", children: _jsxs(Flex, { alignItems: "center", children: [_jsx(CheckBox, { checked: highlightOptions?.enabled ?? false, onChange: (enabled) => handleBaseChange({ enabled }) }), _jsx(Box, { className: "twa:ml-2 twa:mr-1", children: "Stroke Width" }), _jsx(AdaptableInput, { 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" })] }) })] }));
};