@rowsncolumns/charts 28.1.7 → 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;AAuZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AA0FnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA00EjB,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

@@ -17,12 +17,14 @@ 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 { 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";
@@ -337,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];
@@ -387,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
@@ -514,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,
@@ -551,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
@@ -572,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,
@@ -590,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`,
@@ -634,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 },
@@ -646,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 },
@@ -658,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,
@@ -669,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);
@@ -691,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: {
@@ -882,7 +1037,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;
@@ -898,7 +1056,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) },
@@ -908,8 +1066,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 },
@@ -1185,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();
@@ -1440,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
@@ -1492,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;
@@ -1561,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,
@@ -2044,8 +2213,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
@@ -2064,8 +2251,21 @@ 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, locale);
+            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).
+                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 : [];
@@ -2108,12 +2308,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;
         });
@@ -2245,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/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"}