@rowsncolumns/charts 27.0.30

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

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

package/dist/esm/components/editors/chart-range-input.d.ts

@@ -0,0 +1,17 @@
+import type { SheetRange } from "@rowsncolumns/spreadsheet";
+import React from "react";
+type ChartRangeInputProps = {
+    sheetId: number;
+    range?: SheetRange;
+    onChangeRange(range: SheetRange): void;
+    required?: boolean;
+    placeholder?: string;
+    className?: string;
+};
+/**
+ * Formula range input that keeps the raw text the user is typing in
+ * local state and only forwards complete, valid ranges to the caller.
+ */
+export declare const ChartRangeInput: ({ sheetId, range, onChangeRange, required, placeholder, className, }: ChartRangeInputProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=chart-range-input.d.ts.map

package/dist/esm/components/editors/chart-range-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-range-input.d.ts","sourceRoot":"","sources":["../../../../components/editors/chart-range-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE5D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,sEAO7B,oBAAoB,sBAWtB,CAAC"}

package/dist/esm/components/editors/chart-range-input.js

@@ -0,0 +1,10 @@
+import { FormulaInput, useFormulaInputState } from "@rowsncolumns/spreadsheet";
+import React from "react";
+/**
+ * Formula range input that keeps the raw text the user is typing in
+ * local state and only forwards complete, valid ranges to the caller.
+ */
+export const ChartRangeInput = ({ sheetId, range, onChangeRange, required, placeholder, className, }) => {
+    const formulaInput = useFormulaInputState(sheetId, range);
+    return (React.createElement(FormulaInput, { value: formulaInput.value, onChange: (value) => formulaInput.onChange(value, onChangeRange), required: required, placeholder: placeholder, className: className }));
+};