@rowsncolumns/charts 28.1.14 → 28.1.16

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

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeriesFormatFields = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var chart_range_input_1 = require("../chart-range-input");
+var data_labels_fields_1 = require("./data-labels-fields");
+var primitives_1 = require("./primitives");
+var TRENDLINE_TYPES = [
+    { value: "linear", label: "Linear" },
+    { value: "exp", label: "Exponential" },
+    { value: "log", label: "Logarithmic" },
+    { value: "poly", label: "Polynomial" },
+    { value: "power", label: "Power" },
+    { value: "movingAvg", label: "Moving average" },
+];
+var MARKER_SYMBOLS = [
+    { value: "", label: "Auto" },
+    { value: "circle", label: "Circle" },
+    { value: "square", label: "Square" },
+    { value: "diamond", label: "Diamond" },
+    { value: "triangle", label: "Triangle" },
+    { value: "x", label: "X" },
+    { value: "plus", label: "Plus" },
+    { value: "star", label: "Star" },
+    { value: "dash", label: "Dash" },
+    { value: "dot", label: "Dot" },
+    { value: "none", label: "None" },
+];
+/**
+ * Excel's Format Data Series for one series: axis, trendline (every
+ * option of Format Trendline), error bars (Format Error Bars), fill
+ * (gradient / no fill / per-point colours / invert if negative), markers
+ * and the series' own data labels. Only the groups the chart type has
+ * (`capabilities`) render.
+ */
+var SeriesFormatFields = function (_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var sheetId = _a.sheetId, series = _a.series, capabilities = _a.capabilities, onChange = _a.onChange;
+    var trendline = (_b = series.trendlines) === null || _b === void 0 ? void 0 : _b[0];
+    var setTrendline = function (patch) {
+        return onChange({ trendlines: [tslib_1.__assign(tslib_1.__assign({}, (trendline !== null && trendline !== void 0 ? trendline : { type: "linear" })), patch)] });
+    };
+    var errorBars = series.errorBars;
+    var setErrorBars = function (patch) {
+        return onChange({ errorBars: tslib_1.__assign(tslib_1.__assign({}, (errorBars !== null && errorBars !== void 0 ? errorBars : {})), patch) });
+    };
+    var pointColors = (_c = series.dataPointColors) !== null && _c !== void 0 ? _c : [];
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-2 pt-2 border border-rnc-border border-solid mt-2 p-2" },
+        capabilities.hasSecondaryAxis ? (react_1.default.createElement(primitives_1.CheckboxField, { small: false, label: "Plot on secondary axis", checked: Boolean(series.useSecondaryAxis), onChange: function (on) { return onChange({ useSecondaryAxis: on || undefined }); } })) : null,
+        capabilities.hasTrendlines ? (react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+            react_1.default.createElement(primitives_1.CheckboxField, { small: false, label: "Trendline", checked: Boolean(trendline), onChange: function (on) {
+                    return onChange({ trendlines: on ? [trendline !== null && trendline !== void 0 ? trendline : { type: "linear" }] : undefined });
+                } }),
+            trendline ? (react_1.default.createElement("div", { className: "pl-4 flex flex-col gap-1" },
+                react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                    react_1.default.createElement(primitives_1.SelectField, { label: "Type", ariaLabel: "Trendline type", value: (_d = trendline.type) !== null && _d !== void 0 ? _d : "linear", options: TRENDLINE_TYPES, onChange: function (type) {
+                            var _a, _b;
+                            return setTrendline(tslib_1.__assign(tslib_1.__assign({ type: type }, (type === "poly" ? { order: (_a = trendline.order) !== null && _a !== void 0 ? _a : 2 } : {})), (type === "movingAvg" ? { period: (_b = trendline.period) !== null && _b !== void 0 ? _b : 2 } : {})));
+                        } }),
+                    trendline.type === "poly" ? (react_1.default.createElement(primitives_1.NumberField, { label: "Order", ariaLabel: "Trendline order", value: trendline.order, min: 2, max: 6, onChange: function (order) { return setTrendline({ order: order }); }, placeholder: "2" })) : null,
+                    trendline.type === "movingAvg" ? (react_1.default.createElement(primitives_1.NumberField, { label: "Period", ariaLabel: "Trendline period", value: trendline.period, min: 2, onChange: function (period) { return setTrendline({ period: period }); }, placeholder: "2" })) : null,
+                    react_1.default.createElement(primitives_1.TextField, { label: "Name", ariaLabel: "Trendline name", value: trendline.name, onChange: function (name) { return setTrendline({ name: name }); }, placeholder: "Automatic" }),
+                    react_1.default.createElement(primitives_1.ColorField, { label: "Color", ariaLabel: "Trendline color", value: trendline.color, onChange: function (color) { return setTrendline({ color: color }); } })),
+                trendline.type !== "movingAvg" ? (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                    react_1.default.createElement(primitives_1.NumberField, { label: "Forecast forward", value: trendline.forecastForward, min: 0, onChange: function (forecastForward) { return setTrendline({ forecastForward: forecastForward }); }, placeholder: "0" }),
+                    react_1.default.createElement(primitives_1.NumberField, { label: "Forecast backward", value: trendline.forecastBackward, min: 0, onChange: function (forecastBackward) { return setTrendline({ forecastBackward: forecastBackward }); }, placeholder: "0" }))) : null,
+                trendline.type !== "movingAvg" ? (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(primitives_1.CheckboxField, { label: "Display equation on chart", checked: Boolean(trendline.showEquation), onChange: function (showEquation) {
+                            return setTrendline({ showEquation: showEquation || undefined });
+                        } }),
+                    react_1.default.createElement(primitives_1.CheckboxField, { label: "Display R-squared value on chart", checked: Boolean(trendline.showRSquared), onChange: function (showRSquared) {
+                            return setTrendline({ showRSquared: showRSquared || undefined });
+                        } }))) : null)) : null)) : null,
+        capabilities.hasErrorBars ? (react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+            react_1.default.createElement(primitives_1.CheckboxField, { small: false, label: "Error bars", checked: Boolean(errorBars), onChange: function (on) {
+                    return onChange({
+                        errorBars: on ? errorBars !== null && errorBars !== void 0 ? errorBars : { valueType: "percentage", value: 5 } : undefined,
+                    });
+                } }),
+            errorBars ? (react_1.default.createElement("div", { className: "pl-4 flex flex-col gap-1" },
+                react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+                    react_1.default.createElement(primitives_1.SelectField, { label: "Direction", ariaLabel: "Error bar direction", value: (_e = errorBars.barType) !== null && _e !== void 0 ? _e : "both", options: [
+                            { value: "both", label: "Both" },
+                            { value: "plus", label: "Plus" },
+                            { value: "minus", label: "Minus" },
+                        ], onChange: function (barType) { return setErrorBars({ barType: barType }); } }),
+                    capabilities.category === "bubble" ? (react_1.default.createElement(primitives_1.SelectField, { label: "Axis", ariaLabel: "Error bar axis", value: (_f = errorBars.direction) !== null && _f !== void 0 ? _f : "y", options: [
+                            { value: "y", label: "Vertical" },
+                            { value: "x", label: "Horizontal" },
+                        ], onChange: function (direction) { return setErrorBars({ direction: direction }); } })) : null,
+                    react_1.default.createElement(primitives_1.SelectField, { label: "Error amount", ariaLabel: "Error bar value type", value: (_g = errorBars.valueType) !== null && _g !== void 0 ? _g : "percentage", options: [
+                            { value: "fixedVal", label: "Fixed value" },
+                            { value: "percentage", label: "Percentage" },
+                            { value: "stdDev", label: "Standard deviation(s)" },
+                            { value: "stdErr", label: "Standard error" },
+                            { value: "custom", label: "Custom" },
+                        ], onChange: function (valueType) { return setErrorBars({ valueType: valueType }); } }),
+                    errorBars.valueType !== "stdErr" && errorBars.valueType !== "custom" ? (react_1.default.createElement(primitives_1.NumberField, { label: "Value", ariaLabel: "Error bar value", value: errorBars.value, onChange: function (value) { return setErrorBars({ value: value }); }, placeholder: "5" })) : null),
+                errorBars.valueType === "custom" ? (react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+                    react_1.default.createElement("label", { className: "font-system text-xs" }, "Positive error value"),
+                    react_1.default.createElement(chart_range_input_1.ChartRangeInput, { sheetId: sheetId, range: (_h = errorBars.plusRange) !== null && _h !== void 0 ? _h : undefined, onChangeRange: function (plusRange) { return setErrorBars({ plusRange: plusRange }); }, placeholder: "Select a range", className: "mb-0" }),
+                    react_1.default.createElement("label", { className: "font-system text-xs" }, "Negative error value"),
+                    react_1.default.createElement(chart_range_input_1.ChartRangeInput, { sheetId: sheetId, range: (_j = errorBars.minusRange) !== null && _j !== void 0 ? _j : undefined, onChangeRange: function (minusRange) { return setErrorBars({ minusRange: minusRange }); }, placeholder: "Select a range", className: "mb-0" }))) : null,
+                react_1.default.createElement(primitives_1.CheckboxField, { label: "No end cap", checked: Boolean(errorBars.noEndCap), onChange: function (noEndCap) { return setErrorBars({ noEndCap: noEndCap || undefined }); } }))) : null)) : null,
+        capabilities.hasSeriesFill ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(primitives_1.CheckboxField, { small: false, label: "Gradient fill", checked: Boolean(series.gradient), onChange: function (on) {
+                    var _a, _b;
+                    return onChange({
+                        gradient: on
+                            ? (_a = series.gradient) !== null && _a !== void 0 ? _a : {
+                                type: "linear",
+                                degree: 90,
+                                stops: [
+                                    { position: 0, color: (_b = series.color) !== null && _b !== void 0 ? _b : "#4285F4" },
+                                    { position: 1, color: "#FFFFFF" },
+                                ],
+                            }
+                            : undefined,
+                    });
+                } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { small: false, label: "Transparent (no fill)", checked: Boolean(series.noFill), onChange: function (noFill) { return onChange({ noFill: noFill || undefined }); } }))) : null,
+        capabilities.hasInvertIfNegative ? (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.CheckboxField, { small: false, label: "Invert if negative", checked: Boolean(series.invertIfNegative), onChange: function (on) { return onChange({ invertIfNegative: on || undefined }); } }),
+            series.invertIfNegative ? (react_1.default.createElement(primitives_1.ColorField, { label: "Negative fill", ariaLabel: "Negative fill", value: series.negativeColor, fallback: "#FFFFFF", onChange: function (negativeColor) { return onChange({ negativeColor: negativeColor }); }, onClear: function () { return onChange({ negativeColor: undefined }); } })) : null)) : null,
+        capabilities.hasMarkers ? (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.SelectField, { label: "Marker", ariaLabel: "Marker", value: (_l = (_k = series.marker) === null || _k === void 0 ? void 0 : _k.symbol) !== null && _l !== void 0 ? _l : "", options: MARKER_SYMBOLS, onChange: function (symbol) { var _a; return onChange({ marker: tslib_1.__assign(tslib_1.__assign({}, ((_a = series.marker) !== null && _a !== void 0 ? _a : {})), { symbol: symbol || undefined }) }); } }),
+            react_1.default.createElement(primitives_1.NumberField, { label: "Marker size", ariaLabel: "Marker size", value: (_m = series.marker) === null || _m === void 0 ? void 0 : _m.size, min: 1, onChange: function (size) { var _a; return onChange({ marker: tslib_1.__assign(tslib_1.__assign({}, ((_a = series.marker) !== null && _a !== void 0 ? _a : {})), { size: size }) }); }, placeholder: "6" }),
+            react_1.default.createElement(primitives_1.ColorField, { label: "Marker color", ariaLabel: "Marker color", value: (_o = series.marker) === null || _o === void 0 ? void 0 : _o.color, onChange: function (color) { var _a; return onChange({ marker: tslib_1.__assign(tslib_1.__assign({}, ((_a = series.marker) !== null && _a !== void 0 ? _a : {})), { color: color }) }); }, onClear: function () { var _a; return onChange({ marker: tslib_1.__assign(tslib_1.__assign({}, ((_a = series.marker) !== null && _a !== void 0 ? _a : {})), { color: undefined }) }); } }))) : null,
+        capabilities.hasPointColors ? (react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+            react_1.default.createElement("label", { className: "font-system text-sm" }, "Point colors"),
+            pointColors.map(function (point, index) { return (react_1.default.createElement("div", { className: "flex items-center gap-2", key: "".concat(index, "-").concat(point.idx) },
+                react_1.default.createElement(ui_1.Input, { type: "number", min: 1, value: point.idx + 1, "aria-label": "Point ".concat(index + 1, " number"), onChange: function (e) {
+                        var next = tslib_1.__spreadArray([], tslib_1.__read(pointColors), false);
+                        next[index] = tslib_1.__assign(tslib_1.__assign({}, point), { idx: Math.max(0, Math.round(Number(e.target.value) || 1) - 1) });
+                        onChange({ dataPointColors: next });
+                    }, className: "text-xs w-16" }),
+                react_1.default.createElement("input", { type: "color", value: point.color, "aria-label": "Point ".concat(index + 1, " color"), onChange: function (e) {
+                        var next = tslib_1.__spreadArray([], tslib_1.__read(pointColors), false);
+                        next[index] = tslib_1.__assign(tslib_1.__assign({}, point), { color: e.target.value });
+                        onChange({ dataPointColors: next });
+                    }, className: "h-6 w-8 p-0 border border-rnc-border rounded-sm bg-transparent cursor-pointer" }),
+                react_1.default.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline", onClick: function () {
+                        return onChange({
+                            dataPointColors: pointColors.filter(function (_, i) { return i !== index; }).length
+                                ? pointColors.filter(function (_, i) { return i !== index; })
+                                : undefined,
+                        });
+                    } }, "Remove"))); }),
+            react_1.default.createElement(ui_1.Stack, { direction: "horizontal", className: "gap-1" },
+                react_1.default.createElement(ui_1.Button, { variant: "link", type: "button", className: "cursor-pointer", onClick: function () {
+                        var _a;
+                        return onChange({
+                            dataPointColors: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(pointColors), false), [
+                                {
+                                    idx: pointColors.length ? pointColors[pointColors.length - 1].idx + 1 : 0,
+                                    color: (_a = series.color) !== null && _a !== void 0 ? _a : "#4285F4",
+                                },
+                            ], false),
+                        });
+                    } }, "Add point color")))) : null,
+        capabilities.hasDataLabels ? (react_1.default.createElement(data_labels_fields_1.DataLabelsFields, { perSeries: true, value: series.dataLabels, capabilities: capabilities, onChange: function (dataLabels) { return onChange({ dataLabels: dataLabels }); } })) : null));
+};
+exports.SeriesFormatFields = SeriesFormatFields;

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

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

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

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

package/dist/cjs/components/editors/fields/series-name-field.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeriesNameField = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importDefault(require("react"));
+var chart_range_input_1 = require("../chart-range-input");
+/**
+ * Excel's "Series name": either text, or a link to a header cell
+ * (`dataLabelSource`, #1100). A linked name shows the cell's current text
+ * and the cell it comes from; typing a name replaces the link with the
+ * literal, picking a cell links it.
+ */
+var SeriesNameField = function (_a) {
+    var _b, _c;
+    var sheetId = _a.sheetId, series = _a.series, getFormattedValue = _a.getFormattedValue, onChange = _a.onChange;
+    var source = (_b = series.dataLabelSource) !== null && _b !== void 0 ? _b : undefined;
+    var linkedText = source
+        ? getFormattedValue === null || getFormattedValue === void 0 ? void 0 : getFormattedValue(source.sheetId, source.startRowIndex, source.startColumnIndex)
+        : undefined;
+    return (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
+        react_1.default.createElement("label", { className: "font-system text-sm" }, "Name"),
+        react_1.default.createElement(ui_1.Input, { value: (_c = (source ? linkedText !== null && linkedText !== void 0 ? linkedText : series.dataLabel : series.dataLabel)) !== null && _c !== void 0 ? _c : "", type: "text", onChange: function (e) {
+                return onChange({ dataLabel: e.target.value, dataLabelSource: undefined });
+            }, className: "text-xs", placeholder: "Series name", "aria-label": "Series name" }),
+        react_1.default.createElement("label", { className: "font-system text-xs text-rnc-muted-foreground" }, source ? "Linked to cell" : "Or link to a cell"),
+        react_1.default.createElement(chart_range_input_1.ChartRangeInput, { sheetId: sheetId, range: source, onChangeRange: function (range) {
+                var _a;
+                var cell = tslib_1.__assign(tslib_1.__assign({}, range), { endRowIndex: range.startRowIndex, endColumnIndex: range.startColumnIndex });
+                onChange({
+                    dataLabel: (_a = getFormattedValue === null || getFormattedValue === void 0 ? void 0 : getFormattedValue(cell.sheetId, cell.startRowIndex, cell.startColumnIndex)) !== null && _a !== void 0 ? _a : series.dataLabel,
+                    dataLabelSource: cell,
+                });
+            }, placeholder: "Header cell", className: "mb-0" })));
+};
+exports.SeriesNameField = SeriesNameField;

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

@@ -0,0 +1,20 @@
+import type { ChartTextFormat } from "@rowsncolumns/spreadsheet";
+import React from "react";
+/**
+ * Font family / size / colour / bold / italic / underline / strikethrough
+ * of one text element — the chart title, the legend, an axis or the data
+ * labels (`ChartTextFormat`, OOXML `<c:txPr>`).
+ */
+export declare const TextFormatFields: ({ label, value, onChange, collapsible, ariaLabels, }: {
+    label: string;
+    value: ChartTextFormat | null | undefined;
+    onChange(next: ChartTextFormat | undefined): void;
+    /** Mount the fields behind a "Font…" toggle (secondary text elements). */
+    collapsible?: boolean;
+    ariaLabels?: {
+        family?: string;
+        size?: string;
+        color?: string;
+    };
+}) => React.JSX.Element;
+//# sourceMappingURL=text-format-fields.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text-format-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/text-format-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAEjE,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,sDAM9B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1C,QAAQ,CAAC,IAAI,EAAE,eAAe,GAAG,SAAS,GAAG,IAAI,CAAC;IAClD,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjE,sBA6EA,CAAC"}

package/dist/cjs/components/editors/fields/text-format-fields.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFormatFields = void 0;
+var tslib_1 = require("tslib");
+var ui_1 = require("@rowsncolumns/ui");
+var react_1 = tslib_1.__importStar(require("react"));
+var primitives_1 = require("./primitives");
+/**
+ * Font family / size / colour / bold / italic / underline / strikethrough
+ * of one text element — the chart title, the legend, an axis or the data
+ * labels (`ChartTextFormat`, OOXML `<c:txPr>`).
+ */
+var TextFormatFields = function (_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var label = _a.label, value = _a.value, onChange = _a.onChange, _h = _a.collapsible, collapsible = _h === void 0 ? false : _h, ariaLabels = _a.ariaLabels;
+    var _j = tslib_1.__read((0, react_1.useState)(!collapsible), 2), open = _j[0], setOpen = _j[1];
+    if (collapsible && !open) {
+        return (react_1.default.createElement("div", { className: "pb-2" },
+            react_1.default.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline", onClick: function () { return setOpen(true); } },
+                label,
+                "\u2026")));
+    }
+    var set = function (patch) {
+        var next = tslib_1.__assign(tslib_1.__assign({}, (value !== null && value !== void 0 ? value : {})), patch);
+        var entries = Object.entries(next).filter(function (_a) {
+            var _b = tslib_1.__read(_a, 2), v = _b[1];
+            return v !== undefined && v !== null && v !== false && v !== "";
+        });
+        onChange(entries.length ? Object.fromEntries(entries) : undefined);
+    };
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-1 pb-2" },
+        react_1.default.createElement("label", { className: "font-system text-sm" }, label),
+        react_1.default.createElement("div", { className: "flex items-center gap-1 flex-wrap" },
+            react_1.default.createElement(ui_1.Input, { value: (_b = value === null || value === void 0 ? void 0 : value.fontFamily) !== null && _b !== void 0 ? _b : "", type: "text", onChange: function (e) { return set({ fontFamily: e.target.value || undefined }); }, className: "text-xs w-32", placeholder: "Font family", "aria-label": (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.family) !== null && _c !== void 0 ? _c : "".concat(label, " family") }),
+            react_1.default.createElement(ui_1.Input, { value: (_d = value === null || value === void 0 ? void 0 : value.fontSize) !== null && _d !== void 0 ? _d : "", type: "number", min: 1, onChange: function (e) {
+                    return set({
+                        fontSize: e.target.value === "" ? undefined : Number(e.target.value),
+                    });
+                }, className: "text-xs w-16", placeholder: "Size", "aria-label": (_e = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.size) !== null && _e !== void 0 ? _e : "".concat(label, " size") }),
+            react_1.default.createElement("input", { type: "color", value: (_f = value === null || value === void 0 ? void 0 : value.color) !== null && _f !== void 0 ? _f : "#000000", onChange: function (e) { return set({ color: e.target.value }); }, className: primitives_1.COLOR_CLASS, "aria-label": (_g = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.color) !== null && _g !== void 0 ? _g : "".concat(label, " color") }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Bold", checked: Boolean(value === null || value === void 0 ? void 0 : value.bold), onChange: function (bold) { return set({ bold: bold }); } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Italic", checked: Boolean(value === null || value === void 0 ? void 0 : value.italic), onChange: function (italic) { return set({ italic: italic }); } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Underline", checked: Boolean(value === null || value === void 0 ? void 0 : value.underline), onChange: function (underline) { return set({ underline: underline }); } }),
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Strikethrough", checked: Boolean(value === null || value === void 0 ? void 0 : value.strikethrough), onChange: function (strikethrough) { return set({ strikethrough: strikethrough }); } }))));
+};
+exports.TextFormatFields = TextFormatFields;

package/dist/cjs/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;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"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAwR3D,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"}

package/dist/cjs/config.js

@@ -236,6 +236,9 @@ var HIERARCHY_CHART_TYPES = [
 ];
 var STATISTICAL_CHART_TYPES = [
     ["Histogram", { chartType: "histogram" }],
+    // Excel's Pareto: a histogram with its bins sorted descending plus a
+    // cumulative-% line (sourceChartType PARETO, the import token).
+    ["Pareto", { chartType: "histogram", sourceChartType: "PARETO" }],
     ["Box & Whisker", { chartType: "boxplot" }],
 ];
 var FLOW_CHART_TYPES = [

package/dist/cjs/interface/create-chart.d.ts

@@ -1,5 +1,6 @@
-import { CellInterface, SelectionArea } from "@rowsncolumns/grid";
-import { type CellData, SelectionAttributes, EmbeddedChart } from "@rowsncolumns/spreadsheet";
+import type { CellInterface, SelectionArea } from "@rowsncolumns/grid";
+import type { EmbeddedChart, SelectionAttributes } from "@rowsncolumns/spreadsheet";
+import { type CellData } from "@rowsncolumns/spreadsheet";
 import type { UseOnCreateChartProps } from "../hooks/use-on-create-chart";
 /**
  * Ensures endIndex is at least minValue.

package/dist/cjs/interface/create-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-chart.d.ts","sourceRoot":"","sources":["../../../interface/create-chart.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EACL,KAAK,QAAQ,EACb,mBAAmB,EACnB,aAAa,EAKd,MAAM,2BAA2B,CAAC;AAInC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAiB1E;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,GAAG,SAAS,EAC5B,UAAU,MAAM,KACf,MAAkF,CAAC;AAEtF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,EAAE,8FAM7C,qBAAqB,CAAC,CAAC,CAAC,MAEvB,SAAS,MAAM,EACf,YAAY,aAAa,EACzB,YAAY,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,YAAY,aAAa,kBAuH5B,CAAC"}
+{"version":3,"file":"create-chart.d.ts","sourceRoot":"","sources":["../../../interface/create-chart.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,KAAK,EAIV,aAAa,EACb,mBAAmB,EACR,MAAM,2BAA2B,CAAC;AAC/C,OAAO,EACL,KAAK,QAAQ,EACd,MAAM,2BAA2B,CAAC;AAInC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,8BAA8B,CAAC;AAiB1E;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAC9B,UAAU,MAAM,GAAG,SAAS,EAC5B,UAAU,MAAM,KACf,MAAkF,CAAC;AAEtF,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,QAAQ,EAAE,8FAM7C,qBAAqB,CAAC,CAAC,CAAC,MAEvB,SAAS,MAAM,EACf,YAAY,aAAa,EACzB,YAAY,aAAa,CAAC,mBAAmB,CAAC,EAAE,EAChD,YAAY,aAAa,kBA8H5B,CAAC"}

package/dist/cjs/interface/create-chart.js

@@ -37,6 +37,13 @@ var createChart = function (_a) {
             ? [
                 {
                     dataLabel: (_a = getFormattedValue(sheetId, lastSelection.range.startRowIndex, lastSelection.range.startColumnIndex)) !== null && _a !== void 0 ? _a : "",
+                    dataLabelSource: {
+                        sheetId: sheetId,
+                        startRowIndex: lastSelection.range.startRowIndex,
+                        endRowIndex: lastSelection.range.startRowIndex,
+                        startColumnIndex: lastSelection.range.startColumnIndex,
+                        endColumnIndex: lastSelection.range.startColumnIndex,
+                    },
                     sources: categoryAxis,
                     aggregateType: "COUNT",
                 },

package/dist/cjs/plotly/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA8ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAkqFjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAoCA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AA+ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA2rFjB,CAAC"}