@rowsncolumns/charts 28.1.14 → 28.1.15

package/dist/esm/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/esm/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/esm/components/editors/fields/axis-options-fields.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { CheckboxField, NumberField, TextField } from "./primitives";
+import { TextFormatFields } from "./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.
+ */
+export const AxisOptionsFields = ({ label, kind, value, onChange, gridlinesDefault = true, }) => {
+    const set = (patch) => onChange({ ...(value ?? {}), ...patch });
+    return (React.createElement("div", { className: "flex flex-col gap-2 pb-2" },
+        React.createElement("label", { className: "font-system text-sm" }, label),
+        kind === "value" ? (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(NumberField, { label: "Min", ariaLabel: `${label} min`, value: value?.min, onChange: (min) => set({ min }), placeholder: "Auto" }),
+            React.createElement(NumberField, { label: "Max", ariaLabel: `${label} max`, value: value?.max, onChange: (max) => set({ max }), placeholder: "Auto" }))) : null,
+        kind === "value" ? (React.createElement(CheckboxField, { label: "Logarithmic scale", ariaLabel: `${label} logarithmic scale`, checked: Boolean(value?.logarithmic), onChange: (on) => set({ logarithmic: on || undefined }) })) : null,
+        React.createElement(CheckboxField, { label: "Reverse direction", ariaLabel: `${label} reverse direction`, checked: Boolean(value?.reverse), onChange: (on) => set({ reverse: on || undefined }) }),
+        React.createElement(CheckboxField, { label: "Gridlines", ariaLabel: `${label} gridlines`, checked: value?.showMajorGridlines ?? gridlinesDefault, onChange: (showMajorGridlines) => set({ showMajorGridlines }) }),
+        React.createElement(CheckboxField, { label: "Show axis", ariaLabel: `${label} visible`, checked: value?.visible !== false, onChange: (on) => set({ visible: on ? undefined : false }) }),
+        kind === "value" ? (React.createElement(TextField, { label: "Number format", ariaLabel: `${label} number format`, value: value?.numberFormatPattern, onChange: (numberFormatPattern) => set({ numberFormatPattern }), placeholder: "Linked to source" })) : null,
+        React.createElement(TextFormatFields, { label: `${label} font`, collapsible: true, value: value?.textFormat, onChange: (textFormat) => set({ textFormat }) })));
+};

package/dist/esm/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/esm/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/esm/components/editors/fields/chart-type-options.js

@@ -0,0 +1,151 @@
+import { Stack } from "@rowsncolumns/ui";
+import React from "react";
+import { CheckboxField, ColorField, NumberField, SelectField, TextField } from "./primitives";
+/** `totalIndices` (0-based) ⇄ the "1, 4, 7" the user types (1-based). */
+export const parseTotalPoints = (text) => {
+    const points = text
+        .split(/[,\s;]+/)
+        .map((part) => Number.parseInt(part, 10))
+        .filter((n) => Number.isFinite(n) && n >= 1)
+        .map((n) => n - 1);
+    const unique = [...new Set(points)].sort((a, b) => a - b);
+    return unique.length ? unique : undefined;
+};
+export const formatTotalPoints = (indices) => (indices ?? []).map((i) => i + 1).join(", ");
+/** Whether `ChartTypeOptionsFields` renders anything for this chart. */
+export const chartTypeHasOptions = (spec, capabilities) => {
+    const type = spec.chartType;
+    const token = String(spec.sourceChartType ?? "").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);
+};
+/**
+ * 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 const ChartTypeOptionsFields = ({ spec, capabilities, setFieldValue, }) => {
+    const s = spec;
+    const type = spec.chartType;
+    const isPareto = type === "histogram" && String(s.sourceChartType ?? "").toUpperCase() === "PARETO";
+    const isOfPie = type === "pie" && String(s.sourceChartType ?? "").toUpperCase() === "OF_PIE";
+    const controls = [];
+    if (type === "histogram") {
+        controls.push(React.createElement(Stack, { key: "bins", direction: "vertical", className: "gap-2 pb-2" },
+            React.createElement("label", { className: "font-system text-sm" }, "Bins"),
+            React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                React.createElement(NumberField, { label: "Bins (leave blank for auto)", ariaLabel: "Bins (leave blank for auto)", value: s.binCount, min: 1, onChange: (binCount) => setFieldValue("spec.binCount", binCount), placeholder: "Auto", className: "text-xs w-28" }),
+                React.createElement(NumberField, { label: "Bin width", ariaLabel: "Bin width", value: s.binSize, min: 0, onChange: (binSize) => setFieldValue("spec.binSize", binSize), placeholder: "Auto" }),
+                React.createElement(SelectField, { label: "Interval closed on", ariaLabel: "Interval closed on", value: s.intervalClosed ?? "r", options: [
+                        { value: "r", label: "Right (a, b]" },
+                        { value: "l", label: "Left [a, b)" },
+                    ], onChange: (intervalClosed) => setFieldValue("spec.intervalClosed", intervalClosed === "r" ? undefined : intervalClosed) })),
+            React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                React.createElement(NumberField, { label: "Overflow bin (values above)", ariaLabel: "Overflow bin", value: s.overflow, onChange: (overflow) => setFieldValue("spec.overflow", overflow), placeholder: "None", className: "text-xs w-28" }),
+                React.createElement(NumberField, { label: "Underflow bin (values below)", ariaLabel: "Underflow bin", value: s.underflow, onChange: (underflow) => setFieldValue("spec.underflow", underflow), placeholder: "None", className: "text-xs w-28" })),
+            isPareto ? (React.createElement(ColorField, { label: "Pareto line color", ariaLabel: "Pareto line color", value: s.paretoLineColor, onChange: (color) => setFieldValue("spec.paretoLineColor", color), onClear: () => setFieldValue("spec.paretoLineColor", undefined) })) : null));
+    }
+    if (type === "boxplot") {
+        controls.push(React.createElement(Stack, { key: "box", direction: "vertical", className: "gap-1 pb-2" },
+            React.createElement("label", { className: "font-system text-sm" }, "Box & whisker"),
+            React.createElement(SelectField, { label: "Quartile calculation", ariaLabel: "Quartile calculation", value: s.quartileMethod ?? "exclusive", options: [
+                    { value: "exclusive", label: "Exclusive median" },
+                    { value: "inclusive", label: "Inclusive median" },
+                ], onChange: (quartileMethod) => setFieldValue("spec.quartileMethod", quartileMethod), className: "w-40" }),
+            React.createElement(CheckboxField, { label: "Show outlier points", checked: s.showOutliers !== false, onChange: (on) => setFieldValue("spec.showOutliers", on ? undefined : false) }),
+            React.createElement(CheckboxField, { label: "Show mean markers", checked: Boolean(s.showMeanMarker), onChange: (on) => setFieldValue("spec.showMeanMarker", on || undefined) }),
+            React.createElement(CheckboxField, { label: "Show inner points", checked: Boolean(s.showInnerPoints), onChange: (on) => setFieldValue("spec.showInnerPoints", on || undefined) }),
+            React.createElement(CheckboxField, { label: "Show mean line", checked: Boolean(s.showMeanLine), onChange: (on) => setFieldValue("spec.showMeanLine", on || undefined) })));
+    }
+    if (type === "waterfall") {
+        controls.push(React.createElement(Stack, { key: "waterfall", direction: "vertical", className: "gap-1 pb-2" },
+            React.createElement(TextField, { label: "Total points (1-based, comma-separated)", ariaLabel: "Total points", value: formatTotalPoints(s.totalIndices), onChange: (text) => setFieldValue("spec.totalIndices", parseTotalPoints(text ?? "")), placeholder: "e.g. 4, 8", className: "text-xs w-40" }),
+            React.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.createElement(Stack, { key: "ofpie", direction: "vertical", className: "gap-2 pb-2" },
+            React.createElement("label", { className: "font-system text-sm" }, "Second plot"),
+            React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                React.createElement(SelectField, { label: "Split series by", ariaLabel: "Split series by", value: s.splitType ?? "position", options: [
+                        { value: "position", label: "Position" },
+                        { value: "value", label: "Value" },
+                        { value: "percent", label: "Percentage value" },
+                    ], onChange: (splitType) => setFieldValue("spec.splitType", splitType) }),
+                React.createElement(NumberField, { label: (s.splitType ?? "position") === "position"
+                        ? "Values in second plot"
+                        : (s.splitType === "value" ? "Values less than" : "Values less than %"), ariaLabel: "Split position", value: s.splitPos, min: 0, onChange: (splitPos) => setFieldValue("spec.splitPos", splitPos), placeholder: "3" }),
+                React.createElement(NumberField, { label: "Second plot size (%)", ariaLabel: "Second plot size", value: s.secondPieSize, min: 5, max: 200, onChange: (secondPieSize) => setFieldValue("spec.secondPieSize", secondPieSize), placeholder: "75" }))));
+    }
+    if (type === "bubble") {
+        controls.push(React.createElement(Stack, { key: "bubble", direction: "vertical", className: "gap-2 pb-2" },
+            React.createElement("label", { className: "font-system text-sm" }, "Bubble size"),
+            React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                React.createElement(NumberField, { label: "Scale bubble size to (%)", ariaLabel: "Bubble scale", value: s.bubbleScale, min: 0, max: 300, onChange: (bubbleScale) => setFieldValue("spec.bubbleScale", bubbleScale), placeholder: "100", className: "text-xs w-28" }),
+                React.createElement(SelectField, { label: "Size represents", ariaLabel: "Size represents", value: s.sizeRepresents ?? "area", options: [
+                        { value: "area", label: "Area of bubbles" },
+                        { value: "width", label: "Width of bubbles" },
+                    ], onChange: (sizeRepresents) => setFieldValue("spec.sizeRepresents", sizeRepresents === "area" ? undefined : sizeRepresents) }))));
+    }
+    if (type === "scatter") {
+        controls.push(React.createElement(SelectField, { key: "scatter", label: "Scatter style", ariaLabel: "Scatter style", value: s.scatterStyle ?? "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: (scatterStyle) => setFieldValue("spec.scatterStyle", scatterStyle), className: "w-56" }));
+    }
+    if (capabilities.category === "hierarchy") {
+        controls.push(React.createElement(Stack, { key: "hierarchy", direction: "vertical", className: "gap-1 pb-2" },
+            type === "treemap" ? (React.createElement(SelectField, { label: "Category labels", ariaLabel: "Category label layout", value: s.parentLabelLayout ?? "banner", options: [
+                    { value: "banner", label: "Banner" },
+                    { value: "overlapping", label: "Overlapping" },
+                    { value: "none", label: "None" },
+                ], onChange: (parentLabelLayout) => setFieldValue("spec.parentLabelLayout", parentLabelLayout === "banner" ? undefined : parentLabelLayout), className: "w-40" })) : null,
+            React.createElement(CheckboxField, { label: "Drill down on click", checked: Boolean(s.drillDown), onChange: (on) => setFieldValue("spec.drillDown", on || undefined) })));
+    }
+    if (type === "radar") {
+        controls.push(React.createElement(SelectField, { key: "radar", label: "Radar style", ariaLabel: "Radar style", value: s.radarStyle ?? "standard", options: [
+                { value: "standard", label: "Standard" },
+                { value: "marker", label: "With markers" },
+                { value: "filled", label: "Filled" },
+            ], onChange: (radarStyle) => setFieldValue("spec.radarStyle", radarStyle), className: "w-40" }));
+    }
+    if (type === "stock") {
+        controls.push(React.createElement(SelectField, { key: "stock", label: "Stock variant", ariaLabel: "Stock variant", value: s.stockVariant ?? "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: (stockVariant) => setFieldValue("spec.stockVariant", stockVariant), className: "w-56" }));
+    }
+    if (type === "doughnut") {
+        controls.push(React.createElement(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: (doughnutHoleSize) => setFieldValue("spec.doughnutHoleSize", doughnutHoleSize), placeholder: "0.5", className: "text-xs w-32" }));
+    }
+    if (type === "pie" || type === "doughnut") {
+        controls.push(React.createElement(NumberField, { key: "explosion", label: "Explosion (% of radius, 0-400)", ariaLabel: "Explosion", value: s.explosion, min: 0, max: 400, step: 5, onChange: (explosion) => setFieldValue("spec.explosion", explosion), placeholder: "0", className: "text-xs w-32" }));
+    }
+    if (capabilities.hasGapWidth) {
+        controls.push(React.createElement(NumberField, { key: "gap", label: "Gap width (0-500)", ariaLabel: "Gap width (0-500)", value: s.gapWidth, min: 0, max: 500, onChange: (gapWidth) => setFieldValue("spec.gapWidth", gapWidth), placeholder: type === "histogram" ? "0" : "150", className: "text-xs w-32" }));
+    }
+    if (capabilities.hasOverlap) {
+        controls.push(React.createElement(NumberField, { key: "overlap", label: "Series overlap (-100 to 100)", ariaLabel: "Series overlap (-100 to 100)", value: s.overlap, min: -100, max: 100, onChange: (overlap) => setFieldValue("spec.overlap", overlap), placeholder: "0", className: "text-xs w-32" }));
+    }
+    if (!controls.length)
+        return null;
+    return React.createElement(React.Fragment, null, controls);
+};

package/dist/esm/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/esm/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/esm/components/editors/fields/data-labels-fields.js

@@ -0,0 +1,47 @@
+import React from "react";
+import { CheckboxField, SelectField, TextField } from "./primitives";
+import { TextFormatFields } from "./text-format-fields";
+const 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).
+ */
+export const DataLabelsFields = ({ value, onChange, capabilities, perSeries = false, }) => {
+    const set = (patch) => onChange({ ...(value ?? {}), ...patch });
+    const mode = !value
+        ? "inherit"
+        : value.show
+            ? "show"
+            : "hide";
+    return (React.createElement("div", { className: "flex flex-col gap-1" },
+        perSeries ? (React.createElement(SelectField, { label: "Data labels", value: mode, options: [
+                { value: "inherit", label: "Same as chart" },
+                { value: "show", label: "Show" },
+                { value: "hide", label: "Hide" },
+            ], onChange: (next) => onChange(next === "inherit"
+                ? undefined
+                : next === "show"
+                    ? { ...(value ?? {}), show: true }
+                    : { show: false }), className: "w-32" })) : (React.createElement(CheckboxField, { small: false, label: "Show data labels", checked: Boolean(value?.show), onChange: (show) => set({ show }) })),
+        value?.show ? (React.createElement("div", { className: "pl-4 flex flex-col gap-1" },
+            React.createElement(CheckboxField, { label: "Value", checked: value.showValue !== false, onChange: (showValue) => set({ showValue }) }),
+            React.createElement(CheckboxField, { label: "Category name", checked: Boolean(value.showCategoryName), onChange: (showCategoryName) => set({ showCategoryName }) }),
+            React.createElement(CheckboxField, { label: "Series name", checked: Boolean(value.showSeriesName), onChange: (showSeriesName) => set({ showSeriesName }) }),
+            capabilities.hasPercentLabels ? (React.createElement(CheckboxField, { label: "Percentage", checked: Boolean(value.showPercent), onChange: (showPercent) => set({ showPercent }) })) : null,
+            capabilities.hasBubbleSizeLabels ? (React.createElement(CheckboxField, { label: "Bubble size", checked: Boolean(value.showBubbleSize), onChange: (showBubbleSize) => set({ showBubbleSize }) })) : null,
+            React.createElement(SelectField, { label: "Label position", value: value.position ?? "outside", options: POSITIONS, onChange: (position) => set({ position }), className: "w-32" }),
+            React.createElement(TextField, { label: "Number format pattern", value: value.numberFormatPattern, onChange: (numberFormatPattern) => set({ numberFormatPattern }), placeholder: "#,##0.00" }),
+            React.createElement(TextFormatFields, { label: "Label font", value: value.textFormat, onChange: (textFormat) => set({ textFormat }) }))) : null));
+};

package/dist/esm/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/esm/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/esm/components/editors/fields/primitives.js

@@ -0,0 +1,26 @@
+import { Input, Stack } from "@rowsncolumns/ui";
+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 const SELECT_CLASS = "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent";
+export const COLOR_CLASS = "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer";
+export const CheckboxField = ({ label, checked, onChange, small = true, ariaLabel, }) => (React.createElement("label", { className: `font-system ${small ? "text-xs" : "text-sm"} flex items-center gap-1` },
+    React.createElement("input", { type: "checkbox", checked: checked, "aria-label": ariaLabel, onChange: (e) => onChange(e.target.checked) }),
+    label));
+export const SelectField = ({ label, value, options, onChange, ariaLabel, className, }) => (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+    label ? React.createElement("label", { className: "font-system text-xs" }, label) : null,
+    React.createElement("select", { className: `${SELECT_CLASS} ${className ?? ""}`, "aria-label": ariaLabel ?? (typeof label === "string" ? label : undefined), value: value, onChange: (e) => onChange(e.target.value) }, options.map((option) => (React.createElement("option", { key: option.value, value: option.value }, option.label))))));
+export const NumberField = ({ label, value, onChange, placeholder, min, max, step, ariaLabel, className = "text-xs w-20", }) => (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+    label ? React.createElement("label", { className: "font-system text-xs" }, label) : null,
+    React.createElement(Input, { type: "number", value: value ?? "", min: min, max: max, step: step, "aria-label": ariaLabel ?? (typeof label === "string" ? label : undefined), onChange: (e) => onChange(e.target.value === "" ? undefined : Number(e.target.value)), className: className, placeholder: placeholder })));
+export const TextField = ({ label, value, onChange, placeholder, ariaLabel, className = "text-xs w-32", }) => (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+    label ? React.createElement("label", { className: "font-system text-xs" }, label) : null,
+    React.createElement(Input, { type: "text", value: value ?? "", "aria-label": ariaLabel ?? (typeof label === "string" ? label : undefined), onChange: (e) => onChange(e.target.value || undefined), className: className, placeholder: placeholder })));
+export const ColorField = ({ label, value, fallback = "#4285F4", onChange, onClear, ariaLabel, }) => (React.createElement(Stack, { direction: "vertical", className: "gap-1" },
+    label ? React.createElement("label", { className: "font-system text-xs" }, label) : null,
+    React.createElement("div", { className: "flex items-center gap-1" },
+        React.createElement("input", { type: "color", value: value ?? fallback, "aria-label": ariaLabel ?? (typeof label === "string" ? label : undefined), onChange: (e) => onChange(e.target.value), className: COLOR_CLASS }),
+        onClear && value ? (React.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline", onClick: onClear }, "Clear")) : null)));

package/dist/esm/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/esm/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"}

package/dist/esm/components/editors/fields/series-format-fields.js

@@ -0,0 +1,143 @@
+import { Button, Input, Stack } from "@rowsncolumns/ui";
+import React from "react";
+import { ChartRangeInput } from "../chart-range-input";
+import { DataLabelsFields } from "./data-labels-fields";
+import { CheckboxField, ColorField, NumberField, SelectField, TextField, } from "./primitives";
+const TRENDLINE_TYPES = [
+    { value: "linear", label: "Linear" },
+    { value: "exp", label: "Exponential" },
+    { value: "log", label: "Logarithmic" },
+    { value: "poly", label: "Polynomial" },
+    { value: "power", label: "Power" },
+    { value: "movingAvg", label: "Moving average" },
+];
+const MARKER_SYMBOLS = [
+    { value: "", label: "Auto" },
+    { value: "circle", label: "Circle" },
+    { value: "square", label: "Square" },
+    { value: "diamond", label: "Diamond" },
+    { value: "triangle", label: "Triangle" },
+    { value: "x", label: "X" },
+    { value: "plus", label: "Plus" },
+    { value: "star", label: "Star" },
+    { value: "dash", label: "Dash" },
+    { value: "dot", label: "Dot" },
+    { value: "none", label: "None" },
+];
+/**
+ * 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 const SeriesFormatFields = ({ sheetId, series, capabilities, onChange, }) => {
+    const trendline = series.trendlines?.[0];
+    const setTrendline = (patch) => onChange({ trendlines: [{ ...(trendline ?? { type: "linear" }), ...patch }] });
+    const errorBars = series.errorBars;
+    const setErrorBars = (patch) => onChange({ errorBars: { ...(errorBars ?? {}), ...patch } });
+    const pointColors = series.dataPointColors ?? [];
+    return (React.createElement("div", { className: "flex flex-col gap-2 pt-2 border border-rnc-border border-solid mt-2 p-2" },
+        capabilities.hasSecondaryAxis ? (React.createElement(CheckboxField, { small: false, label: "Plot on secondary axis", checked: Boolean(series.useSecondaryAxis), onChange: (on) => onChange({ useSecondaryAxis: on || undefined }) })) : null,
+        capabilities.hasTrendlines ? (React.createElement("div", { className: "flex flex-col gap-1" },
+            React.createElement(CheckboxField, { small: false, label: "Trendline", checked: Boolean(trendline), onChange: (on) => onChange({ trendlines: on ? [trendline ?? { type: "linear" }] : undefined }) }),
+            trendline ? (React.createElement("div", { className: "pl-4 flex flex-col gap-1" },
+                React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                    React.createElement(SelectField, { label: "Type", ariaLabel: "Trendline type", value: trendline.type ?? "linear", options: TRENDLINE_TYPES, onChange: (type) => setTrendline({
+                            type,
+                            ...(type === "poly" ? { order: trendline.order ?? 2 } : {}),
+                            ...(type === "movingAvg" ? { period: trendline.period ?? 2 } : {}),
+                        }) }),
+                    trendline.type === "poly" ? (React.createElement(NumberField, { label: "Order", ariaLabel: "Trendline order", value: trendline.order, min: 2, max: 6, onChange: (order) => setTrendline({ order }), placeholder: "2" })) : null,
+                    trendline.type === "movingAvg" ? (React.createElement(NumberField, { label: "Period", ariaLabel: "Trendline period", value: trendline.period, min: 2, onChange: (period) => setTrendline({ period }), placeholder: "2" })) : null,
+                    React.createElement(TextField, { label: "Name", ariaLabel: "Trendline name", value: trendline.name, onChange: (name) => setTrendline({ name }), placeholder: "Automatic" }),
+                    React.createElement(ColorField, { label: "Color", ariaLabel: "Trendline color", value: trendline.color, onChange: (color) => setTrendline({ color }) })),
+                trendline.type !== "movingAvg" ? (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                    React.createElement(NumberField, { label: "Forecast forward", value: trendline.forecastForward, min: 0, onChange: (forecastForward) => setTrendline({ forecastForward }), placeholder: "0" }),
+                    React.createElement(NumberField, { label: "Forecast backward", value: trendline.forecastBackward, min: 0, onChange: (forecastBackward) => setTrendline({ forecastBackward }), placeholder: "0" }))) : null,
+                trendline.type !== "movingAvg" ? (React.createElement(React.Fragment, null,
+                    React.createElement(CheckboxField, { label: "Display equation on chart", checked: Boolean(trendline.showEquation), onChange: (showEquation) => setTrendline({ showEquation: showEquation || undefined }) }),
+                    React.createElement(CheckboxField, { label: "Display R-squared value on chart", checked: Boolean(trendline.showRSquared), onChange: (showRSquared) => setTrendline({ showRSquared: showRSquared || undefined }) }))) : null)) : null)) : null,
+        capabilities.hasErrorBars ? (React.createElement("div", { className: "flex flex-col gap-1" },
+            React.createElement(CheckboxField, { small: false, label: "Error bars", checked: Boolean(errorBars), onChange: (on) => onChange({
+                    errorBars: on ? errorBars ?? { valueType: "percentage", value: 5 } : undefined,
+                }) }),
+            errorBars ? (React.createElement("div", { className: "pl-4 flex flex-col gap-1" },
+                React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                    React.createElement(SelectField, { label: "Direction", ariaLabel: "Error bar direction", value: errorBars.barType ?? "both", options: [
+                            { value: "both", label: "Both" },
+                            { value: "plus", label: "Plus" },
+                            { value: "minus", label: "Minus" },
+                        ], onChange: (barType) => setErrorBars({ barType }) }),
+                    capabilities.category === "bubble" ? (React.createElement(SelectField, { label: "Axis", ariaLabel: "Error bar axis", value: errorBars.direction ?? "y", options: [
+                            { value: "y", label: "Vertical" },
+                            { value: "x", label: "Horizontal" },
+                        ], onChange: (direction) => setErrorBars({ direction }) })) : null,
+                    React.createElement(SelectField, { label: "Error amount", ariaLabel: "Error bar value type", value: errorBars.valueType ?? "percentage", options: [
+                            { value: "fixedVal", label: "Fixed value" },
+                            { value: "percentage", label: "Percentage" },
+                            { value: "stdDev", label: "Standard deviation(s)" },
+                            { value: "stdErr", label: "Standard error" },
+                            { value: "custom", label: "Custom" },
+                        ], onChange: (valueType) => setErrorBars({ valueType }) }),
+                    errorBars.valueType !== "stdErr" && errorBars.valueType !== "custom" ? (React.createElement(NumberField, { label: "Value", ariaLabel: "Error bar value", value: errorBars.value, onChange: (value) => setErrorBars({ value }), placeholder: "5" })) : null),
+                errorBars.valueType === "custom" ? (React.createElement("div", { className: "flex flex-col gap-1" },
+                    React.createElement("label", { className: "font-system text-xs" }, "Positive error value"),
+                    React.createElement(ChartRangeInput, { sheetId: sheetId, range: errorBars.plusRange ?? undefined, onChangeRange: (plusRange) => setErrorBars({ plusRange }), placeholder: "Select a range", className: "mb-0" }),
+                    React.createElement("label", { className: "font-system text-xs" }, "Negative error value"),
+                    React.createElement(ChartRangeInput, { sheetId: sheetId, range: errorBars.minusRange ?? undefined, onChangeRange: (minusRange) => setErrorBars({ minusRange }), placeholder: "Select a range", className: "mb-0" }))) : null,
+                React.createElement(CheckboxField, { label: "No end cap", checked: Boolean(errorBars.noEndCap), onChange: (noEndCap) => setErrorBars({ noEndCap: noEndCap || undefined }) }))) : null)) : null,
+        capabilities.hasSeriesFill ? (React.createElement(React.Fragment, null,
+            React.createElement(CheckboxField, { small: false, label: "Gradient fill", checked: Boolean(series.gradient), onChange: (on) => onChange({
+                    gradient: on
+                        ? series.gradient ?? {
+                            type: "linear",
+                            degree: 90,
+                            stops: [
+                                { position: 0, color: series.color ?? "#4285F4" },
+                                { position: 1, color: "#FFFFFF" },
+                            ],
+                        }
+                        : undefined,
+                }) }),
+            React.createElement(CheckboxField, { small: false, label: "Transparent (no fill)", checked: Boolean(series.noFill), onChange: (noFill) => onChange({ noFill: noFill || undefined }) }))) : null,
+        capabilities.hasInvertIfNegative ? (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(CheckboxField, { small: false, label: "Invert if negative", checked: Boolean(series.invertIfNegative), onChange: (on) => onChange({ invertIfNegative: on || undefined }) }),
+            series.invertIfNegative ? (React.createElement(ColorField, { label: "Negative fill", ariaLabel: "Negative fill", value: series.negativeColor, fallback: "#FFFFFF", onChange: (negativeColor) => onChange({ negativeColor }), onClear: () => onChange({ negativeColor: undefined }) })) : null)) : null,
+        capabilities.hasMarkers ? (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(SelectField, { label: "Marker", ariaLabel: "Marker", value: series.marker?.symbol ?? "", options: MARKER_SYMBOLS, onChange: (symbol) => onChange({ marker: { ...(series.marker ?? {}), symbol: symbol || undefined } }) }),
+            React.createElement(NumberField, { label: "Marker size", ariaLabel: "Marker size", value: series.marker?.size, min: 1, onChange: (size) => onChange({ marker: { ...(series.marker ?? {}), size } }), placeholder: "6" }),
+            React.createElement(ColorField, { label: "Marker color", ariaLabel: "Marker color", value: series.marker?.color, onChange: (color) => onChange({ marker: { ...(series.marker ?? {}), color } }), onClear: () => onChange({ marker: { ...(series.marker ?? {}), color: undefined } }) }))) : null,
+        capabilities.hasPointColors ? (React.createElement("div", { className: "flex flex-col gap-1" },
+            React.createElement("label", { className: "font-system text-sm" }, "Point colors"),
+            pointColors.map((point, index) => (React.createElement("div", { className: "flex items-center gap-2", key: `${index}-${point.idx}` },
+                React.createElement(Input, { type: "number", min: 1, value: point.idx + 1, "aria-label": `Point ${index + 1} number`, onChange: (e) => {
+                        const next = [...pointColors];
+                        next[index] = {
+                            ...point,
+                            idx: Math.max(0, Math.round(Number(e.target.value) || 1) - 1),
+                        };
+                        onChange({ dataPointColors: next });
+                    }, className: "text-xs w-16" }),
+                React.createElement("input", { type: "color", value: point.color, "aria-label": `Point ${index + 1} color`, onChange: (e) => {
+                        const next = [...pointColors];
+                        next[index] = { ...point, color: e.target.value };
+                        onChange({ dataPointColors: next });
+                    }, className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer" }),
+                React.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline", onClick: () => onChange({
+                        dataPointColors: pointColors.filter((_, i) => i !== index).length
+                            ? pointColors.filter((_, i) => i !== index)
+                            : undefined,
+                    }) }, "Remove")))),
+            React.createElement(Stack, { direction: "horizontal", className: "gap-1" },
+                React.createElement(Button, { variant: "link", type: "button", className: "cursor-pointer", onClick: () => onChange({
+                        dataPointColors: [
+                            ...pointColors,
+                            {
+                                idx: pointColors.length ? pointColors[pointColors.length - 1].idx + 1 : 0,
+                                color: series.color ?? "#4285F4",
+                            },
+                        ],
+                    }) }, "Add point color")))) : null,
+        capabilities.hasDataLabels ? (React.createElement(DataLabelsFields, { perSeries: true, value: series.dataLabels, capabilities: capabilities, onChange: (dataLabels) => onChange({ dataLabels }) })) : null));
+};

package/dist/esm/components/editors/fields/series-name-field.d.ts

@@ -0,0 +1,16 @@
+import type { ChartData } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import type { ChartCellLabelGetter } from "../../../utils/chart-orientation";
+/**
+ * Excel's "Series name": either text, or a link to a header cell
+ * (`dataLabelSource`, #1100). A linked name shows the cell's current text
+ * and the cell it comes from; typing a name replaces the link with the
+ * literal, picking a cell links it.
+ */
+export declare const SeriesNameField: ({ sheetId, series, getFormattedValue, onChange, }: {
+    sheetId: number;
+    series: Pick<ChartData, "dataLabel" | "dataLabelSource">;
+    getFormattedValue?: ChartCellLabelGetter;
+    onChange(patch: Pick<ChartData, "dataLabel" | "dataLabelSource">): void;
+}) => React.JSX.Element;
+//# sourceMappingURL=series-name-field.d.ts.map

package/dist/esm/components/editors/fields/series-name-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"series-name-field.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/series-name-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAc,MAAM,2BAA2B,CAAC;AAEvE,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAG7E;;;;;GAKG;AACH,eAAO,MAAM,eAAe,GAAI,mDAK7B;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,iBAAiB,CAAC,CAAC;IACzD,iBAAiB,CAAC,EAAE,oBAAoB,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,WAAW,GAAG,iBAAiB,CAAC,GAAG,IAAI,CAAC;CACzE,sBA0CA,CAAC"}