@rowsncolumns/charts 28.1.8 → 28.1.10

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

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

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

@@ -119,6 +119,8 @@ export const showXAxis = (type) => {
         type === "column" ||
         type === "bubble" ||
         type === "histogram" ||
+        // A waterfall's steps are categories (Opening, Sales, …) (#1070).
+        type === "waterfall" ||
         // Stock is line-derived and lives on a category x-axis. Radar is
         // axis-less (it uses a polar `radar` indicator instead).
         type === "stock") {

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;AAyZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAq3EjB,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;AA6ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAgkFjB,CAAC"}

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

@@ -18,13 +18,13 @@ import { plotlyMulticategoryX, resolveCategoryLevels, } from "../../utils/catego
 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 { dataLabelFormatter, resolveSeriesDataLabels, } from "../../utils/overrides";
 import { plotlyTitleText } from "../../utils/plotly-title";
 import { explosionToPlotlyPull, resolveExplosion, } from "../../utils/pie-explosion";
 import { resolvePlotlyClickSelection, wasDragged, } from "../../utils/plotly-click";
 import { buildPlotlySurfaceTrace } from "../../utils/plotly-surface";
 import { normalize3DSourceType, } from "../../utils/three-d";
-import { extractHierarchyRows, getHierarchyHeaderTitle, toPlotlyHierarchy, } from "../../utils/hierarchy";
+import { extractHierarchyRows, getHierarchyHeaderTitle, hierarchyNodeColors, toPlotlyHierarchy, } from "../../utils/hierarchy";
 import { binHistogram, computePareto, isParetoSpec, } from "../../utils/histogram";
 import { clampSecondPieSize, isOfPieChartSpec, otherSliceHalfAngle, resolveOfPieType, splitOfPie, } from "../../utils/of-pie";
 import { buildRadarIndicators } from "../../utils/radar";
@@ -339,6 +339,13 @@ const sanitizeChartValue = (value) => {
  * (Excel): every range's points in sequence. A single range passes through
  * untouched so the common path renders exactly as before.
  */
+/**
+ * The plain value array of a series' data. (`"values" in seriesData` is
+ * true for an ARRAY too — `Array.prototype.values` — which handed the
+ * waterfall / funnel / histogram / boxplot branches that method instead
+ * of the numbers.)
+ */
+const seriesValuesOf = (seriesData) => Array.isArray(seriesData) ? seriesData : seriesData.values;
 const mergeSeriesData = (parts) => {
     if (parts.length === 1)
         return parts[0];
@@ -389,6 +396,11 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
     // The plotted `<div>` plotly hands back on init — what `Plotly.toImage`
     // rasterises for Copy as Picture and the print preview.
     const graphDivRef = useRef(null);
+    // Plotly zooms a treemap / sunburst into the clicked branch by default;
+    // Excel has no drill-down, so the click handler cancels it unless the
+    // spec opts in (`drillDown`).
+    const drillDownRef = useRef(false);
+    drillDownRef.current = Boolean(spec.drillDown);
     const focusSheet = useFocusSheet();
     // Excel selects a data series (or one data point) when it is clicked
     // inside the chart and the grid highlights its source cells. The plot
@@ -516,8 +528,16 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 sizeValues: sharedSizeValues,
                 series: seriesInputs,
             });
-            const sizeScale = createBubbleSizeScale(sizeValues);
+            // Bubble diameters scale from zero (area by default, width when
+            // `sizeRepresents` says so) and the largest bubble is a fraction of
+            // the plot area, which the margins below leave of the chart (#1068).
+            const sizeScale = createBubbleSizeScale(sizeValues, {
+                sizeRepresents: spec.sizeRepresents,
+                bubbleScale: spec.bubbleScale,
+                plotMinSide: Math.min((width ?? 0) - 80, (height ?? 0) - 100),
+            });
             const hasStringX = categories.length > 0;
+            const hasBubbleSecondaryAxis = (spec.series ?? []).some((seriesEntry) => seriesEntry?.useSecondaryAxis);
             const palette = getChartPalette(spec, [
                 theme.themeColors.accent1,
                 theme.themeColors.accent2,
@@ -553,16 +573,56 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const lineShapeFor = (style) => style === "smooth" || style === "smoothMarker"
                 ? "spline"
                 : "linear";
-            const traces = preparedSeries.map((entry, index) => {
+            const traces = [];
+            preparedSeries.forEach((entry, index) => {
                 const xValues = entry.points.map((point) => hasStringX
                     ? point.xLabel ??
                         categories[Math.round(point.value[0])] ??
                         point.value[0]
                     : point.value[0]);
                 const yValues = entry.points.map((point) => point.value[1]);
-                const labelValuesForSeries = entry.points.map((point) => point.name);
-                const seriesColor = spec.series[index]?.color ?? chartPaletteColorAt(palette, index);
-                const perSeriesMarker = spec.series[index]?.marker ?? undefined;
+                const rawSizes = entry.points.map((point) => point.value[2]);
+                const seriesSpec = spec.series[index];
+                const seriesColor = seriesSpec?.color ?? chartPaletteColorAt(palette, index);
+                const perSeriesMarker = seriesSpec?.marker ?? undefined;
+                // Per-point colours (`<c:dPt>`) key on the point's source row
+                // (`BubbleSeriesPoint.index` — points without a Y are skipped).
+                const pointColorOverrides = new Map();
+                for (const dp of seriesSpec?.dataPointColors ?? []) {
+                    if (typeof dp?.idx === "number" && typeof dp?.color === "string") {
+                        pointColorOverrides.set(dp.idx, dp.color);
+                    }
+                }
+                const pointColors = (base) => pointColorOverrides.size
+                    ? entry.points.map((point) => pointColorOverrides.get(point.index) ?? base)
+                    : base;
+                // Hover reads the bubble label and size from `customdata`, leaving
+                // `text` to the data labels.
+                const customdata = entry.points.map((point) => [point.name, point.value[2]]);
+                const onSecondary = seriesSpec?.useSecondaryAxis ? { yaxis: "y2" } : {};
+                // This series' data labels: Y value by default, the bubble's size
+                // with `showBubbleSize`, the bubble label with `showCategoryName`.
+                const labelOpts = resolveSeriesDataLabels(spec.dataLabels, seriesSpec);
+                const labelText = labelOpts?.show
+                    ? entry.points.map((point) => dataLabelFormatter(labelOpts, locale)({
+                        value: point.value,
+                        name: point.name,
+                        seriesName: entry.name,
+                        data: point,
+                    }))
+                    : undefined;
+                const labelPosition = labelOpts?.show
+                    ? (labelOpts.position && PLOTLY_DLBL_POS_POINT[labelOpts.position]) ??
+                        "top center"
+                    : undefined;
+                const withLabels = (trace) => labelText
+                    ? {
+                        ...trace,
+                        mode: withTextMode(trace.mode),
+                        text: labelText,
+                        textposition: labelPosition,
+                    }
+                    : trace;
                 if (isScatter) {
                     // Per-series marker.symbol = "none" → pure line (no markers).
                     // Per-series marker.size overrides the default. Falls back to
@@ -574,14 +634,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         : plotlyModeForScatterStyle(scatterStyle);
                     const markerSize = perSeriesMarker?.size ?? 6;
                     const markerColor = perSeriesMarker?.color ?? seriesColor;
-                    return {
+                    traces.push(withLabels({
                         type: "scatter",
                         mode,
                         x: xValues,
                         y: yValues,
-                        text: labelValuesForSeries,
+                        customdata,
                         name: entry.name,
-                        hovertemplate: "%{text}<br>X: %{x}<br>Y: %{y}<extra></extra>",
+                        hovertemplate: "%{customdata[0]}<br>X: %{x}<br>Y: %{y}<extra></extra>",
                         line: {
                             shape: lineShapeFor(scatterStyle),
                             color: seriesColor,
@@ -592,31 +652,82 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                             : {
                                 marker: {
                                     size: markerSize,
-                                    color: markerColor,
+                                    color: pointColors(markerColor),
                                     symbol: mapMarkerSymbolToPlotly(symbol),
                                 },
                             }),
-                    };
+                        ...onSecondary,
+                    }));
+                }
+                else {
+                    // Bubble — third dimension scaled into marker diameter.
+                    const scaledSizes = rawSizes.map((value) => sizeScale(value));
+                    traces.push(withLabels({
+                        type: "scatter",
+                        mode: "markers",
+                        x: xValues,
+                        y: yValues,
+                        customdata,
+                        name: entry.name,
+                        hovertemplate: "%{customdata[0]}<br>X: %{x}<br>Y: %{y}<br>Size: %{customdata[1]}<extra></extra>",
+                        marker: {
+                            size: scaledSizes,
+                            sizemode: "diameter",
+                            color: pointColors(seriesColor),
+                            opacity: 0.7,
+                        },
+                        ...onSecondary,
+                    }));
+                }
+                // Trendlines on the real (x, y) points — a regression of Y on X,
+                // not on the point index — and native error bars (#1067).
+                const numericX = entry.points.map((point) => point.value[0]);
+                for (const tl of seriesSpec?.trendlines ?? []) {
+                    const result = computeTrendline(yValues, {
+                        type: tl.type,
+                        order: tl.order,
+                        period: tl.period,
+                        forecastForward: tl.forecastForward,
+                        forecastBackward: tl.forecastBackward,
+                    }, numericX);
+                    if (!result || result.points.length < 2)
+                        continue;
+                    const tlName = tl.name ??
+                        `${entry.name ? entry.name + " " : ""}${tl.type ?? "linear"} trend`;
+                    traces.push({
+                        type: "scatter",
+                        mode: "lines",
+                        name: tlName,
+                        x: result.points.map((p) => hasStringX
+                            ? categories[Math.round(p.x)] ?? p.x
+                            : p.x),
+                        y: result.points.map((p) => p.y),
+                        line: { color: tl.color ?? seriesColor, dash: "dash", width: 2 },
+                        hoverinfo: "skip",
+                        ...onSecondary,
+                    });
+                }
+                if (seriesSpec?.errorBars) {
+                    const direction = seriesSpec.errorBars.direction ?? "y";
+                    // An X error bar sizes from the X values (a percentage or
+                    // deviation of X).
+                    const magnitudes = computeErrorBars(direction === "x" ? numericX : yValues, resolveCustomErrorBarValues(seriesSpec.errorBars, (range) => getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy)));
+                    if (magnitudes) {
+                        const symmetric = magnitudes.plus.every((plus, i) => plus === magnitudes.minus[i]);
+                        const errorConfig = {
+                            type: "data",
+                            symmetric,
+                            array: magnitudes.plus,
+                            ...(symmetric ? {} : { arrayminus: magnitudes.minus }),
+                            color: seriesColor,
+                            ...(seriesSpec.errorBars.noEndCap ? { width: 0 } : {}),
+                        };
+                        const target = traces[traces.length - 1 - (seriesSpec.trendlines?.length ?? 0)];
+                        if (target) {
+                            target[direction === "x" ? "error_x" : "error_y"] = errorConfig;
+                        }
+                    }
                 }
-                // Bubble — third dimension scaled into marker diameter.
-                const rawSizes = entry.points.map((point) => point.value[2]);
-                const scaledSizes = rawSizes.map((value) => sizeScale(value));
-                return {
-                    type: "scatter",
-                    mode: "markers",
-                    x: xValues,
-                    y: yValues,
-                    text: labelValuesForSeries,
-                    customdata: rawSizes,
-                    name: entry.name,
-                    hovertemplate: "%{text}<br>X: %{x}<br>Y: %{y}<br>Size: %{customdata}<extra></extra>",
-                    marker: {
-                        size: scaledSizes,
-                        sizemode: "diameter",
-                        color: seriesColor,
-                        opacity: 0.7,
-                    },
-                };
             });
             // Resolve text formats: chart-authored values (via OOXML <c:txPr>)
             // override the theme-derived defaults. `spec.titleTextFormat`,
@@ -636,7 +747,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     x: 0.02,
                     xanchor: "left",
                 },
-                xaxis: {
+                // Axis min / max / reverse / log / visibility from the spec
+                // (`categoryAxisOptions` is the X axis, as in the echarts
+                // renderer).
+                xaxis: applyAxisOverridesPlotly({
                     title: {
                         text: spec.horizontalAxisTitle ?? "",
                         font: { color: xAxisFmt?.color ?? textColor },
@@ -648,8 +762,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         ...(xAxisFmt?.fontSize ? { size: xAxisFmt.fontSize } : {}),
                     },
                     type: hasStringX ? "category" : "linear",
-                },
-                yaxis: {
+                }, spec.categoryAxisOptions),
+                yaxis: applyAxisOverridesPlotly({
                     title: {
                         text: spec.verticalAxisTitle ?? "",
                         font: { color: yAxisFmt?.color ?? textColor },
@@ -660,7 +774,20 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         ...(yAxisFmt?.fontFamily ? { family: yAxisFmt.fontFamily } : {}),
                         ...(yAxisFmt?.fontSize ? { size: yAxisFmt.fontSize } : {}),
                     },
-                },
+                }, spec.valueAxisOptions),
+                // Secondary value axis on the right for the series that opt in
+                // (`useSecondaryAxis`), as the category layout has (#1067).
+                ...(hasBubbleSecondaryAxis
+                    ? {
+                        yaxis2: applyAxisOverridesPlotly({
+                            overlaying: "y",
+                            side: "right",
+                            showgrid: false,
+                            automargin: true,
+                            tickfont: { color: yAxisFmt?.color ?? textColor },
+                        }, spec.secondaryValueAxisOptions),
+                    }
+                    : {}),
                 legend: {
                     font: {
                         color: legendFmt?.color ?? textColor,
@@ -671,7 +798,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 paper_bgcolor: bgColor,
                 plot_bgcolor: bgColor,
                 showlegend: preparedSeries.length > 1,
-                margin: { l: 60, r: 20, t: 50, b: 50 },
+                margin: { l: 60, r: hasBubbleSecondaryAxis ? 60 : 20, t: 50, b: 50 },
             };
             setPlotData(traces);
             setLayout(bubbleLayout);
@@ -693,14 +820,40 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const seriesName = hierarchyData.labels.length === 1
                 ? hierarchyData.labels[0] ?? ""
                 : explicitChartTitle ?? headerTitle ?? "";
+            // One solid colour per top-level category, inherited by its branch
+            // (#1072); nodes reference each other by id so a leaf name may
+            // repeat under different parents.
+            const hierarchyPalette = getChartPalette(spec, [
+                theme.themeColors.accent1,
+                theme.themeColors.accent2,
+                theme.themeColors.accent3,
+                theme.themeColors.accent4,
+                theme.themeColors.accent5,
+                theme.themeColors.accent6,
+            ]);
+            const nodeColors = hierarchyNodeColors(hierarchyData, hierarchyPalette);
+            const isSunburst = spec.chartType === "sunburst";
+            // Excel's sunburst leaves the centre empty — every level, the first
+            // included, is a ring (#1073). Plotly draws the top level as a ring
+            // only around a root node, so an invisible one holds the centre.
+            const SUNBURST_ROOT_ID = "__rnc_sunburst_root__";
+            const rootTotal = hierarchyData.values.reduce((sum, value, i) => (hierarchyData.parents[i] === "" ? sum + value : sum), 0);
             const hierarchyTrace = {
                 type: chartType,
-                labels: hierarchyData.labels,
-                parents: hierarchyData.parents,
-                values: hierarchyData.values,
+                labels: isSunburst ? ["", ...hierarchyData.labels] : hierarchyData.labels,
+                ids: isSunburst ? [SUNBURST_ROOT_ID, ...hierarchyData.ids] : hierarchyData.ids,
+                parents: isSunburst
+                    ? ["", ...hierarchyData.parents.map((parent) => parent || SUNBURST_ROOT_ID)]
+                    : hierarchyData.parents,
+                values: isSunburst ? [rootTotal, ...hierarchyData.values] : hierarchyData.values,
+                marker: {
+                    colors: isSunburst ? ["rgba(0,0,0,0)", ...nodeColors] : nodeColors,
+                    ...(isSunburst ? { line: { width: 1 } } : {}),
+                },
                 name: seriesName,
                 textinfo: "label+value",
                 branchvalues: "total",
+                ...(isSunburst ? {} : { textposition: "bottom left" }),
             };
             const layoutForHierarchy = {
                 title: {
@@ -1190,7 +1343,8 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             // by category index, falling back to the series color for points
             // without an override.
             const isPie = chartTypeForStyling === "pie";
-            if ((isBarOrColumn || isPie) &&
+            const isFunnel = chartTypeForStyling === "funnel";
+            if ((isBarOrColumn || isPie || isFunnel) &&
                 Array.isArray(options?.dataPointColors) &&
                 options?.dataPointColors.length) {
                 const overrides = new Map();
@@ -1445,9 +1599,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     : {}),
             };
             if (effectiveChartType === "histogram") {
-                const rawValues = "values" in seriesData
-                    ? seriesData.values
-                    : seriesData;
+                const rawValues = seriesValuesOf(seriesData);
                 const binCount = spec.binCount;
                 if (isPareto) {
                     // Plotly's native histogram trace bins in axis order and
@@ -1497,9 +1649,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 }
             }
             else if (effectiveChartType === "boxplot") {
-                const rawValues = "values" in seriesData
-                    ? seriesData.values
-                    : seriesData;
+                const rawValues = seriesValuesOf(seriesData);
                 const quartileMethod = spec.quartileMethod;
                 const showOutliers = spec.showOutliers;
                 const showMeanMarker = spec.showMeanMarker === true;
@@ -1566,37 +1716,51 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 traces.push(trace);
             }
             else if (effectiveChartType === "waterfall") {
-                const rawValues = "values" in seriesData
-                    ? seriesData.values
-                    : seriesData;
+                const rawValues = seriesValuesOf(seriesData);
                 // Plotly's native waterfall draws connector lines itself and
                 // renders "total" measures from the zero baseline with its
                 // own distinct fill.
                 const totalIndices = new Set(spec.totalIndices ?? []);
+                // Increases take the series colour, decreases its negative colour
+                // and totals the theme's third accent, as the echarts renderer and
+                // Excel's default waterfall do (plotly's own defaults are green /
+                // red / blue). Plotly paints a waterfall by measure, not per bar, so
+                // `dataPointColors` cannot recolour one step here.
+                const increaseColor = series.color ?? chartPaletteColorAt(themeColorPalette, currentSeriesIndex);
                 const trace = {
                     type: "waterfall",
                     x: categoriesFor(series),
                     y: rawValues.map((v) => (v ?? null)),
                     measure: rawValues.map((_, i) => totalIndices.has(i) ? "total" : "relative"),
                     name: dataLabel,
+                    increasing: { marker: { color: increaseColor } },
+                    decreasing: {
+                        marker: {
+                            color: series.negativeColor ?? theme.themeColors.accent2 ?? increaseColor,
+                        },
+                    },
+                    totals: { marker: { color: theme.themeColors.accent3 ?? increaseColor } },
+                    connector: {
+                        line: {
+                            color: isDarkMode ? "rgba(255,255,255,0.45)" : "#999999",
+                            width: 1,
+                        },
+                    },
                 };
-                applyTraceColor(trace, series.color ?? undefined, {
-                    noFill: series.noFill,
-                    dataPointColors: series.dataPointColors,
-                    seriesIndex: currentSeriesIndex,
-                    effectiveChartType,
-                });
                 traces.push(trace);
             }
             else if (effectiveChartType === "funnel") {
-                const rawValues = "values" in seriesData
-                    ? seriesData.values
-                    : seriesData;
+                const rawValues = seriesValuesOf(seriesData);
+                // Horizontal bars with the stage names on the category axis to
+                // the left; the series colour (per-stage `<c:dPt>` overrides) and
+                // the values inside the bars follow below (#1069).
                 const trace = {
                     type: "funnel",
+                    orientation: "h",
                     y: categoriesFor(series),
                     x: rawValues.map((v) => (v ?? null)),
                     name: dataLabel,
+                    textinfo: "none",
                 };
                 applyTraceColor(trace, series.color ?? undefined, {
                     noFill: series.noFill,
@@ -2088,6 +2252,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         const formattedTraces = traces.map((trace) => {
             const pattern = traceNumberFormat(trace);
             let next = applyDataLabelsToTracePlotly(trace, traceDataLabels(trace), spec.chartType, pattern, locale);
+            if (next.type === "funnel") {
+                // The formatted values ride on `text`; a funnel prints its own
+                // `value` unless told to draw the text (or nothing).
+                next = {
+                    ...next,
+                    textinfo: traceDataLabels(trace)?.show ? "text" : "none",
+                };
+            }
             if (next.type === "pie") {
                 // Plotly's pie prints every slice's percentage by default; Excel
                 // draws nothing until data labels are on (#1062).
@@ -2278,5 +2450,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
         React.createElement("div", { className: "flex-1 rnc-plotly-chart-container", onPointerDownCapture: handlePointerDownCapture },
             React.createElement(Plot, { data: plotData, layout: plotLayout, config: config, onClick: handlePlotClick, onInitialized: (_figure, graphDiv) => {
                     graphDivRef.current = graphDiv;
+                    const plotDiv = graphDiv;
+                    // Returning false from these handlers keeps the clicked branch
+                    // from becoming the new root.
+                    plotDiv.on?.("plotly_treemapclick", () => drillDownRef.current);
+                    plotDiv.on?.("plotly_sunburstclick", () => drillDownRef.current);
                 }, style: { width: "100%", height: "100%" } }))));
 };

package/dist/esm/plotly/basic-chart/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,KACvC,MAmEF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;;;;;;;;CAgBzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SA0BX,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAejE,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../plotly/basic-chart/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,qBAAqB,GAChC,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,KACvC,MAmEF,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC;;;;;;;;;CAgBzC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,uBAAuB,GAClC,QAAQ,MAAM,GAAG,SAAS,GAAG,IAAI,KAChC,MAAM,GAAG,SA0BX,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,MAAM,aAAa,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,YAiBjE,CAAC"}

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

@@ -101,6 +101,8 @@ export const showXAxis = (type) => {
         type === "column" ||
         type === "bubble" ||
         type === "histogram" ||
+        // A waterfall's steps are categories (Opening, Sales, …) (#1070).
+        type === "waterfall" ||
         // Stock is line-derived on a category x-axis. Radar is polar and
         // does not use the cartesian x-axis.
         type === "stock") {

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/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"}
+{"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/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/stock.ts","../../utils/three-d.ts","../../utils/trendline.ts","../../utils/waterfall.ts","../../utils/webgl.ts"],"version":"5.8.3"}

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

@@ -1,6 +1,33 @@
 export declare const toLabelString: (value: unknown) => string;
 export declare const toNumericValue: (value: unknown) => number | null;
-export declare const createBubbleSizeScale: (values: number[]) => (value: number) => number;
+export type BubbleSizeOptions = {
+    /**
+     * Whether a size value sets the bubble's area (Excel's default,
+     * diameter ∝ √value) or its width (diameter ∝ value).
+     */
+    sizeRepresents?: "area" | "width" | null;
+    /** Percent of the default size, 0-300 (Excel's `<c:bubbleScale>`). */
+    bubbleScale?: number | null;
+    /**
+     * The plot area's smaller side in pixels — the largest bubble's
+     * diameter is a fraction of it, so bubbles grow with the chart.
+     */
+    plotMinSide?: number | null;
+};
+/** The largest bubble's diameter at bubbleScale 100: a quarter of the plot area's smaller side. */
+export declare const BUBBLE_MAX_DIAMETER_FRACTION = 0.25;
+/**
+ * Pixel diameter per size value, scaled from ZERO like Excel: the largest
+ * absolute value gets the maximum diameter and every other bubble's area
+ * (or width) is its share of that value. Scaling from the minimum value
+ * instead made the ratio between bubbles depend on the spread of the
+ * data (100 and 101 drew as the smallest and largest bubble), and a
+ * linear diameter made the perceived area grow with the square of the
+ * value (rowsncolumns/spreadsheet#1068).
+ */
+export declare const createBubbleSizeScale: (values: number[], options?: BubbleSizeOptions) => (value: number) => number;
+/** The diameter of the largest bubble for these options. */
+export declare const bubbleMaxDiameter: (options?: BubbleSizeOptions) => number;
 export type BubbleSeriesInput = {
     name?: string | null;
     values: (string | number | boolean | null | undefined)[];
@@ -23,6 +50,12 @@ export type BubbleSeriesPoint = {
     value: [number, number, number];
     name: string;
     xLabel?: string;
+    /**
+     * The point's row in the source ranges. Points with no Y are skipped,
+     * so this is not the point's position in the series — per-point
+     * colours (`dataPointColors[].idx`) key on it.
+     */
+    index: number;
 };
 export type PreparedBubbleSeries = {
     name: string;

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

@@ -1 +1 @@
-{"version":3,"file":"bubble.d.ts","sourceRoot":"","sources":["../../../utils/bubble.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,MACU,CAAC;AAE1D,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,MAAM,GAAG,IAYxD,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,QAAQ,MAAM,EAAE,aAQrC,MAAM,WAOtB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IACzD;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC3D;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;;;;OAKG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1D,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC9D;;OAEG;IACH,UAAU,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC7D,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAwCF,eAAO,MAAM,uBAAuB,GAAI,+CAKrC,uBAAuB,KAAG,kBAsF5B,CAAC"}
+{"version":3,"file":"bubble.d.ts","sourceRoot":"","sources":["../../../utils/bubble.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,GAAI,OAAO,OAAO,KAAG,MACU,CAAC;AAE1D,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,KAAG,MAAM,GAAG,IAYxD,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IACzC,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC7B,CAAC;AAEF,mGAAmG;AACnG,eAAO,MAAM,4BAA4B,OAAO,CAAC;AAMjD;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,GAChC,QAAQ,MAAM,EAAE,EAChB,UAAS,iBAAsB,MAMvB,OAAO,MAAM,WAQtB,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,iBAAiB,GAAI,UAAS,iBAAsB,WAUhE,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IACzD;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC3D;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;CAC/D,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG;IACpC;;;;;OAKG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC1D,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC9D;;OAEG;IACH,UAAU,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,CAAC;IAC7D,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,oBAAoB,EAAE,CAAC;IAC/B,UAAU,EAAE,MAAM,EAAE,CAAC;CACtB,CAAC;AAwCF,eAAO,MAAM,uBAAuB,GAAI,+CAKrC,uBAAuB,KAAG,kBAuF5B,CAAC"}

package/dist/esm/utils/bubble.js

@@ -12,22 +12,45 @@ export const toNumericValue = (value) => {
     }
     return null;
 };
-export const createBubbleSizeScale = (values) => {
+/** The largest bubble's diameter at bubbleScale 100: a quarter of the plot area's smaller side. */
+export const BUBBLE_MAX_DIAMETER_FRACTION = 0.25;
+/** Fallback plot side when the chart has no measured size yet. */
+const DEFAULT_PLOT_MIN_SIDE = 240;
+/** A positive size never collapses below this diameter. */
+const MIN_BUBBLE_DIAMETER = 2;
+/**
+ * Pixel diameter per size value, scaled from ZERO like Excel: the largest
+ * absolute value gets the maximum diameter and every other bubble's area
+ * (or width) is its share of that value. Scaling from the minimum value
+ * instead made the ratio between bubbles depend on the spread of the
+ * data (100 and 101 drew as the smallest and largest bubble), and a
+ * linear diameter made the perceived area grow with the square of the
+ * value (rowsncolumns/spreadsheet#1068).
+ */
+export const createBubbleSizeScale = (values, options = {}) => {
+    const maxDiameter = bubbleMaxDiameter(options);
     const valid = values.filter((value) => Number.isFinite(value));
-    if (valid.length === 0) {
-        return () => 24;
-    }
-    const min = Math.min(...valid);
-    const max = Math.max(...valid);
-    const range = max - min || 1;
+    const maxAbs = valid.reduce((max, value) => Math.max(max, Math.abs(value)), 0);
+    const byWidth = options.sizeRepresents === "width";
     return (value) => {
-        if (!Number.isFinite(value)) {
-            return 24;
+        if (!Number.isFinite(value) || maxAbs === 0) {
+            return maxDiameter;
         }
-        const ratio = (value - min) / range;
-        return 12 + ratio * 42;
+        const share = Math.abs(value) / maxAbs;
+        const diameter = maxDiameter * (byWidth ? share : Math.sqrt(share));
+        return share > 0 ? Math.max(MIN_BUBBLE_DIAMETER, diameter) : 0;
     };
 };
+/** The diameter of the largest bubble for these options. */
+export const bubbleMaxDiameter = (options = {}) => {
+    const plotMinSide = typeof options.plotMinSide === "number" && options.plotMinSide > 0
+        ? options.plotMinSide
+        : DEFAULT_PLOT_MIN_SIDE;
+    const scale = typeof options.bubbleScale === "number" && Number.isFinite(options.bubbleScale)
+        ? Math.min(300, Math.max(0, options.bubbleScale)) / 100
+        : 1;
+    return plotMinSide * BUBBLE_MAX_DIAMETER_FRACTION * scale;
+};
 /**
  * Build the X-coordinate index for a series. Numeric values map to
  * their own coordinate; string values become categorical (deduped into
@@ -107,6 +130,7 @@ export const prepareBubbleSeriesData = ({ xValues, labelValues, sizeValues, seri
                 value: [coordinate.coordinate, y, sizeValue],
                 name: label,
                 xLabel: coordinateLabel,
+                index: i,
             });
         }
         const name = serie.name && serie.name.trim()