@rowsncolumns/charts 28.1.17 → 28.1.19

package/dist/cjs/basic-chart/helpers.d.ts

@@ -1,10 +1,14 @@
 import type { EmbeddedChart } from "@rowsncolumns/spreadsheet";
 export declare const chartTypeToEchartsType: (type: EmbeddedChart["spec"]["chartType"]) => "bar" | "line" | "pie" | "radar" | "boxplot" | "funnel" | "treemap" | "sunburst" | "scatter" | "map";
+export declare const mapMarkerSymbolToEcharts: (symbol: string | undefined | null) => string | undefined;
 /**
- * Map OOXML `<c:marker><c:symbol>` values to echarts symbol names.
- * Returns undefined for "auto" / unknown — caller defaults to "circle".
+ * The marker Excel draws for a "Line with Markers" series that names no
+ * symbol of its own (`<c:lineChart><c:marker val="1"/>` with no
+ * `<c:ser><c:marker>`): the automatic cycle by series index — diamond,
+ * square, triangle, x, star, circle, plus (LV-05).
  */
-export declare const mapMarkerSymbolToEcharts: (symbol: string | undefined | null) => string | undefined;
+export declare const EXCEL_AUTOMATIC_MARKERS: readonly ["diamond", "square", "triangle", "x", "star", "circle", "plus"];
+export declare const automaticMarkerSymbol: (seriesIndex: number) => "x" | "plus" | "circle" | "square" | "diamond" | "triangle" | "star";
 /** Pie and doughnut — the pie-family types whose points are slices. */
 export declare const isCircularChartType: (type: EmbeddedChart["spec"]["chartType"] | undefined) => boolean;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,yGA6DzC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,wBAAwB,GACnC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SAuBX,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,KACnD,OAAgD,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,aAAa,CAAC,OAAO,CAAC,KAC7B,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;aASzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAmBjE,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,sBAAsB,GACjC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,yGA6DzC,CAAC;AAcF,eAAO,MAAM,wBAAwB,GACnC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SAqBX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,2EAQ1B,CAAC;AAEX,eAAO,MAAM,qBAAqB,GAAI,aAAa,MAAM,yEAKtD,CAAC;AAEJ,uEAAuE;AACvE,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,GAAG,SAAS,KACnD,OAAgD,CAAC;AAEpD;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,aAAa,CAAC,OAAO,CAAC,KAC7B,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;aASzC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAmBjE,CAAC"}

package/dist/cjs/basic-chart/helpers.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.showXAxis = exports.getEchartsSeriesStyle = exports.circularLegendEntries = exports.isCircularChartType = exports.mapMarkerSymbolToEcharts = exports.chartTypeToEchartsType = void 0;
+exports.showXAxis = exports.getEchartsSeriesStyle = exports.circularLegendEntries = exports.isCircularChartType = exports.automaticMarkerSymbol = exports.EXCEL_AUTOMATIC_MARKERS = exports.mapMarkerSymbolToEcharts = exports.chartTypeToEchartsType = void 0;
 var tslib_1 = require("tslib");
 var chartTypeToEchartsType = function (type) {
     switch (type) {
@@ -55,6 +55,13 @@ exports.chartTypeToEchartsType = chartTypeToEchartsType;
  * Map OOXML `<c:marker><c:symbol>` values to echarts symbol names.
  * Returns undefined for "auto" / unknown — caller defaults to "circle".
  */
+/** Excel's x / plus / asterisk / dash markers as echarts path symbols (filled outlines). */
+var MARKER_PATHS = {
+    x: "path://M2,0L5,3L8,0L10,2L7,5L10,8L8,10L5,7L2,10L0,8L3,5L0,2Z",
+    plus: "path://M4,0H6V4H10V6H6V10H4V6H0V4H4Z",
+    star: "path://M4.3,0H5.7V3.8L9,1.9L9.7,3.1L6.4,5L9.7,6.9L9,8.1L5.7,6.2V10H4.3V6.2L1,8.1L0.3,6.9L3.6,5L0.3,3.1L1,1.9L4.3,3.8Z",
+    dash: "path://M0,4H10V6H0Z",
+};
 var mapMarkerSymbolToEcharts = function (symbol) {
     switch (symbol) {
         case "circle":
@@ -68,11 +75,9 @@ var mapMarkerSymbolToEcharts = function (symbol) {
             return "triangle";
         case "x":
         case "plus":
-            return "pin";
         case "star":
-            return "diamond";
         case "dash":
-            return "rect";
+            return MARKER_PATHS[symbol];
         case "none":
             return "none";
         default:
@@ -80,6 +85,27 @@ var mapMarkerSymbolToEcharts = function (symbol) {
     }
 };
 exports.mapMarkerSymbolToEcharts = mapMarkerSymbolToEcharts;
+/**
+ * The marker Excel draws for a "Line with Markers" series that names no
+ * symbol of its own (`<c:lineChart><c:marker val="1"/>` with no
+ * `<c:ser><c:marker>`): the automatic cycle by series index — diamond,
+ * square, triangle, x, star, circle, plus (LV-05).
+ */
+exports.EXCEL_AUTOMATIC_MARKERS = [
+    "diamond",
+    "square",
+    "triangle",
+    "x",
+    "star",
+    "circle",
+    "plus",
+];
+var automaticMarkerSymbol = function (seriesIndex) {
+    return exports.EXCEL_AUTOMATIC_MARKERS[((seriesIndex % exports.EXCEL_AUTOMATIC_MARKERS.length) +
+        exports.EXCEL_AUTOMATIC_MARKERS.length) %
+        exports.EXCEL_AUTOMATIC_MARKERS.length];
+};
+exports.automaticMarkerSymbol = automaticMarkerSymbol;
 /** Pie and doughnut — the pie-family types whose points are slices. */
 var isCircularChartType = function (type) { return type === "pie" || type === "doughnut"; };
 exports.isCircularChartType = isCircularChartType;

package/dist/cjs/basic-chart/index.d.ts

@@ -1,5 +1,12 @@
 import React from "react";
 import type { EChartComponentProps } from "../types";
+/**
+ * Excel's chart area outline: a thin Text 1 at 15% line (#D9D9D9), no drop
+ * shadow (LV-05). A chart with its own Format Chart Area border
+ * (`EmbeddedChart.borderColor`) is outlined by the grid's embed frame
+ * instead, so it gets none here.
+ */
+export declare const chartFrameBorder: (chart: EChartComponentProps["chart"], isDarkMode?: boolean) => string | undefined;
 export declare const ChartComponent: (props: EChartComponentProps) => React.JSX.Element;
 export default ChartComponent;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../basic-chart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGrD,eAAO,MAAM,cAAc,GAAI,OAAO,oBAAoB,sBAMzD,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../basic-chart/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAGrD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAC3B,OAAO,oBAAoB,CAAC,OAAO,CAAC,EACpC,aAAa,OAAO,KACnB,MAAM,GAAG,SAGyD,CAAC;AAEtE,eAAO,MAAM,cAAc,GAAI,OAAO,oBAAoB,sBAazD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/cjs/basic-chart/index.js

@@ -1,11 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChartComponent = void 0;
+exports.ChartComponent = exports.chartFrameBorder = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var basic_chart_1 = require("./basic-chart");
+/**
+ * Excel's chart area outline: a thin Text 1 at 15% line (#D9D9D9), no drop
+ * shadow (LV-05). A chart with its own Format Chart Area border
+ * (`EmbeddedChart.borderColor`) is outlined by the grid's embed frame
+ * instead, so it gets none here.
+ */
+var chartFrameBorder = function (chart, isDarkMode) {
+    return (chart === null || chart === void 0 ? void 0 : chart.borderColor)
+        ? undefined
+        : "1px solid ".concat(isDarkMode ? "rgba(255,255,255,0.2)" : "#D9D9D9");
+};
+exports.chartFrameBorder = chartFrameBorder;
 var ChartComponent = function (props) {
-    return (react_1.default.createElement("div", { className: "shadow-lg bg-rnc-background flex-1 flex break-words flex-col" },
+    return (react_1.default.createElement("div", { className: "bg-rnc-background flex-1 flex break-words flex-col", 
+        // An inset outline: drawn over the plot's edge without shrinking it.
+        style: {
+            outline: (0, exports.chartFrameBorder)(props.chart, props.isDarkMode),
+            outlineOffset: -1,
+        } },
         react_1.default.createElement(basic_chart_1.BasicChart, tslib_1.__assign({}, props))));
 };
 exports.ChartComponent = ChartComponent;

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

@@ -16,7 +16,13 @@ type ChartEditorProps = {
      * from the data range. Without it the switched series are unnamed.
      */
     getFormattedValue?: ChartCellLabelGetter;
+    /**
+     * Mirror of the renderer's `enable3D`: `false` hides the presets that
+     * render through echarts-gl (3-D Column / Bar / Line / Area / Surface).
+     * An existing 3-D spec keeps its `sourceChartType`. Default `true`.
+     */
+    enable3D?: boolean;
 };
-export declare const ChartEditor: ({ chart, sheetId, onSubmit, onRequestMoveChart, getFormattedValue, }: ChartEditorProps) => React.JSX.Element;
+export declare const ChartEditor: ({ chart, sheetId, onSubmit, onRequestMoveChart, getFormattedValue, enable3D, }: 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,EAGd,MAAM,2BAA2B,CAAC;AAwBnC,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAEL,KAAK,oBAAoB,EAG1B,MAAM,+BAA+B,CAAC;AAuDvC,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,sBAkhClB,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;AAwBnC,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAEL,KAAK,oBAAoB,EAG1B,MAAM,+BAA+B,CAAC;AAwDvC,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;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAuBF,eAAO,MAAM,WAAW,GAAI,gFAOzB,gBAAgB,sBAujClB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -18,6 +18,7 @@ var chart_styles_1 = require("../../utils/chart-styles");
 var chart_editor_capabilities_1 = require("./chart-editor-capabilities");
 var chart_range_input_1 = require("./chart-range-input");
 var axis_options_fields_1 = require("./fields/axis-options-fields");
+var chart_elements_fields_1 = require("./fields/chart-elements-fields");
 var chart_type_options_1 = require("./fields/chart-type-options");
 var data_labels_fields_1 = require("./fields/data-labels-fields");
 var series_format_fields_1 = require("./fields/series-format-fields");
@@ -55,9 +56,10 @@ var Section = function (_a) {
         react_1.default.createElement("div", { className: "flex flex-col gap-2 pb-3" }, children)));
 };
 var ChartEditor = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
-    var chart = _a.chart, sheetId = _a.sheetId, onSubmit = _a.onSubmit, onRequestMoveChart = _a.onRequestMoveChart, getFormattedValue = _a.getFormattedValue;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
+    var chart = _a.chart, sheetId = _a.sheetId, onSubmit = _a.onSubmit, onRequestMoveChart = _a.onRequestMoveChart, getFormattedValue = _a.getFormattedValue, enable3D = _a.enable3D;
     var setChartDialogState = (0, editing_chart_atom_1.useSetChartEditorDialogState)();
+    var chartTypes = (0, config_1.getChartTypes)({ enable3D: enable3D });
     // Close dialog
     var closeDialog = function () { return setChartDialogState(false); };
     // Keyed on chart identity so a position sync (move/resize while the
@@ -75,7 +77,7 @@ var ChartEditor = function (_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [chart === null || chart === void 0 ? void 0 : chart.chartId]);
     // Formik
-    var _1 = (0, formik_1.useFormik)({
+    var _2 = (0, formik_1.useFormik)({
         initialValues: initialValues,
         enableReinitialize: true,
         onSubmit: function (values) {
@@ -87,7 +89,7 @@ var ChartEditor = function (_a) {
             // Close dialog
             closeDialog();
         },
-    }), handleSubmit = _1.handleSubmit, setFieldValue = _1.setFieldValue, resetForm = _1.resetForm, values = _1.values;
+    }), handleSubmit = _2.handleSubmit, setFieldValue = _2.setFieldValue, resetForm = _2.resetForm, values = _2.values;
     var onCancelForm = function () {
         resetForm();
         closeDialog();
@@ -232,7 +234,7 @@ var ChartEditor = function (_a) {
                                 react_1.default.createElement(ui_1.DropdownRightSlot, null,
                                     react_1.default.createElement(icons_1.TriangleDownIcon, null)))),
                         react_1.default.createElement(ui_1.DropdownMenuPortal, null,
-                            react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", sideOffset: 0 }, config_1.CHART_TYPES.map(function (_a) {
+                            react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", sideOffset: 0 }, chartTypes.map(function (_a) {
                                 var _b = tslib_1.__read(_a, 2), category = _b[0], types = _b[1];
                                 return (react_1.default.createElement(ui_1.DropdownMenuSub, { key: category },
                                     react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
@@ -339,10 +341,15 @@ var ChartEditor = function (_a) {
                 react_1.default.createElement(Section, { title: "Chart style", defaultOpen: true },
                     react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Chart title"),
-                        react_1.default.createElement(ui_1.Input, { value: (_r = values === null || values === void 0 ? void 0 : values.spec.title) !== null && _r !== void 0 ? _r : "", type: "text", onChange: function (e) { return setFieldValue("spec.title", e.target.value); }, className: "text-xs", placeholder: "Enter chart title" })),
+                        react_1.default.createElement(ui_1.Input, { value: (_r = values === null || values === void 0 ? void 0 : values.spec.title) !== null && _r !== void 0 ? _r : "", type: "text", onChange: function (e) { return setFieldValue("spec.title", e.target.value); }, className: "text-xs", placeholder: "Enter chart title" }),
+                        react_1.default.createElement("label", { className: "font-system text-xs" }, "Link title to cell"),
+                        react_1.default.createElement(chart_range_input_1.ChartRangeInput, { sheetId: sheetId, range: (_s = values.spec.titleSource) !== null && _s !== void 0 ? _s : undefined, onChangeRange: function (titleSource) {
+                                return setFieldValue("spec.titleSource", tslib_1.__assign(tslib_1.__assign({}, titleSource), { endRowIndex: titleSource.startRowIndex, endColumnIndex: titleSource.startColumnIndex }));
+                            }, placeholder: "Select a cell", className: "mb-0" }),
+                        values.spec.titleSource ? (react_1.default.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline self-start", onClick: function () { return setFieldValue("spec.titleSource", undefined); } }, "Unlink title")) : null),
                     react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Subtitle"),
-                        react_1.default.createElement(ui_1.Input, { value: (_s = values.spec.subtitle) !== null && _s !== void 0 ? _s : "", type: "text", onChange: function (e) { return setFieldValue("spec.subtitle", e.target.value || undefined); }, className: "text-xs", placeholder: "Enter chart subtitle", "aria-label": "Chart subtitle" })),
+                        react_1.default.createElement(ui_1.Input, { value: (_t = values.spec.subtitle) !== null && _t !== void 0 ? _t : "", type: "text", onChange: function (e) { return setFieldValue("spec.subtitle", e.target.value || undefined); }, className: "text-xs", placeholder: "Enter chart subtitle", "aria-label": "Chart subtitle" })),
                     react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Style"),
                         react_1.default.createElement("div", { className: "grid grid-cols-4 gap-1", role: "radiogroup" }, chart_styles_1.CHART_STYLES.map(function (style) {
@@ -371,7 +378,7 @@ var ChartEditor = function (_a) {
                         }))),
                     react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Quick layout"),
-                        react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: (_t = values.spec.quickLayout) !== null && _t !== void 0 ? _t : "", "aria-label": "Quick layout", onChange: function (e) {
+                        react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", value: (_u = values.spec.quickLayout) !== null && _u !== void 0 ? _u : "", "aria-label": "Quick layout", onChange: function (e) {
                                 var layout = chart_styles_1.CHART_QUICK_LAYOUTS.find(function (entry) { return String(entry.id) === e.target.value; });
                                 if (layout) {
                                     setFieldValue("spec", (0, chart_styles_1.applyChartQuickLayout)(values.spec, layout));
@@ -390,7 +397,7 @@ var ChartEditor = function (_a) {
                     react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Fill"),
                         react_1.default.createElement("div", { className: "flex items-center gap-1" },
-                            react_1.default.createElement("input", { type: "color", value: (_u = values.spec.backgroundColor) !== null && _u !== void 0 ? _u : "#FFFFFF", onChange: function (e) {
+                            react_1.default.createElement("input", { type: "color", value: (_v = values.spec.backgroundColor) !== null && _v !== void 0 ? _v : "#FFFFFF", onChange: function (e) {
                                     return 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_1.default.createElement(ui_1.IconButton, { type: "button", onClick: function () {
@@ -400,7 +407,7 @@ var ChartEditor = function (_a) {
                     react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Border"),
                         react_1.default.createElement("div", { className: "flex items-center gap-1" },
-                            react_1.default.createElement("input", { type: "color", value: (_v = values.borderColor) !== null && _v !== void 0 ? _v : "#D9D9D9", onChange: function (e) { return 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" }),
+                            react_1.default.createElement("input", { type: "color", value: (_w = values.borderColor) !== null && _w !== void 0 ? _w : "#D9D9D9", onChange: function (e) { return 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_1.default.createElement(ui_1.IconButton, { type: "button", onClick: function () { return setFieldValue("borderColor", undefined); }, "aria-label": "No border", title: "No border" },
                                 react_1.default.createElement(icons_1.CrossCircledIcon, null))) : (react_1.default.createElement("span", { className: "font-system text-xs text-rnc-text-weak" }, "None")))),
                     react_1.default.createElement("label", { className: "font-system text-sm flex items-center gap-1" },
@@ -411,7 +418,7 @@ var ChartEditor = function (_a) {
                 caps.hasLegend ? (react_1.default.createElement(Section, { title: "Legend" },
                     react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Legend"),
-                        react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", "aria-label": "Legend position", value: (_x = (_w = values === null || values === void 0 ? void 0 : values.spec.legend) === null || _w === void 0 ? void 0 : _w.position) !== null && _x !== void 0 ? _x : "", onChange: function (e) {
+                        react_1.default.createElement("select", { className: "border border-rnc-border rounded-sm px-1 py-1 text-xs bg-transparent w-32", "aria-label": "Legend position", value: (_y = (_x = values === null || values === void 0 ? void 0 : values.spec.legend) === null || _x === void 0 ? void 0 : _x.position) !== null && _y !== void 0 ? _y : "", onChange: function (e) {
                                 return setFieldValue("spec.legend.position", e.target.value || undefined);
                             } },
                             react_1.default.createElement("option", { value: "" }, "Auto"),
@@ -421,13 +428,13 @@ var ChartEditor = function (_a) {
                             react_1.default.createElement("option", { value: "right" }, "Right"),
                             react_1.default.createElement("option", { value: "topRight" }, "Top right"),
                             react_1.default.createElement("option", { value: "none" }, "None"))),
-                    react_1.default.createElement(text_format_fields_1.TextFormatFields, { label: "Legend font", collapsible: true, value: (_y = values.spec.legend) === null || _y === void 0 ? void 0 : _y.textFormat, onChange: function (textFormat) {
+                    react_1.default.createElement(text_format_fields_1.TextFormatFields, { label: "Legend font", collapsible: true, value: (_z = values.spec.legend) === null || _z === void 0 ? void 0 : _z.textFormat, onChange: function (textFormat) {
                             return setFieldValue("spec.legend.textFormat", textFormat);
                         } }))) : null,
                 caps.hasAxisTitles || caps.hasValueAxis ? (react_1.default.createElement(Section, { title: "Vertical axis" },
                     caps.hasAxisTitles ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Vertical axis title"),
-                        react_1.default.createElement(ui_1.Input, { value: (_z = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _z !== void 0 ? _z : "", type: "text", onChange: function (e) {
+                        react_1.default.createElement(ui_1.Input, { value: (_0 = values === null || values === void 0 ? void 0 : values.spec.verticalAxisTitle) !== null && _0 !== void 0 ? _0 : "", type: "text", onChange: function (e) {
                                 return setFieldValue("spec.verticalAxisTitle", e.target.value);
                             }, className: "text-xs", placeholder: "Vertical axis title" }))) : null,
                     caps.hasValueAxis ? (react_1.default.createElement(axis_options_fields_1.AxisOptionsFields, { label: "Value axis", kind: "value", value: values.spec.valueAxisOptions, onChange: function (next) { return setFieldValue("spec.valueAxisOptions", next); } })) : null,
@@ -438,12 +445,15 @@ var ChartEditor = function (_a) {
                 caps.hasAxisTitles || caps.hasCategoryAxis ? (react_1.default.createElement(Section, { title: "Horizontal axis" },
                     caps.hasAxisTitles ? (react_1.default.createElement(ui_1.Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         react_1.default.createElement("label", { className: "font-system text-sm" }, "Horizontal axis title"),
-                        react_1.default.createElement(ui_1.Input, { value: (_0 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _0 !== void 0 ? _0 : "", type: "text", onChange: function (e) {
+                        react_1.default.createElement(ui_1.Input, { value: (_1 = values === null || values === void 0 ? void 0 : values.spec.horizontalAxisTitle) !== null && _1 !== void 0 ? _1 : "", type: "text", onChange: function (e) {
                                 return setFieldValue("spec.horizontalAxisTitle", e.target.value);
                             }, className: "text-xs", placeholder: "Horizontal axis title" }))) : null,
                     caps.hasCategoryAxis ? (react_1.default.createElement(axis_options_fields_1.AxisOptionsFields, { label: "Category axis", kind: caps.category === "bubble" ? "value" : "category", value: values.spec.categoryAxisOptions, gridlinesDefault: false, onChange: function (next) {
                             return setFieldValue("spec.categoryAxisOptions", next);
                         } })) : null)) : null,
+                caps.hasValueAxis &&
+                    ["line", "area", "column", "combo"].includes(values.spec.chartType) ? (react_1.default.createElement(Section, { title: "Chart elements" },
+                    react_1.default.createElement(chart_elements_fields_1.ChartElementsFields, { chartType: values.spec.chartType, spec: values.spec, onChange: function (key, value) { return setFieldValue("spec.".concat(key), value); } }))) : null,
                 caps.hasDataLabels ? (react_1.default.createElement(Section, { title: "Data labels" },
                     react_1.default.createElement(data_labels_fields_1.DataLabelsFields, { value: values.spec.dataLabels, capabilities: caps, onChange: function (dataLabels) { return setFieldValue("spec.dataLabels", dataLabels); } }))) : null,
                 hasTypeOptions ? (react_1.default.createElement(Section, { title: "Chart options" },

package/dist/cjs/components/editors/fields/axis-options-fields.d.ts

@@ -1,9 +1,12 @@
 import type { ChartAxisOptions } from "@rowsncolumns/spreadsheet";
 import React from "react";
 /**
- * One axis' options (`ChartAxisOptions`): a value axis has a scale
- * (min / max / logarithmic), both have direction, gridlines, visibility
- * and tick-label font; a value axis also has its number format.
+ * One axis' options (`ChartAxisOptions`) — Excel's Format Axis pane
+ * (demo-app-monorepo#49969 FT-08): a value axis has its bounds, log scale
+ * and base, major / minor units, display units and number format; a
+ * category axis its label / tick-mark intervals; both have where the other
+ * axis crosses, direction, major / minor gridlines, tick marks, visibility
+ * and tick-label font.
  */
 export declare const AxisOptionsFields: ({ label, kind, value, onChange, gridlinesDefault, }: {
     label: string;

package/dist/cjs/components/editors/fields/axis-options-fields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axis-options-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/axis-options-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,qDAM/B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACvC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,sBAoEA,CAAC"}
+{"version":3,"file":"axis-options-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/axis-options-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAClE,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,GAAI,qDAM/B;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,OAAO,GAAG,UAAU,CAAC;IAC3B,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,QAAQ,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACvC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,sBAkNA,CAAC"}

package/dist/cjs/components/editors/fields/axis-options-fields.js

@@ -5,14 +5,35 @@ var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var primitives_1 = require("./primitives");
 var text_format_fields_1 = require("./text-format-fields");
+var TICK_MARKS = [
+    { value: "none", label: "None" },
+    { value: "in", label: "Inside" },
+    { value: "out", label: "Outside" },
+    { value: "cross", label: "Cross" },
+];
+var DISPLAY_UNIT_OPTIONS = [
+    { value: "", label: "None" },
+    { value: "hundreds", label: "Hundreds" },
+    { value: "thousands", label: "Thousands" },
+    { value: "tenThousands", label: "10000" },
+    { value: "hundredThousands", label: "100000" },
+    { value: "millions", label: "Millions" },
+    { value: "tenMillions", label: "10000000" },
+    { value: "hundredMillions", label: "100000000" },
+    { value: "billions", label: "Billions" },
+    { value: "trillions", label: "Trillions" },
+];
 /**
- * One axis' options (`ChartAxisOptions`): a value axis has a scale
- * (min / max / logarithmic), both have direction, gridlines, visibility
- * and tick-label font; a value axis also has its number format.
+ * One axis' options (`ChartAxisOptions`) — Excel's Format Axis pane
+ * (demo-app-monorepo#49969 FT-08): a value axis has its bounds, log scale
+ * and base, major / minor units, display units and number format; a
+ * category axis its label / tick-mark intervals; both have where the other
+ * axis crosses, direction, major / minor gridlines, tick marks, visibility
+ * and tick-label font.
  */
 var AxisOptionsFields = function (_a) {
-    var _b;
-    var label = _a.label, kind = _a.kind, value = _a.value, onChange = _a.onChange, _c = _a.gridlinesDefault, gridlinesDefault = _c === void 0 ? true : _c;
+    var _b, _c, _d, _e;
+    var label = _a.label, kind = _a.kind, value = _a.value, onChange = _a.onChange, _f = _a.gridlinesDefault, gridlinesDefault = _f === void 0 ? true : _f;
     var set = function (patch) {
         return onChange(tslib_1.__assign(tslib_1.__assign({}, (value !== null && value !== void 0 ? value : {})), patch));
     };
@@ -21,9 +42,50 @@ var AxisOptionsFields = function (_a) {
         kind === "value" ? (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
             react_1.default.createElement(primitives_1.NumberField, { label: "Min", ariaLabel: "".concat(label, " min"), value: value === null || value === void 0 ? void 0 : value.min, onChange: function (min) { return set({ min: min }); }, placeholder: "Auto" }),
             react_1.default.createElement(primitives_1.NumberField, { label: "Max", ariaLabel: "".concat(label, " max"), value: value === null || value === void 0 ? void 0 : value.max, onChange: function (max) { return set({ max: max }); }, placeholder: "Auto" }))) : null,
-        kind === "value" ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Logarithmic scale", ariaLabel: "".concat(label, " logarithmic scale"), checked: Boolean(value === null || value === void 0 ? void 0 : value.logarithmic), onChange: function (on) { return set({ logarithmic: on || undefined }); } })) : null,
+        kind === "value" ? (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.NumberField, { label: "Major unit", ariaLabel: "".concat(label, " major unit"), value: value === null || value === void 0 ? void 0 : value.majorUnit, min: 0, onChange: function (majorUnit) { return set({ majorUnit: majorUnit }); }, placeholder: "Auto" }),
+            react_1.default.createElement(primitives_1.NumberField, { label: "Minor unit", ariaLabel: "".concat(label, " minor unit"), value: value === null || value === void 0 ? void 0 : value.minorUnit, min: 0, onChange: function (minorUnit) { return set({ minorUnit: minorUnit }); }, placeholder: "Auto" }))) : (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.NumberField, { label: "Label interval", ariaLabel: "".concat(label, " interval between labels"), value: value === null || value === void 0 ? void 0 : value.tickLabelSkip, min: 1, step: 1, onChange: function (tickLabelSkip) { return set({ tickLabelSkip: tickLabelSkip }); }, placeholder: "Auto" }),
+            react_1.default.createElement(primitives_1.NumberField, { label: "Tick interval", ariaLabel: "".concat(label, " interval between tick marks"), value: value === null || value === void 0 ? void 0 : value.tickMarkSkip, min: 1, step: 1, onChange: function (tickMarkSkip) { return set({ tickMarkSkip: tickMarkSkip }); }, placeholder: "1" }))),
+        kind === "value" ? (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.CheckboxField, { label: "Logarithmic scale", ariaLabel: "".concat(label, " logarithmic scale"), checked: Boolean(value === null || value === void 0 ? void 0 : value.logarithmic), onChange: function (on) { return set({ logarithmic: on || undefined }); } }),
+            (value === null || value === void 0 ? void 0 : value.logarithmic) ? (react_1.default.createElement(primitives_1.NumberField, { label: "Base", ariaLabel: "".concat(label, " logarithmic base"), value: value === null || value === void 0 ? void 0 : value.logBase, min: 2, max: 1000, onChange: function (logBase) { return set({ logBase: logBase }); }, placeholder: "10" })) : null)) : null,
+        kind === "value" ? (react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.SelectField, { label: "Display units", ariaLabel: "".concat(label, " display units"), value: ((_b = value === null || value === void 0 ? void 0 : value.displayUnits) !== null && _b !== void 0 ? _b : ""), options: DISPLAY_UNIT_OPTIONS, onChange: function (unit) {
+                    return set({ displayUnits: unit === "" ? undefined : unit });
+                } }),
+            (value === null || value === void 0 ? void 0 : value.displayUnits) ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Show display units label", ariaLabel: "".concat(label, " show display units label"), checked: (value === null || value === void 0 ? void 0 : value.showDisplayUnitsLabel) !== false, onChange: function (on) {
+                    return set({ showDisplayUnitsLabel: on ? undefined : false });
+                } })) : null)) : null,
+        react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.SelectField, { label: "Crosses other axis", ariaLabel: "".concat(label, " crosses"), value: typeof (value === null || value === void 0 ? void 0 : value.crossesAt) === "number"
+                    ? "value"
+                    : (value === null || value === void 0 ? void 0 : value.crosses) === "max"
+                        ? "max"
+                        : "autoZero", options: [
+                    { value: "autoZero", label: "Automatic" },
+                    { value: "value", label: "At value" },
+                    { value: "max", label: "At maximum" },
+                ], onChange: function (crossing) {
+                    var _a;
+                    return set(crossing === "value"
+                        ? { crosses: undefined, crossesAt: (_a = value === null || value === void 0 ? void 0 : value.crossesAt) !== null && _a !== void 0 ? _a : 0 }
+                        : {
+                            crosses: crossing === "max" ? "max" : undefined,
+                            crossesAt: undefined,
+                        });
+                } }),
+            typeof (value === null || value === void 0 ? void 0 : value.crossesAt) === "number" ? (react_1.default.createElement(primitives_1.NumberField, { label: "At", ariaLabel: "".concat(label, " crosses at"), value: value.crossesAt, onChange: function (crossesAt) { return set({ crossesAt: crossesAt !== null && crossesAt !== void 0 ? crossesAt : 0 }); } })) : null),
         react_1.default.createElement(primitives_1.CheckboxField, { label: "Reverse direction", ariaLabel: "".concat(label, " reverse direction"), checked: Boolean(value === null || value === void 0 ? void 0 : value.reverse), onChange: function (on) { return set({ reverse: on || undefined }); } }),
-        react_1.default.createElement(primitives_1.CheckboxField, { label: "Gridlines", ariaLabel: "".concat(label, " gridlines"), checked: (_b = value === null || value === void 0 ? void 0 : value.showMajorGridlines) !== null && _b !== void 0 ? _b : gridlinesDefault, onChange: function (showMajorGridlines) { return set({ showMajorGridlines: showMajorGridlines }); } }),
+        react_1.default.createElement(primitives_1.CheckboxField, { label: "Gridlines", ariaLabel: "".concat(label, " gridlines"), checked: (_c = value === null || value === void 0 ? void 0 : value.showMajorGridlines) !== null && _c !== void 0 ? _c : gridlinesDefault, onChange: function (showMajorGridlines) { return set({ showMajorGridlines: showMajorGridlines }); } }),
+        kind === "value" ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Minor gridlines", ariaLabel: "".concat(label, " minor gridlines"), checked: Boolean(value === null || value === void 0 ? void 0 : value.showMinorGridlines), onChange: function (on) { return set({ showMinorGridlines: on || undefined }); } })) : null,
+        react_1.default.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            react_1.default.createElement(primitives_1.SelectField, { label: "Major tick marks", ariaLabel: "".concat(label, " major tick marks"), value: (_d = value === null || value === void 0 ? void 0 : value.majorTickMark) !== null && _d !== void 0 ? _d : "out", options: TICK_MARKS, onChange: function (mark) {
+                    return set({ majorTickMark: mark === "out" ? undefined : mark });
+                } }),
+            react_1.default.createElement(primitives_1.SelectField, { label: "Minor tick marks", ariaLabel: "".concat(label, " minor tick marks"), value: (_e = value === null || value === void 0 ? void 0 : value.minorTickMark) !== null && _e !== void 0 ? _e : "none", options: TICK_MARKS, onChange: function (mark) {
+                    return set({ minorTickMark: mark === "none" ? undefined : mark });
+                } })),
         react_1.default.createElement(primitives_1.CheckboxField, { label: "Show axis", ariaLabel: "".concat(label, " visible"), checked: (value === null || value === void 0 ? void 0 : value.visible) !== false, onChange: function (on) { return set({ visible: on ? undefined : false }); } }),
         kind === "value" ? (react_1.default.createElement(primitives_1.TextField, { label: "Number format", ariaLabel: "".concat(label, " number format"), value: value === null || value === void 0 ? void 0 : value.numberFormatPattern, onChange: function (numberFormatPattern) { return set({ numberFormatPattern: numberFormatPattern }); }, placeholder: "Linked to source" })) : null,
         react_1.default.createElement(text_format_fields_1.TextFormatFields, { label: "".concat(label, " font"), collapsible: true, value: value === null || value === void 0 ? void 0 : value.textFormat, onChange: function (textFormat) { return set({ textFormat: textFormat }); } })));

package/dist/cjs/components/editors/fields/chart-elements-fields.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type ElementKey = "hiLowLines" | "dropLines" | "upDownBars" | "dataTable";
+/**
+ * Excel's Add Chart Element → Lines (High-Low, Drop), Up/Down Bars and Data
+ * Table (demo-app-monorepo#49969 FT-08). High-low lines and up/down bars are
+ * line-chart elements, drop lines line and area; every category chart can
+ * carry a data table.
+ */
+export declare const ChartElementsFields: ({ chartType, spec, onChange, }: {
+    chartType: string;
+    spec: Partial<Record<ElementKey, any>>;
+    onChange(key: ElementKey | "dataTable.showLegendKeys", value: unknown): void;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=chart-elements-fields.d.ts.map

package/dist/cjs/components/editors/fields/chart-elements-fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-elements-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/chart-elements-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,KAAK,UAAU,GAAG,YAAY,GAAG,WAAW,GAAG,YAAY,GAAG,WAAW,CAAC;AAE1E;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,gCAIjC;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,CAAC;IACvC,QAAQ,CAAC,GAAG,EAAE,UAAU,GAAG,0BAA0B,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAC9E,sBAuCA,CAAC"}

package/dist/cjs/components/editors/fields/chart-elements-fields.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartElementsFields = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var primitives_1 = require("./primitives");
+/**
+ * Excel's Add Chart Element → Lines (High-Low, Drop), Up/Down Bars and Data
+ * Table (demo-app-monorepo#49969 FT-08). High-low lines and up/down bars are
+ * line-chart elements, drop lines line and area; every category chart can
+ * carry a data table.
+ */
+var ChartElementsFields = function (_a) {
+    var chartType = _a.chartType, spec = _a.spec, onChange = _a.onChange;
+    var isLine = chartType === "line";
+    return (react_1.default.createElement("div", { className: "flex flex-col gap-1 pb-2" },
+        isLine ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "High-low lines", checked: Boolean(spec.hiLowLines), onChange: function (on) { return onChange("hiLowLines", on || undefined); } })) : null,
+        isLine || chartType === "area" ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Drop lines", checked: Boolean(spec.dropLines), onChange: function (on) { return onChange("dropLines", on || undefined); } })) : null,
+        isLine ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Up/down bars", checked: Boolean(spec.upDownBars), onChange: function (on) { return onChange("upDownBars", on ? {} : undefined); } })) : null,
+        react_1.default.createElement(primitives_1.CheckboxField, { label: "Data table", checked: Boolean(spec.dataTable), onChange: function (on) { return onChange("dataTable", on ? {} : undefined); } }),
+        spec.dataTable ? (react_1.default.createElement(primitives_1.CheckboxField, { label: "Show legend keys", checked: spec.dataTable.showLegendKeys !== false, onChange: function (on) { return onChange("dataTable.showLegendKeys", on ? undefined : false); } })) : null));
+};
+exports.ChartElementsFields = ChartElementsFields;

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

@@ -1 +1 @@
-{"version":3,"file":"series-format-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/series-format-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAGV,MAAM,2BAA2B,CAAC;AAEnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAqC5E;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,8CAKhC;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,uBAAuB,CAAC;IACtC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC3C,sBAoXA,CAAC"}
+{"version":3,"file":"series-format-fields.d.ts","sourceRoot":"","sources":["../../../../../components/editors/fields/series-format-fields.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EAGV,MAAM,2BAA2B,CAAC;AAEnC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAqC5E;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAAI,8CAKhC;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,uBAAuB,CAAC;IACtC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC3C,sBAkZA,CAAC"}

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

@@ -36,7 +36,7 @@ var MARKER_SYMBOLS = [
  * (`capabilities`) render.
  */
 var SeriesFormatFields = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     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) {
@@ -160,6 +160,20 @@ var SeriesFormatFields = function (_a) {
                             ], 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));
+        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,
+        capabilities.hasDataLabels ? (react_1.default.createElement("div", { className: "flex flex-col gap-1" },
+            react_1.default.createElement("label", { className: "font-system text-xs" }, "Label values from cells"),
+            react_1.default.createElement(chart_range_input_1.ChartRangeInput, { sheetId: sheetId, range: (_q = (_p = series.dataLabels) === null || _p === void 0 ? void 0 : _p.valueFromCells) !== null && _q !== void 0 ? _q : undefined, onChangeRange: function (valueFromCells) {
+                    var _a;
+                    return onChange({
+                        dataLabels: tslib_1.__assign(tslib_1.__assign({}, ((_a = series.dataLabels) !== null && _a !== void 0 ? _a : {})), { show: true, valueFromCells: valueFromCells }),
+                    });
+                }, placeholder: "Select a label range", className: "mb-0" }),
+            ((_r = series.dataLabels) === null || _r === void 0 ? void 0 : _r.valueFromCells) ? (react_1.default.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline self-start", onClick: function () {
+                    var _a;
+                    return onChange({
+                        dataLabels: tslib_1.__assign(tslib_1.__assign({}, ((_a = series.dataLabels) !== null && _a !== void 0 ? _a : {})), { valueFromCells: undefined }),
+                    });
+                } }, "Clear label range")) : null)) : null));
 };
 exports.SeriesFormatFields = SeriesFormatFields;

package/dist/cjs/config.d.ts

@@ -1,5 +1,15 @@
 import type { ChartSpec } from "@rowsncolumns/spreadsheet";
+import { type ThreeDRenderOptions } from "./utils/three-d";
 export declare const CHART_TYPES: Array<[string, Array<[string, Partial<ChartSpec>]>]>;
+/**
+ * The Chart editor's preset list. With `enable3D: false` the presets the
+ * renderer would draw through echarts-gl (3-D Column / Bar / Line / Area,
+ * their stacked variants and 3-D Surface) are left out; 3-D Pie and
+ * Contour stay since they never render in WebGL. A spec that already
+ * carries a 3-D `sourceChartType` is not rewritten — only the picker
+ * changes (rowsncolumns/spreadsheet#1187).
+ */
+export declare const getChartTypes: (options?: ThreeDRenderOptions) => Array<[string, Array<[string, Partial<ChartSpec>]>]>;
 /**
  * True when a spec is doughnut-shaped: the first-class
  * `chartType: "doughnut"` token, or the two legacy pie encodings —

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;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"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAG3D,OAAO,EAAuB,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAsRhF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAgB1E,CAAC;AAEJ;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GACxB,UAAU,mBAAmB,KAC5B,KAAK,CAAC,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAarD,CAAC;AAYF;;;;;;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"}