@rowsncolumns/charts 27.0.30

package/dist/cjs/components/editors/chart-editor.js

@@ -0,0 +1,631 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartEditor = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var spreadsheet_state_1 = require("@rowsncolumns/spreadsheet-state");
+var ui_1 = require("@rowsncolumns/ui");
+var ui_2 = require("@rowsncolumns/ui");
+var ui_3 = require("@rowsncolumns/ui");
+var formik_1 = require("formik");
+var react_1 = tslib_1.__importStar(require("react"));
+var editing_chart_atom_1 = require("../../atoms/editing-chart.atom");
+var chart_range_input_1 = require("./chart-range-input");
+var config_1 = require("../../config");
+var utils_1 = require("@rowsncolumns/utils");
+var chart_spec_utils_1 = require("../../utils/chart-spec-utils");
+var AGGREGATE_OPTIONS = [
+    { label: "Sum", value: "SUM" },
+    { label: "Average", value: "AVERAGE" },
+    { label: "Count", value: "COUNT" },
+    { label: "Median", value: "MEDIAN" },
+    { label: "Min", value: "MIN" },
+    { label: "Max", value: "MAX" },
+];
+var Section = function (_a) {
+    var title = _a.title, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b, children = _a.children;
+    return (react_1.default.createElement("details", { open: defaultOpen, className: "group border border-rnc-border border-solid rounded-md mb-2 px-3" },
+        react_1.default.createElement("summary", { className: "flex items-center gap-1.5 cursor-pointer list-none py-2 font-system text-sm font-medium select-none [&::-webkit-details-marker]:hidden" },
+            react_1.default.createElement(icons_1.ChevronRightIcon, { className: "shrink-0 transition-transform group-open:rotate-90" }),
+            title),
+        react_1.default.createElement("div", { className: "flex flex-col gap-2 pb-3" }, children)));
+};
+var ChartEditor = function (_a) {
+    var _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, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22;
+    var chart = _a.chart, sheetId = _a.sheetId, onSubmit = _a.onSubmit;
+    var setChartDialogState = (0, editing_chart_atom_1.useSetChartEditorDialogState)();
+    // Close dialog
+    var closeDialog = function () { return setChartDialogState(false); };
+    // Keyed on chart identity so a position sync (move/resize while the
+    // editor is open) does not reinitialize a dirty form.
+    var initialValues = (0, react_1.useMemo)(function () {
+        return chart !== null && chart !== void 0 ? chart : {
+            chartId: (0, utils_1.uuid)(),
+            position: {
+                sheetId: sheetId,
+                overlayPosition: { anchorCell: spreadsheet_state_1.defaultCellCoords },
+            },
+            spec: { chartType: "line", series: [], domains: [] },
+        };
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [chart === null || chart === void 0 ? void 0 : chart.chartId]);
+    // Formik
+    var _23 = (0, formik_1.useFormik)({
+        initialValues: initialValues,
+        enableReinitialize: true,
+        onSubmit: function (values) {
+            // Submit against the live position so edits do not revert a
+            // chart moved or resized while the editor was open.
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chart ? tslib_1.__assign(tslib_1.__assign({}, values), { position: chart.position }) : values);
+            // Close dialog
+            closeDialog();
+        },
+    }), handleSubmit = _23.handleSubmit, setFieldValue = _23.setFieldValue, resetForm = _23.resetForm, values = _23.values;
+    var onCancelForm = function () {
+        resetForm();
+        closeDialog();
+    };
+    var basicSpec = (0, chart_spec_utils_1.isBasicChartSpec)(values.spec) ? values.spec : undefined;
+    var bubbleSpec = (0, chart_spec_utils_1.isBubbleChartSpec)(values.spec) ? values.spec : undefined;
+    var treemapSpec = (0, chart_spec_utils_1.isHierarchyChartSpec)(values.spec)
+        ? values.spec
+        : undefined;
+    // Cartesian (XY) chart types have value/category axes; circular and
+    // polar/derived types (pie/doughnut/radar) do not, so the axis-scale
+    // controls are gated to these.
+    var isCartesianBasic = basicSpec
+        ? basicSpec.chartType !== "pie" &&
+            basicSpec.chartType !== "doughnut" &&
+            basicSpec.chartType !== "radar"
+        : false;
+    // Bar/column-only features. gapWidth is consumed by both renderers
+    // (echarts barCategoryGap / plotly bargap); overlap by echarts
+    // (barGap).
+    var isBarOrColumnBasic = basicSpec
+        ? basicSpec.chartType === "bar" || basicSpec.chartType === "column"
+        : false;
+    // Check aggregate
+    var isAggregateType = basicSpec
+        ? basicSpec.series.some(function (serie) { return serie.aggregateType; })
+        : false;
+    var bubbleAggregateEnabled = bubbleSpec
+        ? bubbleSpec.series.some(function (serie) { return serie.aggregateType; })
+        : false;
+    var renderChartDataSection = function (label, field, data, helperText) {
+        var sections = data.length > 0 ? data : [{ sources: [] }];
+        return (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-3" },
+            react_1.default.createElement("label", { className: "font-system text-sm" }, label),
+            helperText ? (react_1.default.createElement("p", { className: "m-0 text-xs text-rnc-text-weak" }, helperText)) : null,
+            sections.map(function (domain, i) {
+                var sources = domain.sources.length > 0 ? domain.sources : [undefined];
+                return sources.map(function (source, idx) { return (react_1.default.createElement("div", { key: "".concat(values.chartId, "-").concat(label, "-").concat(sections.length, "-").concat(i, "-").concat(idx) },
+                    react_1.default.createElement(chart_range_input_1.ChartRangeInput, { sheetId: sheetId, range: source, onChangeRange: function (range) {
+                            setFieldValue("spec.".concat(field, "[").concat(i, "].sources[").concat(idx, "]"), range);
+                        }, required: true, placeholder: "Select a range", className: "mb-0 flex-1" }))); });
+            })));
+    };
+    return (react_1.default.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col" },
+        react_1.default.createElement(ui_1.Tabs, { defaultValue: "setup", className: "w-full" },
+            react_1.default.createElement(ui_1.TabsList, { className: "grid-cols-2" },
+                react_1.default.createElement(ui_1.TabsTrigger, { value: "setup" }, "Setup"),
+                react_1.default.createElement(ui_1.TabsTrigger, { value: "customize" }, "Customize")),
+            react_1.default.createElement(ui_1.TabsContent, { value: "setup", className: "flex flex-col gap-2" },
+                react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                    react_1.default.createElement("label", { className: "font-system text-sm" }, "Chart type"),
+                    react_1.default.createElement(ui_2.DropdownMenu, null,
+                        react_1.default.createElement(ui_3.DropdownMenuTrigger, { asChild: true },
+                            react_1.default.createElement(ui_1.Button, { variant: "outline", size: "xs", className: "py-1.5 px-1.5" },
+                                (0, config_1.getChartPresetLabel)(values.spec),
+                                react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                    react_1.default.createElement(icons_1.TriangleDownIcon, null)))),
+                        react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+                            react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", sideOffset: 0 }, config_1.CHART_TYPES.map(function (_a) {
+                                var _b = tslib_1.__read(_a, 2), category = _b[0], types = _b[1];
+                                return (react_1.default.createElement(ui_1.DropdownMenuSub, { key: category },
+                                    react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                                        react_1.default.createElement(ui_1.DropdownLeftSlot, null,
+                                            react_1.default.createElement(icons_1.BarChartIcon, null)),
+                                        category,
+                                        react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                            react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                                    react_1.default.createElement(ui_1.DropdownMenuSubContent, { sideOffset: 2, alignOffset: -5 }, types.map(function (_a) {
+                                        var _b = tslib_1.__read(_a, 2), name = _b[0], config = _b[1];
+                                        return (react_1.default.createElement(ui_1.DropdownMenuItem, { key: name, onClick: function () {
+                                                setFieldValue("spec", (0, chart_spec_utils_1.mergeChartSpec)(values.spec, config));
+                                            } }, name));
+                                    }))));
+                            }))))),
+                react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                    react_1.default.createElement("label", { className: "font-system text-sm" }, "Chart data range"),
+                    react_1.default.createElement(chart_range_input_1.ChartRangeInput, { key: values.chartId, sheetId: sheetId, range: (_c = (_b = values.spec) === null || _b === void 0 ? void 0 : _b.dataRange) !== null && _c !== void 0 ? _c : undefined, onChangeRange: function (range) {
+                            setFieldValue("spec.dataRange", range);
+                        }, required: true, placeholder: "Select a range", className: "mb-0" })),
+                basicSpec ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Horizontal (category) axis labels"),
+                        ((_d = basicSpec.domains) !== null && _d !== void 0 ? _d : []).map(function (domain, i) {
+                            return domain.sources.map(function (source, idx) {
+                                return (react_1.default.createElement(chart_range_input_1.ChartRangeInput, { key: "".concat(values.chartId, "-domains-").concat(basicSpec.domains.length, "-").concat(i, "-").concat(idx), sheetId: sheetId, range: source, onChangeRange: function (range) {
+                                        setFieldValue("spec.domains[".concat(i, "].sources[").concat(idx, "]"), range);
+                                    }, required: true, placeholder: "Select a range", className: "mb-0" }));
+                            });
+                        })),
+                    react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
+                        react_1.default.createElement("input", { type: "checkbox", checked: isAggregateType, name: "showColumnStripes", onChange: function (e) {
+                                var nextSeries = basicSpec.series.map(function (serie) { return (tslib_1.__assign(tslib_1.__assign({}, serie), { aggregateType: e.target.checked ? "SUM" : undefined })); });
+                                setFieldValue("spec.series", nextSeries);
+                            } }),
+                        "Aggregate"),
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Legend entries (series)"),
+                        basicSpec.series.map(function (domain, i) {
+                            return domain.sources.map(function (source, idx) {
+                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                                return (react_1.default.createElement("div", { className: "border border-rnc-border border-solid p-2 relative", key: "".concat(values.chartId, "-series-").concat(basicSpec.series.length, "-").concat(i, "-").concat(idx) },
+                                    react_1.default.createElement("div", { className: "flex gap-2 " },
+                                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Name"),
+                                            react_1.default.createElement(ui_1.Input, { value: (_a = domain.dataLabel) !== null && _a !== void 0 ? _a : "", type: "text", name: "fromValue", onChange: function (e) {
+                                                    return setFieldValue("spec.series[".concat(i, "].dataLabel"), e.target.value);
+                                                }, className: "text-xs", placeholder: "Enter value" })),
+                                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 flex-1" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Y values"),
+                                            react_1.default.createElement(chart_range_input_1.ChartRangeInput, { sheetId: sheetId, range: source, onChangeRange: function (range) {
+                                                    setFieldValue("spec.series[".concat(i, "].sources[").concat(idx, "]"), range);
+                                                }, required: true, placeholder: "Select a range", className: "mb-0" })),
+                                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2 w-20" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Color"),
+                                            react_1.default.createElement("div", { className: "flex items-center gap-1" },
+                                                react_1.default.createElement("input", { type: "color", value: (_b = domain.color) !== null && _b !== void 0 ? _b : "#4285F4", onChange: function (e) {
+                                                        return setFieldValue("spec.series[".concat(i, "].color"), e.target.value);
+                                                    }, className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Series color" }),
+                                                domain.color ? (react_1.default.createElement(ui_1.IconButton, { type: "button", onClick: function () {
+                                                        return setFieldValue("spec.series[".concat(i, "].color"), undefined);
+                                                    }, "aria-label": "Clear series color" },
+                                                    react_1.default.createElement(icons_1.CrossCircledIcon, null))) : null)),
+                                        isAggregateType ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2 w-32" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Aggregate type"),
+                                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_c = domain.aggregateType) !== null && _c !== void 0 ? _c : "", onChange: function (event) {
+                                                    var aggregateType = event.target.value;
+                                                    setFieldValue("spec.series[".concat(i, "].aggregateType"), aggregateType || undefined);
+                                                } },
+                                                react_1.default.createElement("option", { value: "" }, "None"),
+                                                AGGREGATE_OPTIONS.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)); })))) : null,
+                                        basicSpec.chartType === "combo" ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2 w-32" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Series type"),
+                                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_d = domain.seriesChartType) !== null && _d !== void 0 ? _d : "bar", onChange: function (event) {
+                                                    setFieldValue("spec.series[".concat(i, "].seriesChartType"), event.target.value || undefined);
+                                                } },
+                                                react_1.default.createElement("option", { value: "bar" }, "Bar"),
+                                                react_1.default.createElement("option", { value: "column" }, "Column"),
+                                                react_1.default.createElement("option", { value: "line" }, "Line"),
+                                                react_1.default.createElement("option", { value: "area" }, "Area")))) : null),
+                                    basicSpec.chartType !== "pie" &&
+                                        basicSpec.chartType !== "doughnut" &&
+                                        basicSpec.chartType !== "radar" &&
+                                        basicSpec.chartType !== "stock" ? (react_1.default.createElement("details", { className: "mt-2 group/fmt" },
+                                        react_1.default.createElement("summary", { className: "cursor-pointer list-none py-1 font-system text-xs text-rnc-muted-foreground select-none [&::-webkit-details-marker]:hidden flex items-center gap-1" },
+                                            react_1.default.createElement(icons_1.ChevronRightIcon, { className: "transition-transform group-open/fmt:rotate-90" }),
+                                            "Format"),
+                                        react_1.default.createElement("div", { className: "flex flex-col gap-2 pt-2 border border-rnc-border border-solid mt-2" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                                                react_1.default.createElement("input", { type: "checkbox", checked: !!domain.useSecondaryAxis, onChange: function (e) {
+                                                        return setFieldValue("spec.series[".concat(i, "].useSecondaryAxis"), e.target.checked || undefined);
+                                                    } }),
+                                                "Plot on secondary axis"),
+                                            react_1.default.createElement("div", { className: "flex items-center gap-2" },
+                                                react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                                                    react_1.default.createElement("input", { type: "checkbox", checked: ((_f = (_e = domain.trendlines) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0) > 0, onChange: function (e) {
+                                                            var _a, _b;
+                                                            return setFieldValue("spec.series[".concat(i, "].trendlines"), e.target.checked
+                                                                ? [
+                                                                    (_b = (_a = domain.trendlines) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : {
+                                                                        type: "linear",
+                                                                    },
+                                                                ]
+                                                                : undefined);
+                                                        } }),
+                                                    "Trendline"),
+                                                ((_h = (_g = domain.trendlines) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) > 0 ? (react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_l = (_k = (_j = domain.trendlines) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.type) !== null && _l !== void 0 ? _l : "linear", onChange: function (event) {
+                                                        var _a, _b, _c, _d, _e;
+                                                        return setFieldValue("spec.series[".concat(i, "].trendlines[0]"), tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, ((_b = (_a = domain.trendlines) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : {})), { type: event.target.value }), (event.target.value === "poly"
+                                                            ? {
+                                                                order: (_e = (_d = (_c = domain.trendlines) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.order) !== null && _e !== void 0 ? _e : 2,
+                                                            }
+                                                            : {})));
+                                                    } },
+                                                    react_1.default.createElement("option", { value: "linear" }, "Linear"),
+                                                    react_1.default.createElement("option", { value: "poly" }, "Polynomial"),
+                                                    react_1.default.createElement("option", { value: "exp" }, "Exponential"),
+                                                    react_1.default.createElement("option", { value: "log" }, "Logarithmic"))) : null),
+                                            react_1.default.createElement("div", { className: "flex items-center gap-2 flex-wrap" },
+                                                react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                                                    react_1.default.createElement("input", { type: "checkbox", checked: !!domain.errorBars, onChange: function (e) {
+                                                            var _a;
+                                                            return setFieldValue("spec.series[".concat(i, "].errorBars"), e.target.checked
+                                                                ? (_a = domain.errorBars) !== null && _a !== void 0 ? _a : {
+                                                                    valueType: "percentage",
+                                                                    value: 5,
+                                                                }
+                                                                : undefined);
+                                                        } }),
+                                                    "Error bars"),
+                                                domain.errorBars ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                                    react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_o = (_m = domain.errorBars) === null || _m === void 0 ? void 0 : _m.valueType) !== null && _o !== void 0 ? _o : "percentage", onChange: function (event) {
+                                                            var _a;
+                                                            return setFieldValue("spec.series[".concat(i, "].errorBars"), tslib_1.__assign(tslib_1.__assign({}, ((_a = domain.errorBars) !== null && _a !== void 0 ? _a : {})), { valueType: event.target.value }));
+                                                        } },
+                                                        react_1.default.createElement("option", { value: "fixedVal" }, "Fixed"),
+                                                        react_1.default.createElement("option", { value: "percentage" }, "Percentage"),
+                                                        react_1.default.createElement("option", { value: "stdDev" }, "Std deviation"),
+                                                        react_1.default.createElement("option", { value: "stdErr" }, "Std error")),
+                                                    ((_p = domain.errorBars) === null || _p === void 0 ? void 0 : _p.valueType) !==
+                                                        "stdErr" ? (react_1.default.createElement(ui_1.Input, { type: "number", value: (_r = (_q = domain.errorBars) === null || _q === void 0 ? void 0 : _q.value) !== null && _r !== void 0 ? _r : "", onChange: function (e) {
+                                                            var _a;
+                                                            return setFieldValue("spec.series[".concat(i, "].errorBars"), tslib_1.__assign(tslib_1.__assign({}, ((_a = domain.errorBars) !== null && _a !== void 0 ? _a : {})), { value: e.target.value === ""
+                                                                    ? undefined
+                                                                    : Number(e.target.value) }));
+                                                        }, className: "text-xs w-20", placeholder: "Value" })) : null)) : null),
+                                            react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                                                react_1.default.createElement("input", { type: "checkbox", checked: !!domain.gradient, onChange: function (e) {
+                                                        var _a, _b;
+                                                        return setFieldValue("spec.series[".concat(i, "].gradient"), e.target.checked
+                                                            ? (_a = domain.gradient) !== null && _a !== void 0 ? _a : {
+                                                                type: "linear",
+                                                                degree: 90,
+                                                                stops: [
+                                                                    {
+                                                                        position: 0,
+                                                                        color: (_b = domain.color) !== null && _b !== void 0 ? _b : "#4285F4",
+                                                                    },
+                                                                    {
+                                                                        position: 1,
+                                                                        color: "#FFFFFF",
+                                                                    },
+                                                                ],
+                                                            }
+                                                            : undefined);
+                                                    } }),
+                                                "Gradient fill")))) : null,
+                                    react_1.default.createElement(ui_1.IconButton, { className: "absolute right-1 top-1", type: "button", onClick: function () {
+                                            var currentSeries = basicSpec.series;
+                                            setFieldValue("spec.series", currentSeries.filter(function (_, seriesIndex) { return seriesIndex !== i; }));
+                                        } },
+                                        react_1.default.createElement(icons_1.CrossCircledIcon, null))));
+                            });
+                        }),
+                        react_1.default.createElement("div", { className: "py-1" },
+                            react_1.default.createElement(ui_1.Button, { variant: "link", onClick: function () {
+                                    var nextSeries = basicSpec.series;
+                                    var lastSeries = nextSeries[nextSeries.length - 1];
+                                    setFieldValue("spec.series", tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(nextSeries), false), [
+                                        {
+                                            sources: lastSeries
+                                                ? lastSeries.sources
+                                                : values.spec.dataRange
+                                                    ? [values.spec.dataRange]
+                                                    : [],
+                                        },
+                                    ], false));
+                                }, type: "button", className: "cursor-pointer" }, "Add series"))))) : null,
+                bubbleSpec ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
+                        react_1.default.createElement("input", { type: "checkbox", checked: bubbleAggregateEnabled, onChange: function (e) {
+                                var nextSeries = bubbleSpec.series.map(function (serie) { return (tslib_1.__assign(tslib_1.__assign({}, serie), { aggregateType: e.target.checked ? "SUM" : undefined })); });
+                                setFieldValue("spec.series", nextSeries);
+                            } }),
+                        "Aggregate"),
+                    react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
+                        react_1.default.createElement("input", { type: "checkbox", checked: bubbleSpec.useFirstRowAsHeaders !== false, onChange: function (e) {
+                                return setFieldValue("spec.useFirstRowAsHeaders", e.target.checked);
+                            } }),
+                        "Use first row as headers"),
+                    bubbleSpec.chartType === "bubble"
+                        ? renderChartDataSection("Bubble labels", "bubbleLabels", (_e = bubbleSpec.bubbleLabels) !== null && _e !== void 0 ? _e : [], "Select the cells containing labels for each bubble.")
+                        : null,
+                    renderChartDataSection("X values", "domains", (_f = bubbleSpec.domains) !== null && _f !== void 0 ? _f : [], "Choose the numeric values for the horizontal axis."),
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-2 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Legend entries (series)"),
+                        bubbleSpec.series.map(function (seriesEntry, i) {
+                            var sources = seriesEntry.sources.length > 0
+                                ? seriesEntry.sources
+                                : [undefined];
+                            return sources.map(function (source, idx) {
+                                var _a, _b, _c, _d, _e, _f;
+                                return (react_1.default.createElement("div", { className: "border border-rnc-border border-solid p-2 relative", key: "".concat(values.chartId, "-bubble-series-").concat(bubbleSpec.series.length, "-").concat(i, "-").concat(idx) },
+                                    react_1.default.createElement("div", { className: "flex gap-2 items-start" },
+                                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Name"),
+                                            react_1.default.createElement(ui_1.Input, { value: (_a = seriesEntry.dataLabel) !== null && _a !== void 0 ? _a : "", type: "text", onChange: function (e) {
+                                                    return setFieldValue("spec.series[".concat(i, "].dataLabel"), e.target.value);
+                                                }, className: "text-xs", placeholder: "Enter label" })),
+                                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 flex-1" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Y values"),
+                                            react_1.default.createElement(chart_range_input_1.ChartRangeInput, { sheetId: sheetId, range: source, onChangeRange: function (range) {
+                                                    setFieldValue("spec.series[".concat(i, "].sources[").concat(idx, "]"), range);
+                                                }, required: true, placeholder: "Select a range", className: "mb-0 flex-1" })),
+                                        bubbleSpec.chartType === "scatter" ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2 w-24" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Marker"),
+                                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_c = (_b = seriesEntry.marker) === null || _b === void 0 ? void 0 : _b.symbol) !== null && _c !== void 0 ? _c : "", onChange: function (event) {
+                                                    var _a;
+                                                    return setFieldValue("spec.series[".concat(i, "].marker"), tslib_1.__assign(tslib_1.__assign({}, ((_a = seriesEntry.marker) !== null && _a !== void 0 ? _a : {})), { symbol: event.target.value || undefined }));
+                                                } },
+                                                react_1.default.createElement("option", { value: "" }, "Auto"),
+                                                react_1.default.createElement("option", { value: "circle" }, "Circle"),
+                                                react_1.default.createElement("option", { value: "square" }, "Square"),
+                                                react_1.default.createElement("option", { value: "diamond" }, "Diamond"),
+                                                react_1.default.createElement("option", { value: "triangle" }, "Triangle"),
+                                                react_1.default.createElement("option", { value: "x" }, "X"),
+                                                react_1.default.createElement("option", { value: "plus" }, "Plus"),
+                                                react_1.default.createElement("option", { value: "star" }, "Star"),
+                                                react_1.default.createElement("option", { value: "none" }, "None")),
+                                            react_1.default.createElement("label", { className: "font-system text-xs" }, "Marker size"),
+                                            react_1.default.createElement(ui_1.Input, { type: "number", min: 1, value: (_e = (_d = seriesEntry.marker) === null || _d === void 0 ? void 0 : _d.size) !== null && _e !== void 0 ? _e : "", onChange: function (e) {
+                                                    var _a;
+                                                    return setFieldValue("spec.series[".concat(i, "].marker"), tslib_1.__assign(tslib_1.__assign({}, ((_a = seriesEntry.marker) !== null && _a !== void 0 ? _a : {})), { size: e.target.value === ""
+                                                            ? undefined
+                                                            : Number(e.target.value) }));
+                                                }, className: "text-xs", placeholder: "6" }))) : null,
+                                        bubbleAggregateEnabled ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2 w-32" },
+                                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Aggregate type"),
+                                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_f = seriesEntry.aggregateType) !== null && _f !== void 0 ? _f : "", onChange: function (event) {
+                                                    var aggregateType = event.target.value;
+                                                    setFieldValue("spec.series[".concat(i, "].aggregateType"), aggregateType || undefined);
+                                                } },
+                                                react_1.default.createElement("option", { value: "" }, "None"),
+                                                AGGREGATE_OPTIONS.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)); })))) : null),
+                                    react_1.default.createElement(ui_1.IconButton, { className: "absolute right-1 top-1", type: "button", onClick: function () {
+                                            var currentSeries = bubbleSpec.series;
+                                            setFieldValue("spec.series", currentSeries.filter(function (_, index) { return index !== i; }));
+                                        } },
+                                        react_1.default.createElement(icons_1.CrossCircledIcon, null))));
+                            });
+                        }),
+                        react_1.default.createElement("div", { className: "py-1" },
+                            react_1.default.createElement(ui_1.Button, { variant: "link", type: "button", onClick: function () {
+                                    var nextSeries = bubbleSpec.series;
+                                    var lastSeries = nextSeries[nextSeries.length - 1];
+                                    setFieldValue("spec.series", tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(nextSeries), false), [
+                                        {
+                                            sources: lastSeries
+                                                ? lastSeries.sources
+                                                : values.spec.dataRange
+                                                    ? [values.spec.dataRange]
+                                                    : [],
+                                        },
+                                    ], false));
+                                }, className: "cursor-pointer" }, "Add series"))))) : null,
+                treemapSpec ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1 pb-2" },
+                        react_1.default.createElement("input", { type: "checkbox", checked: treemapSpec.useFirstRowAsHeaders !== false, onChange: function (e) {
+                                return setFieldValue("spec.useFirstRowAsHeaders", e.target.checked);
+                            } }),
+                        "Use first row as headers"),
+                    renderChartDataSection("Labels", "labels", (_g = treemapSpec.labels) !== null && _g !== void 0 ? _g : [], "Select the cells that contain node labels."),
+                    renderChartDataSection("Parent labels", "parentLabels", (_h = treemapSpec.parentLabels) !== null && _h !== void 0 ? _h : [], "Choose the cells that define each node's parent label."),
+                    renderChartDataSection("Size data", "sizeData", (_j = treemapSpec.sizeData) !== null && _j !== void 0 ? _j : [], "Provide numeric values to determine each node's size."))) : null,
+                react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                    react_1.default.createElement("input", { type: "checkbox", checked: values.spec.hiddenDimensionStrategy === "SHOW_ALL", name: "showColumnStripes", onChange: function (e) {
+                            setFieldValue("spec.hiddenDimensionStrategy", e.target.checked
+                                ? "SHOW_ALL"
+                                : "SKIP_HIDDEN_ROWS_AND_COLUMNS");
+                        } }),
+                    "Show data in hidden rows and columns")),
+            react_1.default.createElement(ui_1.TabsContent, { value: "customize", className: "flex flex-col" },
+                react_1.default.createElement(Section, { title: "Chart style", defaultOpen: true },
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Chart title"),
+                        react_1.default.createElement(ui_1.Input, { value: (_k = values === null || values === void 0 ? void 0 : values.spec.title) !== null && _k !== void 0 ? _k : "", type: "text", onChange: function (e) { return setFieldValue("spec.title", e.target.value); }, className: "text-xs", placeholder: "Enter chart title" }))),
+                basicSpec ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Section, { title: "Legend" },
+                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Legend"),
+                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: (_m = (_l = values === null || values === void 0 ? void 0 : values.spec.legend) === null || _l === void 0 ? void 0 : _l.position) !== null && _m !== void 0 ? _m : "", onChange: function (e) {
+                                    return setFieldValue("spec.legend.position", e.target.value || undefined);
+                                } },
+                                react_1.default.createElement("option", { value: "" }, "Auto"),
+                                react_1.default.createElement("option", { value: "top" }, "Top"),
+                                react_1.default.createElement("option", { value: "bottom" }, "Bottom"),
+                                react_1.default.createElement("option", { value: "left" }, "Left"),
+                                react_1.default.createElement("option", { value: "right" }, "Right"),
+                                react_1.default.createElement("option", { value: "none" }, "None")))),
+                    react_1.default.createElement(Section, { title: "Vertical axis" },
+                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Vertical axis title"),
+                            react_1.default.createElement(ui_1.Input, { value: (_o = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _o !== void 0 ? _o : "", type: "text", onChange: function (e) {
+                                    return setFieldValue("spec.verticalAxisTitle", e.target.value);
+                                }, className: "text-xs", placeholder: "Vertical axis title" })),
+                        isCartesianBasic ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-2 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Value axis"),
+                            react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                                react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 w-20" },
+                                    react_1.default.createElement("label", { className: "font-system text-xs" }, "Min"),
+                                    react_1.default.createElement(ui_1.Input, { type: "number", value: (_q = (_p = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _p === void 0 ? void 0 : _p.min) !== null && _q !== void 0 ? _q : "", onChange: function (e) {
+                                            return setFieldValue("spec.valueAxisOptions.min", e.target.value === ""
+                                                ? undefined
+                                                : Number(e.target.value));
+                                        }, className: "text-xs", placeholder: "Auto" })),
+                                react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 w-20" },
+                                    react_1.default.createElement("label", { className: "font-system text-xs" }, "Max"),
+                                    react_1.default.createElement(ui_1.Input, { type: "number", value: (_s = (_r = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _r === void 0 ? void 0 : _r.max) !== null && _s !== void 0 ? _s : "", onChange: function (e) {
+                                            return setFieldValue("spec.valueAxisOptions.max", e.target.value === ""
+                                                ? undefined
+                                                : Number(e.target.value));
+                                        }, className: "text-xs", placeholder: "Auto" }))),
+                            react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_t = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _t === void 0 ? void 0 : _t.logarithmic), onChange: function (e) {
+                                        return setFieldValue("spec.valueAxisOptions.logarithmic", e.target.checked || undefined);
+                                    } }),
+                                "Logarithmic scale"),
+                            react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_u = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _u === void 0 ? void 0 : _u.reverse), onChange: function (e) {
+                                        return setFieldValue("spec.valueAxisOptions.reverse", e.target.checked || undefined);
+                                    } }),
+                                "Reverse direction"),
+                            react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                react_1.default.createElement("input", { type: "checkbox", checked: ((_v = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _v === void 0 ? void 0 : _v.showMajorGridlines) !==
+                                        false, onChange: function (e) {
+                                        return setFieldValue("spec.valueAxisOptions.showMajorGridlines", e.target.checked);
+                                    } }),
+                                "Gridlines"),
+                            basicSpec.series.some(function (s) { return s.useSecondaryAxis; }) ? (react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement("label", { className: "font-system text-sm pt-1" }, "Secondary value axis"),
+                                react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 w-20" },
+                                        react_1.default.createElement("label", { className: "font-system text-xs" }, "Min"),
+                                        react_1.default.createElement(ui_1.Input, { type: "number", value: (_x = (_w = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _w === void 0 ? void 0 : _w.min) !== null && _x !== void 0 ? _x : "", onChange: function (e) {
+                                                return setFieldValue("spec.secondaryValueAxisOptions.min", e.target.value === ""
+                                                    ? undefined
+                                                    : Number(e.target.value));
+                                            }, className: "text-xs", placeholder: "Auto" })),
+                                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 w-20" },
+                                        react_1.default.createElement("label", { className: "font-system text-xs" }, "Max"),
+                                        react_1.default.createElement(ui_1.Input, { type: "number", value: (_z = (_y = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _y === void 0 ? void 0 : _y.max) !== null && _z !== void 0 ? _z : "", onChange: function (e) {
+                                                return setFieldValue("spec.secondaryValueAxisOptions.max", e.target.value === ""
+                                                    ? undefined
+                                                    : Number(e.target.value));
+                                            }, className: "text-xs", placeholder: "Auto" }))),
+                                react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                    react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_0 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _0 === void 0 ? void 0 : _0.logarithmic), onChange: function (e) {
+                                            return setFieldValue("spec.secondaryValueAxisOptions.logarithmic", e.target.checked || undefined);
+                                        } }),
+                                    "Logarithmic scale"),
+                                react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                    react_1.default.createElement("input", { type: "checkbox", checked: ((_1 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _1 === void 0 ? void 0 : _1.showMajorGridlines) !== false, onChange: function (e) {
+                                            return setFieldValue("spec.secondaryValueAxisOptions.showMajorGridlines", e.target.checked);
+                                        } }),
+                                    "Gridlines"))) : null)) : null),
+                    react_1.default.createElement(Section, { title: "Horizontal axis" },
+                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Horizontal axis title"),
+                            react_1.default.createElement(ui_1.Input, { value: (_2 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _2 !== void 0 ? _2 : "", type: "text", onChange: function (e) {
+                                    return setFieldValue("spec.horizontalAxisTitle", e.target.value);
+                                }, className: "text-xs", placeholder: "Horizontal axis title" })),
+                        isCartesianBasic ? (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("label", { className: "font-system text-sm pt-1" }, "Category axis"),
+                            react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                react_1.default.createElement("input", { type: "checkbox", checked: ((_3 = values === null || values === void 0 ? void 0 : values.spec.categoryAxisOptions) === null || _3 === void 0 ? void 0 : _3.showMajorGridlines) === true, onChange: function (e) {
+                                        return setFieldValue("spec.categoryAxisOptions.showMajorGridlines", e.target.checked);
+                                    } }),
+                                "Gridlines"))) : null),
+                    react_1.default.createElement(Section, { title: "Data labels" },
+                        react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                                react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_4 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _4 === void 0 ? void 0 : _4.show), onChange: function (e) {
+                                        return setFieldValue("spec.dataLabels.show", e.target.checked);
+                                    } }),
+                                "Show data labels"),
+                            ((_5 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _5 === void 0 ? void 0 : _5.show) ? (react_1.default.createElement("div", { className: "pl-4 flex flex-col gap-1" },
+                                react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                    react_1.default.createElement("input", { type: "checkbox", checked: ((_6 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _6 === void 0 ? void 0 : _6.showValue) !== false, onChange: function (e) {
+                                            return setFieldValue("spec.dataLabels.showValue", e.target.checked);
+                                        } }),
+                                    "Value"),
+                                react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                    react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_7 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _7 === void 0 ? void 0 : _7.showCategoryName), onChange: function (e) {
+                                            return setFieldValue("spec.dataLabels.showCategoryName", e.target.checked);
+                                        } }),
+                                    "Category name"),
+                                react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                    react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_8 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _8 === void 0 ? void 0 : _8.showSeriesName), onChange: function (e) {
+                                            return setFieldValue("spec.dataLabels.showSeriesName", e.target.checked);
+                                        } }),
+                                    "Series name"),
+                                react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                    react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_9 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _9 === void 0 ? void 0 : _9.showPercent), onChange: function (e) {
+                                            return setFieldValue("spec.dataLabels.showPercent", e.target.checked);
+                                        } }),
+                                    "Percentage"),
+                                react_1.default.createElement("label", { className: "font-system text-xs" }, "Label position"),
+                                react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: (_11 = (_10 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _10 === void 0 ? void 0 : _10.position) !== null && _11 !== void 0 ? _11 : "outside", onChange: function (e) {
+                                        return setFieldValue("spec.dataLabels.position", e.target.value);
+                                    } },
+                                    react_1.default.createElement("option", { value: "center" }, "Center"),
+                                    react_1.default.createElement("option", { value: "inside" }, "Inside"),
+                                    react_1.default.createElement("option", { value: "outside" }, "Outside"),
+                                    react_1.default.createElement("option", { value: "insideEnd" }, "Inside end"),
+                                    react_1.default.createElement("option", { value: "outsideEnd" }, "Outside end"),
+                                    react_1.default.createElement("option", { value: "bestFit" }, "Best fit")),
+                                react_1.default.createElement("label", { className: "font-system text-xs" }, "Number format pattern"),
+                                react_1.default.createElement(ui_1.Input, { value: (_13 = (_12 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _12 === void 0 ? void 0 : _12.numberFormatPattern) !== null && _13 !== void 0 ? _13 : "", type: "text", onChange: function (e) {
+                                        return setFieldValue("spec.dataLabels.numberFormatPattern", e.target.value || undefined);
+                                    }, className: "text-xs w-32", placeholder: "#,##0.00" }))) : null)),
+                    basicSpec &&
+                        (basicSpec.chartType === "histogram" ||
+                            basicSpec.chartType === "radar" ||
+                            basicSpec.chartType === "stock" ||
+                            basicSpec.chartType === "doughnut" ||
+                            isBarOrColumnBasic) ? (react_1.default.createElement(Section, { title: "Chart options" },
+                        basicSpec.chartType === "histogram" ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Bins (leave blank for auto)"),
+                            react_1.default.createElement(ui_1.Input, { value: (_14 = basicSpec.binCount) !== null && _14 !== void 0 ? _14 : "", type: "number", min: 1, onChange: function (e) {
+                                    var raw = e.target.value;
+                                    setFieldValue("spec.binCount", raw === "" ? undefined : Number(raw));
+                                }, className: "text-xs", placeholder: "Auto (Sturges)" }))) : null,
+                        basicSpec.chartType === "radar" ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Radar style"),
+                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_15 = basicSpec.radarStyle) !== null && _15 !== void 0 ? _15 : "standard", onChange: function (e) {
+                                    return setFieldValue("spec.radarStyle", e.target.value);
+                                } },
+                                react_1.default.createElement("option", { value: "standard" }, "Standard"),
+                                react_1.default.createElement("option", { value: "marker" }, "With markers"),
+                                react_1.default.createElement("option", { value: "filled" }, "Filled")))) : null,
+                        basicSpec.chartType === "stock" ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Stock variant"),
+                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_16 = basicSpec.stockVariant) !== null && _16 !== void 0 ? _16 : "HLC", onChange: function (e) {
+                                    return setFieldValue("spec.stockVariant", e.target.value);
+                                } },
+                                react_1.default.createElement("option", { value: "HLC" }, "High-Low-Close"),
+                                react_1.default.createElement("option", { value: "OHLC" }, "Open-High-Low-Close"),
+                                react_1.default.createElement("option", { value: "VHLC" }, "Volume-High-Low-Close"),
+                                react_1.default.createElement("option", { value: "VOHLC" }, "Volume-Open-High-Low-Close")))) : null,
+                        basicSpec.chartType === "doughnut" ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Doughnut hole size (0-0.9)"),
+                            react_1.default.createElement(ui_1.Input, { type: "number", min: 0, max: 0.9, step: 0.05, value: (_17 = basicSpec.doughnutHoleSize) !== null && _17 !== void 0 ? _17 : "", onChange: function (e) {
+                                    return setFieldValue("spec.doughnutHoleSize", e.target.value === ""
+                                        ? undefined
+                                        : Number(e.target.value));
+                                }, className: "text-xs w-32", placeholder: "0.5" }))) : null,
+                        isBarOrColumnBasic ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Gap width (0-500)"),
+                            react_1.default.createElement(ui_1.Input, { type: "number", min: 0, max: 500, value: (_18 = basicSpec.gapWidth) !== null && _18 !== void 0 ? _18 : "", onChange: function (e) {
+                                    return setFieldValue("spec.gapWidth", e.target.value === ""
+                                        ? undefined
+                                        : Number(e.target.value));
+                                }, className: "text-xs w-32", placeholder: "150" }))) : null,
+                        isBarOrColumnBasic ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Series overlap (-100 to 100)"),
+                            react_1.default.createElement(ui_1.Input, { type: "number", min: -100, max: 100, value: (_19 = basicSpec.overlap) !== null && _19 !== void 0 ? _19 : "", onChange: function (e) {
+                                    return setFieldValue("spec.overlap", e.target.value === ""
+                                        ? undefined
+                                        : Number(e.target.value));
+                                }, className: "text-xs w-32", placeholder: "0" }))) : null)) : null)) : null,
+                bubbleSpec && bubbleSpec.chartType === "scatter" ? (react_1.default.createElement(Section, { title: "Chart options" },
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Scatter style"),
+                        react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-56", value: (_20 = bubbleSpec.scatterStyle) !== null && _20 !== void 0 ? _20 : "lineMarker", onChange: function (e) {
+                                return setFieldValue("spec.scatterStyle", e.target.value);
+                            } },
+                            react_1.default.createElement("option", { value: "lineMarker" }, "Straight lines with markers"),
+                            react_1.default.createElement("option", { value: "line" }, "Straight lines"),
+                            react_1.default.createElement("option", { value: "marker" }, "Markers only"),
+                            react_1.default.createElement("option", { value: "smoothMarker" }, "Smooth lines with markers"),
+                            react_1.default.createElement("option", { value: "smooth" }, "Smooth lines"))))) : null,
+                bubbleSpec ? (react_1.default.createElement(Section, { title: "Axis titles" },
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Vertical axis title"),
+                        react_1.default.createElement(ui_1.Input, { value: (_21 = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _21 !== void 0 ? _21 : "", type: "text", onChange: function (e) {
+                                return setFieldValue("spec.verticalAxisTitle", e.target.value);
+                            }, className: "text-xs", placeholder: "Vertical axis title" })),
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Horizontal axis title"),
+                        react_1.default.createElement(ui_1.Input, { value: (_22 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _22 !== void 0 ? _22 : "", type: "text", onChange: function (e) {
+                                return setFieldValue("spec.horizontalAxisTitle", e.target.value);
+                            }, className: "text-xs", placeholder: "Horizontal axis title" })))) : null)),
+        react_1.default.createElement("div", { className: "flex gap-1 py-2 mt-1" },
+            react_1.default.createElement(ui_1.Button, { type: "submit", variant: "primary", size: "xs" }, "Save"),
+            react_1.default.createElement(ui_1.Button, { size: "xs", onClick: onCancelForm, type: "button" }, "Cancel"))));
+};
+exports.ChartEditor = ChartEditor;
+exports.default = exports.ChartEditor;