@rowsncolumns/charts 28.1.17 → 28.1.19

package/dist/esm/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/esm/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/esm/basic-chart/index.js

@@ -1,7 +1,21 @@
 import React from "react";
 import { BasicChart } from "./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.
+ */
+export const chartFrameBorder = (chart, isDarkMode) => chart?.borderColor
+    ? undefined
+    : `1px solid ${isDarkMode ? "rgba(255,255,255,0.2)" : "#D9D9D9"}`;
 export const ChartComponent = (props) => {
-    return (React.createElement("div", { className: "shadow-lg bg-rnc-background flex-1 flex break-words flex-col" },
+    return (React.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: chartFrameBorder(props.chart, props.isDarkMode),
+            outlineOffset: -1,
+        } },
         React.createElement(BasicChart, { ...props })));
 };
 export default ChartComponent;

package/dist/esm/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/esm/components/editors/chart-editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chart-editor.d.ts","sourceRoot":"","sources":["../../../../components/editors/chart-editor.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAGV,aAAa,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/esm/components/editors/chart-editor.js

@@ -7,13 +7,14 @@ import { uuid } from "@rowsncolumns/utils";
 import { useFormik } from "formik";
 import React, { useMemo } from "react";
 import { useSetChartEditorDialogState } from "../../atoms/editing-chart.atom";
-import { CHART_TYPES, getChartPresetLabel } from "../../config";
+import { getChartPresetLabel, getChartTypes } from "../../config";
 import { canSwitchRowColumn, inferSeriesOrientation, switchRowColumn, } from "../../utils/chart-orientation";
 import { isBasicChartSpec, isBubbleChartSpec, isHierarchyChartSpec, mergeChartSpec, } from "../../utils/chart-spec-utils";
 import { applyChartColorPalette, applyChartQuickLayout, applyChartStyle, CHART_COLOR_PALETTES, CHART_QUICK_LAYOUTS, CHART_STYLES, resetChartToMatchStyle, } from "../../utils/chart-styles";
 import { getChartEditorCapabilities } from "./chart-editor-capabilities";
 import { ChartRangeInput } from "./chart-range-input";
 import { AxisOptionsFields } from "./fields/axis-options-fields";
+import { ChartElementsFields } from "./fields/chart-elements-fields";
 import { chartTypeHasOptions, ChartTypeOptionsFields, } from "./fields/chart-type-options";
 import { DataLabelsFields } from "./fields/data-labels-fields";
 import { SeriesFormatFields } from "./fields/series-format-fields";
@@ -47,8 +48,9 @@ const Section = ({ title, defaultOpen = false, children, }) => (React.createElem
         React.createElement(ChevronRightIcon, { className: "shrink-0 transition-transform group-open:rotate-90" }),
         title),
     React.createElement("div", { className: "flex flex-col gap-2 pb-3" }, children)));
-export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getFormattedValue, }) => {
+export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getFormattedValue, enable3D, }) => {
     const setChartDialogState = useSetChartEditorDialogState();
+    const chartTypes = getChartTypes({ enable3D });
     // Close dialog
     const closeDialog = () => setChartDialogState(false);
     // Keyed on chart identity so a position sync (move/resize while the
@@ -218,7 +220,7 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                                 React.createElement(DropdownRightSlot, null,
                                     React.createElement(TriangleDownIcon, null)))),
                         React.createElement(DropdownMenuPortal, null,
-                            React.createElement(DropdownMenuContent, { align: "start", sideOffset: 0 }, CHART_TYPES.map(([category, types]) => {
+                            React.createElement(DropdownMenuContent, { align: "start", sideOffset: 0 }, chartTypes.map(([category, types]) => {
                                 return (React.createElement(DropdownMenuSub, { key: category },
                                     React.createElement(DropdownMenuSubTrigger, null,
                                         React.createElement(DropdownLeftSlot, null,
@@ -321,7 +323,14 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                 React.createElement(Section, { title: "Chart style", defaultOpen: true },
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Chart title"),
-                        React.createElement(Input, { value: values?.spec.title ?? "", type: "text", onChange: (e) => setFieldValue(`spec.title`, e.target.value), className: "text-xs", placeholder: "Enter chart title" })),
+                        React.createElement(Input, { value: values?.spec.title ?? "", type: "text", onChange: (e) => setFieldValue(`spec.title`, e.target.value), className: "text-xs", placeholder: "Enter chart title" }),
+                        React.createElement("label", { className: "font-system text-xs" }, "Link title to cell"),
+                        React.createElement(ChartRangeInput, { sheetId: sheetId, range: values.spec.titleSource ?? undefined, onChangeRange: (titleSource) => setFieldValue("spec.titleSource", {
+                                ...titleSource,
+                                endRowIndex: titleSource.startRowIndex,
+                                endColumnIndex: titleSource.startColumnIndex,
+                            }), placeholder: "Select a cell", className: "mb-0" }),
+                        values.spec.titleSource ? (React.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline self-start", onClick: () => setFieldValue("spec.titleSource", undefined) }, "Unlink title")) : null),
                     React.createElement(Stack, { direction: "vertical", className: "gap-1 pb-2" },
                         React.createElement("label", { className: "font-system text-sm" }, "Subtitle"),
                         React.createElement(Input, { value: values.spec.subtitle ?? "", type: "text", onChange: (e) => setFieldValue("spec.subtitle", e.target.value || undefined), className: "text-xs", placeholder: "Enter chart subtitle", "aria-label": "Chart subtitle" })),
@@ -399,6 +408,9 @@ export const ChartEditor = ({ chart, sheetId, onSubmit, onRequestMoveChart, getF
                         React.createElement("label", { className: "font-system text-sm" }, "Horizontal axis title"),
                         React.createElement(Input, { value: values?.spec.horizontalAxisTitle ?? "", type: "text", onChange: (e) => setFieldValue(`spec.horizontalAxisTitle`, e.target.value), className: "text-xs", placeholder: "Horizontal axis title" }))) : null,
                     caps.hasCategoryAxis ? (React.createElement(AxisOptionsFields, { label: "Category axis", kind: caps.category === "bubble" ? "value" : "category", value: values.spec.categoryAxisOptions, gridlinesDefault: false, onChange: (next) => setFieldValue("spec.categoryAxisOptions", next) })) : null)) : null,
+                caps.hasValueAxis &&
+                    ["line", "area", "column", "combo"].includes(values.spec.chartType) ? (React.createElement(Section, { title: "Chart elements" },
+                    React.createElement(ChartElementsFields, { chartType: values.spec.chartType, spec: values.spec, onChange: (key, value) => setFieldValue(`spec.${key}`, value) }))) : null,
                 caps.hasDataLabels ? (React.createElement(Section, { title: "Data labels" },
                     React.createElement(DataLabelsFields, { value: values.spec.dataLabels, capabilities: caps, onChange: (dataLabels) => setFieldValue("spec.dataLabels", dataLabels) }))) : null,
                 hasTypeOptions ? (React.createElement(Section, { title: "Chart options" },

package/dist/esm/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/esm/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/esm/components/editors/fields/axis-options-fields.js

@@ -1,10 +1,31 @@
 import React from "react";
-import { CheckboxField, NumberField, TextField } from "./primitives";
+import { CheckboxField, NumberField, SelectField, TextField, } from "./primitives";
 import { TextFormatFields } from "./text-format-fields";
+const TICK_MARKS = [
+    { value: "none", label: "None" },
+    { value: "in", label: "Inside" },
+    { value: "out", label: "Outside" },
+    { value: "cross", label: "Cross" },
+];
+const 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.
  */
 export const AxisOptionsFields = ({ label, kind, value, onChange, gridlinesDefault = true, }) => {
     const set = (patch) => onChange({ ...(value ?? {}), ...patch });
@@ -13,9 +34,39 @@ export const AxisOptionsFields = ({ label, kind, value, onChange, gridlinesDefau
         kind === "value" ? (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
             React.createElement(NumberField, { label: "Min", ariaLabel: `${label} min`, value: value?.min, onChange: (min) => set({ min }), placeholder: "Auto" }),
             React.createElement(NumberField, { label: "Max", ariaLabel: `${label} max`, value: value?.max, onChange: (max) => set({ max }), placeholder: "Auto" }))) : null,
-        kind === "value" ? (React.createElement(CheckboxField, { label: "Logarithmic scale", ariaLabel: `${label} logarithmic scale`, checked: Boolean(value?.logarithmic), onChange: (on) => set({ logarithmic: on || undefined }) })) : null,
+        kind === "value" ? (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(NumberField, { label: "Major unit", ariaLabel: `${label} major unit`, value: value?.majorUnit, min: 0, onChange: (majorUnit) => set({ majorUnit }), placeholder: "Auto" }),
+            React.createElement(NumberField, { label: "Minor unit", ariaLabel: `${label} minor unit`, value: value?.minorUnit, min: 0, onChange: (minorUnit) => set({ minorUnit }), placeholder: "Auto" }))) : (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(NumberField, { label: "Label interval", ariaLabel: `${label} interval between labels`, value: value?.tickLabelSkip, min: 1, step: 1, onChange: (tickLabelSkip) => set({ tickLabelSkip }), placeholder: "Auto" }),
+            React.createElement(NumberField, { label: "Tick interval", ariaLabel: `${label} interval between tick marks`, value: value?.tickMarkSkip, min: 1, step: 1, onChange: (tickMarkSkip) => set({ tickMarkSkip }), placeholder: "1" }))),
+        kind === "value" ? (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(CheckboxField, { label: "Logarithmic scale", ariaLabel: `${label} logarithmic scale`, checked: Boolean(value?.logarithmic), onChange: (on) => set({ logarithmic: on || undefined }) }),
+            value?.logarithmic ? (React.createElement(NumberField, { label: "Base", ariaLabel: `${label} logarithmic base`, value: value?.logBase, min: 2, max: 1000, onChange: (logBase) => set({ logBase }), placeholder: "10" })) : null)) : null,
+        kind === "value" ? (React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(SelectField, { label: "Display units", ariaLabel: `${label} display units`, value: (value?.displayUnits ?? ""), options: DISPLAY_UNIT_OPTIONS, onChange: (unit) => set({ displayUnits: unit === "" ? undefined : unit }) }),
+            value?.displayUnits ? (React.createElement(CheckboxField, { label: "Show display units label", ariaLabel: `${label} show display units label`, checked: value?.showDisplayUnitsLabel !== false, onChange: (on) => set({ showDisplayUnitsLabel: on ? undefined : false }) })) : null)) : null,
+        React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(SelectField, { label: "Crosses other axis", ariaLabel: `${label} crosses`, value: typeof value?.crossesAt === "number"
+                    ? "value"
+                    : value?.crosses === "max"
+                        ? "max"
+                        : "autoZero", options: [
+                    { value: "autoZero", label: "Automatic" },
+                    { value: "value", label: "At value" },
+                    { value: "max", label: "At maximum" },
+                ], onChange: (crossing) => set(crossing === "value"
+                    ? { crosses: undefined, crossesAt: value?.crossesAt ?? 0 }
+                    : {
+                        crosses: crossing === "max" ? "max" : undefined,
+                        crossesAt: undefined,
+                    }) }),
+            typeof value?.crossesAt === "number" ? (React.createElement(NumberField, { label: "At", ariaLabel: `${label} crosses at`, value: value.crossesAt, onChange: (crossesAt) => set({ crossesAt: crossesAt ?? 0 }) })) : null),
         React.createElement(CheckboxField, { label: "Reverse direction", ariaLabel: `${label} reverse direction`, checked: Boolean(value?.reverse), onChange: (on) => set({ reverse: on || undefined }) }),
         React.createElement(CheckboxField, { label: "Gridlines", ariaLabel: `${label} gridlines`, checked: value?.showMajorGridlines ?? gridlinesDefault, onChange: (showMajorGridlines) => set({ showMajorGridlines }) }),
+        kind === "value" ? (React.createElement(CheckboxField, { label: "Minor gridlines", ariaLabel: `${label} minor gridlines`, checked: Boolean(value?.showMinorGridlines), onChange: (on) => set({ showMinorGridlines: on || undefined }) })) : null,
+        React.createElement("div", { className: "flex flex-wrap gap-2 items-end" },
+            React.createElement(SelectField, { label: "Major tick marks", ariaLabel: `${label} major tick marks`, value: value?.majorTickMark ?? "out", options: TICK_MARKS, onChange: (mark) => set({ majorTickMark: mark === "out" ? undefined : mark }) }),
+            React.createElement(SelectField, { label: "Minor tick marks", ariaLabel: `${label} minor tick marks`, value: value?.minorTickMark ?? "none", options: TICK_MARKS, onChange: (mark) => set({ minorTickMark: mark === "none" ? undefined : mark }) })),
         React.createElement(CheckboxField, { label: "Show axis", ariaLabel: `${label} visible`, checked: value?.visible !== false, onChange: (on) => set({ visible: on ? undefined : false }) }),
         kind === "value" ? (React.createElement(TextField, { label: "Number format", ariaLabel: `${label} number format`, value: value?.numberFormatPattern, onChange: (numberFormatPattern) => set({ numberFormatPattern }), placeholder: "Linked to source" })) : null,
         React.createElement(TextFormatFields, { label: `${label} font`, collapsible: true, value: value?.textFormat, onChange: (textFormat) => set({ textFormat }) })));

package/dist/esm/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/esm/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/esm/components/editors/fields/chart-elements-fields.js

@@ -0,0 +1,17 @@
+import React from "react";
+import { CheckboxField } from "./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.
+ */
+export const ChartElementsFields = ({ chartType, spec, onChange, }) => {
+    const isLine = chartType === "line";
+    return (React.createElement("div", { className: "flex flex-col gap-1 pb-2" },
+        isLine ? (React.createElement(CheckboxField, { label: "High-low lines", checked: Boolean(spec.hiLowLines), onChange: (on) => onChange("hiLowLines", on || undefined) })) : null,
+        isLine || chartType === "area" ? (React.createElement(CheckboxField, { label: "Drop lines", checked: Boolean(spec.dropLines), onChange: (on) => onChange("dropLines", on || undefined) })) : null,
+        isLine ? (React.createElement(CheckboxField, { label: "Up/down bars", checked: Boolean(spec.upDownBars), onChange: (on) => onChange("upDownBars", on ? {} : undefined) })) : null,
+        React.createElement(CheckboxField, { label: "Data table", checked: Boolean(spec.dataTable), onChange: (on) => onChange("dataTable", on ? {} : undefined) }),
+        spec.dataTable ? (React.createElement(CheckboxField, { label: "Show legend keys", checked: spec.dataTable.showLegendKeys !== false, onChange: (on) => onChange("dataTable.showLegendKeys", on ? undefined : false) })) : null));
+};

package/dist/esm/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/esm/components/editors/fields/series-format-fields.js

@@ -139,5 +139,13 @@ export const SeriesFormatFields = ({ sheetId, series, capabilities, onChange, })
                             },
                         ],
                     }) }, "Add point color")))) : null,
-        capabilities.hasDataLabels ? (React.createElement(DataLabelsFields, { perSeries: true, value: series.dataLabels, capabilities: capabilities, onChange: (dataLabels) => onChange({ dataLabels }) })) : null));
+        capabilities.hasDataLabels ? (React.createElement(DataLabelsFields, { perSeries: true, value: series.dataLabels, capabilities: capabilities, onChange: (dataLabels) => onChange({ dataLabels }) })) : null,
+        capabilities.hasDataLabels ? (React.createElement("div", { className: "flex flex-col gap-1" },
+            React.createElement("label", { className: "font-system text-xs" }, "Label values from cells"),
+            React.createElement(ChartRangeInput, { sheetId: sheetId, range: series.dataLabels?.valueFromCells ?? undefined, onChangeRange: (valueFromCells) => onChange({
+                    dataLabels: { ...(series.dataLabels ?? {}), show: true, valueFromCells },
+                }), placeholder: "Select a label range", className: "mb-0" }),
+            series.dataLabels?.valueFromCells ? (React.createElement("button", { type: "button", className: "font-system text-xs text-rnc-muted-foreground underline self-start", onClick: () => onChange({
+                    dataLabels: { ...(series.dataLabels ?? {}), valueFromCells: undefined },
+                }) }, "Clear label range")) : null)) : null));
 };

package/dist/esm/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/esm/config.d.ts.map

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

package/dist/esm/config.js

@@ -1,4 +1,5 @@
 import { DEFAULT_PIE_EXPLOSION } from "./utils/pie-explosion";
+import { resolve3DRenderKind } from "./utils/three-d";
 // Excel's 3-D chart classes degrade to a 2-D chartType with the authored
 // class kept as `sourceChartType` (BAR_3D, LINE_3D, PIE_3D, AREA_3D,
 // SURFACE, SURFACE_3D). The renderer draws BAR_3D / LINE_3D / AREA_3D /
@@ -273,6 +274,25 @@ export const CHART_TYPES = [
     ["Stock", STOCK_CHART_TYPES],
     ["Combo", COMBO_CHART_TYPES],
 ];
+/**
+ * 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 const getChartTypes = (options) => {
+    if (options?.enable3D !== false)
+        return CHART_TYPES;
+    const groups = [];
+    for (const [category, presets] of CHART_TYPES) {
+        const kept = presets.filter(([, preset]) => resolve3DRenderKind(preset.sourceChartType) === null);
+        if (kept.length > 0)
+            groups.push([category, kept]);
+    }
+    return groups;
+};
 /** Parse a radius entry ("40%" | 40 | 0) into a number, NaN-safe. */
 const parseRadiusValue = (value) => {
     if (typeof value === "number")

package/dist/esm/tsconfig.esm.tsbuildinfo

@@ -1 +1 @@
-{"root":["../../config.ts","../../echarts-gl.d.ts","../../geo-modules.d.ts","../../index.ts","../../plotly-dist.d.ts","../../types.ts","../../vitest.config.ts","../../atoms/editing-chart.atom.ts","../../atoms/pivot-chart.atom.ts","../../basic-chart/basic-chart.tsx","../../basic-chart/helpers.ts","../../basic-chart/index.tsx","../../components/dialogs/chart-editor-dialog.tsx","../../components/dialogs/pivot-chart-dialog.tsx","../../components/editors/chart-editor-capabilities.ts","../../components/editors/chart-editor.tsx","../../components/editors/chart-range-input.tsx","../../components/editors/fields/axis-options-fields.tsx","../../components/editors/fields/chart-type-options.tsx","../../components/editors/fields/data-labels-fields.tsx","../../components/editors/fields/primitives.tsx","../../components/editors/fields/series-format-fields.tsx","../../components/editors/fields/series-name-field.tsx","../../components/editors/fields/text-format-fields.tsx","../../hooks/use-chart-editor.ts","../../hooks/use-charts.ts","../../hooks/use-on-create-chart.ts","../../hooks/use-on-delete-chart.ts","../../hooks/use-on-move-chart-to-sheet.ts","../../hooks/use-on-move-chart.ts","../../hooks/use-on-resize-chart.ts","../../hooks/use-on-update-chart.ts","../../interface/create-chart.ts","../../interface/delete-chart.ts","../../interface/move-chart-to-sheet.ts","../../interface/move-chart.ts","../../interface/resize-chart.ts","../../interface/shift-chart-ranges.ts","../../interface/update-chart.ts","../../plotly/plot.ts","../../plotly/basic-chart/basic-chart.tsx","../../plotly/basic-chart/helpers.ts","../../plotly/basic-chart/index.tsx","../../utils/aggregation.ts","../../utils/axis-number-format.ts","../../utils/bar-layout.ts","../../utils/boxplot.ts","../../utils/bubble.ts","../../utils/category-levels.ts","../../utils/chart-image.ts","../../utils/chart-orientation.ts","../../utils/chart-spec-utils.ts","../../utils/chart-styles.ts","../../utils/doughnut.ts","../../utils/echarts-gl-loader.ts","../../utils/echarts-overlays.ts","../../utils/empty-cells.ts","../../utils/error-bars.ts","../../utils/gradient.ts","../../utils/hierarchy.ts","../../utils/histogram.ts","../../utils/legend-layout.ts","../../utils/of-pie.ts","../../utils/overrides.ts","../../utils/pie-explosion.ts","../../utils/plotly-click.ts","../../utils/plotly-surface.ts","../../utils/plotly-title.ts","../../utils/radar.ts","../../utils/region-map-loader.ts","../../utils/region-map.ts","../../utils/series-click.ts","../../utils/series-name.ts","../../utils/stock.ts","../../utils/three-d.ts","../../utils/trendline.ts","../../utils/waterfall.ts","../../utils/webgl.ts"],"version":"5.8.3"}
+{"root":["../../config.ts","../../echarts-gl.d.ts","../../geo-modules.d.ts","../../index.ts","../../plotly-dist.d.ts","../../types.ts","../../vitest.config.ts","../../atoms/editing-chart.atom.ts","../../atoms/pivot-chart.atom.ts","../../basic-chart/basic-chart.tsx","../../basic-chart/helpers.ts","../../basic-chart/index.tsx","../../components/dialogs/chart-editor-dialog.tsx","../../components/dialogs/pivot-chart-dialog.tsx","../../components/editors/chart-editor-capabilities.ts","../../components/editors/chart-editor.tsx","../../components/editors/chart-range-input.tsx","../../components/editors/fields/axis-options-fields.tsx","../../components/editors/fields/chart-elements-fields.tsx","../../components/editors/fields/chart-type-options.tsx","../../components/editors/fields/data-labels-fields.tsx","../../components/editors/fields/primitives.tsx","../../components/editors/fields/series-format-fields.tsx","../../components/editors/fields/series-name-field.tsx","../../components/editors/fields/text-format-fields.tsx","../../hooks/use-chart-editor.ts","../../hooks/use-charts.ts","../../hooks/use-on-create-chart.ts","../../hooks/use-on-delete-chart.ts","../../hooks/use-on-move-chart-to-sheet.ts","../../hooks/use-on-move-chart.ts","../../hooks/use-on-resize-chart.ts","../../hooks/use-on-update-chart.ts","../../interface/create-chart.ts","../../interface/delete-chart.ts","../../interface/move-chart-to-sheet.ts","../../interface/move-chart.ts","../../interface/resize-chart.ts","../../interface/shift-chart-ranges.ts","../../interface/update-chart.ts","../../plotly/plot.ts","../../plotly/basic-chart/basic-chart.tsx","../../plotly/basic-chart/helpers.ts","../../plotly/basic-chart/index.tsx","../../utils/aggregation.ts","../../utils/axis-number-format.ts","../../utils/bar-layout.ts","../../utils/boxplot.ts","../../utils/bubble.ts","../../utils/category-levels.ts","../../utils/chart-image.ts","../../utils/chart-lines.ts","../../utils/chart-orientation.ts","../../utils/chart-spec-utils.ts","../../utils/chart-styles.ts","../../utils/data-table.ts","../../utils/doughnut.ts","../../utils/echarts-gl-loader.ts","../../utils/echarts-overlays.ts","../../utils/empty-cells.ts","../../utils/error-bars.ts","../../utils/excel-axis-scale.ts","../../utils/gradient.ts","../../utils/hierarchy.ts","../../utils/histogram.ts","../../utils/legend-layout.ts","../../utils/of-pie.ts","../../utils/overrides.ts","../../utils/pie-explosion.ts","../../utils/plotly-click.ts","../../utils/plotly-surface.ts","../../utils/plotly-title.ts","../../utils/radar.ts","../../utils/region-map-loader.ts","../../utils/region-map.ts","../../utils/series-click.ts","../../utils/series-name.ts","../../utils/stock.ts","../../utils/three-d.ts","../../utils/trendline.ts","../../utils/waterfall.ts","../../utils/webgl.ts"],"version":"5.8.3"}

package/dist/esm/types.d.ts

@@ -21,6 +21,16 @@ export type EChartComponentProps = ChartComponentProps & {
      * honored.
      */
     getFormattingFromRange?: ReturnType<typeof useSpreadsheetState>["getFormattingFromRange"];
+    /**
+     * Draw BAR_3D / LINE_3D / AREA_3D / SURFACE_3D specs through echarts-gl
+     * (WebGL). `false` keeps them on their 2-D fallback and never loads
+     * echarts-gl — for a page whose Content-Security-Policy has no
+     * `'unsafe-eval'`, which claygl needs. The spec keeps its
+     * `sourceChartType`, so the xlsx export still writes the 3-D chart. Pass
+     * the same value to `ChartEditor` so it hides the 3-D presets. Default
+     * `true`.
+     */
+    enable3D?: boolean;
     /**
      * Request edit chart
      * @param chart

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,aAAa,EACd,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAE3E,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,wBAAwB,EAAE,UAAU,CAClC,OAAO,mBAAmB,CAC3B,CAAC,0BAA0B,CAAC,CAAC;IAC9B;;OAEG;IACH,wBAAwB,EAAE,UAAU,CAClC,OAAO,mBAAmB,CAC3B,CAAC,0BAA0B,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,UAAU,CACjC,OAAO,mBAAmB,CAC3B,CAAC,wBAAwB,CAAC,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3C;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,oBAAoB,CAAC,CAAC;CAC7E,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,aAAa,EACd,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAE3E,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,GAAG;IACvD;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,wBAAwB,EAAE,UAAU,CAClC,OAAO,mBAAmB,CAC3B,CAAC,0BAA0B,CAAC,CAAC;IAC9B;;OAEG;IACH,wBAAwB,EAAE,UAAU,CAClC,OAAO,mBAAmB,CAC3B,CAAC,0BAA0B,CAAC,CAAC;IAC9B;;;;;OAKG;IACH,sBAAsB,CAAC,EAAE,UAAU,CACjC,OAAO,mBAAmB,CAC3B,CAAC,wBAAwB,CAAC,CAAC;IAC5B;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,CAAC;IAC3C;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,oBAAoB,CAAC,CAAC;CAC7E,CAAC"}

package/dist/esm/utils/chart-lines.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Excel's line-chart analysis elements (Chart Design → Add Chart Element →
+ * Lines / Up/Down Bars, demo-app-monorepo#49969 FT-08) as echarts bar series
+ * over the category axis:
+ *
+ * - High-low lines — a thin vertical line per category from the lowest to the
+ *   highest value of all the line series (`<c:hiLowLines/>`).
+ * - Up/down bars — a bar per category from the first line series' value to
+ *   the last one's: an up bar (white) where the last is higher, a down bar
+ *   (dark) where it is lower (`<c:upDownBars>`).
+ * - Drop lines — a thin vertical line per category from the axis to the
+ *   highest point (`<c:dropLines/>`).
+ *
+ * Each is a stack of an invisible base plus a visible span, so the bars can
+ * start anywhere on the value axis; `barGap: "-100%"` lays every one of them
+ * over the category's centre instead of side by side.
+ */
+export declare const CHART_LINE_SERIES_PREFIX = "rnc-chart-lines-";
+export type ChartLineOptions = {
+    hiLowLines?: boolean | null;
+    dropLines?: boolean | null;
+    upDownBars?: {
+        gapWidth?: number | null;
+        upColor?: string | null;
+        downColor?: string | null;
+    } | null;
+};
+/**
+ * The extra series for `options`, given the data of the chart's line series
+ * on one value axis, in spec order.
+ */
+export declare const buildChartLineSeries: (options: ChartLineOptions, lines: ReadonlyArray<ReadonlyArray<unknown>>, { isDarkMode, yAxisIndex }?: {
+    isDarkMode?: boolean;
+    yAxisIndex?: number;
+}) => Record<string, unknown>[];
+//# sourceMappingURL=chart-lines.d.ts.map

package/dist/esm/utils/chart-lines.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-lines.d.ts","sourceRoot":"","sources":["../../../utils/chart-lines.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,eAAO,MAAM,wBAAwB,qBAAqB,CAAC;AAE3D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE;QACX,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KAC3B,GAAG,IAAI,CAAC;CACV,CAAC;AAqDF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAC/B,SAAS,gBAAgB,EACzB,OAAO,aAAa,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,EAC5C,6BAA4B;IAAE,UAAU,CAAC,EAAE,OAAO,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAO,KAC7E,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAuEzB,CAAC"}

package/dist/esm/utils/chart-lines.js

@@ -0,0 +1,121 @@
+/**
+ * Excel's line-chart analysis elements (Chart Design → Add Chart Element →
+ * Lines / Up/Down Bars, demo-app-monorepo#49969 FT-08) as echarts bar series
+ * over the category axis:
+ *
+ * - High-low lines — a thin vertical line per category from the lowest to the
+ *   highest value of all the line series (`<c:hiLowLines/>`).
+ * - Up/down bars — a bar per category from the first line series' value to
+ *   the last one's: an up bar (white) where the last is higher, a down bar
+ *   (dark) where it is lower (`<c:upDownBars>`).
+ * - Drop lines — a thin vertical line per category from the axis to the
+ *   highest point (`<c:dropLines/>`).
+ *
+ * Each is a stack of an invisible base plus a visible span, so the bars can
+ * start anywhere on the value axis; `barGap: "-100%"` lays every one of them
+ * over the category's centre instead of side by side.
+ */
+export const CHART_LINE_SERIES_PREFIX = "rnc-chart-lines-";
+const finite = (item) => {
+    const raw = item !== null && typeof item === "object" && "value" in item
+        ? item.value
+        : item;
+    return typeof raw === "number" && Number.isFinite(raw) ? raw : undefined;
+};
+/** Excel's line colour for these elements: Text 1 at 75% (#404040). */
+const LINE_COLOR = "#404040";
+const spanSeries = ({ id, base, span, barWidth, itemStyle, yAxisIndex, }) => {
+    const common = {
+        type: "bar",
+        stack: `${CHART_LINE_SERIES_PREFIX}${id}`,
+        stackStrategy: "all",
+        barWidth,
+        barGap: "-100%",
+        silent: true,
+        legendHoverLink: false,
+        tooltip: { show: false },
+        emphasis: { disabled: true },
+        label: { show: false },
+        z: 1,
+        ...(yAxisIndex ? { yAxisIndex } : {}),
+    };
+    return [
+        {
+            ...common,
+            id: `${CHART_LINE_SERIES_PREFIX}${id}-base`,
+            data: base,
+            itemStyle: { color: "transparent" },
+        },
+        { ...common, id: `${CHART_LINE_SERIES_PREFIX}${id}`, data: span, itemStyle },
+    ];
+};
+/**
+ * The extra series for `options`, given the data of the chart's line series
+ * on one value axis, in spec order.
+ */
+export const buildChartLineSeries = (options, lines, { isDarkMode, yAxisIndex } = {}) => {
+    const color = isDarkMode ? "rgba(255,255,255,0.65)" : LINE_COLOR;
+    const length = lines.reduce((n, data) => Math.max(n, data.length), 0);
+    const out = [];
+    const extent = (i) => {
+        const values = lines.map((data) => finite(data[i])).filter((v) => v !== undefined);
+        return values.length
+            ? { low: Math.min(...values), high: Math.max(...values), count: values.length }
+            : undefined;
+    };
+    if (options.dropLines && lines.length) {
+        const base = [];
+        const span = [];
+        for (let i = 0; i < length; i++) {
+            const e = extent(i);
+            base.push(e ? 0 : null);
+            span.push(e ? e.high : null);
+        }
+        out.push(...spanSeries({ id: "drop", base, span, barWidth: 1, itemStyle: { color }, yAxisIndex }));
+    }
+    if (options.hiLowLines && lines.length > 1) {
+        const base = [];
+        const span = [];
+        for (let i = 0; i < length; i++) {
+            const e = extent(i);
+            const drawn = e && e.count > 1;
+            base.push(drawn ? e.low : null);
+            span.push(drawn ? e.high - e.low : null);
+        }
+        out.push(...spanSeries({ id: "hilow", base, span, barWidth: 1, itemStyle: { color }, yAxisIndex }));
+    }
+    if (options.upDownBars && lines.length > 1) {
+        const first = lines[0];
+        const last = lines[lines.length - 1];
+        const up = options.upDownBars.upColor ?? "#FFFFFF";
+        const down = options.upDownBars.downColor ?? (isDarkMode ? "#A6A6A6" : "#595959");
+        const base = [];
+        const span = [];
+        for (let i = 0; i < length; i++) {
+            const open = finite(first[i]);
+            const close = finite(last[i]);
+            if (open === undefined || close === undefined) {
+                base.push(null);
+                span.push(null);
+                continue;
+            }
+            base.push(Math.min(open, close));
+            span.push({
+                value: Math.abs(close - open),
+                itemStyle: { color: close >= open ? up : down },
+            });
+        }
+        // `<c:gapWidth>` is the gap as a % of the bar: the bar is 1 / (1 + gap) of the category.
+        const gap = options.upDownBars.gapWidth ?? 150;
+        const barWidth = `${Math.round(100 / (1 + Math.max(0, gap) / 100))}%`;
+        out.push(...spanSeries({
+            id: "updown",
+            base,
+            span,
+            barWidth,
+            itemStyle: { borderColor: color, borderWidth: 1 },
+            yAxisIndex,
+        }));
+    }
+    return out;
+};

package/dist/esm/utils/data-table.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Excel's chart data table (Add Chart Element → Data Table,
+ * demo-app-monorepo#49969 FT-08): one row per series under the category
+ * axis, each cell under its category, the series name (with its legend key)
+ * at the row's start. Drawn as extra category axes stacked below the plot:
+ * their labels are the formatted values, their axis line the horizontal
+ * border and their ticks — between categories — the vertical borders.
+ */
+export type DataTableOptions = {
+    showHorizontalBorder?: boolean | null;
+    showVerticalBorder?: boolean | null;
+    showOutline?: boolean | null;
+    showLegendKeys?: boolean | null;
+};
+export type DataTableRow = {
+    name: string;
+    color?: string;
+    values: string[];
+};
+/** Row height in pixels: 9 pt text plus padding. */
+export declare const DATA_TABLE_ROW_HEIGHT = 20;
+export declare const dataTableAxes: (rows: ReadonlyArray<DataTableRow>, options: DataTableOptions, { textColor, fontSize, borderColor, firstOffset, }: {
+    textColor: string;
+    fontSize: number;
+    borderColor?: string;
+    /** Below the category labels (the table's header row). */
+    firstOffset?: number;
+}) => Record<string, unknown>[];
+/** Room the row names need left of the plot (approximate glyph width). */
+export declare const dataTableNameWidth: (rows: ReadonlyArray<DataTableRow>, fontSize: number, legendKeys: boolean) => number;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/esm/utils/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../utils/data-table.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oBAAoB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC,eAAO,MAAM,aAAa,GACxB,MAAM,aAAa,CAAC,YAAY,CAAC,EACjC,SAAS,gBAAgB,EACzB,oDAKG;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,KACA,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAqCtB,CAAC;AAEL,0EAA0E;AAC1E,eAAO,MAAM,kBAAkB,GAC7B,MAAM,aAAa,CAAC,YAAY,CAAC,EACjC,UAAU,MAAM,EAChB,YAAY,OAAO,WAQb,CAAC"}