@rowsncolumns/charts 28.0.0 → 28.1.1

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

@@ -13,7 +13,9 @@ 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_orientation_1 = require("../../utils/chart-orientation");
 var chart_spec_utils_1 = require("../../utils/chart-spec-utils");
+var chart_styles_1 = require("../../utils/chart-styles");
 var AGGREGATE_OPTIONS = [
     { label: "Sum", value: "SUM" },
     { label: "Average", value: "AVERAGE" },
@@ -22,6 +24,21 @@ var AGGREGATE_OPTIONS = [
     { label: "Min", value: "MIN" },
     { label: "Max", value: "MAX" },
 ];
+/** Swatch for the theme-accent palette tile (the theme itself is resolved at render time). */
+var THEME_PALETTE_PREVIEW = [
+    "#4472C4",
+    "#ED7D31",
+    "#A5A5A5",
+    "#FFC000",
+    "#5B9BD5",
+    "#70AD47",
+];
+/** Excel's placement modes, in the order its Properties pane lists them. */
+var CHART_PLACEMENT_OPTIONS = [
+    { label: "Move and size with cells", value: "moveAndSize" },
+    { label: "Move but don't size with cells", value: "moveOnly" },
+    { label: "Don't move or size with cells", value: "absolute" },
+];
 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" },
@@ -31,8 +48,8 @@ var Section = function (_a) {
         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 _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, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39;
+    var chart = _a.chart, sheetId = _a.sheetId, onSubmit = _a.onSubmit, onRequestMoveChart = _a.onRequestMoveChart, getFormattedValue = _a.getFormattedValue;
     var setChartDialogState = (0, editing_chart_atom_1.useSetChartEditorDialogState)();
     // Close dialog
     var closeDialog = function () { return setChartDialogState(false); };
@@ -51,17 +68,19 @@ var ChartEditor = function (_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [chart === null || chart === void 0 ? void 0 : chart.chartId]);
     // Formik
-    var _23 = (0, formik_1.useFormik)({
+    var _40 = (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);
+            // chart moved or resized while the editor was open; the placement
+            // mode is the one property of the position the form owns.
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chart
+                ? tslib_1.__assign(tslib_1.__assign({}, values), { position: tslib_1.__assign(tslib_1.__assign({}, chart.position), { overlayPosition: tslib_1.__assign(tslib_1.__assign({}, chart.position.overlayPosition), { placement: values.position.overlayPosition.placement }) }) }) : values);
             // Close dialog
             closeDialog();
         },
-    }), handleSubmit = _23.handleSubmit, setFieldValue = _23.setFieldValue, resetForm = _23.resetForm, values = _23.values;
+    }), handleSubmit = _40.handleSubmit, setFieldValue = _40.setFieldValue, resetForm = _40.resetForm, values = _40.values;
     var onCancelForm = function () {
         resetForm();
         closeDialog();
@@ -85,6 +104,19 @@ var ChartEditor = function (_a) {
     var isBarOrColumnBasic = basicSpec
         ? basicSpec.chartType === "bar" || basicSpec.chartType === "column"
         : false;
+    // Customize → "Chart options": each control names the chart types it
+    // applies to and the section renders when any of them does, so a chart type
+    // is never left out by a separately maintained list (pie was, until #783).
+    var chartOptionControls = {
+        binCount: (basicSpec === null || basicSpec === void 0 ? void 0 : basicSpec.chartType) === "histogram",
+        radarStyle: (basicSpec === null || basicSpec === void 0 ? void 0 : basicSpec.chartType) === "radar",
+        stockVariant: (basicSpec === null || basicSpec === void 0 ? void 0 : basicSpec.chartType) === "stock",
+        doughnutHoleSize: (basicSpec === null || basicSpec === void 0 ? void 0 : basicSpec.chartType) === "doughnut",
+        explosion: (basicSpec === null || basicSpec === void 0 ? void 0 : basicSpec.chartType) === "pie" || (basicSpec === null || basicSpec === void 0 ? void 0 : basicSpec.chartType) === "doughnut",
+        gapWidth: isBarOrColumnBasic,
+        overlap: isBarOrColumnBasic,
+    };
+    var showChartOptions = Object.values(chartOptionControls).some(Boolean);
     // Check aggregate
     var isAggregateType = basicSpec
         ? basicSpec.series.some(function (serie) { return serie.aggregateType; })
@@ -138,13 +170,27 @@ var ChartEditor = function (_a) {
                             }))))),
                 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) {
+                    ((_b = values.spec) === null || _b === void 0 ? void 0 : _b.pivotTableId) != null ? (
+                    // A PivotChart's range follows its pivot's data area; it is not
+                    // editable here (Excel greys the range on a PivotChart too).
+                    react_1.default.createElement("span", { className: "font-system text-xs text-rnc-muted-foreground" }, "Bound to PivotTable \u2014 the data range follows the pivot.")) : (react_1.default.createElement(chart_range_input_1.ChartRangeInput, { key: values.chartId, sheetId: sheetId, range: (_d = (_c = values.spec) === null || _c === void 0 ? void 0 : _c.dataRange) !== null && _d !== void 0 ? _d : undefined, onChangeRange: function (range) {
                             setFieldValue("spec.dataRange", range);
-                        }, required: true, placeholder: "Select a range", className: "mb-0" })),
+                        }, required: true, placeholder: "Select a range", className: "mb-0" }))),
+                basicSpec ? (react_1.default.createElement(ui_1.Stack, { direction: "horizontal", className: "gap-2 pb-2 items-center" },
+                    react_1.default.createElement(ui_1.Button, { type: "button", variant: "outline", size: "xs", disabled: !(0, chart_orientation_1.canSwitchRowColumn)(values.spec), onClick: function () {
+                            var next = (0, chart_orientation_1.switchRowColumn)(values.spec, {
+                                getFormattedValue: getFormattedValue,
+                            });
+                            if (next)
+                                setFieldValue("spec", next);
+                        } }, "Switch Row/Column"),
+                    react_1.default.createElement("span", { className: "font-system text-xs text-rnc-muted-foreground" },
+                        "Series in ",
+                        (0, chart_orientation_1.inferSeriesOrientation)(values.spec)))) : null,
                 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) {
+                        ((_e = basicSpec.domains) !== null && _e !== void 0 ? _e : []).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);
@@ -322,9 +368,9 @@ var ChartEditor = function (_a) {
                             } }),
                         "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.")
+                        ? renderChartDataSection("Bubble labels", "bubbleLabels", (_f = bubbleSpec.bubbleLabels) !== null && _f !== void 0 ? _f : [], "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."),
+                    renderChartDataSection("X values", "domains", (_g = bubbleSpec.domains) !== null && _g !== void 0 ? _g : [], "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) {
@@ -402,9 +448,24 @@ var ChartEditor = function (_a) {
                                 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,
+                    renderChartDataSection("Labels", "labels", (_h = treemapSpec.labels) !== null && _h !== void 0 ? _h : [], "Select the cells that contain node labels."),
+                    renderChartDataSection("Parent labels", "parentLabels", (_j = treemapSpec.parentLabels) !== null && _j !== void 0 ? _j : [], "Choose the cells that define each node's parent label."),
+                    renderChartDataSection("Size data", "sizeData", (_k = treemapSpec.sizeData) !== null && _k !== void 0 ? _k : [], "Provide numeric values to determine each node's size."))) : null,
+                basicSpec ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2 w-56" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Show empty cells as"),
+                        react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", "aria-label": "Show empty cells as", value: (_l = values.spec.emptyCells) !== null && _l !== void 0 ? _l : "gaps", onChange: function (event) {
+                                var emptyCells = event.target.value;
+                                setFieldValue("spec.emptyCells", emptyCells === "gaps" ? undefined : emptyCells);
+                            } },
+                            react_1.default.createElement("option", { value: "gaps" }, "Gaps"),
+                            react_1.default.createElement("option", { value: "zero" }, "Zero"),
+                            react_1.default.createElement("option", { value: "connect" }, "Connect data points with line"))),
+                    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.showNaAsEmpty !== false, onChange: function (e) {
+                                setFieldValue("spec.showNaAsEmpty", e.target.checked ? undefined : false);
+                            } }),
+                        "Show #N/A as an empty cell"))) : 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
@@ -416,12 +477,96 @@ var ChartEditor = function (_a) {
                 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" }))),
+                        react_1.default.createElement(ui_1.Input, { value: (_m = values === null || values === void 0 ? void 0 : values.spec.title) !== null && _m !== void 0 ? _m : "", type: "text", onChange: function (e) { return setFieldValue("spec.title", e.target.value); }, className: "text-xs", placeholder: "Enter chart 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" }, "Style"),
+                        react_1.default.createElement("div", { className: "grid grid-cols-4 gap-1", role: "radiogroup" }, chart_styles_1.CHART_STYLES.map(function (style) {
+                            var isActive = values.spec.chartStyle === style.id;
+                            return (react_1.default.createElement("button", { key: style.id, type: "button", role: "radio", "aria-checked": isActive, "aria-label": style.label, title: style.label, onClick: function () {
+                                    return setFieldValue("spec", (0, chart_styles_1.applyChartStyle)(values.spec, style));
+                                }, className: "flex items-end justify-center gap-0.5 h-8 rounded-sm border border-solid p-1 ".concat(isActive
+                                    ? "border-rnc-primary"
+                                    : "border-rnc-border"), style: { background: style.preview.background } }, style.preview.bars.map(function (color, i) { return (react_1.default.createElement("span", { key: "".concat(style.id, "-").concat(i), className: "w-1.5 rounded-[1px]", style: { height: 6 + i * 4, background: color } })); })));
+                        }))),
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Colors"),
+                        react_1.default.createElement("div", { className: "flex flex-col gap-1", role: "radiogroup" }, chart_styles_1.CHART_COLOR_PALETTES.map(function (palette) {
+                            var _a, _b;
+                            var current = (_a = values.spec.palette) !== null && _a !== void 0 ? _a : undefined;
+                            var isActive = palette.colors
+                                ? !!current &&
+                                    current.length === palette.colors.length &&
+                                    current.every(function (c, i) { var _a; return c === ((_a = palette.colors) === null || _a === void 0 ? void 0 : _a[i]); })
+                                : !current || current.length === 0;
+                            return (react_1.default.createElement("button", { key: palette.id, type: "button", role: "radio", "aria-checked": isActive, "aria-label": palette.label, title: palette.label, onClick: function () {
+                                    return setFieldValue("spec", (0, chart_styles_1.applyChartColorPalette)(values.spec, palette));
+                                }, className: "flex items-center gap-1 rounded-sm border border-solid px-1 py-0.5 ".concat(isActive ? "border-rnc-primary" : "border-rnc-border") },
+                                ((_b = palette.colors) !== null && _b !== void 0 ? _b : THEME_PALETTE_PREVIEW).map(function (color, i) { return (react_1.default.createElement("span", { key: "".concat(palette.id, "-").concat(i), className: "h-3 w-3 rounded-[1px]", style: { background: color } })); }),
+                                react_1.default.createElement("span", { className: "font-system text-xs text-rnc-text-weak" }, palette.label)));
+                        }))),
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Quick layout"),
+                        react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: "", "aria-label": "Quick layout", onChange: function (e) {
+                                var layout = chart_styles_1.CHART_QUICK_LAYOUTS.find(function (entry) { return String(entry.id) === e.target.value; });
+                                if (layout) {
+                                    setFieldValue("spec", (0, chart_styles_1.applyChartQuickLayout)(values.spec, layout));
+                                }
+                            } },
+                            react_1.default.createElement("option", { value: "" }, "Choose a layout\u2026"),
+                            chart_styles_1.CHART_QUICK_LAYOUTS.map(function (layout) { return (react_1.default.createElement("option", { key: layout.id, value: layout.id }, layout.label)); }))),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(ui_1.Button, { type: "button", size: "xs", onClick: function () {
+                                return setFieldValue("spec", (0, chart_styles_1.resetChartToMatchStyle)(values.spec));
+                            } }, "Reset to match style")),
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Title font"),
+                        react_1.default.createElement("div", { className: "flex items-center gap-1 flex-wrap" },
+                            react_1.default.createElement(ui_1.Input, { value: (_p = (_o = values.spec.titleTextFormat) === null || _o === void 0 ? void 0 : _o.fontFamily) !== null && _p !== void 0 ? _p : "", type: "text", onChange: function (e) {
+                                    return setFieldValue("spec.titleTextFormat.fontFamily", e.target.value || undefined);
+                                }, className: "text-xs w-32", placeholder: "Font family", "aria-label": "Title font family" }),
+                            react_1.default.createElement(ui_1.Input, { value: (_r = (_q = values.spec.titleTextFormat) === null || _q === void 0 ? void 0 : _q.fontSize) !== null && _r !== void 0 ? _r : "", type: "number", min: 1, onChange: function (e) {
+                                    return setFieldValue("spec.titleTextFormat.fontSize", e.target.value === "" ? undefined : Number(e.target.value));
+                                }, className: "text-xs w-16", placeholder: "Size", "aria-label": "Title font size" }),
+                            react_1.default.createElement("input", { type: "color", value: (_t = (_s = values.spec.titleTextFormat) === null || _s === void 0 ? void 0 : _s.color) !== null && _t !== void 0 ? _t : "#000000", onChange: function (e) {
+                                    return setFieldValue("spec.titleTextFormat.color", e.target.value);
+                                }, className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Title color" }),
+                            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.spec.titleTextFormat) === null || _u === void 0 ? void 0 : _u.bold), onChange: function (e) {
+                                        return setFieldValue("spec.titleTextFormat.bold", e.target.checked);
+                                    } }),
+                                "Bold"),
+                            react_1.default.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_v = values.spec.titleTextFormat) === null || _v === void 0 ? void 0 : _v.italic), onChange: function (e) {
+                                        return setFieldValue("spec.titleTextFormat.italic", e.target.checked);
+                                    } }),
+                                "Italic")))),
+                react_1.default.createElement(Section, { title: "Chart area" },
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Fill"),
+                        react_1.default.createElement("div", { className: "flex items-center gap-1" },
+                            react_1.default.createElement("input", { type: "color", value: (_w = values.spec.backgroundColor) !== null && _w !== void 0 ? _w : "#FFFFFF", onChange: function (e) {
+                                    return setFieldValue("spec.backgroundColor", e.target.value);
+                                }, className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Chart area fill" }),
+                            values.spec.backgroundColor ? (react_1.default.createElement(ui_1.IconButton, { type: "button", onClick: function () {
+                                    return setFieldValue("spec.backgroundColor", undefined);
+                                }, "aria-label": "No fill", title: "No fill" },
+                                react_1.default.createElement(icons_1.CrossCircledIcon, null))) : (react_1.default.createElement("span", { className: "font-system text-xs text-rnc-text-weak" }, "Automatic")))),
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        react_1.default.createElement("label", { className: "font-system text-sm" }, "Border"),
+                        react_1.default.createElement("div", { className: "flex items-center gap-1" },
+                            react_1.default.createElement("input", { type: "color", value: (_x = values.borderColor) !== null && _x !== void 0 ? _x : "#D9D9D9", onChange: function (e) { return setFieldValue("borderColor", e.target.value); }, className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Chart area border" }),
+                            values.borderColor ? (react_1.default.createElement(ui_1.IconButton, { type: "button", onClick: function () { return setFieldValue("borderColor", undefined); }, "aria-label": "No border", title: "No border" },
+                                react_1.default.createElement(icons_1.CrossCircledIcon, null))) : (react_1.default.createElement("span", { className: "font-system text-xs text-rnc-text-weak" }, "None")))),
+                    react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                        react_1.default.createElement("input", { type: "checkbox", checked: Boolean(values.spec.roundedCorners), onChange: function (e) {
+                                return setFieldValue("spec.roundedCorners", e.target.checked);
+                            } }),
+                        "Rounded corners")),
                 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) {
+                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: (_z = (_y = values === null || values === void 0 ? void 0 : values.spec.legend) === null || _y === void 0 ? void 0 : _y.position) !== null && _z !== void 0 ? _z : "", onChange: function (e) {
                                     return setFieldValue("spec.legend.position", e.target.value || undefined);
                                 } },
                                 react_1.default.createElement("option", { value: "" }, "Auto"),
@@ -433,7 +578,7 @@ var ChartEditor = function (_a) {
                     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) {
+                            react_1.default.createElement(ui_1.Input, { value: (_0 = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _0 !== void 0 ? _0 : "", 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" },
@@ -441,104 +586,112 @@ var ChartEditor = function (_a) {
                             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) {
+                                    react_1.default.createElement(ui_1.Input, { type: "number", value: (_2 = (_1 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _1 === void 0 ? void 0 : _1.min) !== null && _2 !== void 0 ? _2 : "", 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) {
+                                    react_1.default.createElement(ui_1.Input, { type: "number", value: (_4 = (_3 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _3 === void 0 ? void 0 : _3.max) !== null && _4 !== void 0 ? _4 : "", 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) {
+                                react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_5 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _5 === void 0 ? void 0 : _5.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) {
+                                react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_6 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _6 === void 0 ? void 0 : _6.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) !==
+                                react_1.default.createElement("input", { type: "checkbox", checked: ((_7 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _7 === void 0 ? void 0 : _7.showMajorGridlines) !==
                                         false, onChange: function (e) {
                                         return setFieldValue("spec.valueAxisOptions.showMajorGridlines", e.target.checked);
                                     } }),
                                 "Gridlines"),
+                            react_1.default.createElement("label", { className: "font-system text-xs" }, "Number format"),
+                            react_1.default.createElement(ui_1.Input, { value: (_9 = (_8 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _8 === void 0 ? void 0 : _8.numberFormatPattern) !== null && _9 !== void 0 ? _9 : "", type: "text", onChange: function (e) {
+                                    return setFieldValue("spec.valueAxisOptions.numberFormatPattern", e.target.value || undefined);
+                                }, className: "text-xs w-32", placeholder: "Linked to source" }),
                             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) {
+                                        react_1.default.createElement(ui_1.Input, { type: "number", value: (_11 = (_10 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _10 === void 0 ? void 0 : _10.min) !== null && _11 !== void 0 ? _11 : "", 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) {
+                                        react_1.default.createElement(ui_1.Input, { type: "number", value: (_13 = (_12 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _12 === void 0 ? void 0 : _12.max) !== null && _13 !== void 0 ? _13 : "", 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) {
+                                    react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_14 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _14 === void 0 ? void 0 : _14.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) {
+                                    react_1.default.createElement("input", { type: "checkbox", checked: ((_15 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _15 === void 0 ? void 0 : _15.showMajorGridlines) !== false, onChange: function (e) {
                                             return setFieldValue("spec.secondaryValueAxisOptions.showMajorGridlines", e.target.checked);
                                         } }),
-                                    "Gridlines"))) : null)) : null),
+                                    "Gridlines"),
+                                react_1.default.createElement("label", { className: "font-system text-xs" }, "Number format"),
+                                react_1.default.createElement(ui_1.Input, { value: (_17 = (_16 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _16 === void 0 ? void 0 : _16.numberFormatPattern) !== null && _17 !== void 0 ? _17 : "", type: "text", onChange: function (e) {
+                                        return setFieldValue("spec.secondaryValueAxisOptions.numberFormatPattern", e.target.value || undefined);
+                                    }, className: "text-xs w-32", placeholder: "Linked to source" }))) : 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) {
+                            react_1.default.createElement(ui_1.Input, { value: (_18 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _18 !== void 0 ? _18 : "", 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) {
+                                react_1.default.createElement("input", { type: "checkbox", checked: ((_19 = values === null || values === void 0 ? void 0 : values.spec.categoryAxisOptions) === null || _19 === void 0 ? void 0 : _19.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) {
+                                react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_20 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _20 === void 0 ? void 0 : _20.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" },
+                            ((_21 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _21 === void 0 ? void 0 : _21.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) {
+                                    react_1.default.createElement("input", { type: "checkbox", checked: ((_22 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _22 === void 0 ? void 0 : _22.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) {
+                                    react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_23 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _23 === void 0 ? void 0 : _23.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) {
+                                    react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_24 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _24 === void 0 ? void 0 : _24.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) {
+                                    react_1.default.createElement("input", { type: "checkbox", checked: Boolean((_25 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _25 === void 0 ? void 0 : _25.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) {
+                                react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: (_27 = (_26 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _26 === void 0 ? void 0 : _26.position) !== null && _27 !== void 0 ? _27 : "outside", onChange: function (e) {
                                         return setFieldValue("spec.dataLabels.position", e.target.value);
                                     } },
                                     react_1.default.createElement("option", { value: "center" }, "Center"),
@@ -548,55 +701,57 @@ var ChartEditor = function (_a) {
                                     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) {
+                                react_1.default.createElement(ui_1.Input, { value: (_29 = (_28 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _28 === void 0 ? void 0 : _28.numberFormatPattern) !== null && _29 !== void 0 ? _29 : "", 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" },
+                    basicSpec && showChartOptions ? (react_1.default.createElement(Section, { title: "Chart options" },
+                        chartOptionControls.binCount ? (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) {
+                            react_1.default.createElement(ui_1.Input, { value: (_30 = basicSpec.binCount) !== null && _30 !== void 0 ? _30 : "", 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" },
+                        chartOptionControls.radarStyle ? (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) {
+                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_31 = basicSpec.radarStyle) !== null && _31 !== void 0 ? _31 : "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" },
+                        chartOptionControls.stockVariant ? (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) {
+                            react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", value: (_32 = basicSpec.stockVariant) !== null && _32 !== void 0 ? _32 : "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" },
+                        chartOptionControls.doughnutHoleSize ? (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) {
+                            react_1.default.createElement(ui_1.Input, { type: "number", min: 0, max: 0.9, step: 0.05, value: (_33 = basicSpec.doughnutHoleSize) !== null && _33 !== void 0 ? _33 : "", 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" },
+                        chartOptionControls.explosion ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            react_1.default.createElement("label", { className: "font-system text-sm" }, "Explosion (% of radius, 0-400)"),
+                            react_1.default.createElement(ui_1.Input, { type: "number", min: 0, max: 400, step: 5, "aria-label": "Explosion", value: (_34 = basicSpec.explosion) !== null && _34 !== void 0 ? _34 : "", onChange: function (e) {
+                                    return setFieldValue("spec.explosion", e.target.value === ""
+                                        ? undefined
+                                        : Number(e.target.value));
+                                }, className: "text-xs w-32", placeholder: "0" }))) : null,
+                        chartOptionControls.gapWidth ? (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) {
+                            react_1.default.createElement(ui_1.Input, { type: "number", min: 0, max: 500, value: (_35 = basicSpec.gapWidth) !== null && _35 !== void 0 ? _35 : "", 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" },
+                        chartOptionControls.overlap ? (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) {
+                            react_1.default.createElement(ui_1.Input, { type: "number", min: -100, max: 100, value: (_36 = basicSpec.overlap) !== null && _36 !== void 0 ? _36 : "", onChange: function (e) {
                                     return setFieldValue("spec.overlap", e.target.value === ""
                                         ? undefined
                                         : Number(e.target.value));
@@ -604,7 +759,7 @@ var ChartEditor = function (_a) {
                 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) {
+                        react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-56", value: (_37 = bubbleSpec.scatterStyle) !== null && _37 !== void 0 ? _37 : "lineMarker", onChange: function (e) {
                                 return setFieldValue("spec.scatterStyle", e.target.value);
                             } },
                             react_1.default.createElement("option", { value: "lineMarker" }, "Straight lines with markers"),
@@ -615,14 +770,25 @@ var ChartEditor = function (_a) {
                 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) {
+                        react_1.default.createElement(ui_1.Input, { value: (_38 = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _38 !== void 0 ? _38 : "", 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) {
+                        react_1.default.createElement(ui_1.Input, { value: (_39 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _39 !== void 0 ? _39 : "", type: "text", onChange: function (e) {
                                 return setFieldValue("spec.horizontalAxisTitle", e.target.value);
-                            }, className: "text-xs", placeholder: "Horizontal axis title" })))) : null)),
+                            }, className: "text-xs", placeholder: "Horizontal axis title" })))) : null,
+                react_1.default.createElement(Section, { title: "Properties" },
+                    react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2", role: "radiogroup" }, CHART_PLACEMENT_OPTIONS.map(function (_a) {
+                        var _b;
+                        var label = _a.label, value = _a.value;
+                        return (react_1.default.createElement("label", { key: value, className: "font-system text-sm flex items-center gap-1" },
+                            react_1.default.createElement("input", { type: "radio", name: "placement", value: value, checked: ((_b = values.position.overlayPosition.placement) !== null && _b !== void 0 ? _b : "moveAndSize") === value, onChange: function () {
+                                    return setFieldValue("position.overlayPosition.placement", value);
+                                } }),
+                            label));
+                    })),
+                    onRequestMoveChart && chart ? (react_1.default.createElement(ui_1.Button, { type: "button", size: "xs", className: "mb-2", onClick: function () { return onRequestMoveChart(chart); } }, "Move chart\u2026")) : 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"))));

package/dist/cjs/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAqJ3D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAgB1E,CAAC;AAYJ;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,OAAO,CAAC,SAAS,CAAC,KAAG,OAQzD,CAAC;AAiBF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,MAAM,OAAO,CAAC,SAAS,CAAC,KAAG,MAmB9D,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAqR3D,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAgB1E,CAAC;AAYJ;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,OAAO,CAAC,SAAS,CAAC,KAAG,OAQzD,CAAC;AAuBF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,MAAM,OAAO,CAAC,SAAS,CAAC,KAAG,MA4B9D,CAAC"}