@rowsncolumns/charts 28.1.16 → 28.1.18

package/dist/esm/basic-chart/basic-chart.js

@@ -20,7 +20,7 @@ import { canSwitchRowColumn, cellLabelGetterFromRangeReader, switchRowColumn, }
 import { coerceCalculatedLabel, getChartDataRanges, } from "../utils/chart-spec-utils";
 import { getChartPalette } from "../utils/chart-styles";
 import { clampDoughnutHole, doughnutRings } from "../utils/doughnut";
-import { getEchartsGlState, loadEchartsGl, } from "../utils/echarts-gl-loader";
+import { getEchartsGlState, loadEchartsGl, markEchartsGlFailed, } from "../utils/echarts-gl-loader";
 import { buildEchartsOverlaySeries } from "../utils/echarts-overlays";
 import { applyEmptyCellsPolicy, connectsAcrossEmptyCells, isLineLikeChartType, isolatedPointIndexes, } from "../utils/empty-cells";
 import { gradientToEcharts } from "../utils/gradient";
@@ -29,6 +29,7 @@ import { aggregateByCategory, binHistogram, computePareto, isParetoSpec, } from
 import { categoryAxisNameGap, legendLabelsFrom, reserveEchartsLegendBand, } from "../utils/legend-layout";
 import { clampSecondPieSize, isOfPieChartSpec, otherSliceHalfAngle, resolveOfPieType, splitOfPie, } from "../utils/of-pie";
 import { applyAxisOverrides, applyLegendOverrides, buildSeriesLabelOption, dataLabelFormatter, resolveSeriesDataLabels, } from "../utils/overrides";
+import { themedTextStyle } from "../utils/overrides";
 import { explosionOffsetPx, pieRadiusPx, resolveExplosion, } from "../utils/pie-explosion";
 import { buildRadarIndicators, buildRadarSeriesData } from "../utils/radar";
 import { buildRegionMapData, buildSequentialColorRamp, isRegionMapSpec, resolveGeoScope, warnOnceForUnmatchedRegions, } from "../utils/region-map";
@@ -247,7 +248,7 @@ const defaultLegendConfig = {
 };
 /** Category-axis title gap: clears one row of tick labels (#986). */
 const CATEGORY_AXIS_NAME_GAP = categoryAxisNameGap();
-export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, locale, }) => {
+export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, locale, enable3D, }) => {
     const spec = chart.spec;
     const explicitChartTitle = chart.spec.title ?? undefined;
     const hierarchyTitleRef = useRef(explicitChartTitle);
@@ -427,7 +428,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         // SSR, import failure, PIE_3D) the 2-D fallback renders untouched.
         // The 3-D and region-map gates key off disjoint sourceChartType
         // tokens, so a spec can never satisfy both.
-        const threeDRenderKind = resolve3DRenderKind(spec.sourceChartType);
+        const threeDRenderKind = resolve3DRenderKind(spec.sourceChartType, { enable3D });
         const canRender3D = threeDRenderKind !== null && isWebGLAvailable();
         const willRender3D = canRender3D && getEchartsGlState() === "ready";
         if (canRender3D && !willRender3D && getEchartsGlState() !== "failed") {
@@ -1326,38 +1327,63 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     inRange: { color: [...SURFACE_COLOR_RAMP] },
                 };
             }
-            chartRef.current?.setOption({
-                tooltip: {
-                    textStyle: { fontSize: 12 },
-                    formatter: threeDTooltipFormatter,
-                },
-                legend: threeDRenderKind === "line3D" || stackedBar3D
-                    ? applyLegendOverrides({
-                        ...defaultLegendConfig,
-                        show: seriesNames.length > 1,
-                        data: seriesNames,
-                    }, spec.legend)
-                    : { show: false },
-                xAxis3D: { ...xAxis3D, name: spec.horizontalAxisTitle ?? "" },
-                yAxis3D: { ...yAxis3D, name: "" },
-                zAxis3D: { type: "value", name: spec.verticalAxisTitle ?? "" },
-                grid3D: {
-                    boxDepth: Math.max(20, Math.min(100, seriesNames.length * 20)),
-                    viewControl: { autoRotate: false },
-                },
-                ...(visualMap ? { visualMap: [visualMap] } : {}),
-                series: threeDSeries,
-            }, {
-                replaceMerge: [
-                    "series",
-                    "xAxis3D",
-                    "yAxis3D",
-                    "zAxis3D",
-                    "visualMap",
-                    "legend",
-                    "tooltip",
-                ],
-            });
+            // echarts-gl builds its GL scene inside setOption, and that can
+            // throw after the module loaded fine — claygl compiles compositor
+            // sizes with `new Function`, which a CSP without 'unsafe-eval'
+            // blocks (rowsncolumns/spreadsheet#1187). Latch the failure so no
+            // chart retries 3-D, drop the half-built instance and draw the 2-D
+            // fallback instead of leaving the chart blank.
+            try {
+                chartRef.current?.setOption({
+                    tooltip: {
+                        textStyle: { fontSize: 12 },
+                        formatter: threeDTooltipFormatter,
+                    },
+                    legend: threeDRenderKind === "line3D" || stackedBar3D
+                        ? applyLegendOverrides({
+                            ...defaultLegendConfig,
+                            show: seriesNames.length > 1,
+                            data: seriesNames,
+                        }, spec.legend)
+                        : { show: false },
+                    xAxis3D: { ...xAxis3D, name: spec.horizontalAxisTitle ?? "" },
+                    yAxis3D: { ...yAxis3D, name: "" },
+                    zAxis3D: { type: "value", name: spec.verticalAxisTitle ?? "" },
+                    grid3D: {
+                        boxDepth: Math.max(20, Math.min(100, seriesNames.length * 20)),
+                        viewControl: { autoRotate: false },
+                    },
+                    ...(visualMap ? { visualMap: [visualMap] } : {}),
+                    series: threeDSeries,
+                }, {
+                    replaceMerge: [
+                        "series",
+                        "xAxis3D",
+                        "yAxis3D",
+                        "zAxis3D",
+                        "visualMap",
+                        "legend",
+                        "tooltip",
+                    ],
+                });
+            }
+            catch (error) {
+                markEchartsGlFailed(error);
+                try {
+                    chartRef.current?.dispose();
+                }
+                catch {
+                    // A GL instance that threw mid-build may not dispose cleanly.
+                }
+                chartRef.current = undefined;
+                renderedIn3D.current = false;
+                previousChartType.current = undefined;
+                previousSeriesCount.current = undefined;
+                initializeChart();
+                applyThemeOptions();
+                await updateChart();
+                return;
+            }
             // Re-apply theme-derived title / palette / tooltip colors — lost
             // when the instance was re-initialized on entry into 3-D.
             renderedIn3D.current = true;
@@ -3175,28 +3201,20 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const options = {
                 title: {
                     text: title ?? undefined,
-                    textStyle: {
-                        color: authoredTitleFmt?.color ?? textColor,
-                        ...(authoredTitleFmt?.fontFamily
-                            ? { fontFamily: authoredTitleFmt.fontFamily }
-                            : {}),
-                        ...(typeof authoredTitleFmt?.fontSize === "number"
-                            ? { fontSize: authoredTitleFmt.fontSize }
-                            : {}),
-                        ...(authoredTitleFmt?.bold ? { fontWeight: "bold" } : {}),
-                        ...(authoredTitleFmt?.italic ? { fontStyle: "italic" } : {}),
-                    },
+                    // Every key is written (echarts merges setOption calls, so a key
+                    // left out keeps its previous value — turning bold off used to
+                    // leave the title bold, rowsncolumns/spreadsheet#1105).
+                    textStyle: themedTextStyle(authoredTitleFmt, {
+                        color: textColor,
+                        fontSize: 18,
+                        fontWeight: "bold",
+                    }),
                 },
                 legend: {
-                    textStyle: {
-                        color: authoredLegendFmt?.color ?? textColor,
-                        ...(authoredLegendFmt?.fontFamily
-                            ? { fontFamily: authoredLegendFmt.fontFamily }
-                            : {}),
-                        ...(typeof authoredLegendFmt?.fontSize === "number"
-                            ? { fontSize: authoredLegendFmt.fontSize }
-                            : {}),
-                    },
+                    textStyle: themedTextStyle(authoredLegendFmt, {
+                        color: textColor,
+                        fontSize: 12,
+                    }),
                 },
                 axisLabel: {
                     color: authoredDataLabelFmt?.color ?? textColor,
@@ -3239,7 +3257,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             chartRef.current.setOption(options);
         }
     };
-    // Update chart properties
+    // Update chart properties — the authored text formats are inputs too, so
+    // a font change applies at once instead of waiting for the next title
+    // edit (rowsncolumns/spreadsheet#1105).
     useIsomorphicLayoutEffect(() => {
         applyThemeOptions();
     }, [
@@ -3249,6 +3269,9 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         chart.spec.chartType,
         chart.spec.palette,
         chart.spec.backgroundColor,
+        chart.spec.titleTextFormat,
+        chart.spec.legend?.textFormat,
+        chart.spec.dataLabels?.textFormat,
     ]);
     // Draw chart. `glUpgradeTick` re-runs the draw when the lazily loaded
     // echarts-gl module resolves, upgrading a 3-D spec's immediate 2-D

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;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;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAuBF,eAAO,MAAM,WAAW,GAAI,gFAOzB,gBAAgB,sBAmhClB,CAAC;AAEF,eAAe,WAAW,CAAC"}

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

@@ -7,7 +7,7 @@ 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";
@@ -47,8 +47,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 +219,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,

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

@@ -1,9 +1,11 @@
 import type { ChartTextFormat } from "@rowsncolumns/spreadsheet";
 import React from "react";
 /**
- * Font family / size / colour / bold / italic / underline / strikethrough
- * of one text element — the chart title, the legend, an axis or the data
- * labels (`ChartTextFormat`, OOXML `<c:txPr>`).
+ * Font family / size / colour / bold / italic of one text element — the
+ * chart title, the legend, an axis or the data labels (`ChartTextFormat`,
+ * OOXML `<c:txPr>`). `underline` / `strikethrough` stay on the spec for the
+ * xlsx round trip but have no control: neither renderer draws them
+ * (rowsncolumns/spreadsheet#1105).
  */
 export declare const TextFormatFields: ({ label, value, onChange, collapsible, ariaLabels, }: {
     label: string;

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

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

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

@@ -2,9 +2,11 @@ import { Input } from "@rowsncolumns/ui";
 import React, { useState } from "react";
 import { CheckboxField, COLOR_CLASS } from "./primitives";
 /**
- * Font family / size / colour / bold / italic / underline / strikethrough
- * of one text element — the chart title, the legend, an axis or the data
- * labels (`ChartTextFormat`, OOXML `<c:txPr>`).
+ * Font family / size / colour / bold / italic of one text element — the
+ * chart title, the legend, an axis or the data labels (`ChartTextFormat`,
+ * OOXML `<c:txPr>`). `underline` / `strikethrough` stay on the spec for the
+ * xlsx round trip but have no control: neither renderer draws them
+ * (rowsncolumns/spreadsheet#1105).
  */
 export const TextFormatFields = ({ label, value, onChange, collapsible = false, ariaLabels, }) => {
     const [open, setOpen] = useState(!collapsible);
@@ -28,7 +30,5 @@ export const TextFormatFields = ({ label, value, onChange, collapsible = false,
                 }), className: "text-xs w-16", placeholder: "Size", "aria-label": ariaLabels?.size ?? `${label} size` }),
             React.createElement("input", { type: "color", value: value?.color ?? "#000000", onChange: (e) => set({ color: e.target.value }), className: COLOR_CLASS, "aria-label": ariaLabels?.color ?? `${label} color` }),
             React.createElement(CheckboxField, { label: "Bold", checked: Boolean(value?.bold), onChange: (bold) => set({ bold }) }),
-            React.createElement(CheckboxField, { label: "Italic", checked: Boolean(value?.italic), onChange: (italic) => set({ italic }) }),
-            React.createElement(CheckboxField, { label: "Underline", checked: Boolean(value?.underline), onChange: (underline) => set({ underline }) }),
-            React.createElement(CheckboxField, { label: "Strikethrough", checked: Boolean(value?.strikethrough), onChange: (strikethrough) => set({ strikethrough }) }))));
+            React.createElement(CheckboxField, { label: "Italic", checked: Boolean(value?.italic), onChange: (italic) => set({ italic }) }))));
 };

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/plotly/basic-chart/basic-chart.d.ts.map

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

package/dist/esm/plotly/basic-chart/basic-chart.js

@@ -230,6 +230,15 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat
             parts.push("percent");
         next.textinfo = parts.length ? parts.join("+") : "value";
         next.textposition = position;
+        if (opts.textFormat) {
+            const fmt = opts.textFormat;
+            next.textfont = {
+                ...(next.textfont ?? {}),
+                ...(fmt.fontFamily ? { family: fmt.fontFamily } : {}),
+                ...(typeof fmt.fontSize === "number" && fmt.fontSize > 0 ? { size: fmt.fontSize } : {}),
+                ...(fmt.color ? { color: fmt.color } : {}),
+            };
+        }
         // Values format like their source cells (or the authored `<c:numFmt>`):
         // plotly's own `%{value}` is a raw number, so the formatted strings
         // ride on `text` and a `texttemplate` mirrors the textinfo parts.
@@ -263,6 +272,39 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat
         if (isPoint)
             next.mode = withTextMode(next.mode);
     }
+    return applyDataLabelFontPlotly(next, opts.textFormat);
+};
+/**
+ * Excel's Format Data Labels → Font for a plotly trace: `textfont` carries
+ * family / size / colour, bold / italic are pseudo-HTML tags around each
+ * label (plotly fonts have no weight) — rowsncolumns/spreadsheet#1105.
+ */
+const applyDataLabelFontPlotly = (trace, fmt) => {
+    if (!fmt)
+        return trace;
+    const next = { ...trace };
+    const textfont = { ...(next.textfont ?? {}) };
+    if (fmt.fontFamily)
+        textfont.family = fmt.fontFamily;
+    if (typeof fmt.fontSize === "number" && fmt.fontSize > 0)
+        textfont.size = fmt.fontSize;
+    if (fmt.color)
+        textfont.color = fmt.color;
+    if (Object.keys(textfont).length)
+        next.textfont = textfont;
+    const wrap = (text) => {
+        if (text === null || text === undefined || text === "")
+            return text;
+        let out = String(text);
+        if (fmt.italic)
+            out = `<i>${out}</i>`;
+        if (fmt.bold)
+            out = `<b>${out}</b>`;
+        return out;
+    };
+    if ((fmt.bold || fmt.italic) && next.text !== undefined) {
+        next.text = Array.isArray(next.text) ? next.text.map(wrap) : wrap(next.text);
+    }
     return next;
 };
 const BUBBLE_CHART_TYPES = new Set([
@@ -617,12 +659,12 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         "top center"
                     : undefined;
                 const withLabels = (trace) => labelText
-                    ? {
+                    ? applyDataLabelFontPlotly({
                         ...trace,
                         mode: withTextMode(trace.mode),
                         text: labelText,
                         textposition: labelPosition,
-                    }
+                    }, labelOpts?.textFormat)
                     : trace;
                 if (isScatter) {
                     // Per-series marker.symbol = "none" → pure line (no markers).

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/echarts-gl-loader.d.ts

@@ -1,5 +1,11 @@
 export type EchartsGlLoadState = "unloaded" | "loading" | "ready" | "failed";
 export declare const getEchartsGlState: () => EchartsGlLoadState;
+/**
+ * Record that the loaded module failed at render time (echarts-gl threw
+ * from `setOption`), so the renderer keeps the 2-D fallback and never
+ * retries 3-D for the rest of the page's lifetime. Warns once per page.
+ */
+export declare const markEchartsGlFailed: (error?: unknown) => void;
 /**
  * Kick off (or join) the echarts-gl dynamic import and register the 3-D
  * charts/components the renderer uses. Resolves true when 3-D rendering is

package/dist/esm/utils/echarts-gl-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"echarts-gl-loader.d.ts","sourceRoot":"","sources":["../../../utils/echarts-gl-loader.ts"],"names":[],"mappings":"AAaA,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAK7E,eAAO,MAAM,iBAAiB,QAAO,kBAA2B,CAAC;AAEjE;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAO,OAAO,CAAC,OAAO,CAyB/C,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,8BAA8B,QAAO,IAGjD,CAAC"}
+{"version":3,"file":"echarts-gl-loader.d.ts","sourceRoot":"","sources":["../../../utils/echarts-gl-loader.ts"],"names":[],"mappings":"AAqBA,MAAM,MAAM,kBAAkB,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAK7E,eAAO,MAAM,iBAAiB,QAAO,kBAA2B,CAAC;AAgBjE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,QAAQ,OAAO,KAAG,IAUrD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAO,OAAO,CAAC,OAAO,CA8B/C,CAAC;AAEF,sDAAsD;AACtD,eAAO,MAAM,8BAA8B,QAAO,IAGjD,CAAC"}

package/dist/esm/utils/echarts-gl-loader.js

@@ -7,12 +7,47 @@
  * draws the 2-D fallback immediately, and upgrades to 3-D when the module
  * resolves. A failed import latches the "failed" state so the renderer
  * keeps the 2-D fallback without retrying on every update.
+ *
+ * A page whose Content-Security-Policy has no `'unsafe-eval'` is treated
+ * the same way: echarts-gl's `EffectCompositor` makes claygl compile its
+ * size expressions with `new Function`, which the browser blocks there
+ * (`EvalError`, surfaced by claygl as "Invalid expression."). The import
+ * itself still succeeds, so the loader probes `new Function` once before
+ * importing and latches "failed" instead of letting `setOption` throw
+ * later (rowsncolumns/spreadsheet#1187).
  */
 import { VisualMapComponent } from "echarts/components";
 import * as echarts from "echarts/core";
 let state = "unloaded";
 let loadPromise = null;
 export const getEchartsGlState = () => state;
+/**
+ * True when the page lets scripts construct functions from source — what
+ * claygl needs for every GL chart. False under a CSP whose `script-src`
+ * lacks `'unsafe-eval'`.
+ */
+const canEvaluateCode = () => {
+    try {
+        new Function("");
+        return true;
+    }
+    catch {
+        return false;
+    }
+};
+/**
+ * Record that the loaded module failed at render time (echarts-gl threw
+ * from `setOption`), so the renderer keeps the 2-D fallback and never
+ * retries 3-D for the rest of the page's lifetime. Warns once per page.
+ */
+export const markEchartsGlFailed = (error) => {
+    if (state !== "failed") {
+        // eslint-disable-next-line no-console
+        console.warn("echarts-gl failed to render a 3-D chart; 3-D charts render as their 2-D fallback on this page.", error);
+    }
+    state = "failed";
+    loadPromise = Promise.resolve(false);
+};
 /**
  * Kick off (or join) the echarts-gl dynamic import and register the 3-D
  * charts/components the renderer uses. Resolves true when 3-D rendering is
@@ -20,6 +55,11 @@ export const getEchartsGlState = () => state;
  */
 export const loadEchartsGl = () => {
     if (!loadPromise) {
+        if (!canEvaluateCode()) {
+            state = "failed";
+            loadPromise = Promise.resolve(false);
+            return loadPromise;
+        }
         state = "loading";
         loadPromise = Promise.all([
             import("echarts-gl/charts"),

package/dist/esm/utils/overrides.d.ts

@@ -1,4 +1,24 @@
 import type { LegendComponentOption } from "echarts";
+/**
+ * A complete echarts `textStyle` for a text element: the authored
+ * `ChartTextFormat` over the theme defaults, with every key present so a
+ * cleared setting (bold off, size blank) resets the element instead of
+ * keeping the previous merged value (rowsncolumns/spreadsheet#1105).
+ * Underline / strikethrough have no canvas text decoration in echarts and
+ * are not drawn.
+ */
+export declare const themedTextStyle: (fmt: any, defaults: {
+    color: string;
+    fontSize: number;
+    fontFamily?: string;
+    fontWeight?: "normal" | "bold";
+}) => {
+    color: any;
+    fontFamily: any;
+    fontSize: any;
+    fontWeight: "bold" | "normal";
+    fontStyle: "italic" | "normal";
+};
 /** Build an echarts `textStyle` from a parsed `ChartTextFormat`. */
 export declare const textFormatToEchartsTextStyle: (fmt: any) => Record<string, any> | undefined;
 export declare const applyLegendOverrides: (legend: LegendComponentOption, opts: any) => LegendComponentOption;

package/dist/esm/utils/overrides.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,EAC5B,SAAS,MAAM,QA4BhB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,SAAS,MAAM,EAEf,eAAa,MACT,QAAQ,GAAG,WAoDhB,CAAC;AAgCF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACnD,CAAC,GAAG,IAAI,GAAG,SAA6C,CAAC;AAE5D,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCAlGH,GAAG;aA+GhB,CAAC"}
+{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAWrD;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,GAC1B,KAAK,GAAG,EACR,UAAU;IACR,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAChC;;;;gBASG,MAAM,GACN,QAAQ;eACsC,QAAQ,GAAG,QAAQ;CACrE,CAAC;AAEH,oEAAoE;AACpE,eAAO,MAAM,4BAA4B,GAAI,KAAK,GAAG,oCASpD,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,QAAQ,qBAAqB,EAC7B,MAAM,GAAG,KACR,qBA6CF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,MAAM,GAAG,EACT,sBAAsB,MAAM,EAC5B,SAAS,MAAM,QA4BhB,CAAC;AAgBF,eAAO,MAAM,kBAAkB,GAC7B,MAAM,GAAG,EACT,SAAS,MAAM,EAEf,eAAa,MACT,QAAQ,GAAG,WAoDhB,CAAC;AAgCF;;;;;GAKG;AACH,eAAO,MAAM,uBAAuB,GAAI,CAAC,EACvC,YAAY,CAAC,GAAG,IAAI,GAAG,SAAS,EAChC,QAAQ;IAAE,UAAU,CAAC,EAAE,CAAC,GAAG,IAAI,CAAA;CAAE,GAAG,IAAI,GAAG,SAAS,KACnD,CAAC,GAAG,IAAI,GAAG,SAA6C,CAAC;AAE5D,eAAO,MAAM,sBAAsB,GACjC,MAAM,GAAG,EACT,aAAa,MAAM,EACnB,SAAS,MAAM;;;iCAlGH,GAAG;aAoHhB,CAAC"}

package/dist/esm/utils/overrides.js

@@ -5,6 +5,23 @@ import { formatAxisValue, valueAxisLabelFormatter } from "./axis-number-format";
 // option assembly and the bubble / hierarchy / radar / stock early
 // branches in `basic-chart.tsx` so every chart type honors the same
 // spec-level overrides.
+/**
+ * A complete echarts `textStyle` for a text element: the authored
+ * `ChartTextFormat` over the theme defaults, with every key present so a
+ * cleared setting (bold off, size blank) resets the element instead of
+ * keeping the previous merged value (rowsncolumns/spreadsheet#1105).
+ * Underline / strikethrough have no canvas text decoration in echarts and
+ * are not drawn.
+ */
+export const themedTextStyle = (fmt, defaults) => ({
+    color: fmt?.color ?? defaults.color,
+    fontFamily: fmt?.fontFamily ?? defaults.fontFamily ?? "sans-serif",
+    fontSize: typeof fmt?.fontSize === "number" && fmt.fontSize > 0
+        ? fmt.fontSize
+        : defaults.fontSize,
+    fontWeight: (fmt ? (fmt.bold ? "bold" : "normal") : defaults.fontWeight ?? "normal"),
+    fontStyle: (fmt?.italic ? "italic" : "normal"),
+});
 /** Build an echarts `textStyle` from a parsed `ChartTextFormat`. */
 export const textFormatToEchartsTextStyle = (fmt) => {
     if (!fmt)
@@ -201,9 +218,14 @@ export const buildSeriesLabelOption = (opts, seriesType, locale) => {
         ? ECHARTS_POINT_DLBL_POS
         : ECHARTS_DLBL_POS;
     const position = (opts.position && positions[opts.position]) ?? "top";
+    // Excel's Format Data Labels → Font: colour, family, size, bold, italic
+    // (rowsncolumns/spreadsheet#1105). Keys are only written when authored so
+    // a label keeps its series-aware default colour otherwise.
+    const font = textFormatToEchartsTextStyle(opts.textFormat) ?? {};
     return {
         show: true,
         position,
         formatter: dataLabelFormatter(opts, locale),
+        ...font,
     };
 };

package/dist/esm/utils/three-d.d.ts

@@ -44,14 +44,25 @@ export declare const normalize3DSourceType: (sourceChartType?: string | null) =>
 export declare const is3DSpec: (spec: {
     sourceChartType?: string | null;
 } | null | undefined) => boolean;
+/** Host opt-out of the WebGL pipeline (`enable3D` on the renderer / editor). */
+export type ThreeDRenderOptions = {
+    /**
+     * `false` keeps every spec on its 2-D fallback: echarts-gl is never
+     * loaded and the Chart editor offers no echarts-gl preset. The spec's
+     * `sourceChartType` is untouched, so the xlsx export still writes the
+     * 3-D chart (rowsncolumns/spreadsheet#1187). Default `true`.
+     */
+    enable3D?: boolean;
+};
 /**
  * Map a `sourceChartType` token to the echarts-gl series kind it renders
  * as, or null when the 3-D pipeline should not run:
  * - PIE_3D — echarts-gl has no pie3D, so the 2-D pie fallback stays.
  * - AREA_3D — echarts-gl has no area3D; rendered as line3D.
  * - non-3-D / unknown tokens.
+ * - any token when the host turned 3-D off (`enable3D: false`).
  */
-export declare const resolve3DRenderKind: (sourceChartType?: string | null) => ThreeDRenderKind | null;
+export declare const resolve3DRenderKind: (sourceChartType?: string | null, options?: ThreeDRenderOptions) => ThreeDRenderKind | null;
 /** Excel's Contour: the surface grid seen from above, as a flat heatmap. */
 export declare const isContourSpec: (spec: {
     sourceChartType?: string | null;