@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

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

@@ -0,0 +1,285 @@
+"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 CheckBox_1 = require("../../../components/CheckBox");
+const ColorPicker_1 = require("../../../components/ColorPicker");
+const DropdownButton_1 = tslib_1.__importDefault(require("../../../components/DropdownButton"));
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const Input_1 = tslib_1.__importDefault(require("../../../components/Input"));
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
+const StringExtensions_1 = require("../../../Utilities/Extensions/StringExtensions");
+const LoggingHelper_1 = require("../../../Utilities/Helpers/LoggingHelper");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../Components/AdaptableInput"));
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const CommonProperties = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const axisTypeOptions = React.useMemo(() => {
+        return [
+            {
+                label: 'Number',
+                value: 'number',
+                onClick: () => props.onOptionChange(['axis', 'type'], 'number'),
+            },
+            {
+                label: 'Category',
+                value: 'category',
+                onClick: () => props.onOptionChange(['axis', 'type'], 'category'),
+            },
+            {
+                label: 'Time',
+                value: 'time',
+                onClick: () => props.onOptionChange(['axis', 'type'], 'time'),
+            },
+        ];
+    }, [data]);
+    return (React.createElement(Tabs_1.Tabs, { mb: 2 },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Padding"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Axis"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Highlight Style"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Top" },
+                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'top'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_b = (_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.padding) === null || _b === void 0 ? void 0 : _b.top })),
+                React.createElement(FormLayout_1.FormRow, { label: "Bottom" },
+                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'bottom'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_d = (_c = data.SparkLineStyle.options) === null || _c === void 0 ? void 0 : _c.padding) === null || _d === void 0 ? void 0 : _d.bottom })),
+                React.createElement(FormLayout_1.FormRow, { label: "Left" },
+                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'left'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_f = (_e = data.SparkLineStyle.options) === null || _e === void 0 ? void 0 : _e.padding) === null || _f === void 0 ? void 0 : _f.left })),
+                React.createElement(FormLayout_1.FormRow, { label: "Right" },
+                    React.createElement(Input_1.default, { onChange: (event) => { var _a; return props.onOptionChange(['padding', 'right'], (_a = event.target.value) !== null && _a !== void 0 ? _a : 0); }, type: "number", value: (_h = (_g = data.SparkLineStyle.options) === null || _g === void 0 ? void 0 : _g.padding) === null || _h === void 0 ? void 0 : _h.right })))),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Axis Type" },
+                    React.createElement(DropdownButton_1.default, { columns: ['label'], items: axisTypeOptions }, (_k = (_j = axisTypeOptions.find((option) => { var _a, _b, _c; return option.value === ((_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.SparkLineStyle) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.axis) === null || _c === void 0 ? void 0 : _c.type); })) === null || _j === void 0 ? void 0 : _j.label) !== null && _k !== void 0 ? _k : 'Select Type')),
+                React.createElement(FormLayout_1.FormRow, { label: "Stroke Color" },
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_p = (_o = (_m = (_l = data.SparkLineStyle) === null || _l === void 0 ? void 0 : _l.options) === null || _m === void 0 ? void 0 : _m.axis) === null || _o === void 0 ? void 0 : _o.stroke) !== null && _p !== void 0 ? _p : '#fff', onChange: (color) => props.onOptionChange(['axis', 'stroke'], color) })),
+                React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_t = (_s = (_r = (_q = data.SparkLineStyle) === null || _q === void 0 ? void 0 : _q.options) === null || _r === void 0 ? void 0 : _r.axis) === null || _s === void 0 ? void 0 : _s.strokeWidth) !== null && _t !== void 0 ? _t : 0, onChange: (event) => props.onOptionChange(['axis', 'strokeWidth'], parseFloat(event.target.value)) })))),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Size" },
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_w = (_v = (_u = data.SparkLineStyle) === null || _u === void 0 ? void 0 : _u.options) === null || _v === void 0 ? void 0 : _v.highlightStyle) === null || _w === void 0 ? void 0 : _w.size, onChange: (event) => props.onOptionChange(['highlightStyle', 'size'], parseFloat(event.target.value)) })),
+                React.createElement(FormLayout_1.FormRow, { label: "Fill" },
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_0 = (_z = (_y = (_x = data.SparkLineStyle) === null || _x === void 0 ? void 0 : _x.options) === null || _y === void 0 ? void 0 : _y.highlightStyle) === null || _z === void 0 ? void 0 : _z.fill) !== null && _0 !== void 0 ? _0 : 'yellow', onChange: (color) => props.onOptionChange(['highlightStyle', 'fill'], color) })),
+                React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_4 = (_3 = (_2 = (_1 = data.SparkLineStyle) === null || _1 === void 0 ? void 0 : _1.options) === null || _2 === void 0 ? void 0 : _2.highlightStyle) === null || _3 === void 0 ? void 0 : _3.stroke) !== null && _4 !== void 0 ? _4 : 'silver', onChange: (color) => props.onOptionChange(['highlightStyle', 'stroke'], color) })),
+                React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_7 = (_6 = (_5 = data.SparkLineStyle) === null || _5 === void 0 ? void 0 : _5.options) === null || _6 === void 0 ? void 0 : _6.highlightStyle) === null || _7 === void 0 ? void 0 : _7.strokeWidth, onChange: (event) => props.onOptionChange(['highlightStyle', 'strokeWidth'], parseFloat(event.target.value)) }))))));
+};
+const SparklineMarkerProperties = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sparklineOptions = data.SparkLineStyle.options;
+    return (React.createElement(FormLayout_1.default, null,
+        React.createElement(FormLayout_1.FormRow, { label: "Enabled" },
+            React.createElement(CheckBox_1.CheckBox, { checked: (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _a === void 0 ? void 0 : _a.enabled) !== null && _b !== void 0 ? _b : true, onChange: (checked) => props.onOptionChange(['marker', 'enabled'], checked) })),
+        React.createElement(FormLayout_1.FormRow, { label: "Size" },
+            React.createElement(AdaptableInput_1.default, { type: "number", value: (_d = (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _c === void 0 ? void 0 : _c.size) !== null && _d !== void 0 ? _d : 0, onChange: (event) => props.onOptionChange(['marker', 'size'], parseFloat(event.target.value)) })),
+        React.createElement(FormLayout_1.FormRow, { label: "Fill" },
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_f = (_e = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _e === void 0 ? void 0 : _e.fill) !== null && _f !== void 0 ? _f : 'rgb(124, 181, 236)', onChange: (color) => props.onOptionChange(['marker', 'fill'], color) })),
+        React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_h = (_g = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _g === void 0 ? void 0 : _g.stroke) !== null && _h !== void 0 ? _h : 'rgb(124, 181, 236)', onChange: (color) => props.onOptionChange(['marker', 'stroke'], color) })),
+        React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
+            React.createElement(AdaptableInput_1.default, { type: "number", value: (_k = (_j = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.marker) === null || _j === void 0 ? void 0 : _j.strokeWidth) !== null && _k !== void 0 ? _k : 1, onChange: (event) => props.onOptionChange(['marker', 'strokeWidth'], parseFloat(event.target.value)) }))));
+};
+const SparklineLineProperties = (props) => {
+    var _a, _b, _c;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sparklineOptions = data.SparkLineStyle.options;
+    return (React.createElement(FormLayout_1.default, null,
+        React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
+            React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.line) === null || _a === void 0 ? void 0 : _a.stroke) !== null && _b !== void 0 ? _b : 'rgb(124, 181, 236)', onChange: (color) => props.onOptionChange(['line', 'stroke'], color) })),
+        React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
+            React.createElement(AdaptableInput_1.default, { type: "number", value: (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.line) === null || _c === void 0 ? void 0 : _c.strokeWidth, onChange: (event) => props.onOptionChange(['line', 'strokeWidth'], parseFloat(event.target.value)) }))));
+};
+const CrossHairsProperties = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sparklineOptions = data.SparkLineStyle.options;
+    const lineDashes = [
+        'dash',
+        'dashDot',
+        'dashDotDot',
+        'dot',
+        'longDash',
+        'longDashDot',
+        'longDashDotDot',
+        'shortDash',
+        'shortDashDot',
+        'shortDashDotDot',
+        'shortDot',
+        'solid',
+    ];
+    const lineCapOptions = [
+        'butt',
+        'round',
+        'square',
+    ];
+    const buildLineDashProperties = (key) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const lineDashOptions = lineDashes.map((item) => ({
+            label: (0, StringExtensions_1.Humanize)(item),
+            value: item,
+            onClick: () => props.onOptionChange(['crosshairs', key, 'lineDash'], item),
+        }));
+        const lineCapOptionsItems = lineCapOptions.map((item) => ({
+            label: (0, StringExtensions_1.Humanize)(item),
+            value: item,
+            onClick: () => props.onOptionChange(['crosshairs', key, 'lineCap'], item),
+        }));
+        return (React.createElement(FormLayout_1.default, null,
+            React.createElement(FormLayout_1.FormRow, { label: "Show" },
+                React.createElement(CheckBox_1.CheckBox, { checked: (_c = (_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.enabled) !== null && _c !== void 0 ? _c : true, onChange: (checked) => props.onOptionChange(['crosshairs', key, 'enabled'], checked) })),
+            React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
+                React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_f = (_e = (_d = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _d === void 0 ? void 0 : _d[key]) === null || _e === void 0 ? void 0 : _e.stroke) !== null && _f !== void 0 ? _f : 'rgba(0,0,0, 0.54)', onChange: (color) => props.onOptionChange(['crosshairs', key, 'stroke'], color) })),
+            React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
+                React.createElement(AdaptableInput_1.default, { type: "number", value: (_j = (_h = (_g = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _g === void 0 ? void 0 : _g[key]) === null || _h === void 0 ? void 0 : _h.strokeWidth) !== null && _j !== void 0 ? _j : 1, onChange: (event) => props.onOptionChange(['crosshairs', key, 'strokeWidth'], event.target.value) })),
+            React.createElement(FormLayout_1.FormRow, { label: "Line Dash" },
+                React.createElement(DropdownButton_1.default, { columns: ['label'], items: lineDashOptions }, (_l = (_k = lineDashOptions.find((option) => { var _a, _b; return option.value === ((_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.lineDash); })) === null || _k === void 0 ? void 0 : _k.label) !== null && _l !== void 0 ? _l : 'Solid')),
+            React.createElement(FormLayout_1.FormRow, { label: "Line Cap" },
+                React.createElement(DropdownButton_1.default, { columns: ['label'], items: lineCapOptionsItems }, (_o = (_m = lineCapOptionsItems.find((option) => { var _a, _b; return option.value === ((_b = (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.crosshairs) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.lineCap); })) === null || _m === void 0 ? void 0 : _m.label) !== null && _o !== void 0 ? _o : 'Butt'))));
+    };
+    return (React.createElement(rebass_1.Flex, null,
+        React.createElement(rebass_1.Box, { mr: 3 },
+            React.createElement(rebass_1.Box, null, "X Line"),
+            buildLineDashProperties('xLine')),
+        React.createElement(rebass_1.Box, null,
+            React.createElement(rebass_1.Box, null, "Y Line"),
+            buildLineDashProperties('yLine'))));
+};
+const TypeAreaProperties = (props) => {
+    var _a;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sparklineOptions = data.SparkLineStyle.options;
+    return (React.createElement(Tabs_1.Tabs, { mb: 2 },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Stroke"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Line"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Marker"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Cross Hairs"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : 'rgba(124, 181, 236, 0.25)', onChange: (color) => props.onOptionChange(['fill'], color) })))),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange })),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(CrossHairsProperties, { onOptionChange: props.onOptionChange }))));
+};
+const TypeLineProperties = (props) => {
+    return (React.createElement(Tabs_1.Tabs, { mb: 2 },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Line"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Marker"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Cross Hairs"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(SparklineLineProperties, { onOptionChange: props.onOptionChange })),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(SparklineMarkerProperties, { onOptionChange: props.onOptionChange })),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(CrossHairsProperties, { onOptionChange: props.onOptionChange }))));
+};
+const TypeColumnBarProperties = (props) => {
+    var _a, _b, _c, _d, _e;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sparklineOptions = data.SparkLineStyle.options;
+    return (React.createElement(Tabs_1.Tabs, { mb: 2 },
+        React.createElement(Tabs_1.Tabs.Tab, null, "General"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Fill" },
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_a = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.fill) !== null && _a !== void 0 ? _a : 'rgb(124, 181, 236)', onChange: (color) => props.onOptionChange(['fill'], color) })),
+                React.createElement(FormLayout_1.FormRow, { label: "Stroke" },
+                    React.createElement(ColorPicker_1.ColorPicker, { api: api, value: (_b = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.stroke) !== null && _b !== void 0 ? _b : 'silver', onChange: (color) => props.onOptionChange(['stroke'], color) })),
+                React.createElement(FormLayout_1.FormRow, { label: "Stroke Width" },
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_c = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.strokeWidth) !== null && _c !== void 0 ? _c : 1, onChange: (event) => props.onOptionChange(['strokeWidth'], event.target.value) })),
+                React.createElement(FormLayout_1.FormRow, { label: "Padding Inner" },
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_d = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.paddingInner) !== null && _d !== void 0 ? _d : 0.1, onChange: (event) => props.onOptionChange(['paddingInner'], event.target.value) })),
+                React.createElement(FormLayout_1.FormRow, { label: "Padding Outer" },
+                    React.createElement(AdaptableInput_1.default, { type: "number", value: (_e = sparklineOptions === null || sparklineOptions === void 0 ? void 0 : sparklineOptions.paddingOuter) !== null && _e !== void 0 ? _e : 0.2, onChange: (event) => props.onOptionChange(['paddingOuter'], event.target.value) }))))));
+};
+const SparklineObjectNumberArrayProperties = (props) => {
+    var _a, _b;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sparkLineOptions = data.SparkLineStyle.options;
+    const [sparklineDataItem, setSparklineDataItem] = React.useState('');
+    React.useEffect(() => {
+        var _a, _b, _c;
+        try {
+            let cellData = null;
+            const MAX_ROWS_TO_CHECK = 20;
+            let currentRow = 0;
+            while (!cellData || currentRow < MAX_ROWS_TO_CHECK) {
+                const rowWithData = (_a = api.gridApi.getRowNodeForIndex(currentRow)) === null || _a === void 0 ? void 0 : _a.data;
+                const column = api.columnApi.getColumnWithColumnId(data.ColumnId);
+                if ((_b = rowWithData === null || rowWithData === void 0 ? void 0 : rowWithData[column === null || column === void 0 ? void 0 : column.field]) === null || _b === void 0 ? void 0 : _b[0]) {
+                    cellData = (_c = rowWithData === null || rowWithData === void 0 ? void 0 : rowWithData[column === null || column === void 0 ? void 0 : column.field]) === null || _c === void 0 ? void 0 : _c[0];
+                    break;
+                }
+                currentRow++;
+            }
+            if (cellData) {
+                const str = JSON.stringify(cellData, null, 2).replace(/[{}",]/g, '');
+                setSparklineDataItem(str);
+            }
+        }
+        catch (e) {
+            (0, LoggingHelper_1.ConsoleLogError)('Error parsing sparkline data', e);
+        }
+    }, [data]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormLayout_1.FormRow, { label: "X Key" },
+            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['xKey'], event.target.value), value: (_a = sparkLineOptions.xKey) !== null && _a !== void 0 ? _a : 'x' })),
+        React.createElement(FormLayout_1.FormRow, { label: "Y Key" },
+            React.createElement(Input_1.default, { onChange: (event) => props.onOptionChange(['yKey'], event.target.value), value: (_b = sparkLineOptions.yKey) !== null && _b !== void 0 ? _b : 'y' })),
+        sparklineDataItem && (React.createElement(FormLayout_1.FormRow, { label: "Preview" },
+            React.createElement(Tag_1.Tag, null, sparklineDataItem)))));
+};
+const StyledColumnSparklineSettingsSection = (props) => {
+    var _a, _b, _c;
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const handleTypeChange = React.useCallback((type) => {
+        const newStyledColumn = Object.assign(Object.assign({}, data), { SparkLineStyle: Object.assign(Object.assign({}, data.SparkLineStyle), { options: Object.assign(Object.assign({}, data.SparkLineStyle.options), { type }) }) });
+        props.onChange(newStyledColumn);
+    }, [data]);
+    const sparklineTypeOptions = React.useMemo(() => [
+        { label: 'Line', value: 'line', onClick: () => handleTypeChange('line') },
+        { label: 'Area', value: 'area', onClick: () => handleTypeChange('area') },
+        { label: 'Column', value: 'column', onClick: () => handleTypeChange('column') },
+        { label: 'Bar', value: 'bar', onClick: () => handleTypeChange('bar') },
+    ], [data]);
+    const handleOptionChange = React.useCallback((path, value) => {
+        var _a;
+        const newOptions = (0, ObjectExtensions_1.setInPath)((_a = data.SparkLineStyle.options) !== null && _a !== void 0 ? _a : {}, path, value);
+        props.onChange(Object.assign(Object.assign({}, data), { SparkLineStyle: Object.assign(Object.assign({}, data.SparkLineStyle), { options: newOptions }) }));
+    }, [data]);
+    const isObjectNumberArray = ((_a = api.columnApi.getColumnWithColumnId(data.ColumnId)) === null || _a === void 0 ? void 0 : _a.dataType) === 'ObjectNumberArray';
+    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: "Type" },
+                        React.createElement(DropdownButton_1.default, { columns: ['label'], items: sparklineTypeOptions }, (_c = (_b = sparklineTypeOptions.find((option) => { var _a; return option.value === ((_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.type); })) === null || _b === void 0 ? void 0 : _b.label) !== null && _c !== void 0 ? _c : 'Select Type')),
+                    isObjectNumberArray && (React.createElement(SparklineObjectNumberArrayProperties, { onOptionChange: handleOptionChange }))))),
+        React.createElement(CommonProperties, { onOptionChange: handleOptionChange }),
+        (() => {
+            var _a;
+            switch ((_a = data.SparkLineStyle.options) === null || _a === void 0 ? void 0 : _a.type) {
+                case 'line':
+                    return React.createElement(TypeLineProperties, { onOptionChange: handleOptionChange });
+                case 'area':
+                    return React.createElement(TypeAreaProperties, { onOptionChange: handleOptionChange });
+                case 'column':
+                    return React.createElement(TypeColumnBarProperties, { onOptionChange: handleOptionChange });
+                case 'bar':
+                    // It is the same as column. If they diverge, we can split them out.
+                    return React.createElement(TypeColumnBarProperties, { onOptionChange: handleOptionChange });
+            }
+        })()));
+};
+exports.StyledColumnSparklineSettingsSection = StyledColumnSparklineSettingsSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizard.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { AdaptableOnePageWizardProps } from '../../Wizard/Interface/IAdaptableWizard';
+import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
+export interface StyledColumnWizardProps extends AdaptableOnePageWizardProps<StyledColumn> {
+    isNew: boolean;
+}
+export declare const StyledColumnWizard: (props: StyledColumnWizardProps) => JSX.Element;

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

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const react_redux_1 = require("react-redux");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
+const StyledColumnRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/StyledColumnRedux"));
+const StyledColumnWizardTypeSection_1 = require("./StyledColumnWizardTypeSection");
+const StyledColumnWizardColumnSection_1 = require("./StyledColumnWizardColumnSection");
+const StyledColumnWizardStyleSection_1 = require("./StyledColumnWizardStyleSection");
+const Helper_1 = require("../../../Utilities/Helpers/Helper");
+const StyledColumnWizardSettingsSection_1 = require("./StyledColumnWizardSettingsSection");
+const StyledColumnSparklineSettingsSection_1 = require("./StyledColumnSparklineSettingsSection");
+const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection");
+const StyledColumnWizard = (props) => {
+    var _a, _b;
+    const data = (_a = props.data) !== null && _a !== void 0 ? _a : (_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.value;
+    const [styledColumn, setStyledColumn] = (0, react_1.useState)(() => {
+        if (data) {
+            return (0, Helper_1.cloneObject)(data);
+        }
+        const newData = ObjectFactory_1.default.CreateEmptyStyledColumn();
+        newData.GradientStyle = {};
+        return newData;
+    });
+    const dispatch = (0, react_redux_1.useDispatch)();
+    const handleFinish = () => {
+        if (data) {
+            dispatch(StyledColumnRedux.StyledColumnEdit(styledColumn));
+        }
+        else {
+            dispatch(StyledColumnRedux.StyledColumnAdd(styledColumn));
+        }
+        props.onFinishWizard(styledColumn);
+    };
+    const checkboxGrandientPercentSteps = [
+        {
+            details: 'Select the style to apply',
+            renderSummary: StyledColumnWizardStyleSection_1.renderStyledColumnStyleSummary,
+            render: () => {
+                return (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(StyledColumnWizardStyleSection_1.StyledColumnWizardStyleSection, { onChange: setStyledColumn })));
+            },
+            title: 'Style',
+        },
+        {
+            renderSummary: StyledColumnWizardSettingsSection_1.renderStyledColumnWizardSettingsSummary,
+            render: () => {
+                return (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(StyledColumnWizardSettingsSection_1.StyledColumnWizardSettingsSection, { onChange: setStyledColumn })));
+            },
+            title: 'Settings',
+        },
+    ];
+    const sparklineSteps = [
+        {
+            title: 'Settings',
+            render: () => (React.createElement(rebass_1.Box, { p: 2 },
+                React.createElement(StyledColumnSparklineSettingsSection_1.StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }))),
+        },
+    ];
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: styledColumn, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
+            {
+                details: 'Select a Styled Column Type',
+                renderSummary: StyledColumnWizardTypeSection_1.renderStyledColumnTypeSummary,
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(StyledColumnWizardTypeSection_1.StyledColumnWizardTypeSection, { onChange: setStyledColumn })));
+                },
+                title: 'Type',
+            },
+            {
+                isValid: StyledColumnWizardColumnSection_1.isValidStyledColumnColumn,
+                renderSummary: StyledColumnWizardColumnSection_1.renderStyledColumnColumnSummary,
+                details: 'Select column to apply the style to',
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2, style: { height: '100%' } },
+                        React.createElement(StyledColumnWizardColumnSection_1.StyledColumnWizardColumnSection, { isNew: props.isNew, onChange: setStyledColumn })));
+                },
+                title: 'Column',
+            },
+            ...(styledColumn.SparkLineStyle ? sparklineSteps : checkboxGrandientPercentSteps),
+            {
+                details: 'Select Format Column tags',
+                title: 'Tags',
+                isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
+                render: () => (React.createElement(rebass_1.Box, { padding: 2 },
+                    React.createElement(ObjectTagsWizardSection_1.ObjectTagsWizardSection, { onChange: setStyledColumn }))),
+                renderSummary: ObjectTagsWizardSection_1.renderObjectTagsSummary,
+            },
+            '-',
+            {
+                title: 'Summary',
+                details: 'Review your Styled Column',
+                render: () => {
+                    return (React.createElement(rebass_1.Box, { padding: 2 },
+                        React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null)));
+                },
+            },
+        ] }));
+};
+exports.StyledColumnWizard = StyledColumnWizard;

package/src/View/StyledColumn/Wizard/StyledColumnWizardColumnSection.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { StyledColumn } from '../../../PredefinedConfig/StyledColumnState';
+export declare const renderStyledColumnColumnSummary: (data: StyledColumn) => JSX.Element;
+export declare const isValidStyledColumnColumn: (data: StyledColumn) => true | string;
+export declare type StyledColumnWizardColumnSectionProps = {
+    onChange: (data: StyledColumn) => void;
+    isNew: boolean;
+};
+export declare const StyledColumnWizardColumnSection: (props: StyledColumnWizardColumnSectionProps) => JSX.Element;

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

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardColumnSection = exports.isValidStyledColumnColumn = exports.renderStyledColumnColumnSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const Tabs_1 = require("../../../components/Tabs");
+const Tag_1 = require("../../../components/Tag");
+const ColumnSelector_1 = require("../../Components/ColumnSelector");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const renderStyledColumnColumnSummary = (data) => {
+    const { api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    return (React.createElement(rebass_1.Text, { pr: 2, py: 2 },
+        "Styled Column column:",
+        ' ',
+        React.createElement(Tag_1.Tag, null, data.ColumnId
+            ? api.columnApi.getFriendlyNameForColumnId(data.ColumnId)
+            : 'No Column Selected')));
+};
+exports.renderStyledColumnColumnSummary = renderStyledColumnColumnSummary;
+const isValidStyledColumnColumn = (data) => {
+    if (!data.ColumnId) {
+        return 'You have to select a Column for Styled Column';
+    }
+    return true;
+};
+exports.isValidStyledColumnColumn = isValidStyledColumnColumn;
+const StyledColumnWizardColumnSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const sortableCols = React.useMemo(() => {
+        const sortableColumns = data.CheckBoxStyle
+            ? api.columnApi.getBooleanColumns()
+            : data.SparkLineStyle
+                ? [
+                    ...api.columnApi.getNumberArrayColumns(),
+                    ...api.columnApi.getTupleNumberArrayColumns(),
+                    ...api.columnApi.getObjectNumberArrayColumns(),
+                ]
+                : api.columnApi.getNumericColumns();
+        const styledColumns = api.styledColumnApi.getStyledColumns();
+        const usedColumnIds = styledColumns
+            .map((styledColumn) => {
+            // filter out current styled column columnID
+            if (styledColumn.Uuid === data.Uuid) {
+                return null;
+            }
+            return styledColumn.ColumnId;
+        })
+            .filter(Boolean);
+        return sortableColumns.filter((column) => {
+            return usedColumnIds.every((usedColumnId) => {
+                return column.columnId !== usedColumnId;
+            });
+        });
+    }, [data]);
+    const handleColumnsChange = (columnIds) => {
+        const columnId = columnIds[0];
+        const emptyRanges = api.scopeApi.createCellColorRangesForScope({
+            ColumnIds: [columnId],
+        });
+        const newStyledColumn = Object.assign(Object.assign({}, data), { ColumnId: columnId });
+        if (newStyledColumn.PercentBarStyle) {
+            newStyledColumn.PercentBarStyle = Object.assign(Object.assign({}, newStyledColumn.PercentBarStyle), { CellRanges: emptyRanges });
+        }
+        if (newStyledColumn.GradientStyle) {
+            newStyledColumn.GradientStyle = Object.assign(Object.assign({}, newStyledColumn.GradientStyle), { CellRanges: emptyRanges });
+        }
+        props.onChange(newStyledColumn);
+    };
+    return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(ColumnSelector_1.NewColumnSelector, { availableColumns: sortableCols, selected: data.ColumnId ? [data.ColumnId] : [], singleSelect: true, onChange: handleColumnsChange, allowReorder: false }))));
+};
+exports.StyledColumnWizardColumnSection = StyledColumnWizardColumnSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizardSettingsSection.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StyledColumn } from '../../../types';
+declare type StyledColumnWizardSettingsSectionSectionProps = {
+    onChange: (data: StyledColumn) => void;
+};
+export declare const renderStyledColumnWizardSettingsSummary: (data: StyledColumn) => JSX.Element;
+export declare const StyledColumnWizardSettingsSection: (props: StyledColumnWizardSettingsSectionSectionProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledColumnWizardSettingsSection = exports.renderStyledColumnWizardSettingsSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));
+const CheckBox_1 = require("../../../components/CheckBox");
+const Tabs_1 = require("../../../components/Tabs");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const Tag_1 = require("../../../components/Tag");
+let alignmentOptions = [
+    { value: 'Left', label: 'Left' },
+    { value: 'Right', label: 'Right' },
+    { value: 'Center', label: 'Center' },
+];
+const renderStyledColumnWizardSettingsSummary = (data) => {
+    return (React.createElement(rebass_1.Box, { padding: 2 },
+        React.createElement(rebass_1.Text, { mt: 3 },
+            "Include grouped rows ",
+            React.createElement(Tag_1.Tag, null, data.IncludeGroupedRows ? 'yes' : 'no'))));
+};
+exports.renderStyledColumnWizardSettingsSummary = renderStyledColumnWizardSettingsSummary;
+const StyledColumnWizardSettingsSection = (props) => {
+    const { data, api } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const onIncludeGroupedRowsChanged = (IncludeGroupedRows) => {
+        props.onChange(Object.assign(Object.assign({}, data), { IncludeGroupedRows }));
+    };
+    return (React.createElement(Tabs_1.Tabs, null,
+        React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
+        React.createElement(Tabs_1.Tabs.Content, null,
+            React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Include Grouped Rows:" },
+                        React.createElement(rebass_1.Flex, { alignItems: "center", marginLeft: 2 },
+                            React.createElement(CheckBox_1.CheckBox, { "data-name": "include-grouped-rows-checkbox", checked: data.IncludeGroupedRows, onChange: onIncludeGroupedRowsChanged, mr: 2 }))))))));
+};
+exports.StyledColumnWizardSettingsSection = StyledColumnWizardSettingsSection;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarColumnComparisonPreview.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PercentBarStyle } from '../../../../../types';
+export declare const PercentBarColumnComparisonPreview: React.FunctionComponent<{
+    percentBarStyle: PercentBarStyle;
+}>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarColumnComparisonPreview.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PercentBarColumnComparisonPreview = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableContext_1 = require("../../../../AdaptableContext");
+const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
+const PercentBarColumnComparisonPreview = (props) => {
+    const { api } = (0, AdaptableContext_1.useAdaptable)();
+    const columnComparison = props.percentBarStyle.ColumnComparison;
+    return (React.createElement(rebass_1.Flex, { alignItems: "center", mr: 3 },
+        React.createElement(rebass_1.Box, { flexBasis: 120, mr: 3 },
+            isNaN(Number(columnComparison.MinValue))
+                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MinValue)) + ']'
+                : columnComparison.MinValue,
+            ' ',
+            "to",
+            ' ',
+            isNaN(Number(columnComparison.MaxValue))
+                ? '[' + api.columnApi.getFriendlyNameForColumnId(String(columnComparison.MaxValue)) + ']'
+                : columnComparison.MaxValue,
+            ' '),
+        React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: columnComparison.Color, barBackgroundColor: props.percentBarStyle.BackColor, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText })));
+};
+exports.PercentBarColumnComparisonPreview = PercentBarColumnComparisonPreview;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarRangesPreview.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PercentBarStyle } from '../../../../../types';
+export declare const PercentBarPreview: React.FunctionComponent<{
+    percentBarStyle: PercentBarStyle;
+}>;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarRangesPreview.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PercentBarPreview = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const PercentBarStylePreview_1 = require("./PercentBarStylePreview");
+const PercentBarPreview = (props) => {
+    let postfix = '';
+    if (props.percentBarStyle.RangeValueType === 'Percentage') {
+        postfix = '%';
+    }
+    return (React.createElement(React.Fragment, null, props.percentBarStyle.CellRanges.map((range, i) => (React.createElement(rebass_1.Flex, { key: i, alignItems: "stretch", mr: 3, mb: 2 },
+        React.createElement(rebass_1.Flex, { flexBasis: 120, alignItems: "center", mr: 3 },
+            range.Min,
+            postfix,
+            " to ",
+            range.Max,
+            postfix,
+            ' '),
+        React.createElement(PercentBarStylePreview_1.PercentBarStylePreview, { backgroundColor: props.percentBarStyle.BackColor, barBackgroundColor: range.Color, cellText: props.percentBarStyle.CellText, toolTipText: props.percentBarStyle.ToolTipText }))))));
+};
+exports.PercentBarPreview = PercentBarPreview;

package/src/View/StyledColumn/Wizard/StyledColumnWizardStyleSection/Components/PercentBarStylePreview.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { CellTextOptions } from '../../../../../types';
+export declare const PercentBarStylePreview: React.FunctionComponent<{
+    backgroundColor: string;
+    barBackgroundColor?: string;
+    cellText?: CellTextOptions;
+    toolTipText?: CellTextOptions;
+}>;