@rowsncolumns/charts 27.0.34 → 28.1.0

package/dist/esm/components/dialogs/pivot-chart-dialog.d.ts

@@ -0,0 +1,39 @@
+import type { CellInterface } from "@rowsncolumns/common-types";
+import type { PivotTable } from "@rowsncolumns/spreadsheet";
+import React from "react";
+import { type PivotChartRequest } from "../../atoms/pivot-chart.atom";
+/**
+ * What the PivotChart dialog hands back: bind to an existing pivot, or
+ * create `newPivotTable` first (Excel's Insert → PivotChart on a plain
+ * range creates an empty PivotTable and an empty PivotChart side by side;
+ * both fill in as fields are added). `anchorCell` is where the chart frame
+ * goes — to the right of a new pivot, at the active cell otherwise.
+ */
+export type PivotChartSubmission = {
+    sheetId: number;
+    anchorCell: CellInterface;
+} & ({
+    pivotId: PivotTable["pivotId"];
+} | {
+    newPivotTable: PivotTable;
+});
+/** Excel names pivots `PivotTable1`, `PivotTable2`, …; unnamed ones show that way. */
+export declare const pivotTableLabel: (pivot: PivotTable, index: number) => string;
+export type PivotChartPickerProps = {
+    request: PivotChartRequest;
+    pivotTables: PivotTable[];
+    onSubmit(submission: PivotChartSubmission): void;
+    onClose(): void;
+};
+export declare const PivotChartPicker: ({ request, pivotTables, onSubmit, onClose, }: PivotChartPickerProps) => React.JSX.Element;
+export type PivotChartDialogProps = {
+    pivotTables: PivotTable[];
+    onSubmit(submission: PivotChartSubmission): void;
+};
+export declare const PivotChartDialog: ({ pivotTables, onSubmit, }: PivotChartDialogProps) => React.JSX.Element;
+/**
+ * The grid's `onRequestCreatePivotChart`: a request from a pivot's own
+ * context menu binds straight away; Insert → PivotChart opens the dialog.
+ */
+export declare const useRequestCreatePivotChart: (onSubmit: (submission: PivotChartSubmission) => void) => (sheetId: number, activeCell: CellInterface, selections: PivotChartRequest["selections"], pivotId?: PivotTable["pivotId"]) => void;
+//# sourceMappingURL=pivot-chart-dialog.d.ts.map

package/dist/esm/components/dialogs/pivot-chart-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pivot-chart-dialog.d.ts","sourceRoot":"","sources":["../../../../components/dialogs/pivot-chart-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAEhE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAY5D,OAAO,KAAgC,MAAM,OAAO,CAAC;AAErD,OAAO,EACL,KAAK,iBAAiB,EAGvB,MAAM,8BAA8B,CAAC;AAEtC;;;;;;GAMG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,aAAa,CAAC;CAC3B,GAAG,CAAC;IAAE,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAA;CAAE,GAAG;IAAE,aAAa,EAAE,UAAU,CAAA;CAAE,CAAC,CAAC;AAEzE,sFAAsF;AACtF,eAAO,MAAM,eAAe,GAAI,OAAO,UAAU,EAAE,OAAO,MAAM,WAChB,CAAC;AAOjD,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,iBAAiB,CAAC;IAC3B,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,QAAQ,CAAC,UAAU,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACjD,OAAO,IAAI,IAAI,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,8CAK9B,qBAAqB,sBAmFvB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,QAAQ,CAAC,UAAU,EAAE,oBAAoB,GAAG,IAAI,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,gBAAgB,GAAI,4BAG9B,qBAAqB,sBA8BvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,0BAA0B,GACrC,UAAU,CAAC,UAAU,EAAE,oBAAoB,KAAK,IAAI,eAKvC,MAAM,cACH,aAAa,cACb,iBAAiB,CAAC,YAAY,CAAC,YACjC,UAAU,CAAC,SAAS,CAAC,SAUpC,CAAC"}

package/dist/esm/components/dialogs/pivot-chart-dialog.js

@@ -0,0 +1,89 @@
+import { Cross2Icon } from "@rowsncolumns/icons";
+import { useFocusSheet } from "@rowsncolumns/spreadsheet";
+import { Button, Dialog, DialogBody, DialogCloseButton, DialogContent, DialogTitle, Stack, } from "@rowsncolumns/ui";
+import { uuidString } from "@rowsncolumns/utils";
+import React, { useCallback, useState } from "react";
+import { usePivotChartRequest, useSetPivotChartRequest, } from "../../atoms/pivot-chart.atom";
+/** Excel names pivots `PivotTable1`, `PivotTable2`, …; unnamed ones show that way. */
+export const pivotTableLabel = (pivot, index) => pivot.name?.trim() || `PivotTable${index + 1}`;
+const NEW_PIVOT = "__new__";
+/** Columns between a new pivot's top-left cell and its PivotChart's anchor. */
+const CHART_GAP_COLUMNS = 4;
+export const PivotChartPicker = ({ request, pivotTables, onSubmit, onClose, }) => {
+    const { sheetId, activeCell, selections } = request;
+    const selection = selections[selections.length - 1]?.range;
+    const canCreate = selection !== undefined;
+    const [choice, setChoice] = useState(pivotTables.length
+        ? String(pivotTables[0].pivotId)
+        : canCreate
+            ? NEW_PIVOT
+            : "");
+    const submit = (event) => {
+        event.preventDefault();
+        if (choice === NEW_PIVOT && selection) {
+            onSubmit({
+                sheetId,
+                anchorCell: {
+                    rowIndex: activeCell.rowIndex,
+                    columnIndex: activeCell.columnIndex + CHART_GAP_COLUMNS,
+                },
+                newPivotTable: {
+                    pivotId: uuidString(),
+                    rows: [],
+                    columns: [],
+                    values: [],
+                    source: { ...selection, sheetId },
+                    targetPosition: { ...activeCell, sheetId },
+                },
+            });
+        }
+        else {
+            const pivot = pivotTables.find((p) => String(p.pivotId) === choice);
+            if (!pivot)
+                return;
+            onSubmit({ sheetId, anchorCell: activeCell, pivotId: pivot.pivotId });
+        }
+        onClose();
+    };
+    return (React.createElement("form", { onSubmit: submit },
+        React.createElement(Stack, { direction: "vertical", className: "pb-2 gap-2" },
+            React.createElement("div", { className: "font-system text-sm" }, "Choose the PivotTable to chart"),
+            React.createElement(Stack, { direction: "vertical", className: "gap-1", role: "radiogroup" },
+                pivotTables.map((pivot, index) => (React.createElement("label", { key: String(pivot.pivotId), className: "font-system text-sm items-center flex gap-1" },
+                    React.createElement("input", { type: "radio", name: "pivot", className: "m-0", value: String(pivot.pivotId), checked: choice === String(pivot.pivotId), onChange: () => setChoice(String(pivot.pivotId)) }),
+                    pivotTableLabel(pivot, index)))),
+                React.createElement("label", { className: "font-system text-sm items-center flex gap-1" },
+                    React.createElement("input", { type: "radio", name: "pivot", className: "m-0", value: NEW_PIVOT, disabled: !canCreate, checked: choice === NEW_PIVOT, onChange: () => setChoice(NEW_PIVOT) }),
+                    "New PivotTable from the current selection"))),
+        React.createElement("div", { className: "flex gap-1 pt-2" },
+            React.createElement(Button, { type: "submit", variant: "primary", size: "xs", disabled: !choice }, "Insert"),
+            React.createElement(Button, { size: "xs", type: "button", onClick: onClose }, "Cancel"))));
+};
+export const PivotChartDialog = ({ pivotTables, onSubmit, }) => {
+    const [request, setRequest] = usePivotChartRequest();
+    const focusSheet = useFocusSheet();
+    const closeDialog = () => {
+        setRequest(undefined);
+        focusSheet?.();
+    };
+    return (React.createElement(Dialog, { modal: false, open: request !== undefined },
+        React.createElement(DialogContent, { onEscapeKeyDown: closeDialog, className: "translate-y-1/2" },
+            React.createElement(DialogTitle, { className: "rnc-drag-handle cursor-move" }, "Insert PivotChart"),
+            React.createElement(DialogBody, null, request ? (React.createElement(PivotChartPicker, { key: `${request.sheetId}:${request.activeCell.rowIndex}:${request.activeCell.columnIndex}`, request: request, pivotTables: pivotTables, onSubmit: onSubmit, onClose: closeDialog })) : null),
+            React.createElement(DialogCloseButton, { onClick: closeDialog },
+                React.createElement(Cross2Icon, null)))));
+};
+/**
+ * The grid's `onRequestCreatePivotChart`: a request from a pivot's own
+ * context menu binds straight away; Insert → PivotChart opens the dialog.
+ */
+export const useRequestCreatePivotChart = (onSubmit) => {
+    const setRequest = useSetPivotChartRequest();
+    return useCallback((sheetId, activeCell, selections, pivotId) => {
+        if (pivotId !== undefined) {
+            onSubmit({ sheetId, anchorCell: activeCell, pivotId });
+            return;
+        }
+        setRequest({ sheetId, activeCell, selections });
+    }, [onSubmit, setRequest]);
+};

package/dist/esm/components/editors/chart-editor.d.ts

@@ -1,10 +1,22 @@
 import type { EmbeddedChart } from "@rowsncolumns/spreadsheet";
 import React from "react";
+import { type ChartCellLabelGetter } from "../../utils/chart-orientation";
 type ChartEditorProps = {
     chart?: EmbeddedChart;
     sheetId: number;
     onSubmit?(chart: EmbeddedChart): void;
+    /**
+     * Excel's "Move Chart…" (Design → Move Chart): offered as a button in the
+     * Properties section when provided — the host opens its dialog (e.g.
+     * `useOpenMoveChartDialog`).
+     */
+    onRequestMoveChart?(chart: EmbeddedChart): void;
+    /**
+     * Formatted cell text — names the series Switch Row/Column derives
+     * from the data range. Without it the switched series are unnamed.
+     */
+    getFormattedValue?: ChartCellLabelGetter;
 };
-export declare const ChartEditor: ({ chart, sheetId, onSubmit }: ChartEditorProps) => React.JSX.Element;
+export declare const ChartEditor: ({ chart, sheetId, onSubmit, onRequestMoveChart, getFormattedValue, }: ChartEditorProps) => React.JSX.Element;
 export default ChartEditor;
 //# sourceMappingURL=chart-editor.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"chart-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/chart-editor.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,aAAa,EAEd,MAAM,2BAA2B,CAAC;AAuBnC,OAAO,KAAkB,MAAM,OAAO,CAAC;AAuBvC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;CACvC,CAAC;AAuBF,eAAO,MAAM,WAAW,GAAI,8BAA8B,gBAAgB,sBAo9CzE,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"chart-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/chart-editor.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,aAAa,EAGd,MAAM,2BAA2B,CAAC;AAuBnC,OAAO,KAAkB,MAAM,OAAO,CAAC;AAMvC,OAAO,EAEL,KAAK,oBAAoB,EAG1B,MAAM,+BAA+B,CAAC;AA4CvC,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IACtC;;;;OAIG;IACH,kBAAkB,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,oBAAoB,CAAC;CAC1C,CAAC;AAuBF,eAAO,MAAM,WAAW,GAAI,sEAMzB,gBAAgB,sBA+5DlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -9,7 +9,9 @@ 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 { canSwitchRowColumn, inferSeriesOrientation, switchRowColumn, } from "../../utils/chart-orientation";
 import { isBasicChartSpec, isBubbleChartSpec, isHierarchyChartSpec, mergeChartSpec, } from "../../utils/chart-spec-utils";
+import { applyChartColorPalette, applyChartQuickLayout, applyChartStyle, CHART_COLOR_PALETTES, CHART_QUICK_LAYOUTS, CHART_STYLES, resetChartToMatchStyle, } from "../../utils/chart-styles";
 const AGGREGATE_OPTIONS = [
     { label: "Sum", value: "SUM" },
     { label: "Average", value: "AVERAGE" },
@@ -18,12 +20,27 @@ const AGGREGATE_OPTIONS = [
     { label: "Min", value: "MIN" },
     { label: "Max", value: "MAX" },
 ];
+/** Swatch for the theme-accent palette tile (the theme itself is resolved at render time). */
+const THEME_PALETTE_PREVIEW = [
+    "#4472C4",
+    "#ED7D31",
+    "#A5A5A5",
+    "#FFC000",
+    "#5B9BD5",
+    "#70AD47",
+];
+/** Excel's placement modes, in the order its Properties pane lists them. */
+const CHART_PLACEMENT_OPTIONS = [
+    { label: "Move and size with cells", value: "moveAndSize" },
+    { label: "Move but don't size with cells", value: "moveOnly" },
+    { label: "Don't move or size with cells", value: "absolute" },
+];
 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 }) => {
+export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getFormattedValue, }) => {
     const setChartDialogState = useSetChartEditorDialogState();
     // Close dialog
     const closeDialog = () => setChartDialogState(false);
@@ -45,8 +62,20 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
         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);
+            // chart moved or resized while the editor was open; the placement
+            // mode is the one property of the position the form owns.
+            onSubmit?.(chart
+                ? {
+                    ...values,
+                    position: {
+                        ...chart.position,
+                        overlayPosition: {
+                            ...chart.position.overlayPosition,
+                            placement: values.position.overlayPosition.placement,
+                        },
+                    },
+                }
+                : values);
             // Close dialog
             closeDialog();
         },
@@ -74,6 +103,19 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
     const isBarOrColumnBasic = basicSpec
         ? basicSpec.chartType === "bar" || basicSpec.chartType === "column"
         : false;
+    // Customize → "Chart options": each control names the chart types it
+    // applies to and the section renders when any of them does, so a chart type
+    // is never left out by a separately maintained list (pie was, until #783).
+    const chartOptionControls = {
+        binCount: basicSpec?.chartType === "histogram",
+        radarStyle: basicSpec?.chartType === "radar",
+        stockVariant: basicSpec?.chartType === "stock",
+        doughnutHoleSize: basicSpec?.chartType === "doughnut",
+        explosion: basicSpec?.chartType === "pie" || basicSpec?.chartType === "doughnut",
+        gapWidth: isBarOrColumnBasic,
+        overlap: isBarOrColumnBasic,
+    };
+    const showChartOptions = Object.values(chartOptionControls).some(Boolean);
     // Check aggregate
     const isAggregateType = basicSpec
         ? basicSpec.series.some((serie) => serie.aggregateType)
@@ -125,9 +167,23 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
                             }))))),
                 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) => {
+                    values.spec?.pivotTableId != null ? (
+                    // A PivotChart's range follows its pivot's data area; it is not
+                    // editable here (Excel greys the range on a PivotChart too).
+                    React.createElement("span", { className: "font-system text-xs text-rnc-muted-foreground" }, "Bound to PivotTable \u2014 the data range follows the pivot.")) : (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" })),
+                        }, required: true, placeholder: "Select a range", className: "mb-0" }))),
+                basicSpec ? (React.createElement(Stack, { direction: "horizontal", className: "gap-2 pb-2 items-center" },
+                    React.createElement(Button, { type: "button", variant: "outline", size: "xs", disabled: !canSwitchRowColumn(values.spec), onClick: () => {
+                            const next = switchRowColumn(values.spec, {
+                                getFormattedValue,
+                            });
+                            if (next)
+                                setFieldValue("spec", next);
+                        } }, "Switch Row/Column"),
+                    React.createElement("span", { className: "font-system text-xs text-rnc-muted-foreground" },
+                        "Series in ",
+                        inferSeriesOrientation(values.spec)))) : null,
                 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"),
@@ -376,6 +432,21 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
                     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,
+                basicSpec ? (React.createElement(React.Fragment, null,
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2 w-56" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Show empty cells as"),
+                        React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent", "aria-label": "Show empty cells as", value: values.spec.emptyCells ?? "gaps", onChange: (event) => {
+                                const emptyCells = event.target.value;
+                                setFieldValue("spec.emptyCells", emptyCells === "gaps" ? undefined : emptyCells);
+                            } },
+                            React.createElement("option", { value: "gaps" }, "Gaps"),
+                            React.createElement("option", { value: "zero" }, "Zero"),
+                            React.createElement("option", { value: "connect" }, "Connect data points with line"))),
+                    React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                        React.createElement("input", { type: "checkbox", checked: values.spec.showNaAsEmpty !== false, onChange: (e) => {
+                                setFieldValue("spec.showNaAsEmpty", e.target.checked ? undefined : false);
+                            } }),
+                        "Show #N/A as an empty cell"))) : 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
@@ -387,7 +458,68 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
                 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" }))),
+                        React.createElement(Input, { value: values?.spec.title ?? "", type: "text", onChange: (e) => setFieldValue(`spec.title`, e.target.value), className: "text-xs", placeholder: "Enter chart title" })),
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Style"),
+                        React.createElement("div", { className: "grid grid-cols-4 gap-1", role: "radiogroup" }, CHART_STYLES.map((style) => {
+                            const isActive = values.spec.chartStyle === style.id;
+                            return (React.createElement("button", { key: style.id, type: "button", role: "radio", "aria-checked": isActive, "aria-label": style.label, title: style.label, onClick: () => setFieldValue("spec", applyChartStyle(values.spec, style)), className: `flex items-end justify-center gap-0.5 h-8 rounded-sm border border-solid p-1 ${isActive
+                                    ? "border-rnc-primary"
+                                    : "border-rnc-border"}`, style: { background: style.preview.background } }, style.preview.bars.map((color, i) => (React.createElement("span", { key: `${style.id}-${i}`, className: "w-1.5 rounded-[1px]", style: { height: 6 + i * 4, background: color } })))));
+                        }))),
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Colors"),
+                        React.createElement("div", { className: "flex flex-col gap-1", role: "radiogroup" }, CHART_COLOR_PALETTES.map((palette) => {
+                            const current = values.spec.palette ?? undefined;
+                            const isActive = palette.colors
+                                ? !!current &&
+                                    current.length === palette.colors.length &&
+                                    current.every((c, i) => c === palette.colors?.[i])
+                                : !current || current.length === 0;
+                            return (React.createElement("button", { key: palette.id, type: "button", role: "radio", "aria-checked": isActive, "aria-label": palette.label, title: palette.label, onClick: () => setFieldValue("spec", applyChartColorPalette(values.spec, palette)), className: `flex items-center gap-1 rounded-sm border border-solid px-1 py-0.5 ${isActive ? "border-rnc-primary" : "border-rnc-border"}` },
+                                (palette.colors ?? THEME_PALETTE_PREVIEW).map((color, i) => (React.createElement("span", { key: `${palette.id}-${i}`, className: "h-3 w-3 rounded-[1px]", style: { background: color } }))),
+                                React.createElement("span", { className: "font-system text-xs text-rnc-text-weak" }, palette.label)));
+                        }))),
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Quick layout"),
+                        React.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: "", "aria-label": "Quick layout", onChange: (e) => {
+                                const layout = CHART_QUICK_LAYOUTS.find((entry) => String(entry.id) === e.target.value);
+                                if (layout) {
+                                    setFieldValue("spec", applyChartQuickLayout(values.spec, layout));
+                                }
+                            } },
+                            React.createElement("option", { value: "" }, "Choose a layout\u2026"),
+                            CHART_QUICK_LAYOUTS.map((layout) => (React.createElement("option", { key: layout.id, value: layout.id }, layout.label))))),
+                    React.createElement("div", null,
+                        React.createElement(Button, { type: "button", size: "xs", onClick: () => setFieldValue("spec", resetChartToMatchStyle(values.spec)) }, "Reset to match style")),
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Title font"),
+                        React.createElement("div", { className: "flex items-center gap-1 flex-wrap" },
+                            React.createElement(Input, { value: values.spec.titleTextFormat?.fontFamily ?? "", type: "text", onChange: (e) => setFieldValue("spec.titleTextFormat.fontFamily", e.target.value || undefined), className: "text-xs w-32", placeholder: "Font family", "aria-label": "Title font family" }),
+                            React.createElement(Input, { value: values.spec.titleTextFormat?.fontSize ?? "", type: "number", min: 1, onChange: (e) => setFieldValue("spec.titleTextFormat.fontSize", e.target.value === "" ? undefined : Number(e.target.value)), className: "text-xs w-16", placeholder: "Size", "aria-label": "Title font size" }),
+                            React.createElement("input", { type: "color", value: values.spec.titleTextFormat?.color ?? "#000000", onChange: (e) => setFieldValue("spec.titleTextFormat.color", e.target.value), className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Title color" }),
+                            React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                React.createElement("input", { type: "checkbox", checked: Boolean(values.spec.titleTextFormat?.bold), onChange: (e) => setFieldValue("spec.titleTextFormat.bold", e.target.checked) }),
+                                "Bold"),
+                            React.createElement("label", { className: "font-system text-xs flex items-center gap-1" },
+                                React.createElement("input", { type: "checkbox", checked: Boolean(values.spec.titleTextFormat?.italic), onChange: (e) => setFieldValue("spec.titleTextFormat.italic", e.target.checked) }),
+                                "Italic")))),
+                React.createElement(Section, { title: "Chart area" },
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Fill"),
+                        React.createElement("div", { className: "flex items-center gap-1" },
+                            React.createElement("input", { type: "color", value: values.spec.backgroundColor ?? "#FFFFFF", onChange: (e) => setFieldValue("spec.backgroundColor", e.target.value), className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Chart area fill" }),
+                            values.spec.backgroundColor ? (React.createElement(IconButton, { type: "button", onClick: () => setFieldValue("spec.backgroundColor", undefined), "aria-label": "No fill", title: "No fill" },
+                                React.createElement(CrossCircledIcon, null))) : (React.createElement("span", { className: "font-system text-xs text-rnc-text-weak" }, "Automatic")))),
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                        React.createElement("label", { className: "font-system text-sm" }, "Border"),
+                        React.createElement("div", { className: "flex items-center gap-1" },
+                            React.createElement("input", { type: "color", value: values.borderColor ?? "#D9D9D9", onChange: (e) => setFieldValue("borderColor", e.target.value), className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer", "aria-label": "Chart area border" }),
+                            values.borderColor ? (React.createElement(IconButton, { type: "button", onClick: () => setFieldValue("borderColor", undefined), "aria-label": "No border", title: "No border" },
+                                React.createElement(CrossCircledIcon, null))) : (React.createElement("span", { className: "font-system text-xs text-rnc-text-weak" }, "None")))),
+                    React.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
+                        React.createElement("input", { type: "checkbox", checked: Boolean(values.spec.roundedCorners), onChange: (e) => setFieldValue("spec.roundedCorners", e.target.checked) }),
+                        "Rounded corners")),
                 basicSpec ? (React.createElement(React.Fragment, null,
                     React.createElement(Section, { title: "Legend" },
                         React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
@@ -426,6 +558,9 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
                                 React.createElement("input", { type: "checkbox", checked: values?.spec.valueAxisOptions?.showMajorGridlines !==
                                         false, onChange: (e) => setFieldValue("spec.valueAxisOptions.showMajorGridlines", e.target.checked) }),
                                 "Gridlines"),
+                            React.createElement("label", { className: "font-system text-xs" }, "Number format"),
+                            React.createElement(Input, { value: values?.spec.valueAxisOptions?.numberFormatPattern ??
+                                    "", type: "text", onChange: (e) => setFieldValue("spec.valueAxisOptions.numberFormatPattern", e.target.value || undefined), className: "text-xs w-32", placeholder: "Linked to source" }),
                             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" },
@@ -448,7 +583,10 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
                                 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),
+                                    "Gridlines"),
+                                React.createElement("label", { className: "font-system text-xs" }, "Number format"),
+                                React.createElement(Input, { value: values?.spec.secondaryValueAxisOptions
+                                        ?.numberFormatPattern ?? "", type: "text", onChange: (e) => setFieldValue("spec.secondaryValueAxisOptions.numberFormatPattern", e.target.value || undefined), className: "text-xs w-32", placeholder: "Linked to source" }))) : 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"),
@@ -487,42 +625,42 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
                                     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" },
+                    basicSpec && showChartOptions ? (React.createElement(Section, { title: "Chart options" },
+                        chartOptionControls.binCount ? (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" },
+                        chartOptionControls.radarStyle ? (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" },
+                        chartOptionControls.stockVariant ? (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" },
+                        chartOptionControls.doughnutHoleSize ? (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" },
+                        chartOptionControls.explosion ? (React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
+                            React.createElement("label", { className: "font-system text-sm" }, "Explosion (% of radius, 0-400)"),
+                            React.createElement(Input, { type: "number", min: 0, max: 400, step: 5, "aria-label": "Explosion", value: basicSpec.explosion ?? "", onChange: (e) => setFieldValue("spec.explosion", e.target.value === ""
+                                    ? undefined
+                                    : Number(e.target.value)), className: "text-xs w-32", placeholder: "0" }))) : null,
+                        chartOptionControls.gapWidth ? (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" },
+                        chartOptionControls.overlap ? (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
@@ -542,7 +680,13 @@ export const ChartEditor = ({ chart, sheetId, onSubmit }) => {
                         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(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(Section, { title: "Properties" },
+                    React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2", role: "radiogroup" }, CHART_PLACEMENT_OPTIONS.map(({ label, value }) => (React.createElement("label", { key: value, className: "font-system text-sm flex items-center gap-1" },
+                        React.createElement("input", { type: "radio", name: "placement", value: value, checked: (values.position.overlayPosition.placement ??
+                                "moveAndSize") === value, onChange: () => setFieldValue("position.overlayPosition.placement", value) }),
+                        label)))),
+                    onRequestMoveChart && chart ? (React.createElement(Button, { type: "button", size: "xs", className: "mb-2", onClick: () => onRequestMoveChart(chart) }, "Move chart\u2026")) : 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"))));

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

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