@rowsncolumns/charts 28.0.0 → 28.1.0

package/dist/cjs/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/cjs/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/cjs/components/dialogs/pivot-chart-dialog.js

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

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