@rowsncolumns/charts 28.1.14 → 28.1.16

package/dist/cjs/components/editors/fields/axis-options-fields.d.ts

@@ -0,0 +1,16 @@
+import type { ChartAxisOptions } from "@rowsncolumns/spreadsheet";
+import React from "react";
+/**
+ * One axis' options (`ChartAxisOptions`): a value axis has a scale
+ * (min / max / logarithmic), both have direction, gridlines, visibility
+ * and tick-label font; a value axis also has its number format.
+ */
+export declare const AxisOptionsFields: ({ label, kind, value, onChange, gridlinesDefault, }: {
+    label: string;
+    kind: "value" | "category";
+    value: ChartAxisOptions | null | undefined;
+    onChange(next: ChartAxisOptions): void;
+    /** What an omitted `showMajorGridlines` means for this axis. */
+    gridlinesDefault?: boolean;
+}) => React.JSX.Element;
+//# sourceMappingURL=axis-options-fields.d.ts.map

package/dist/cjs/components/editors/fields/axis-options-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"axis-options-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/axis-options-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,qDAM/B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACvC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,sBAoEA,CAAC"}

package/dist/cjs/components/editors/fields/axis-options-fields.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AxisOptionsFields = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var primitives_1 = require("./primitives");
+var text_format_fields_1 = require("./text-format-fields");
+/**
+ * One axis' options (`ChartAxisOptions`): a value axis has a scale
+ * (min / max / logarithmic), both have direction, gridlines, visibility
+ * and tick-label font; a value axis also has its number format.
+ */
+var AxisOptionsFields = function (_a) {
+    var _b;
+    var label = _a.label, kind = _a.kind, value = _a.value, onChange = _a.onChange, _c = _a.gridlinesDefault, gridlinesDefault = _c === void 0 ? true : _c;
+    var set = function (patch) {
+        return onChange(tslib_1.__assign(tslib_1.__assign({}, (value !== null && value !== void 0 ? value : {})), patch));
+    };
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-2 pb-2" },
+        react_1.default.createElement("label", { className: "font-system text-sm" }, label),
+        kind === "value" ? (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.NumberField, { label: "Min", ariaLabel: "".concat(label, " min"), value: value === null || value === void 0 ? void 0 : value.min, onChange: function (min) { return set({ min: min }); }, placeholder: "Auto" }),
+            react_1.default.createElement(primitives_1.NumberField, { label: "Max", ariaLabel: "".concat(label, " max"), value: value === null || value === void 0 ? void 0 : value.max, onChange: function (max) { return set({ max: max }); }, placeholder: "Auto" }))) : null,
+        kind === "value" ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Logarithmic scale", ariaLabel: "".concat(label, " logarithmic scale"), checked: Boolean(value === null || value === void 0 ? void 0 : value.logarithmic), onChange: function (on) { return set({ logarithmic: on || undefined }); } })) : null,
+        react_1.default.createElement(primitives_1.CheckboxField, { label: "Reverse direction", ariaLabel: "".concat(label, " reverse direction"), checked: Boolean(value === null || value === void 0 ? void 0 : value.reverse), onChange: function (on) { return set({ reverse: on || undefined }); } }),
+        react_1.default.createElement(primitives_1.CheckboxField, { label: "Gridlines", ariaLabel: "".concat(label, " gridlines"), checked: (_b = value === null || value === void 0 ? void 0 : value.showMajorGridlines) !== null && _b !== void 0 ? _b : gridlinesDefault, onChange: function (showMajorGridlines) { return set({ showMajorGridlines: showMajorGridlines }); } }),
+        react_1.default.createElement(primitives_1.CheckboxField, { label: "Show axis", ariaLabel: "".concat(label, " visible"), checked: (value === null || value === void 0 ? void 0 : value.visible) !== false, onChange: function (on) { return set({ visible: on ? undefined : false }); } }),
+        kind === "value" ? (react_1.default.createElement(primitives_1.TextField, { label: "Number format", ariaLabel: "".concat(label, " number format"), value: value === null || value === void 0 ? void 0 : value.numberFormatPattern, onChange: function (numberFormatPattern) { return set({ numberFormatPattern: numberFormatPattern }); }, placeholder: "Linked to source" })) : null,
+        react_1.default.createElement(text_format_fields_1.TextFormatFields, { label: "".concat(label, " font"), collapsible: true, value: value === null || value === void 0 ? void 0 : value.textFormat, onChange: function (textFormat) { return set({ textFormat: textFormat }); } })));
+};
+exports.AxisOptionsFields = AxisOptionsFields;

package/dist/cjs/components/editors/fields/chart-type-options.d.ts

@@ -0,0 +1,25 @@
+import type { EmbeddedChart } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { ChartEditorCapabilities } from "../chart-editor-capabilities";
+type ChartSpec = EmbeddedChart["spec"];
+/** `totalIndices` (0-based) ⇄ the "1, 4, 7" the user types (1-based). */
+export declare const parseTotalPoints: (text: string) => number[] | undefined;
+export declare const formatTotalPoints: (indices: number[] | null | undefined) => string;
+/** Whether `ChartTypeOptionsFields` renders anything for this chart. */
+export declare const chartTypeHasOptions: (spec: Pick<ChartSpec, "chartType"> & {
+    sourceChartType?: unknown;
+}, capabilities: Pick<ChartEditorCapabilities, "category" | "hasGapWidth" | "hasOverlap">) => boolean;
+/**
+ * The options a chart type has beyond its series and axes — Excel's
+ * Format Data Series → Series Options for histogram bins, box & whisker,
+ * waterfall totals, pie-of-pie splits, bubble sizing, treemap labels,
+ * radar / stock variants, doughnut hole, explosion, gap width and overlap.
+ * Returns `null` when the chart type has none.
+ */
+export declare const ChartTypeOptionsFields: ({ spec, capabilities, setFieldValue, }: {
+    spec: ChartSpec;
+    capabilities: ChartEditorCapabilities;
+    setFieldValue(field: string, value: unknown): void;
+}) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=chart-type-options.d.ts.map

package/dist/cjs/components/editors/fields/chart-type-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-type-options.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/chart-type-options.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAG5E,KAAK,SAAS,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;AAEvC,yEAAyE;AACzE,eAAO,MAAM,gBAAgB,GAAI,MAAM,MAAM,KAAG,MAAM,EAAE,GAAG,SAQ1D,CAAC;AACF,eAAO,MAAM,iBAAiB,GAAI,SAAS,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,KAAG,MAC3B,CAAC;AAE/C,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,GAC9B,MAAM,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,GAAG;IAAE,eAAe,CAAC,EAAE,OAAO,CAAA;CAAE,EAClE,cAAc,IAAI,CAAC,uBAAuB,EAAE,UAAU,GAAG,aAAa,GAAG,YAAY,CAAC,KACrF,OAkBF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,sBAAsB,GAAI,wCAIpC;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,YAAY,EAAE,uBAAuB,CAAC;IACtC,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CACpD,6BAuWA,CAAC"}

package/dist/cjs/components/editors/fields/chart-type-options.js

@@ -0,0 +1,170 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartTypeOptionsFields = exports.chartTypeHasOptions = exports.formatTotalPoints = exports.parseTotalPoints = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var primitives_1 = require("./primitives");
+/** `totalIndices` (0-based) ⇄ the "1, 4, 7" the user types (1-based). */
+var parseTotalPoints = function (text) {
+    var points = text
+        .split(/[,\s;]+/)
+        .map(function (part) { return Number.parseInt(part, 10); })
+        .filter(function (n) { return Number.isFinite(n) && n >= 1; })
+        .map(function (n) { return n - 1; });
+    var unique = tslib_1.__spreadArray([], tslib_1.__read(new Set(points)), false).sort(function (a, b) { return a - b; });
+    return unique.length ? unique : undefined;
+};
+exports.parseTotalPoints = parseTotalPoints;
+var formatTotalPoints = function (indices) {
+    return (indices !== null && indices !== void 0 ? indices : []).map(function (i) { return i + 1; }).join(", ");
+};
+exports.formatTotalPoints = formatTotalPoints;
+/** Whether `ChartTypeOptionsFields` renders anything for this chart. */
+var chartTypeHasOptions = function (spec, capabilities) {
+    var _a;
+    var type = spec.chartType;
+    var token = String((_a = spec.sourceChartType) !== null && _a !== void 0 ? _a : "").toUpperCase();
+    return (type === "histogram" ||
+        type === "boxplot" ||
+        type === "waterfall" ||
+        (type === "pie" && token === "OF_PIE") ||
+        type === "bubble" ||
+        type === "scatter" ||
+        capabilities.category === "hierarchy" ||
+        type === "radar" ||
+        type === "stock" ||
+        type === "doughnut" ||
+        type === "pie" ||
+        capabilities.hasGapWidth ||
+        capabilities.hasOverlap);
+};
+exports.chartTypeHasOptions = chartTypeHasOptions;
+/**
+ * The options a chart type has beyond its series and axes — Excel's
+ * Format Data Series → Series Options for histogram bins, box & whisker,
+ * waterfall totals, pie-of-pie splits, bubble sizing, treemap labels,
+ * radar / stock variants, doughnut hole, explosion, gap width and overlap.
+ * Returns `null` when the chart type has none.
+ */
+var ChartTypeOptionsFields = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var spec = _a.spec, capabilities = _a.capabilities, setFieldValue = _a.setFieldValue;
+    var s = spec;
+    var type = spec.chartType;
+    var isPareto = type === "histogram" && String((_b = s.sourceChartType) !== null && _b !== void 0 ? _b : "").toUpperCase() === "PARETO";
+    var isOfPie = type === "pie" && String((_c = s.sourceChartType) !== null && _c !== void 0 ? _c : "").toUpperCase() === "OF_PIE";
+    var controls = [];
+    if (type === "histogram") {
+        controls.push(react_1.default.createElement(ui_1.Stack, { key: "bins", direction: "vertical", className: "gap-2 pb-2" },
+            react_1.default.createElement("label", { className: "font-system text-sm" }, "Bins"),
+            react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                react_1.default.createElement(primitives_1.NumberField, { label: "Bins (leave blank for auto)", ariaLabel: "Bins (leave blank for auto)", value: s.binCount, min: 1, onChange: function (binCount) { return setFieldValue("spec.binCount", binCount); }, placeholder: "Auto", className: "text-xs w-28" }),
+                react_1.default.createElement(primitives_1.NumberField, { label: "Bin width", ariaLabel: "Bin width", value: s.binSize, min: 0, onChange: function (binSize) { return setFieldValue("spec.binSize", binSize); }, placeholder: "Auto" }),
+                react_1.default.createElement(primitives_1.SelectField, { label: "Interval closed on", ariaLabel: "Interval closed on", value: (_d = s.intervalClosed) !== null && _d !== void 0 ? _d : "r", options: [
+                        { value: "r", label: "Right (a, b]" },
+                        { value: "l", label: "Left [a, b)" },
+                    ], onChange: function (intervalClosed) {
+                        return setFieldValue("spec.intervalClosed", intervalClosed === "r" ? undefined : intervalClosed);
+                    } })),
+            react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                react_1.default.createElement(primitives_1.NumberField, { label: "Overflow bin (values above)", ariaLabel: "Overflow bin", value: s.overflow, onChange: function (overflow) { return setFieldValue("spec.overflow", overflow); }, placeholder: "None", className: "text-xs w-28" }),
+                react_1.default.createElement(primitives_1.NumberField, { label: "Underflow bin (values below)", ariaLabel: "Underflow bin", value: s.underflow, onChange: function (underflow) { return setFieldValue("spec.underflow", underflow); }, placeholder: "None", className: "text-xs w-28" })),
+            isPareto ? (react_1.default.createElement(primitives_1.ColorField, { label: "Pareto line color", ariaLabel: "Pareto line color", value: s.paretoLineColor, onChange: function (color) { return setFieldValue("spec.paretoLineColor", color); }, onClear: function () { return setFieldValue("spec.paretoLineColor", undefined); } })) : null));
+    }
+    if (type === "boxplot") {
+        controls.push(react_1.default.createElement(ui_1.Stack, { key: "box", direction: "vertical", className: "gap-1 pb-2" },
+            react_1.default.createElement("label", { className: "font-system text-sm" }, "Box & whisker"),
+            react_1.default.createElement(primitives_1.SelectField, { label: "Quartile calculation", ariaLabel: "Quartile calculation", value: (_e = s.quartileMethod) !== null && _e !== void 0 ? _e : "exclusive", options: [
+                    { value: "exclusive", label: "Exclusive median" },
+                    { value: "inclusive", label: "Inclusive median" },
+                ], onChange: function (quartileMethod) { return setFieldValue("spec.quartileMethod", quartileMethod); }, className: "w-40" }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Show outlier points", checked: s.showOutliers !== false, onChange: function (on) { return setFieldValue("spec.showOutliers", on ? undefined : false); } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Show mean markers", checked: Boolean(s.showMeanMarker), onChange: function (on) { return setFieldValue("spec.showMeanMarker", on || undefined); } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Show inner points", checked: Boolean(s.showInnerPoints), onChange: function (on) { return setFieldValue("spec.showInnerPoints", on || undefined); } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Show mean line", checked: Boolean(s.showMeanLine), onChange: function (on) { return setFieldValue("spec.showMeanLine", on || undefined); } })));
+    }
+    if (type === "waterfall") {
+        controls.push(react_1.default.createElement(ui_1.Stack, { key: "waterfall", direction: "vertical", className: "gap-1 pb-2" },
+            react_1.default.createElement(primitives_1.TextField, { label: "Total points (1-based, comma-separated)", ariaLabel: "Total points", value: (0, exports.formatTotalPoints)(s.totalIndices), onChange: function (text) { return setFieldValue("spec.totalIndices", (0, exports.parseTotalPoints)(text !== null && text !== void 0 ? text : "")); }, placeholder: "e.g. 4, 8", className: "text-xs w-40" }),
+            react_1.default.createElement("p", { className: "m-0 text-xs text-rnc-text-weak" }, "A total bar starts from zero instead of the running sum (Excel's \"Set as total\"). Decreases take each series' negative fill.")));
+    }
+    if (isOfPie) {
+        controls.push(react_1.default.createElement(ui_1.Stack, { key: "ofpie", direction: "vertical", className: "gap-2 pb-2" },
+            react_1.default.createElement("label", { className: "font-system text-sm" }, "Second plot"),
+            react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                react_1.default.createElement(primitives_1.SelectField, { label: "Split series by", ariaLabel: "Split series by", value: (_f = s.splitType) !== null && _f !== void 0 ? _f : "position", options: [
+                        { value: "position", label: "Position" },
+                        { value: "value", label: "Value" },
+                        { value: "percent", label: "Percentage value" },
+                    ], onChange: function (splitType) { return setFieldValue("spec.splitType", splitType); } }),
+                react_1.default.createElement(primitives_1.NumberField, { label: ((_g = s.splitType) !== null && _g !== void 0 ? _g : "position") === "position"
+                        ? "Values in second plot"
+                        : (s.splitType === "value" ? "Values less than" : "Values less than %"), ariaLabel: "Split position", value: s.splitPos, min: 0, onChange: function (splitPos) { return setFieldValue("spec.splitPos", splitPos); }, placeholder: "3" }),
+                react_1.default.createElement(primitives_1.NumberField, { label: "Second plot size (%)", ariaLabel: "Second plot size", value: s.secondPieSize, min: 5, max: 200, onChange: function (secondPieSize) { return setFieldValue("spec.secondPieSize", secondPieSize); }, placeholder: "75" }))));
+    }
+    if (type === "bubble") {
+        controls.push(react_1.default.createElement(ui_1.Stack, { key: "bubble", direction: "vertical", className: "gap-2 pb-2" },
+            react_1.default.createElement("label", { className: "font-system text-sm" }, "Bubble size"),
+            react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                react_1.default.createElement(primitives_1.NumberField, { label: "Scale bubble size to (%)", ariaLabel: "Bubble scale", value: s.bubbleScale, min: 0, max: 300, onChange: function (bubbleScale) { return setFieldValue("spec.bubbleScale", bubbleScale); }, placeholder: "100", className: "text-xs w-28" }),
+                react_1.default.createElement(primitives_1.SelectField, { label: "Size represents", ariaLabel: "Size represents", value: (_h = s.sizeRepresents) !== null && _h !== void 0 ? _h : "area", options: [
+                        { value: "area", label: "Area of bubbles" },
+                        { value: "width", label: "Width of bubbles" },
+                    ], onChange: function (sizeRepresents) {
+                        return setFieldValue("spec.sizeRepresents", sizeRepresents === "area" ? undefined : sizeRepresents);
+                    } }))));
+    }
+    if (type === "scatter") {
+        controls.push(react_1.default.createElement(primitives_1.SelectField, { key: "scatter", label: "Scatter style", ariaLabel: "Scatter style", value: (_j = s.scatterStyle) !== null && _j !== void 0 ? _j : "lineMarker", options: [
+                { value: "lineMarker", label: "Straight lines with markers" },
+                { value: "line", label: "Straight lines" },
+                { value: "marker", label: "Markers only" },
+                { value: "smoothMarker", label: "Smooth lines with markers" },
+                { value: "smooth", label: "Smooth lines" },
+                { value: "none", label: "No lines or markers" },
+            ], onChange: function (scatterStyle) { return setFieldValue("spec.scatterStyle", scatterStyle); }, className: "w-56" }));
+    }
+    if (capabilities.category === "hierarchy") {
+        controls.push(react_1.default.createElement(ui_1.Stack, { key: "hierarchy", direction: "vertical", className: "gap-1 pb-2" },
+            type === "treemap" ? (react_1.default.createElement(primitives_1.SelectField, { label: "Category labels", ariaLabel: "Category label layout", value: (_k = s.parentLabelLayout) !== null && _k !== void 0 ? _k : "banner", options: [
+                    { value: "banner", label: "Banner" },
+                    { value: "overlapping", label: "Overlapping" },
+                    { value: "none", label: "None" },
+                ], onChange: function (parentLabelLayout) {
+                    return setFieldValue("spec.parentLabelLayout", parentLabelLayout === "banner" ? undefined : parentLabelLayout);
+                }, className: "w-40" })) : null,
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Drill down on click", checked: Boolean(s.drillDown), onChange: function (on) { return setFieldValue("spec.drillDown", on || undefined); } })));
+    }
+    if (type === "radar") {
+        controls.push(react_1.default.createElement(primitives_1.SelectField, { key: "radar", label: "Radar style", ariaLabel: "Radar style", value: (_l = s.radarStyle) !== null && _l !== void 0 ? _l : "standard", options: [
+                { value: "standard", label: "Standard" },
+                { value: "marker", label: "With markers" },
+                { value: "filled", label: "Filled" },
+            ], onChange: function (radarStyle) { return setFieldValue("spec.radarStyle", radarStyle); }, className: "w-40" }));
+    }
+    if (type === "stock") {
+        controls.push(react_1.default.createElement(primitives_1.SelectField, { key: "stock", label: "Stock variant", ariaLabel: "Stock variant", value: (_m = s.stockVariant) !== null && _m !== void 0 ? _m : "HLC", options: [
+                { value: "HLC", label: "High-Low-Close" },
+                { value: "OHLC", label: "Open-High-Low-Close" },
+                { value: "VHLC", label: "Volume-High-Low-Close" },
+                { value: "VOHLC", label: "Volume-Open-High-Low-Close" },
+            ], onChange: function (stockVariant) { return setFieldValue("spec.stockVariant", stockVariant); }, className: "w-56" }));
+    }
+    if (type === "doughnut") {
+        controls.push(react_1.default.createElement(primitives_1.NumberField, { key: "hole", label: "Doughnut hole size (0-0.9)", ariaLabel: "Doughnut hole size (0-0.9)", value: s.doughnutHoleSize, min: 0, max: 0.9, step: 0.05, onChange: function (doughnutHoleSize) { return setFieldValue("spec.doughnutHoleSize", doughnutHoleSize); }, placeholder: "0.5", className: "text-xs w-32" }));
+    }
+    if (type === "pie" || type === "doughnut") {
+        controls.push(react_1.default.createElement(primitives_1.NumberField, { key: "explosion", label: "Explosion (% of radius, 0-400)", ariaLabel: "Explosion", value: s.explosion, min: 0, max: 400, step: 5, onChange: function (explosion) { return setFieldValue("spec.explosion", explosion); }, placeholder: "0", className: "text-xs w-32" }));
+    }
+    if (capabilities.hasGapWidth) {
+        controls.push(react_1.default.createElement(primitives_1.NumberField, { key: "gap", label: "Gap width (0-500)", ariaLabel: "Gap width (0-500)", value: s.gapWidth, min: 0, max: 500, onChange: function (gapWidth) { return setFieldValue("spec.gapWidth", gapWidth); }, placeholder: type === "histogram" ? "0" : "150", className: "text-xs w-32" }));
+    }
+    if (capabilities.hasOverlap) {
+        controls.push(react_1.default.createElement(primitives_1.NumberField, { key: "overlap", label: "Series overlap (-100 to 100)", ariaLabel: "Series overlap (-100 to 100)", value: s.overlap, min: -100, max: 100, onChange: function (overlap) { return setFieldValue("spec.overlap", overlap); }, placeholder: "0", className: "text-xs w-32" }));
+    }
+    if (!controls.length)
+        return null;
+    return react_1.default.createElement(react_1.default.Fragment, null, controls);
+};
+exports.ChartTypeOptionsFields = ChartTypeOptionsFields;

package/dist/cjs/components/editors/fields/data-labels-fields.d.ts

@@ -0,0 +1,15 @@
+import type { ChartDataLabelsOptions } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { ChartEditorCapabilities } from "../chart-editor-capabilities";
+/**
+ * What a data label shows and where (`ChartDataLabelsOptions`) — the chart's
+ * labels, or one series' own when `perSeries` (Excel's Format Data Labels on
+ * one series: inherit the chart's, show its own, or hide them).
+ */
+export declare const DataLabelsFields: ({ value, onChange, capabilities, perSeries, }: {
+    value: ChartDataLabelsOptions | null | undefined;
+    onChange(next: ChartDataLabelsOptions | undefined): void;
+    capabilities: Pick<ChartEditorCapabilities, "hasPercentLabels" | "hasBubbleSizeLabels">;
+    perSeries?: boolean;
+}) => React.JSX.Element;
+//# sourceMappingURL=data-labels-fields.d.ts.map

package/dist/cjs/components/editors/fields/data-labels-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-labels-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/data-labels-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAoB5E;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,+CAK9B;IACD,KAAK,EAAE,sBAAsB,GAAG,IAAI,GAAG,SAAS,CAAC;IACjD,QAAQ,CAAC,IAAI,EAAE,sBAAsB,GAAG,SAAS,GAAG,IAAI,CAAC;IACzD,YAAY,EAAE,IAAI,CAChB,uBAAuB,EACvB,kBAAkB,GAAG,qBAAqB,CAC3C,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,sBA2FA,CAAC"}

package/dist/cjs/components/editors/fields/data-labels-fields.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataLabelsFields = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var primitives_1 = require("./primitives");
+var text_format_fields_1 = require("./text-format-fields");
+var POSITIONS = [
+    { value: "center", label: "Center" },
+    { value: "inside", label: "Inside" },
+    { value: "outside", label: "Outside" },
+    { value: "insideEnd", label: "Inside end" },
+    { value: "outsideEnd", label: "Outside end" },
+    { value: "bestFit", label: "Best fit" },
+    { value: "above", label: "Above" },
+    { value: "below", label: "Below" },
+    { value: "left", label: "Left" },
+    { value: "right", label: "Right" },
+];
+/**
+ * What a data label shows and where (`ChartDataLabelsOptions`) — the chart's
+ * labels, or one series' own when `perSeries` (Excel's Format Data Labels on
+ * one series: inherit the chart's, show its own, or hide them).
+ */
+var DataLabelsFields = function (_a) {
+    var _b;
+    var value = _a.value, onChange = _a.onChange, capabilities = _a.capabilities, _c = _a.perSeries, perSeries = _c === void 0 ? false : _c;
+    var set = function (patch) {
+        return onChange(tslib_1.__assign(tslib_1.__assign({}, (value !== null && value !== void 0 ? value : {})), patch));
+    };
+    var mode = !value
+        ? "inherit"
+        : value.show
+            ? "show"
+            : "hide";
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+        perSeries ? (react_1.default.createElement(primitives_1.SelectField, { label: "Data labels", value: mode, options: [
+                { value: "inherit", label: "Same as chart" },
+                { value: "show", label: "Show" },
+                { value: "hide", label: "Hide" },
+            ], onChange: function (next) {
+                return onChange(next === "inherit"
+                    ? undefined
+                    : next === "show"
+                        ? tslib_1.__assign(tslib_1.__assign({}, (value !== null && value !== void 0 ? value : {})), { show: true }) : { show: false });
+            }, className: "w-32" })) : (react_1.default.createElement(primitives_1.CheckboxField, { small: false, label: "Show data labels", checked: Boolean(value === null || value === void 0 ? void 0 : value.show), onChange: function (show) { return set({ show: show }); } })),
+        (value === null || value === void 0 ? void 0 : value.show) ? (react_1.default.createElement("div", { className: "pl-4 flex flex-col gap-1" },
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Value", checked: value.showValue !== false, onChange: function (showValue) { return set({ showValue: showValue }); } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Category name", checked: Boolean(value.showCategoryName), onChange: function (showCategoryName) { return set({ showCategoryName: showCategoryName }); } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Series name", checked: Boolean(value.showSeriesName), onChange: function (showSeriesName) { return set({ showSeriesName: showSeriesName }); } }),
+            capabilities.hasPercentLabels ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Percentage", checked: Boolean(value.showPercent), onChange: function (showPercent) { return set({ showPercent: showPercent }); } })) : null,
+            capabilities.hasBubbleSizeLabels ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Bubble size", checked: Boolean(value.showBubbleSize), onChange: function (showBubbleSize) { return set({ showBubbleSize: showBubbleSize }); } })) : null,
+            react_1.default.createElement(primitives_1.SelectField, { label: "Label position", value: (_b = value.position) !== null && _b !== void 0 ? _b : "outside", options: POSITIONS, onChange: function (position) { return set({ position: position }); }, className: "w-32" }),
+            react_1.default.createElement(primitives_1.TextField, { label: "Number format pattern", value: value.numberFormatPattern, onChange: function (numberFormatPattern) { return set({ numberFormatPattern: numberFormatPattern }); }, placeholder: "#,##0.00" }),
+            react_1.default.createElement(text_format_fields_1.TextFormatFields, { label: "Label font", value: value.textFormat, onChange: function (textFormat) { return set({ textFormat: textFormat }); } }))) : null));
+};
+exports.DataLabelsFields = DataLabelsFields;

package/dist/cjs/components/editors/fields/primitives.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+/**
+ * The editor's small native controls, styled like the rest of the dialog.
+ * They stay native (`<select>`, `<input type=checkbox|color>`) so the
+ * editor's test mocks of `@rowsncolumns/ui` keep covering it.
+ */
+export declare const SELECT_CLASS = "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent";
+export declare const COLOR_CLASS = "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer";
+export declare const CheckboxField: ({ label, checked, onChange, small, ariaLabel, }: {
+    label: React.ReactNode;
+    checked: boolean;
+    onChange(checked: boolean): void;
+    small?: boolean;
+    ariaLabel?: string;
+}) => React.JSX.Element;
+export declare const SelectField: <T extends string>({ label, value, options, onChange, ariaLabel, className, }: {
+    label?: React.ReactNode;
+    value: T;
+    options: ReadonlyArray<{
+        value: T;
+        label: string;
+    }>;
+    onChange(value: T): void;
+    ariaLabel?: string;
+    className?: string;
+}) => React.JSX.Element;
+export declare const NumberField: ({ label, value, onChange, placeholder, min, max, step, ariaLabel, className, }: {
+    label?: React.ReactNode;
+    value: number | null | undefined;
+    onChange(value: number | undefined): void;
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    ariaLabel?: string;
+    className?: string;
+}) => React.JSX.Element;
+export declare const TextField: ({ label, value, onChange, placeholder, ariaLabel, className, }: {
+    label?: React.ReactNode;
+    value: string | null | undefined;
+    onChange(value: string | undefined): void;
+    placeholder?: string;
+    ariaLabel?: string;
+    className?: string;
+}) => React.JSX.Element;
+export declare const ColorField: ({ label, value, fallback, onChange, onClear, ariaLabel, }: {
+    label?: React.ReactNode;
+    value: string | null | undefined;
+    fallback?: string;
+    onChange(value: string): void;
+    onClear?(): void;
+    ariaLabel?: string;
+}) => React.JSX.Element;
+//# sourceMappingURL=primitives.d.ts.map

package/dist/cjs/components/editors/fields/primitives.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/primitives.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;GAIG;AAEH,eAAO,MAAM,YAAY,yEAC+C,CAAC;AACzE,eAAO,MAAM,WAAW,kFACyD,CAAC;AAElF,eAAO,MAAM,aAAa,GAAI,iDAM3B;IACD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAYA,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,4DAO3C;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,CAAC,CAAC;IACT,OAAO,EAAE,aAAa,CAAC;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAgBA,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,gFAUzB;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAiBA,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,gEAOvB;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAYA,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,2DAOxB;IACD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,sBAsBA,CAAC"}

package/dist/cjs/components/editors/fields/primitives.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorField = exports.TextField = exports.NumberField = exports.SelectField = exports.CheckboxField = exports.COLOR_CLASS = exports.SELECT_CLASS = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+/**
+ * The editor's small native controls, styled like the rest of the dialog.
+ * They stay native (`<select>`, `<input type=checkbox|color>`) so the
+ * editor's test mocks of `@rowsncolumns/ui` keep covering it.
+ */
+exports.SELECT_CLASS = "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent";
+exports.COLOR_CLASS = "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer";
+var CheckboxField = function (_a) {
+    var label = _a.label, checked = _a.checked, onChange = _a.onChange, _b = _a.small, small = _b === void 0 ? true : _b, ariaLabel = _a.ariaLabel;
+    return (react_1.default.createElement("label", { className: "font-system ".concat(small ? "text-xs" : "text-sm", " flex items-center gap-1") },
+        react_1.default.createElement("input", { type: "checkbox", checked: checked, "aria-label": ariaLabel, onChange: function (e) { return onChange(e.target.checked); } }),
+        label));
+};
+exports.CheckboxField = CheckboxField;
+var SelectField = function (_a) {
+    var label = _a.label, value = _a.value, options = _a.options, onChange = _a.onChange, ariaLabel = _a.ariaLabel, className = _a.className;
+    return (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1" },
+        label ? react_1.default.createElement("label", { className: "font-system text-xs" }, label) : null,
+        react_1.default.createElement("select", { className: "".concat(exports.SELECT_CLASS, " ").concat(className !== null && className !== void 0 ? className : ""), "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (typeof label === "string" ? label : undefined), value: value, onChange: function (e) { return onChange(e.target.value); } }, options.map(function (option) { return (react_1.default.createElement("option", { key: option.value, value: option.value }, option.label)); }))));
+};
+exports.SelectField = SelectField;
+var NumberField = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, min = _a.min, max = _a.max, step = _a.step, ariaLabel = _a.ariaLabel, _b = _a.className, className = _b === void 0 ? "text-xs w-20" : _b;
+    return (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1" },
+        label ? react_1.default.createElement("label", { className: "font-system text-xs" }, label) : null,
+        react_1.default.createElement(ui_1.Input, { type: "number", value: value !== null && value !== void 0 ? value : "", min: min, max: max, step: step, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (typeof label === "string" ? label : undefined), onChange: function (e) {
+                return onChange(e.target.value === "" ? undefined : Number(e.target.value));
+            }, className: className, placeholder: placeholder })));
+};
+exports.NumberField = NumberField;
+var TextField = function (_a) {
+    var label = _a.label, value = _a.value, onChange = _a.onChange, placeholder = _a.placeholder, ariaLabel = _a.ariaLabel, _b = _a.className, className = _b === void 0 ? "text-xs w-32" : _b;
+    return (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1" },
+        label ? react_1.default.createElement("label", { className: "font-system text-xs" }, label) : null,
+        react_1.default.createElement(ui_1.Input, { type: "text", value: value !== null && value !== void 0 ? value : "", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (typeof label === "string" ? label : undefined), onChange: function (e) { return onChange(e.target.value || undefined); }, className: className, placeholder: placeholder })));
+};
+exports.TextField = TextField;
+var ColorField = function (_a) {
+    var label = _a.label, value = _a.value, _b = _a.fallback, fallback = _b === void 0 ? "#4285F4" : _b, onChange = _a.onChange, onClear = _a.onClear, ariaLabel = _a.ariaLabel;
+    return (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1" },
+        label ? react_1.default.createElement("label", { className: "font-system text-xs" }, label) : null,
+        react_1.default.createElement("div", { className: "flex items-center gap-1" },
+            react_1.default.createElement("input", { type: "color", value: value !== null && value !== void 0 ? value : fallback, "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (typeof label === "string" ? label : undefined), onChange: function (e) { return onChange(e.target.value); }, className: exports.COLOR_CLASS }),
+            onClear && value ? (react_1.default.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline", onClick: onClear }, "Clear")) : null)));
+};
+exports.ColorField = ColorField;

package/dist/cjs/components/editors/fields/series-format-fields.d.ts

@@ -0,0 +1,17 @@
+import type { ChartData } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { ChartEditorCapabilities } from "../chart-editor-capabilities";
+/**
+ * Excel's Format Data Series for one series: axis, trendline (every
+ * option of Format Trendline), error bars (Format Error Bars), fill
+ * (gradient / no fill / per-point colours / invert if negative), markers
+ * and the series' own data labels. Only the groups the chart type has
+ * (`capabilities`) render.
+ */
+export declare const SeriesFormatFields: ({ sheetId, series, capabilities, onChange, }: {
+    sheetId: number;
+    series: ChartData;
+    capabilities: ChartEditorCapabilities;
+    onChange(patch: Partial<ChartData>): void;
+}) => React.JSX.Element;
+//# sourceMappingURL=series-format-fields.d.ts.map

package/dist/cjs/components/editors/fields/series-format-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"series-format-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/series-format-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAGV,MAAM,2BAA2B,CAAC;AAEnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAqC5E;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,8CAKhC;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,uBAAuB,CAAC;IACtC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC3C,sBAoXA,CAAC"}