@rowsncolumns/charts 28.1.6 → 28.1.8

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

@@ -5,7 +5,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal
 import { chartPaletteColorAt, debug, expandChartPalette, isAFormula, isNil, ssfFormat, } from "@rowsncolumns/utils";
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { aggregateSeriesByDomain, getDomainValuesForAxis, sanitizeDomainValues, shouldAggregateSeries, } from "../../utils/aggregation";
-import { formatAxisValue, numberFormatToPlotlyTicks, resolveSeriesNumberFormats, resolveValueAxisNumberFormat, valueAxisNameGap, } from "../../utils/axis-number-format";
+import { formatAxisValue, numberFormatToPlotlyTicks, plotlySeparators, resolveSeriesNumberFormats, resolveValueAxisNumberFormat, valueAxisNameGap, } from "../../utils/axis-number-format";
 import { computeBoxplotSummary } from "../../utils/boxplot";
 import { createBubbleSizeScale, prepareBubbleSeriesData, toLabelString, } from "../../utils/bubble";
 import { canSwitchRowColumn, cellLabelGetterFromRangeReader, switchRowColumn, } from "../../utils/chart-orientation";
@@ -17,6 +17,8 @@ import { computeErrorBars, resolveCustomErrorBarValues, } from "../../utils/erro
 import { plotlyMulticategoryX, resolveCategoryLevels, } from "../../utils/category-levels";
 import { gradientToPlotly } from "../../utils/gradient";
 import { BAND_GAP, legendLabelsFrom, measureTextWidth, reservePlotlyLegendBand, } from "../../utils/legend-layout";
+import { clampDoughnutHole, doughnutRings } from "../../utils/doughnut";
+import { resolveSeriesDataLabels } from "../../utils/overrides";
 import { plotlyTitleText } from "../../utils/plotly-title";
 import { explosionToPlotlyPull, resolveExplosion, } from "../../utils/pie-explosion";
 import { resolvePlotlyClickSelection, wasDragged, } from "../../utils/plotly-click";
@@ -179,14 +181,44 @@ const PLOTLY_DLBL_POS_BAR = {
     insideEnd: "inside",
     outsideEnd: "outside",
     bestFit: "outside",
+    above: "outside",
+    below: "outside",
+    left: "outside",
+    right: "outside",
 };
-const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat) => {
+// A scatter trace (line / area / scatter) places its text with the compass
+// positions, and only draws it when `mode` carries `text`. Excel's line
+// placements are centre / left / right / above / below; the bar-only ones
+// land on Excel's default for a line, above the point (#1049).
+const PLOTLY_DLBL_POS_POINT = {
+    center: "middle center",
+    inside: "middle center",
+    outside: "top center",
+    insideEnd: "top center",
+    outsideEnd: "top center",
+    bestFit: "top center",
+    above: "top center",
+    below: "bottom center",
+    left: "middle left",
+    right: "middle right",
+};
+const withTextMode = (mode) => {
+    const base = typeof mode === "string" && mode ? mode : "lines+markers";
+    return base.split("+").includes("text") ? base : `${base}+text`;
+};
+const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat, locale) => {
     if (!opts?.show)
         return trace;
     const next = { ...trace };
     const isCircular = chartType === "pie" || chartType === "doughnut";
-    const posMap = isCircular ? PLOTLY_DLBL_POS_PIE : PLOTLY_DLBL_POS_BAR;
-    const position = opts.position ? posMap[opts.position] ?? "inside" : "inside";
+    const isPoint = !isCircular && next.type === "scatter";
+    const posMap = isCircular
+        ? PLOTLY_DLBL_POS_PIE
+        : isPoint
+            ? PLOTLY_DLBL_POS_POINT
+            : PLOTLY_DLBL_POS_BAR;
+    const fallback = isPoint ? "top center" : "inside";
+    const position = opts.position ? posMap[opts.position] ?? fallback : fallback;
     if (isCircular) {
         // Plotly's pie trace uses `textinfo` to control which fields render.
         const parts = [];
@@ -204,7 +236,7 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat
         const pattern = opts.numberFormatPattern ?? sourceNumberFormat;
         if (pattern) {
             const values = Array.isArray(next.values) ? next.values : [];
-            next.text = values.map((v) => formatAxisValue(pattern, v));
+            next.text = values.map((v) => formatAxisValue(pattern, v, locale));
             next.texttemplate = next.textinfo
                 .split("+")
                 .map((part) => (part === "value" ? "%{text}" : `%{${part}}`))
@@ -223,9 +255,13 @@ const applyDataLabelsToTracePlotly = (trace, opts, chartType, sourceNumberFormat
         const values = next.orientation === "h" ? next.x : next.y;
         const vals = Array.isArray(values) ? values : [];
         next.text = pattern
-            ? vals.map((v) => (v === null || v === undefined ? "" : ssfFormat(pattern, v)))
-            : values;
+            ? vals.map((v) => v === null || v === undefined ? "" : ssfFormat(pattern, v, locale))
+            : locale
+                ? vals.map((v) => formatAxisValue(undefined, v, locale))
+                : values;
         next.textposition = position;
+        if (isPoint)
+            next.mode = withTextMode(next.mode);
     }
     return next;
 };
@@ -345,7 +381,7 @@ const addAlphaToColor = (color, alpha) => {
     }
     return color;
 };
-export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, }) => {
+export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, getFormattingFromRange, onDeleteChart, onUpdateChart, onRequestEdit, onRequestCalculate, isSelected, fieldButtons, locale, }) => {
     const spec = chart.spec;
     const hierarchyTitleRef = useRef(undefined);
     const explicitChartTitle = chart.spec.title ?? undefined;
@@ -848,7 +884,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             }
             // buildRadarIndicators keeps category/value alignment consistent
             // with the echarts renderer (and validates we have axes).
-            const indicators = buildRadarIndicators(categories, radarInputs);
+            // One value scale for every axis (Excel), from the spec's value-axis
+            // min / max when set (#1066).
+            const radarAxisOptions = spec.valueAxisOptions;
+            const indicators = buildRadarIndicators(categories, radarInputs, radarAxisOptions);
             for (let i = 0; i < radarInputs.length; i++) {
                 const input = radarInputs[i];
                 const seriesColor = spec.series?.[i]?.color ?? undefined;
@@ -864,7 +903,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     ...(seriesColor ? { line: { color: seriesColor } } : {}),
                 });
             }
-            const maxR = indicators.reduce((m, ind) => Math.max(m, ind.max), 0);
+            const radarScale = indicators[0] ?? { min: 0, max: 1 };
             setPlotData(radarTraces);
             setLayout({
                 title: { text: plotlyTitleText(title, spec.titleTextFormat) },
@@ -874,8 +913,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 showlegend: radarTraces.length > 1,
                 polar: {
                     radialaxis: {
-                        visible: true,
-                        range: [0, maxR > 0 ? maxR : 1],
+                        visible: radarAxisOptions?.visible !== false,
+                        range: [radarScale.min, radarScale.max],
                     },
                 },
                 margin: { l: 50, r: 50, t: 50, b: 50 },
@@ -1833,6 +1872,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             : valueAxisNameGap({
                 values: primaryValues,
                 pattern: primaryAxisNumberFormat,
+                locale,
                 fontSize: axisFontSize,
                 minimum: 0,
             }) -
@@ -1848,6 +1888,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     ? trace.y
                     : []),
                 pattern: secondaryAxisNumberFormat,
+                locale,
                 fontSize: axisFontSize,
                 minimum: 0,
             }) -
@@ -2008,8 +2049,26 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 : {}),
         };
         // Phase 5.1: apply data labels per trace, and set the doughnut hole
-        // when chartType === "doughnut".
+        // when chartType === "doughnut". A series' own `dataLabels` replace the
+        // chart-level ones for its trace (#1059).
         const dlOpts = spec.dataLabels;
+        // Excel nests a doughnut's series as concentric rings, series 0
+        // innermost (#1065): each pie trace is scaled into a centred sub-domain
+        // whose radius is its ring's outer edge, with the hole at the inner one.
+        const doughnutSeriesOrder = spec.chartType === "doughnut"
+            ? traces
+                .filter((t) => t?.type === "pie")
+                .map((t) => t?.meta?.rncSeriesIndex)
+                .filter((i) => typeof i === "number")
+                .sort((a, b) => a - b)
+            : [];
+        const doughnutRingSet = spec.chartType === "doughnut"
+            ? doughnutRings(clampDoughnutHole(spec.doughnutHoleSize), doughnutSeriesOrder.length)
+            : [];
+        const traceDataLabels = (trace) => {
+            const specIndex = trace?.meta?.rncSeriesIndex;
+            return resolveSeriesDataLabels(dlOpts, typeof specIndex === "number" ? spec.series?.[specIndex] : undefined);
+        };
         const doughnutHole = spec.doughnutHoleSize;
         // Data labels are linked to each series' OWN source cells (Excel's
         // `<c:dLbls><c:numFmt sourceLinked="1">`); the axis format only steps
@@ -2028,14 +2087,19 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         const piePull = isOfPie ? undefined : explosionToPlotlyPull(resolveExplosion(spec));
         const formattedTraces = traces.map((trace) => {
             const pattern = traceNumberFormat(trace);
-            let next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType, pattern);
+            let next = applyDataLabelsToTracePlotly(trace, traceDataLabels(trace), spec.chartType, pattern, locale);
             if (next.type === "pie") {
+                // Plotly's pie prints every slice's percentage by default; Excel
+                // draws nothing until data labels are on (#1062).
+                if (!traceDataLabels(trace)?.show) {
+                    next = { ...next, textinfo: "none" };
+                }
                 // Hover values format like the slice's source cell.
                 if (pattern && !next.text) {
                     const values = Array.isArray(next.values) ? next.values : [];
                     next = {
                         ...next,
-                        text: values.map((v) => formatAxisValue(pattern, v)),
+                        text: values.map((v) => formatAxisValue(pattern, v, locale)),
                         hoverinfo: "label+text+percent+name",
                     };
                 }
@@ -2062,7 +2126,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 if (seriesPattern && Array.isArray(values)) {
                     next = {
                         ...next,
-                        customdata: values.map((v) => formatAxisValue(seriesPattern, v)),
+                        customdata: values.map((v) => formatAxisValue(seriesPattern, v, locale)),
                         hovertemplate: `${horizontal ? "%{y}" : "%{x}"}<br>%{customdata}<extra>%{fullData.name}</extra>`,
                     };
                 }
@@ -2072,12 +2136,17 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             // (doughnutHoleSize); clamp like the echarts renderer and default
             // to 0.5 when unset.
             if (spec.chartType === "doughnut" && next.type === "pie") {
-                next = {
-                    ...next,
-                    hole: typeof doughnutHole === "number"
-                        ? Math.max(0, Math.min(0.9, doughnutHole))
-                        : 0.5,
-                };
+                const rank = doughnutSeriesOrder.indexOf(next.meta?.rncSeriesIndex);
+                const ring = doughnutRingSet[rank] ?? doughnutRings(clampDoughnutHole(doughnutHole), 1)[0];
+                // Plotly's `hole` is a fraction of the trace's own radius.
+                next = { ...next, hole: ring.inner / ring.outer };
+                if (doughnutRingSet.length > 1) {
+                    const half = ring.outer / 2;
+                    next = {
+                        ...next,
+                        domain: { x: [0.5 - half, 0.5 + half], y: [0.5 - half, 0.5 + half] },
+                    };
+                }
             }
             return next;
         });
@@ -2104,6 +2173,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         getDomainValuesFromRange,
         getSeriesValuesFromRange,
         getFormattingFromRange,
+        locale,
     ]);
     // Update theme
     useIsomorphicLayoutEffect(() => {
@@ -2141,7 +2211,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         scrollZoom: false,
         doubleClick: false,
     };
-    const plotLayout = useMemo(() => ({ ...layout, dragmode: false }), [layout]);
+    // Ticks and hover values plotly formats itself use the sheet's separators.
+    const separators = useMemo(() => plotlySeparators(locale), [locale]);
+    const plotLayout = useMemo(() => ({
+        ...layout,
+        dragmode: false,
+        ...(separators ? { separators } : {}),
+    }), [layout, separators]);
     // Excel's "Rounded Corners" chart frame (`<c:roundedCorners val="1"/>`
     // at the chartSpace root). Default per OOXML §21.2.2.183 is square,
     // so only opt in when the workbook explicitly set the flag.

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.tsx","../../components/editors/chart-range-input.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/echarts-gl-loader.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/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.tsx","../../components/editors/chart-range-input.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/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/stock.ts","../../utils/three-d.ts","../../utils/trendline.ts","../../utils/waterfall.ts","../../utils/webgl.ts"],"version":"5.8.3"}

package/dist/esm/utils/axis-number-format.d.ts

@@ -26,17 +26,28 @@ export declare const resolveValueAxisNumberFormat: ({ axisOptions, series, getFo
     getFormattingFromRange: RangeFormatReader | undefined;
     hiddenDimensionStrategy?: HIDDEN_DIMENSION_STRATEGY | null;
 }) => string | undefined;
-/** Format one numeric value through the resolved pattern; non-numbers pass through. */
-export declare const formatAxisValue: (pattern: string | undefined, value: unknown) => string;
-/** echarts `axisLabel.formatter` / `tooltip.valueFormatter` for a value axis. */
-export declare const valueAxisLabelFormatter: (pattern: string | undefined) => ((value: unknown) => string) | undefined;
+export declare const formatPlainNumber: (value: number, locale: string | undefined, grouping?: boolean) => string;
+/**
+ * Format one numeric value through the resolved pattern; non-numbers pass
+ * through. `locale` is the spreadsheet locale the cells format with: it
+ * picks the pattern's separators, and a number without a pattern reads
+ * like a `General` cell in that locale.
+ */
+export declare const formatAxisValue: (pattern: string | undefined, value: unknown, locale?: string) => string;
+/**
+ * echarts `axisLabel.formatter` / `tooltip.valueFormatter` for a value
+ * axis. Without a pattern the ticks keep echarts' own labels unless a
+ * locale is given, in which case they group thousands the way echarts
+ * does but with the locale's separators (#1050).
+ */
+export declare const valueAxisLabelFormatter: (pattern: string | undefined, locale?: string) => ((value: unknown) => string) | undefined;
 /**
  * echarts `tooltip.valueFormatter` for a series whose data items are
  * tuples (candlestick, 3-D points): every number formats through the
  * pattern; `undefined` when there is no pattern so echarts keeps its
  * default.
  */
-export declare const tooltipValueFormatter: (pattern: string | undefined) => ((value: unknown) => string | string[]) | undefined;
+export declare const tooltipValueFormatter: (pattern: string | undefined, locale?: string) => ((value: unknown) => string | string[]) | undefined;
 /**
  * Excel's data labels and tooltips are linked to *each series' own* source
  * cells, not to the axis: a revenue series formatted `$#,##0` next to a
@@ -45,11 +56,18 @@ export declare const tooltipValueFormatter: (pattern: string | undefined) => ((v
  */
 export declare const resolveSeriesNumberFormats: (series: Pick<ChartData, "sources">[] | undefined, getFormattingFromRange: RangeFormatReader | undefined, hiddenDimensionStrategy?: HIDDEN_DIMENSION_STRATEGY | null) => (string | undefined)[];
 /** echarts pie / doughnut tooltip: `name: value (percent%)` with the value formatted. */
-export declare const circularTooltipFormatter: (pattern: string | undefined) => (params: {
+export declare const circularTooltipFormatter: (pattern: string | undefined, locale?: string) => (params: {
     name?: string;
     value?: unknown;
     percent?: number;
 }) => string;
+/**
+ * plotly `layout.separators` for the spreadsheet locale: the decimal
+ * separator followed by the thousands separator, so ticks and hover
+ * values plotly formats itself read like the sheet's cells (#1050).
+ * `undefined` without a locale keeps plotly's default (`.,`).
+ */
+export declare const plotlySeparators: (locale: string | undefined) => string | undefined;
 export type PlotlyTickFormat = {
     tickformat?: string;
     tickprefix?: string;
@@ -73,9 +91,10 @@ export declare const numberFormatToPlotlyTicks: (pattern: string | undefined) =>
  * measured; the fixed default of 50px only fits labels up to ~4 digits and
  * lets a currency axis title paint over its own tick labels.
  */
-export declare const valueAxisNameGap: ({ values, pattern, fontSize, minimum, }: {
+export declare const valueAxisNameGap: ({ values, pattern, locale, fontSize, minimum, }: {
     values: readonly unknown[];
     pattern: string | undefined;
+    locale?: string;
     fontSize?: number;
     minimum?: number;
 }) => number;

package/dist/esm/utils/axis-number-format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"axis-number-format.d.ts","sourceRoot":"","sources":["../../../utils/axis-number-format.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,yBAAyB,EACzB,KAAK,EACL,UAAU,EACX,MAAM,2BAA2B,CAAC;AAWnC,KAAK,iBAAiB,GAAG,CACvB,UAAU,EAAE,UAAU,EACtB,uBAAuB,CAAC,EAAE,yBAAyB,KAChD,OAAO,EAAE,CAAC;AAMf;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,SAAS,KAAK,CAAC,MAAM,CAAC,GAAG,SAAS,YAGjC,CAAC;AAExC;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,GACpC,SAAS,UAAU,EAAE,GAAG,SAAS,EACjC,wBAAwB,iBAAiB,GAAG,SAAS,EACrD,0BAA0B,yBAAyB,GAAG,IAAI,KACzD,MAAM,GAAG,SAWX,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,4BAA4B,GAAI,2EAK1C;IACD,WAAW,EAAE,KAAK,CAAC;QAAE,mBAAmB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAA;KAAE,CAAC,GAAG,SAAS,CAAC;IACxE,MAAM,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,CAAC;IACrC,sBAAsB,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACtD,uBAAuB,CAAC,EAAE,yBAAyB,GAAG,IAAI,CAAC;CAC5D,KAAG,MAAM,GAAG,SAQZ,CAAC;AAEF,uFAAuF;AACvF,eAAO,MAAM,eAAe,GAC1B,SAAS,MAAM,GAAG,SAAS,EAC3B,OAAO,OAAO,KACb,MAIF,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,uBAAuB,GAAI,SAAS,MAAM,GAAG,SAAS,cAC/C,OAAO,wBAAgD,CAAC;AAE5E;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,SAAS,MAAM,GAAG,SAAS,cAEnD,OAAO,mCAIN,CAAC;AAEhB;;;;;GAKG;AACH,eAAO,MAAM,0BAA0B,GACrC,QAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC,EAAE,GAAG,SAAS,EAChD,wBAAwB,iBAAiB,GAAG,SAAS,EACrD,0BAA0B,yBAAyB,GAAG,IAAI,KACzD,CAAC,MAAM,GAAG,SAAS,CAAC,EAOpB,CAAC;AAEJ,yFAAyF;AACzF,eAAO,MAAM,wBAAwB,GAClC,SAAS,MAAM,GAAG,SAAS,MAC3B,QAAQ;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,WAGvD,CAAC;AAET,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,yBAAyB,GACpC,SAAS,MAAM,GAAG,SAAS,KAC1B,gBAAgB,GAAG,SA4DrB,CAAC;AA2BF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,GAAI,yCAK9B;IACD,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC;IAC3B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAG,MAgBH,CAAC"}
+{"version":3,"file":"axis-number-format.d.ts","sourceRoot":"","sources":["../../../utils/axis-number-format.ts"],"names":[],"mappings":"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"}

package/dist/esm/utils/axis-number-format.js

@@ -37,26 +37,76 @@ export const resolveValueAxisNumberFormat = ({ axisOptions, series, getFormattin
         return isGeneralNumberFormat(explicit) ? undefined : explicit;
     return resolveSourceNumberFormat(series[0]?.sources, getFormattingFromRange, hiddenDimensionStrategy);
 };
-/** Format one numeric value through the resolved pattern; non-numbers pass through. */
-export const formatAxisValue = (pattern, value) => {
+// A number with no number format, in the spreadsheet locale (#1050). The
+// grid's cells show such a value through `General` — the locale's decimal
+// separator, no grouping — so a data label or tooltip reads the same;
+// echarts' default tick label groups thousands, so ticks keep grouping.
+// `toPrecision(15)` is Excel's significant-digit view of the double, which
+// drops binary noise such as `0.30000000000000004`.
+const plainNumberFormatters = new Map();
+const plainNumberFormatter = (locale, grouping) => {
+    const key = `${locale}\u0000${grouping ? 1 : 0}`;
+    let formatter = plainNumberFormatters.get(key);
+    if (!formatter) {
+        try {
+            formatter = new Intl.NumberFormat(locale, {
+                useGrouping: grouping,
+                maximumFractionDigits: 20,
+            });
+        }
+        catch {
+            formatter = new Intl.NumberFormat("en-US", {
+                useGrouping: grouping,
+                maximumFractionDigits: 20,
+            });
+        }
+        plainNumberFormatters.set(key, formatter);
+    }
+    return formatter;
+};
+export const formatPlainNumber = (value, locale, grouping = false) => Number.isFinite(value)
+    ? plainNumberFormatter(locale ?? "en-US", grouping).format(Number(value.toPrecision(15)))
+    : String(value);
+/**
+ * Format one numeric value through the resolved pattern; non-numbers pass
+ * through. `locale` is the spreadsheet locale the cells format with: it
+ * picks the pattern's separators, and a number without a pattern reads
+ * like a `General` cell in that locale.
+ */
+export const formatAxisValue = (pattern, value, locale) => {
     if (value === undefined || value === null)
         return "";
-    if (pattern && typeof value === "number")
-        return ssfFormat(pattern, value);
+    if (typeof value === "number") {
+        if (pattern)
+            return ssfFormat(pattern, value, locale);
+        if (locale)
+            return formatPlainNumber(value, locale);
+    }
     return String(value);
 };
-/** echarts `axisLabel.formatter` / `tooltip.valueFormatter` for a value axis. */
-export const valueAxisLabelFormatter = (pattern) => pattern ? (value) => formatAxisValue(pattern, value) : undefined;
+/**
+ * echarts `axisLabel.formatter` / `tooltip.valueFormatter` for a value
+ * axis. Without a pattern the ticks keep echarts' own labels unless a
+ * locale is given, in which case they group thousands the way echarts
+ * does but with the locale's separators (#1050).
+ */
+export const valueAxisLabelFormatter = (pattern, locale) => pattern
+    ? (value) => formatAxisValue(pattern, value, locale)
+    : locale
+        ? (value) => typeof value === "number"
+            ? formatPlainNumber(value, locale, true)
+            : formatAxisValue(undefined, value)
+        : undefined;
 /**
  * echarts `tooltip.valueFormatter` for a series whose data items are
  * tuples (candlestick, 3-D points): every number formats through the
  * pattern; `undefined` when there is no pattern so echarts keeps its
  * default.
  */
-export const tooltipValueFormatter = (pattern) => pattern
+export const tooltipValueFormatter = (pattern, locale) => pattern
     ? (value) => Array.isArray(value)
-        ? value.map((entry) => formatAxisValue(pattern, entry))
-        : formatAxisValue(pattern, value)
+        ? value.map((entry) => formatAxisValue(pattern, entry, locale))
+        : formatAxisValue(pattern, value, locale)
     : undefined;
 /**
  * Excel's data labels and tooltips are linked to *each series' own* source
@@ -66,7 +116,27 @@ export const tooltipValueFormatter = (pattern) => pattern
  */
 export const resolveSeriesNumberFormats = (series, getFormattingFromRange, hiddenDimensionStrategy) => (series ?? []).map((entry) => resolveSourceNumberFormat(entry?.sources, getFormattingFromRange, hiddenDimensionStrategy));
 /** echarts pie / doughnut tooltip: `name: value (percent%)` with the value formatted. */
-export const circularTooltipFormatter = (pattern) => (params) => `${params.name ?? ""}: ${formatAxisValue(pattern, params.value)} (${params.percent ?? ""}%)`;
+export const circularTooltipFormatter = (pattern, locale) => (params) => `${params.name ?? ""}: ${formatAxisValue(pattern, params.value, locale)} (${params.percent ?? ""}%)`;
+/**
+ * plotly `layout.separators` for the spreadsheet locale: the decimal
+ * separator followed by the thousands separator, so ticks and hover
+ * values plotly formats itself read like the sheet's cells (#1050).
+ * `undefined` without a locale keeps plotly's default (`.,`).
+ */
+export const plotlySeparators = (locale) => {
+    if (!locale)
+        return undefined;
+    let parts;
+    try {
+        parts = new Intl.NumberFormat(locale).formatToParts(1234.5);
+    }
+    catch {
+        return undefined;
+    }
+    const decimal = parts.find((p) => p.type === "decimal")?.value ?? ".";
+    const group = parts.find((p) => p.type === "group")?.value ?? ",";
+    return `${decimal}${group}`;
+};
 /**
  * Translate the numeric subset of a SpreadsheetML pattern into plotly's
  * d3-format axis settings (`tickformat` + literal prefix / suffix). Plotly
@@ -190,15 +260,15 @@ const measureLabelWidth = (text, fontSize) => {
  * measured; the fixed default of 50px only fits labels up to ~4 digits and
  * lets a currency axis title paint over its own tick labels.
  */
-export const valueAxisNameGap = ({ values, pattern, fontSize = 12, minimum = 50, }) => {
+export const valueAxisNameGap = ({ values, pattern, locale, fontSize = 12, minimum = 50, }) => {
     const numbers = values.filter((v) => typeof v === "number" && Number.isFinite(v));
     if (!numbers.length)
         return minimum;
     const min = Math.min(...numbers, 0);
     const max = Math.max(...numbers, 0);
     // echarts' default axis label puts thousands separators on plain numbers.
-    const defaultLabel = (v) => v.toLocaleString("en-US");
-    const labels = [min, max].map((v) => pattern ? formatAxisValue(pattern, v) : defaultLabel(v));
+    const defaultLabel = (v) => formatPlainNumber(v, locale, true);
+    const labels = [min, max].map((v) => pattern ? formatAxisValue(pattern, v, locale) : defaultLabel(v));
     const widest = Math.max(...labels.map((l) => measureLabelWidth(l, fontSize)));
     // 8px tick-label margin + the rotated title's own line box + breathing room.
     const AXIS_LABEL_MARGIN = 8;

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

@@ -0,0 +1,19 @@
+/**
+ * Doughnut geometry shared by the renderers (rowsncolumns/spreadsheet#1064,
+ * #1065). Every fraction here is of the doughnut's OUTER radius — Excel's
+ * `<c:holeSize val="75"/>` is 0.75 of the outer edge, whatever the chart
+ * draws that edge at (echarts: 75% of the chart; plotly: the trace domain).
+ */
+/** `doughnutHoleSize` clamped to Excel's 0-90% range; 0.5 when unset. */
+export declare const clampDoughnutHole: (hole: unknown) => number;
+export type DoughnutRing = {
+    inner: number;
+    outer: number;
+};
+/**
+ * Excel draws a doughnut's series as concentric rings, nested from the hole
+ * outwards — series 0 innermost — splitting the band between the hole and
+ * the outer edge evenly. One ring (the whole band) for a single series.
+ */
+export declare const doughnutRings: (hole: number, count: number) => DoughnutRing[];
+//# sourceMappingURL=doughnut.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"doughnut.d.ts","sourceRoot":"","sources":["../../../utils/doughnut.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,GAAI,MAAM,OAAO,KAAG,MACiB,CAAC;AAEpE,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D;;;;GAIG;AACH,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,EAAE,OAAO,MAAM,KAAG,YAAY,EAOvE,CAAC"}

package/dist/esm/utils/doughnut.js

@@ -0,0 +1,21 @@
+/**
+ * Doughnut geometry shared by the renderers (rowsncolumns/spreadsheet#1064,
+ * #1065). Every fraction here is of the doughnut's OUTER radius — Excel's
+ * `<c:holeSize val="75"/>` is 0.75 of the outer edge, whatever the chart
+ * draws that edge at (echarts: 75% of the chart; plotly: the trace domain).
+ */
+/** `doughnutHoleSize` clamped to Excel's 0-90% range; 0.5 when unset. */
+export const clampDoughnutHole = (hole) => typeof hole === "number" ? Math.max(0, Math.min(0.9, hole)) : 0.5;
+/**
+ * Excel draws a doughnut's series as concentric rings, nested from the hole
+ * outwards — series 0 innermost — splitting the band between the hole and
+ * the outer edge evenly. One ring (the whole band) for a single series.
+ */
+export const doughnutRings = (hole, count) => {
+    const n = Math.max(1, Math.floor(count));
+    const band = 1 - hole;
+    return Array.from({ length: n }, (_, k) => ({
+        inner: hole + (band * k) / n,
+        outer: hole + (band * (k + 1)) / n,
+    }));
+};

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

@@ -7,9 +7,18 @@ export declare const applyLegendOverrides: (legend: LegendComponentOption, opts:
  * the linked source-cell format — see `resolveValueAxisNumberFormat`); it
  * becomes the tick-label formatter.
  */
-export declare const applyAxisOverrides: (axis: any, opts: any, numberFormatPattern?: string) => any;
-export declare const dataLabelFormatter: (opts: any) => (params: any) => string;
-export declare const buildSeriesLabelOption: (opts: any) => {
+export declare const applyAxisOverrides: (axis: any, opts: any, numberFormatPattern?: string, locale?: string) => any;
+export declare const dataLabelFormatter: (opts: any, locale?: string) => (params: any) => string;
+/**
+ * The data-label options one series renders with: its own
+ * `ChartData.dataLabels` when it has them (OOXML's `<c:ser><c:dLbls>`
+ * override — `{ show: false }` turns a labelled chart's labels off for
+ * that series alone), else the chart-level `ChartSpec.dataLabels`.
+ */
+export declare const resolveSeriesDataLabels: <T>(chartLevel: T | null | undefined, series: {
+    dataLabels?: T | null;
+} | null | undefined) => T | null | undefined;
+export declare const buildSeriesLabelOption: (opts: any, seriesType?: string, locale?: string) => {
     readonly show: true;
     readonly position: any;
     readonly formatter: (params: any) => string;

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

@@ -1 +1 @@
-{"version":3,"file":"overrides.d.ts","sourceRoot":"","sources":["../../../utils/overrides.ts"],"names":[],"mappings":"AACA,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,QA4B7B,CAAC;AAqBF,eAAO,MAAM,kBAAkB,GAAI,MAAM,GAAG,MAAM,QAAQ,GAAG,WA4B5D,CAAC;AAWF,eAAO,MAAM,sBAAsB,GAAI,MAAM,GAAG;;;iCAvCU,GAAG;aA+C5D,CAAC"}
+{"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,GAAI,MAAM,GAAG,EAAE,SAAS,MAAM,MAAM,QAAQ,GAAG,WAiC7E,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;;;iCA/E0D,GAAG;aA4F7E,CAAC"}