@rowsncolumns/charts 28.1.14 → 28.1.15

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

@@ -7,15 +7,22 @@ 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 utils_1 = require("@rowsncolumns/utils");
 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_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 chart_editor_capabilities_1 = require("./chart-editor-capabilities");
+var chart_range_input_1 = require("./chart-range-input");
+var axis_options_fields_1 = require("./fields/axis-options-fields");
+var chart_type_options_1 = require("./fields/chart-type-options");
+var data_labels_fields_1 = require("./fields/data-labels-fields");
+var series_format_fields_1 = require("./fields/series-format-fields");
+var series_name_field_1 = require("./fields/series-name-field");
+var text_format_fields_1 = require("./fields/text-format-fields");
 var AGGREGATE_OPTIONS = [
     { label: "Sum", value: "SUM" },
     { label: "Average", value: "AVERAGE" },
@@ -48,7 +55,7 @@ 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, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40;
+    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;
     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
@@ -68,7 +75,7 @@ var ChartEditor = function (_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [chart === null || chart === void 0 ? void 0 : chart.chartId]);
     // Formik
-    var _41 = (0, formik_1.useFormik)({
+    var _1 = (0, formik_1.useFormik)({
         initialValues: initialValues,
         enableReinitialize: true,
         onSubmit: function (values) {
@@ -80,63 +87,136 @@ var ChartEditor = function (_a) {
             // Close dialog
             closeDialog();
         },
-    }), handleSubmit = _41.handleSubmit, setFieldValue = _41.setFieldValue, resetForm = _41.resetForm, values = _41.values;
+    }), handleSubmit = _1.handleSubmit, setFieldValue = _1.setFieldValue, resetForm = _1.resetForm, values = _1.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
+    var spec = values.spec;
+    var basicSpec = (0, chart_spec_utils_1.isBasicChartSpec)(spec) ? spec : undefined;
+    var bubbleSpec = (0, chart_spec_utils_1.isBubbleChartSpec)(spec) ? spec : undefined;
+    var treemapSpec = (0, chart_spec_utils_1.isHierarchyChartSpec)(spec)
+        ? 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;
-    // 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,
+    // Which controls this chart type has — Excel's rule set, so an option is
+    // only offered where the chart (and the renderers) honour it (#1102).
+    var caps = (0, chart_editor_capabilities_1.getChartEditorCapabilities)(spec);
+    // The series of a basic or bubble chart. Guarded: a spec converted from
+    // another category used to arrive without `series` and crash the editor
+    // on `series.some` (#1101).
+    var seriesList = basicSpec
+        ? (_b = basicSpec.series) !== null && _b !== void 0 ? _b : []
+        : bubbleSpec
+            ? (_c = bubbleSpec.series) !== null && _c !== void 0 ? _c : []
+            : [];
+    var domainsList = basicSpec
+        ? (_d = basicSpec.domains) !== null && _d !== void 0 ? _d : []
+        : bubbleSpec
+            ? (_e = bubbleSpec.domains) !== null && _e !== void 0 ? _e : []
+            : [];
+    var isAggregateType = seriesList.some(function (serie) { return serie.aggregateType; });
+    var setSeries = function (index, patch) {
+        return setFieldValue("spec.series[".concat(index, "]"), tslib_1.__assign(tslib_1.__assign({}, seriesList[index]), patch));
     };
-    var showChartOptions = Object.values(chartOptionControls).some(Boolean);
-    // 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: [] }];
+    var hasSeriesFormat = caps.hasSecondaryAxis ||
+        caps.hasTrendlines ||
+        caps.hasErrorBars ||
+        caps.hasSeriesFill ||
+        caps.hasInvertIfNegative ||
+        caps.hasMarkers ||
+        caps.hasPointColors ||
+        caps.hasDataLabels;
+    var categoryLevels = (_f = basicSpec === null || basicSpec === void 0 ? void 0 : basicSpec.categoryLevels) !== null && _f !== void 0 ? _f : [];
+    var hasTypeOptions = (0, chart_type_options_1.chartTypeHasOptions)(spec, caps);
+    var renderChartDataSection = function (label, field, data, helperText, levels) {
+        // A levelled section (parent labels, category levels) starts empty and
+        // grows with "Add level"; a plain section always shows one input.
+        var sections = data.length > 0 ? data : levels ? [] : [{ 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) },
+                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), className: "flex items-center gap-1" },
                     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" }))); });
-            })));
+                        }, required: true, placeholder: "Select a range", className: "mb-0 flex-1" }),
+                    levels && data.length > 1 ? (react_1.default.createElement(ui_1.IconButton, { type: "button", "aria-label": "".concat(levels.removeLabel, " ").concat(i + 1), title: levels.removeLabel, onClick: function () {
+                            return setFieldValue("spec.".concat(field), data.filter(function (_, levelIndex) { return levelIndex !== i; }));
+                        } },
+                        react_1.default.createElement(icons_1.CrossCircledIcon, null))) : null)); });
+            }),
+            levels ? (react_1.default.createElement("div", null,
+                react_1.default.createElement(ui_1.Button, { variant: "link", type: "button", className: "cursor-pointer", onClick: function () {
+                        return setFieldValue("spec.".concat(field), tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(data), false), [{ sources: [] }], false));
+                    } }, levels.addLabel))) : null));
+    };
+    var renderSeriesCard = function (entry, i) {
+        var _a;
+        var sources = ((_a = entry.sources) === null || _a === void 0 ? void 0 : _a.length) > 0 ? entry.sources : [undefined];
+        return sources.map(function (source, idx) {
+            var _a, _b, _c;
+            return (react_1.default.createElement("div", { className: "border border-rnc-border border-solid p-2 relative", key: "".concat(values.chartId, "-series-").concat(seriesList.length, "-").concat(i, "-").concat(idx) },
+                react_1.default.createElement("div", { className: "flex gap-2 items-start flex-wrap" },
+                    react_1.default.createElement(series_name_field_1.SeriesNameField, { sheetId: sheetId, series: entry, getFormattedValue: getFormattedValue, onChange: function (patch) { return setSeries(i, patch); } }),
+                    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: (_a = entry.color) !== null && _a !== void 0 ? _a : "#4285F4", "aria-label": "Series ".concat(i + 1, " color"), onChange: function (e) { return setSeries(i, { color: e.target.value }); }, className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer" }),
+                            entry.color ? (react_1.default.createElement(ui_1.IconButton, { type: "button", "aria-label": "Clear series ".concat(i + 1, " color"), title: "Automatic color", onClick: function () { return setSeries(i, { color: undefined }); } },
+                                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: (_b = entry.aggregateType) !== null && _b !== void 0 ? _b : "", onChange: function (event) {
+                                var aggregateType = event.target.value;
+                                setSeries(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,
+                    caps.hasSeriesChartType ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2 w-28" },
+                        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: (_c = entry.seriesChartType) !== null && _c !== void 0 ? _c : "", "aria-label": "Series ".concat(i + 1, " type"), onChange: function (event) {
+                                return setSeries(i, {
+                                    seriesChartType: (event.target.value || undefined),
+                                });
+                            } },
+                            react_1.default.createElement("option", { value: "" }, "Default"),
+                            react_1.default.createElement("option", { value: "column" }, "Column"),
+                            react_1.default.createElement("option", { value: "bar" }, "Bar"),
+                            react_1.default.createElement("option", { value: "line" }, "Line"),
+                            react_1.default.createElement("option", { value: "area" }, "Area")))) : null),
+                hasSeriesFormat ? (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(series_format_fields_1.SeriesFormatFields, { sheetId: sheetId, series: entry, capabilities: caps, onChange: function (patch) { return setSeries(i, patch); } }))) : null,
+                react_1.default.createElement(ui_1.IconButton, { className: "absolute right-1 top-1", type: "button", "aria-label": "Remove series ".concat(i + 1), onClick: function () {
+                        return setFieldValue("spec.series", seriesList.filter(function (_, seriesIndex) { return seriesIndex !== i; }));
+                    } },
+                    react_1.default.createElement(icons_1.CrossCircledIcon, null))));
+        });
     };
+    var renderSeriesList = function () { return (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)"),
+        seriesList.map(renderSeriesCard),
+        react_1.default.createElement("div", { className: "py-1" },
+            react_1.default.createElement(ui_1.Button, { variant: "link", type: "button", className: "cursor-pointer", onClick: function () {
+                    var lastSeries = seriesList[seriesList.length - 1];
+                    setFieldValue("spec.series", tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(seriesList), false), [
+                        {
+                            sources: lastSeries
+                                ? lastSeries.sources
+                                : spec.dataRange
+                                    ? [spec.dataRange]
+                                    : [],
+                        },
+                    ], false));
+                } }, "Add series")))); };
     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" },
@@ -170,10 +250,10 @@ 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"),
-                    ((_b = values.spec) === null || _b === void 0 ? void 0 : _b.pivotTableId) != null ? (
+                    ((_g = values.spec) === null || _g === void 0 ? void 0 : _g.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) {
+                    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: (_j = (_h = values.spec) === null || _h === void 0 ? void 0 : _h.dataRange) !== null && _j !== void 0 ? _j : undefined, onChangeRange: function (range) {
                             setFieldValue("spec.dataRange", range);
                         }, 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" },
@@ -190,271 +270,53 @@ var ChartEditor = function (_a) {
                 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"),
-                        ((_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) {
+                        domainsList.map(function (domain, i) {
+                            var _a;
+                            return ((_a = domain.sources) !== null && _a !== void 0 ? _a : []).map(function (source, idx) {
+                                return (react_1.default.createElement(chart_range_input_1.ChartRangeInput, { key: "".concat(values.chartId, "-domains-").concat(domainsList.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,
+                    caps.hasCategoryLevels ? (react_1.default.createElement("details", { className: "pb-2" },
+                        react_1.default.createElement("summary", { className: "cursor-pointer list-none font-system text-xs text-rnc-muted-foreground select-none [&::-webkit-details-marker]:hidden" },
+                            "Category axis levels",
+                            categoryLevels.length ? " (".concat(categoryLevels.length, ")") : ""),
+                        renderChartDataSection("Category axis levels", "categoryLevels", categoryLevels, "One range per level, outermost first; the last level is the plotted categories.", { addLabel: "Add level", removeLabel: "Remove level" }))) : null)) : 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", (_f = bubbleSpec.bubbleLabels) !== null && _f !== void 0 ? _f : [], "Select the cells containing labels for each bubble.")
+                        ? renderChartDataSection("Bubble labels", "bubbleLabels", (_k = bubbleSpec.bubbleLabels) !== null && _k !== void 0 ? _k : [], "Select the cells containing labels for each bubble.")
                         : null,
-                    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) {
-                            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,
+                    renderChartDataSection("X values", "domains", domainsList, "Choose the numeric values for the horizontal axis."),
+                    bubbleSpec.chartType === "bubble"
+                        ? renderChartDataSection("Bubble sizes", "bubbleSizes", (_l = bubbleSpec.bubbleSizes) !== null && _l !== void 0 ? _l : [], "Choose the numeric values that size each bubble.")
+                        : null)) : null,
+                basicSpec || 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: isAggregateType, name: "showColumnStripes", onChange: function (e) {
+                                var nextSeries = seriesList.map(function (serie) { return (tslib_1.__assign(tslib_1.__assign({}, serie), { aggregateType: e.target.checked ? "SUM" : undefined })); });
+                                setFieldValue("spec.series", nextSeries);
+                            } }),
+                        "Aggregate"),
+                    renderSeriesList())) : 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", (_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,
+                    renderChartDataSection("Labels", "labels", (_m = treemapSpec.labels) !== null && _m !== void 0 ? _m : [], "Select the cells that contain node labels."),
+                    renderChartDataSection("Parent labels", "parentLabels", (_o = treemapSpec.parentLabels) !== null && _o !== void 0 ? _o : [], "One range per level above the labels, top level first.", { addLabel: "Add level", removeLabel: "Remove level" }),
+                    renderChartDataSection("Size data", "sizeData", (_p = treemapSpec.sizeData) !== null && _p !== void 0 ? _p : [], "Provide numeric values to determine each node's size."))) : null,
+                caps.hasEmptyCellOptions ? (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) {
+                        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: (_q = values.spec.emptyCells) !== null && _q !== void 0 ? _q : "gaps", onChange: function (event) {
                                 var emptyCells = event.target.value;
                                 setFieldValue("spec.emptyCells", emptyCells === "gaps" ? undefined : emptyCells);
                             } },
@@ -477,7 +339,10 @@ 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: (_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.Input, { value: (_r = values === null || values === void 0 ? void 0 : values.spec.title) !== null && _r !== void 0 ? _r : "", 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" }, "Subtitle"),
+                        react_1.default.createElement(ui_1.Input, { value: (_s = values.spec.subtitle) !== null && _s !== void 0 ? _s : "", type: "text", onChange: function (e) { return setFieldValue("spec.subtitle", e.target.value || undefined); }, className: "text-xs", placeholder: "Enter chart subtitle", "aria-label": "Chart subtitle" })),
                     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) {
@@ -506,7 +371,7 @@ 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" }, "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: (_o = values.spec.quickLayout) !== null && _o !== void 0 ? _o : "", "aria-label": "Quick layout", 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: (_t = values.spec.quickLayout) !== null && _t !== void 0 ? _t : "", "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));
@@ -518,33 +383,14 @@ var ChartEditor = function (_a) {
                         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: (_q = (_p = values.spec.titleTextFormat) === null || _p === void 0 ? void 0 : _p.fontFamily) !== null && _q !== void 0 ? _q : "", 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: (_s = (_r = values.spec.titleTextFormat) === null || _r === void 0 ? void 0 : _r.fontSize) !== null && _s !== void 0 ? _s : "", 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: (_u = (_t = values.spec.titleTextFormat) === null || _t === void 0 ? void 0 : _t.color) !== null && _u !== void 0 ? _u : "#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((_v = values.spec.titleTextFormat) === null || _v === void 0 ? void 0 : _v.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((_w = values.spec.titleTextFormat) === null || _w === void 0 ? void 0 : _w.italic), onChange: function (e) {
-                                        return setFieldValue("spec.titleTextFormat.italic", e.target.checked);
-                                    } }),
-                                "Italic")))),
+                    react_1.default.createElement(text_format_fields_1.TextFormatFields, { label: "Title font", value: values.spec.titleTextFormat, onChange: function (titleTextFormat) {
+                            return setFieldValue("spec.titleTextFormat", titleTextFormat);
+                        }, ariaLabels: { color: "Title color" } })),
                 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: (_x = values.spec.backgroundColor) !== null && _x !== void 0 ? _x : "#FFFFFF", onChange: function (e) {
+                            react_1.default.createElement("input", { type: "color", value: (_u = values.spec.backgroundColor) !== null && _u !== void 0 ? _u : "#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 () {
@@ -554,7 +400,7 @@ 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" }, "Border"),
                         react_1.default.createElement("div", { className: "flex items-center gap-1" },
-                            react_1.default.createElement("input", { type: "color", value: (_y = values.borderColor) !== null && _y !== void 0 ? _y : "#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" }),
+                            react_1.default.createElement("input", { type: "color", value: (_v = values.borderColor) !== null && _v !== void 0 ? _v : "#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" },
@@ -562,226 +408,46 @@ var ChartEditor = function (_a) {
                                 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: (_0 = (_z = values === null || values === void 0 ? void 0 : values.spec.legend) === null || _z === void 0 ? void 0 : _z.position) !== null && _0 !== void 0 ? _0 : "", 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: (_1 = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _1 !== void 0 ? _1 : "", 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: (_3 = (_2 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _2 === void 0 ? void 0 : _2.min) !== null && _3 !== void 0 ? _3 : "", 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: (_5 = (_4 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _4 === void 0 ? void 0 : _4.max) !== null && _5 !== void 0 ? _5 : "", 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((_6 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _6 === void 0 ? void 0 : _6.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((_7 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _7 === void 0 ? void 0 : _7.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: ((_8 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _8 === void 0 ? void 0 : _8.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: (_10 = (_9 = values === null || values === void 0 ? void 0 : values.spec.valueAxisOptions) === null || _9 === void 0 ? void 0 : _9.numberFormatPattern) !== null && _10 !== void 0 ? _10 : "", 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: (_12 = (_11 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _11 === void 0 ? void 0 : _11.min) !== null && _12 !== void 0 ? _12 : "", 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: (_14 = (_13 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _13 === void 0 ? void 0 : _13.max) !== null && _14 !== void 0 ? _14 : "", 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((_15 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _15 === void 0 ? void 0 : _15.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: ((_16 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _16 === void 0 ? void 0 : _16.showMajorGridlines) !== false, onChange: function (e) {
-                                            return setFieldValue("spec.secondaryValueAxisOptions.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: (_18 = (_17 = values === null || values === void 0 ? void 0 : values.spec.secondaryValueAxisOptions) === null || _17 === void 0 ? void 0 : _17.numberFormatPattern) !== null && _18 !== void 0 ? _18 : "", 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: (_19 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _19 !== void 0 ? _19 : "", 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: ((_20 = values === null || values === void 0 ? void 0 : values.spec.categoryAxisOptions) === null || _20 === void 0 ? void 0 : _20.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((_21 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _21 === void 0 ? void 0 : _21.show), onChange: function (e) {
-                                        return setFieldValue("spec.dataLabels.show", e.target.checked);
-                                    } }),
-                                "Show data labels"),
-                            ((_22 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _22 === void 0 ? void 0 : _22.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: ((_23 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _23 === void 0 ? void 0 : _23.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((_24 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _24 === void 0 ? void 0 : _24.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((_25 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _25 === void 0 ? void 0 : _25.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((_26 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _26 === void 0 ? void 0 : _26.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: (_28 = (_27 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _27 === void 0 ? void 0 : _27.position) !== null && _28 !== void 0 ? _28 : "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("option", { value: "above" }, "Above"),
-                                    react_1.default.createElement("option", { value: "below" }, "Below"),
-                                    react_1.default.createElement("option", { value: "left" }, "Left"),
-                                    react_1.default.createElement("option", { value: "right" }, "Right")),
-                                react_1.default.createElement("label", { className: "font-system text-xs" }, "Number format pattern"),
-                                react_1.default.createElement(ui_1.Input, { value: (_30 = (_29 = values === null || values === void 0 ? void 0 : values.spec.dataLabels) === null || _29 === void 0 ? void 0 : _29.numberFormatPattern) !== null && _30 !== void 0 ? _30 : "", type: "text", onChange: function (e) {
-                                        return setFieldValue("spec.dataLabels.numberFormatPattern", e.target.value || undefined);
-                                    }, className: "text-xs w-32", placeholder: "#,##0.00" }))) : null)),
-                    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: (_31 = basicSpec.binCount) !== null && _31 !== void 0 ? _31 : "", 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,
-                        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: (_32 = basicSpec.radarStyle) !== null && _32 !== void 0 ? _32 : "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,
-                        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: (_33 = basicSpec.stockVariant) !== null && _33 !== void 0 ? _33 : "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,
-                        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: (_34 = basicSpec.doughnutHoleSize) !== null && _34 !== void 0 ? _34 : "", onChange: function (e) {
-                                    return setFieldValue("spec.doughnutHoleSize", e.target.value === ""
-                                        ? undefined
-                                        : Number(e.target.value));
-                                }, className: "text-xs w-32", placeholder: "0.5" }))) : null,
-                        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: (_35 = basicSpec.explosion) !== null && _35 !== void 0 ? _35 : "", 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: (_36 = basicSpec.gapWidth) !== null && _36 !== void 0 ? _36 : "", onChange: function (e) {
-                                    return setFieldValue("spec.gapWidth", e.target.value === ""
-                                        ? undefined
-                                        : Number(e.target.value));
-                                }, className: "text-xs w-32", placeholder: "150" }))) : null,
-                        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: (_37 = basicSpec.overlap) !== null && _37 !== void 0 ? _37 : "", 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" },
+                caps.hasLegend ? (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" }, "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: (_38 = bubbleSpec.scatterStyle) !== null && _38 !== void 0 ? _38 : "lineMarker", onChange: function (e) {
-                                return setFieldValue("spec.scatterStyle", e.target.value);
+                        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", "aria-label": "Legend position", value: (_x = (_w = values === null || values === void 0 ? void 0 : values.spec.legend) === null || _w === void 0 ? void 0 : _w.position) !== null && _x !== void 0 ? _x : "", onChange: function (e) {
+                                return setFieldValue("spec.legend.position", e.target.value || undefined);
                             } },
-                            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("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: "topRight" }, "Top right"),
+                            react_1.default.createElement("option", { value: "none" }, "None"))),
+                    react_1.default.createElement(text_format_fields_1.TextFormatFields, { label: "Legend font", collapsible: true, value: (_y = values.spec.legend) === null || _y === void 0 ? void 0 : _y.textFormat, onChange: function (textFormat) {
+                            return setFieldValue("spec.legend.textFormat", textFormat);
+                        } }))) : null,
+                caps.hasAxisTitles || caps.hasValueAxis ? (react_1.default.createElement(Section, { title: "Vertical axis" },
+                    caps.hasAxisTitles ? (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: (_39 = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _39 !== void 0 ? _39 : "", type: "text", onChange: function (e) {
+                        react_1.default.createElement(ui_1.Input, { value: (_z = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _z !== void 0 ? _z : "", 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" },
+                            }, className: "text-xs", placeholder: "Vertical axis title" }))) : null,
+                    caps.hasValueAxis ? (react_1.default.createElement(axis_options_fields_1.AxisOptionsFields, { label: "Value axis", kind: "value", value: values.spec.valueAxisOptions, onChange: function (next) { return setFieldValue("spec.valueAxisOptions", next); } })) : null,
+                    caps.hasSecondaryAxis &&
+                        seriesList.some(function (s) { return s.useSecondaryAxis; }) ? (react_1.default.createElement(axis_options_fields_1.AxisOptionsFields, { label: "Secondary value axis", kind: "value", value: values.spec.secondaryValueAxisOptions, onChange: function (next) {
+                            return setFieldValue("spec.secondaryValueAxisOptions", next);
+                        } })) : null)) : null,
+                caps.hasAxisTitles || caps.hasCategoryAxis ? (react_1.default.createElement(Section, { title: "Horizontal axis" },
+                    caps.hasAxisTitles ? (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: (_40 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _40 !== void 0 ? _40 : "", type: "text", onChange: function (e) {
+                        react_1.default.createElement(ui_1.Input, { value: (_0 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _0 !== void 0 ? _0 : "", 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,
+                    caps.hasCategoryAxis ? (react_1.default.createElement(axis_options_fields_1.AxisOptionsFields, { label: "Category axis", kind: caps.category === "bubble" ? "value" : "category", value: values.spec.categoryAxisOptions, gridlinesDefault: false, onChange: function (next) {
+                            return setFieldValue("spec.categoryAxisOptions", next);
+                        } })) : null)) : null,
+                caps.hasDataLabels ? (react_1.default.createElement(Section, { title: "Data labels" },
+                    react_1.default.createElement(data_labels_fields_1.DataLabelsFields, { value: values.spec.dataLabels, capabilities: caps, onChange: function (dataLabels) { return setFieldValue("spec.dataLabels", dataLabels); } }))) : null,
+                hasTypeOptions ? (react_1.default.createElement(Section, { title: "Chart options" },
+                    react_1.default.createElement(chart_type_options_1.ChartTypeOptionsFields, { spec: values.spec, capabilities: caps, setFieldValue: setFieldValue }))) : 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;