@rowsncolumns/charts 28.1.12 → 28.1.13

package/dist/cjs/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,YAiBjE,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,YAmBjE,CAAC"}

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

@@ -109,6 +109,8 @@ var showXAxis = function (type) {
         type === "histogram" ||
         // A waterfall's steps are categories (Opening, Sales, …) (#1070).
         type === "waterfall" ||
+        // A box & whisker's slots are categories (or the series names) (#1092).
+        type === "boxplot" ||
         // 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/basic-chart/basic-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAsTrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAiGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA8kHjB,CAAC"}
+{"version":3,"file":"basic-chart.d.ts","sourceRoot":"","sources":["../../../basic-chart/basic-chart.tsx"],"names":[],"mappings":"AAkEA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAsTrD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAiGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAgtHjB,CAAC"}

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

@@ -774,6 +774,27 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     resolveRange: (range) => getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy),
                 });
             });
+            const bubbleLegend = applyLegendOverrides({
+                ...legend,
+                show: preparedSeries.length > 1,
+                data: preparedSeries.map((entry) => entry.name),
+            }, spec.legend);
+            const bubbleBand = reserveEchartsLegendBand({
+                position: spec.legend?.position,
+                visible: bubbleLegend.show !== false,
+                labels: preparedSeries.map((entry) => entry.name),
+                legendFontSize: bubbleLegend.textStyle?.fontSize ??
+                    spec.legend?.textFormat?.fontSize ??
+                    12,
+                legendItemWidth: defaultLegendConfig.itemWidth,
+                width: width ?? 0,
+                height: height ?? 0,
+                hasTitle: Boolean(explicitChartTitle),
+                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                hasBottomAxisTitle: Boolean(spec.horizontalAxisTitle),
+                bottomAxisNameGap: 30,
+                hasLeftAxisTitle: Boolean(spec.verticalAxisTitle),
+            });
             chartRef.current?.setOption({
                 xAxis: [
                     applyAxisOverrides({ ...xAxisConfig }, spec.categoryAxisOptions),
@@ -799,17 +820,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         ]
                         : []),
                 ],
-                legend: applyLegendOverrides({
-                    ...legend,
-                    show: preparedSeries.length > 1,
-                    data: preparedSeries.map((entry) => entry.name),
-                }, spec.legend),
-                grid: {
-                    left: "3%",
-                    right: "4%",
-                    bottom: "3%",
-                    containLabel: true,
-                },
+                legend: { ...bubbleLegend, ...bubbleBand.legend },
+                // The plot shrinks to leave the legend its own band, as the
+                // category charts do (#1089).
+                grid: bubbleBand.grid,
                 tooltip: {
                     trigger: "item",
                     formatter: tooltipFormatter,
@@ -1385,8 +1399,44 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 const lines = indicators.map((indicator, i) => `${indicator.name}: ${formatAxisValue(pattern, values[i], locale)}`);
                 return [params?.name ?? "", ...lines].filter(Boolean).join("<br/>");
             };
+            const radarLegend = applyLegendOverrides({
+                ...legend,
+                show: radarData.length > 1,
+                data: radarData.map((d) => d.name),
+            }, spec.legend);
+            // The circle moves and shrinks to leave the legend (and the title)
+            // their own band instead of being drawn over (#1089).
+            const radarBand = reserveEchartsLegendBand({
+                position: spec.legend?.position,
+                visible: radarLegend.show !== false,
+                labels: radarData.map((d) => d.name),
+                legendFontSize: radarLegend.textStyle?.fontSize ??
+                    spec.legend?.textFormat?.fontSize ??
+                    12,
+                legendItemWidth: defaultLegendConfig.itemWidth,
+                width: width ?? 0,
+                height: height ?? 0,
+                hasTitle: Boolean(explicitChartTitle),
+                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                hasBottomAxisTitle: false,
+                bottomAxisNameGap: 0,
+                hasLeftAxisTitle: false,
+            });
+            const radarPlotWidth = Math.max(0, (width ?? 0) - radarBand.grid.left - radarBand.grid.right);
+            const radarPlotHeight = Math.max(0, (height ?? 0) - radarBand.grid.top - radarBand.grid.bottom);
+            // Leave ~30px around the circle for the axis names.
+            const radarGeometry = radarPlotWidth > 0 && radarPlotHeight > 0
+                ? {
+                    center: [
+                        radarBand.grid.left + radarPlotWidth / 2,
+                        radarBand.grid.top + radarPlotHeight / 2,
+                    ],
+                    radius: Math.max(10, Math.min(radarPlotWidth, radarPlotHeight) / 2 - 30),
+                }
+                : {};
             chartRef.current?.setOption({
                 radar: {
+                    ...radarGeometry,
                     // The common scale's tick labels along ONE axis, as Excel draws
                     // them: echarts labels every indicator axis, so each indicator
                     // carries its own `axisLabel.show` (an indicator's own options win
@@ -1405,11 +1455,7 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                         formatter: (value) => formatAxisValue(radarFormats[0], value, locale),
                     },
                 },
-                legend: applyLegendOverrides({
-                    ...legend,
-                    show: radarData.length > 1,
-                    data: radarData.map((d) => d.name),
-                }, spec.legend),
+                legend: { ...radarLegend, ...radarBand.legend },
                 tooltip: { trigger: "item", formatter: radarTooltipFormatter },
                 series: [
                     {
@@ -2356,6 +2402,10 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 top: 60,
                 bottom: 20,
             };
+            // `dataLabels: { show: false }` hides the values inside the bars; the
+            // stage names on the left stay (#1091).
+            const funnelLabelsOff = resolveSeriesDataLabels(spec.dataLabels, seriesEntry)?.show ===
+                false;
             chartSeries.push({
                 type: "funnel",
                 id: chartSeriesId(0, 0),
@@ -2365,11 +2415,13 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 itemStyle: {
                     color: (params) => stageColors.get(params.dataIndex) ?? funnelColor,
                 },
-                label: {
-                    show: true,
-                    position: "inside",
-                    formatter: (params) => formatAxisValue(undefined, params.value, locale),
-                },
+                label: funnelLabelsOff
+                    ? { show: false }
+                    : {
+                        show: true,
+                        position: "inside",
+                        formatter: (params) => formatAxisValue(undefined, params.value, locale),
+                    },
             });
             // The stage names sit to the left of the bars, where Excel's
             // category axis puts them: an invisible twin funnel carries them.
@@ -2386,49 +2438,49 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 labelLine: { show: false },
                 z: 1,
             });
-            legend.data = [];
+            // The legend lists the series (shown when `legend.position` says so).
+            legend.data = seriesEntry?.dataLabel ? [seriesEntry.dataLabel] : [];
         }
         else if (spec.chartType === "boxplot") {
             const quartileMethod = spec.quartileMethod;
-            const showOutliers = spec.showOutliers;
+            const showOutliers = spec.showOutliers !== false;
             const showMeanMarker = spec.showMeanMarker === true;
-            const boxStats = [];
-            const boxLabels = [];
-            // [categoryIndex, value] pairs for the outlier / mean overlay
-            // scatter series (only populated when the options are on).
-            const outlierPoints = [];
-            const meanPoints = [];
-            for (const seriesEntry of spec.series ?? []) {
-                const label = seriesEntry.dataLabel && !isAFormula(seriesEntry.dataLabel)
-                    ? seriesEntry.dataLabel
-                    : "";
-                const rawValues = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)));
-                const summary = computeBoxplotSummary(rawValues, { quartileMethod });
-                if (summary) {
-                    const boxIndex = boxStats.length;
-                    // `showOutliers === true` clips the whiskers to the most
-                    // extreme data points inside the 1.5×IQR fences and plots
-                    // the points beyond them (Excel's "show outlier points").
-                    // Otherwise the whiskers span the full min/max — today's
-                    // rendering.
-                    const lo = showOutliers === true ? summary.lowerWhisker : summary.min;
-                    const hi = showOutliers === true ? summary.upperWhisker : summary.max;
-                    boxStats.push([lo, summary.q1, summary.median, summary.q3, hi]);
-                    boxLabels.push(label);
-                    if (showOutliers === true) {
-                        for (const outlier of summary.outliers) {
-                            outlierPoints.push([boxIndex, outlier]);
-                        }
-                    }
-                    if (showMeanMarker) {
-                        meanPoints.push([boxIndex, summary.mean]);
-                    }
+            const showInnerPoints = spec.showInnerPoints === true;
+            const showMeanLine = spec.showMeanLine === true;
+            // A category domain groups every series by its distinct values (in
+            // order of first appearance): one box per category per series, as
+            // Excel draws it. Without a domain each series is one box on its own
+            // slot (#1092).
+            const boxDomainSource = spec.domains?.[0]?.sources?.[0];
+            const boxCategories = boxDomainSource
+                ? (getDomainValuesFromRange(boxDomainSource, spec.hiddenDimensionStrategy) ?? []).map((v) => (v === null || v === undefined ? "" : `${v}`.trim()))
+                : [];
+            const grouped = boxCategories.some((c) => c !== "");
+            const groups = [];
+            if (grouped) {
+                for (const c of boxCategories) {
+                    if (c !== "" && !groups.includes(c))
+                        groups.push(c);
                 }
             }
+            const boxSeriesSpecs = spec.series ?? [];
+            const slots = grouped ? groups : boxSeriesSpecs.map((s, i) => s.dataLabel && !isAFormula(s.dataLabel) ? s.dataLabel : `Series ${i + 1}`);
+            // Excel sizes the boxes like columns: gapWidth is a percentage of the
+            // box width (default 150). echarts' boxplot only clamps its width
+            // (`boxWidth`), so the clamp is the box width that gap allows in the
+            // plot's category band.
+            const boxGap = typeof spec.gapWidth === "number" ? Math.max(0, spec.gapWidth) : 150;
+            const boxPlotWidth = Math.max(0, (width ?? 0) * 0.85 - 40);
+            const boxBand = slots.length ? boxPlotWidth / slots.length : boxPlotWidth;
+            const boxWidthMax = Math.max(2, Math.round(boxBand / (Math.max(1, boxSeriesSpecs.length) + boxGap / 100)));
+            const boxCount = Math.max(1, boxSeriesSpecs.length);
+            // Points of series i sit at that series' sub-slot inside the band
+            // (echarts spreads a category's boxes over ~80% of it).
+            const slotX = (slotIndex, seriesIndex) => slotIndex + ((seriesIndex + 0.5) / boxCount - 0.5) * 0.8;
             chartDomains.length = 0;
             chartDomains.push({
                 type: "category",
-                data: boxLabels,
+                data: slots,
                 show: showAxis,
                 axisLine: { show: true },
                 axisTick: { show: true },
@@ -2438,38 +2490,95 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 nameGap: 30,
             });
             chartSeries.length = 0;
-            const boxSeries = {
-                type: "boxplot",
-                name: "",
-                data: boxStats,
-            };
-            const boxColor = spec.series?.[0]?.color;
-            if (boxColor) {
-                boxSeries.itemStyle = { color: boxColor, borderColor: boxColor };
-            }
-            chartSeries.push(boxSeries);
-            if (outlierPoints.length > 0) {
-                chartSeries.push({
-                    type: "scatter",
-                    name: "",
-                    data: outlierPoints,
-                    symbolSize: 6,
-                    ...(boxColor ? { itemStyle: { color: boxColor } } : {}),
-                    tooltip: { show: false },
+            const boxLegend = [];
+            boxSeriesSpecs.forEach((seriesEntry, seriesIndex) => {
+                const label = seriesEntry.dataLabel && !isAFormula(seriesEntry.dataLabel)
+                    ? seriesEntry.dataLabel
+                    : "";
+                const rawValues = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)));
+                const color = seriesEntry.color ?? paletteColorAt(seriesIndex);
+                const boxData = [];
+                const outlierPoints = [];
+                const innerPoints = [];
+                const meanPoints = [];
+                const meanLine = [];
+                const slotValues = grouped
+                    ? groups.map((g) => rawValues.filter((_, i) => boxCategories[i] === g))
+                    : slots.map((_, i) => (i === seriesIndex ? rawValues : []));
+                slotValues.forEach((values, slotIndex) => {
+                    const summary = computeBoxplotSummary(values, { quartileMethod });
+                    if (!summary) {
+                        boxData.push([]);
+                        meanLine.push(null);
+                        return;
+                    }
+                    // Whiskers stop at the most extreme points inside the 1.5×IQR
+                    // fences; hiding the outliers hides the points only (Excel).
+                    boxData.push([
+                        summary.lowerWhisker,
+                        summary.q1,
+                        summary.median,
+                        summary.q3,
+                        summary.upperWhisker,
+                    ]);
+                    meanLine.push(summary.mean);
+                    const x = slotX(slotIndex, seriesIndex);
+                    if (showOutliers) {
+                        for (const outlier of summary.outliers)
+                            outlierPoints.push([x, outlier]);
+                    }
+                    if (showInnerPoints) {
+                        for (const v of values) {
+                            if (v >= summary.lowerWhisker && v <= summary.upperWhisker) {
+                                innerPoints.push([x, v]);
+                            }
+                        }
+                    }
+                    if (showMeanMarker)
+                        meanPoints.push([x, summary.mean]);
                 });
-            }
-            if (meanPoints.length > 0) {
+                if (label)
+                    boxLegend.push(label);
                 chartSeries.push({
+                    type: "boxplot",
+                    id: chartSeriesId(seriesIndex, 0),
+                    name: label,
+                    data: boxData,
+                    boxWidth: [2, boxWidthMax],
+                    itemStyle: { color, borderColor: color },
+                });
+                const pointSeries = (name, points, extra) => ({
                     type: "scatter",
-                    name: "",
-                    data: meanPoints,
-                    symbol: "diamond",
-                    symbolSize: 9,
-                    ...(boxColor ? { itemStyle: { color: boxColor } } : {}),
+                    name,
+                    data: points,
+                    itemStyle: { color },
                     tooltip: { show: false },
+                    ...extra,
                 });
-            }
-            legend.data = [];
+                if (outlierPoints.length > 0) {
+                    chartSeries.push(pointSeries("", outlierPoints, { symbolSize: 6 }));
+                }
+                if (innerPoints.length > 0) {
+                    chartSeries.push(pointSeries("", innerPoints, { symbolSize: 4, itemStyle: { color, opacity: 0.6 } }));
+                }
+                if (meanPoints.length > 0) {
+                    chartSeries.push(pointSeries("", meanPoints, { symbol: "diamond", symbolSize: 9 }));
+                }
+                if (showMeanLine && meanLine.some((m) => m !== null)) {
+                    chartSeries.push({
+                        type: "line",
+                        name: "",
+                        data: meanLine.map((m, slotIndex) => m === null ? null : [slotX(slotIndex, seriesIndex), m]),
+                        showSymbol: false,
+                        lineStyle: { color, type: "dashed", width: 1 },
+                        itemStyle: { color },
+                        tooltip: { show: false },
+                        z: 3,
+                    });
+                }
+            });
+            // The legend lists the series (shown when `legend.position` says so).
+            legend.data = boxLegend;
         }
         else if (spec.chartType === "histogram") {
             const rawValues = flattenChartDataValues(spec.series, getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)));

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,YAiBjE,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,YAmBjE,CAAC"}

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

@@ -121,6 +121,8 @@ export const showXAxis = (type) => {
         type === "histogram" ||
         // A waterfall's steps are categories (Opening, Sales, …) (#1070).
         type === "waterfall" ||
+        // A box & whisker's slots are categories (or the series names) (#1092).
+        type === "boxplot" ||
         // 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;AA+ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBA4nFjB,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;AA8ZxD,MAAM,MAAM,eAAe,GAAG,oBAAoB,CAAC;AAmGnD,eAAO,MAAM,UAAU,GAAI,gPAkBxB,eAAe,sBAkqFjB,CAAC"}

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

@@ -6,7 +6,6 @@ import { chartPaletteColorAt, debug, expandChartPalette, isAFormula, isNil, ssfF
 import React, { useCallback, useMemo, useRef, useState } from "react";
 import { aggregateSeriesByDomain, getDomainValuesForAxis, sanitizeDomainValues, shouldAggregateSeries, } from "../../utils/aggregation";
 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";
 import { dataUrlToBlob } from "../../utils/chart-image";
@@ -736,6 +735,29 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             const xAxisFmt = spec.categoryAxisOptions?.textFormat;
             const yAxisFmt = spec.valueAxisOptions?.textFormat;
             const legendFmt = spec.legend?.textFormat;
+            const bubbleLegendOverrides = applyLegendOverridesPlotly({
+                font: {
+                    color: legendFmt?.color ?? textColor,
+                    ...(legendFmt?.fontFamily ? { family: legendFmt.fontFamily } : {}),
+                    ...(legendFmt?.fontSize ? { size: legendFmt.fontSize } : {}),
+                },
+            }, spec.legend);
+            const bubbleBand = reservePlotlyLegendBand({
+                position: spec.legend?.position,
+                visible: (bubbleLegendOverrides.showlegend ?? preparedSeries.length > 1) !==
+                    false,
+                labels: preparedSeries.map((entry) => entry.name),
+                legendFontSize: legendFmt?.fontSize ?? 12,
+                width: Math.max(0, (width ?? 0) - 2),
+                height: Math.max(0, (height ?? 0) - 2),
+                hasTitle: Boolean(title),
+                titleFontSize: titleFmt?.fontSize ?? 16,
+                hasBottomAxisTitle: Boolean(spec.horizontalAxisTitle),
+                hasLeftAxisTitle: Boolean(spec.verticalAxisTitle),
+                leftAxisDepth: 60,
+                rightAxisDepth: hasBubbleSecondaryAxis ? 60 : 0,
+                axisFontSize: 12,
+            });
             const bubbleLayout = {
                 title: {
                     text: plotlyTitleText(title, spec.titleTextFormat),
@@ -789,16 +811,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     }
                     : {}),
                 legend: {
-                    font: {
-                        color: legendFmt?.color ?? textColor,
-                        ...(legendFmt?.fontFamily ? { family: legendFmt.fontFamily } : {}),
-                        ...(legendFmt?.fontSize ? { size: legendFmt.fontSize } : {}),
-                    },
+                    ...bubbleLegendOverrides.legend,
+                    ...(bubbleBand.legend ?? {}),
                 },
                 paper_bgcolor: bgColor,
                 plot_bgcolor: bgColor,
-                showlegend: preparedSeries.length > 1,
-                margin: { l: 60, r: hasBubbleSecondaryAxis ? 60 : 20, t: 50, b: 50 },
+                showlegend: bubbleLegendOverrides.showlegend ?? preparedSeries.length > 1,
+                // The plot shrinks to leave the legend its own band (#1089).
+                margin: bubbleBand.margin,
             };
             setPlotData(traces);
             setLayout(bubbleLayout);
@@ -1076,20 +1096,43 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                 });
             }
             const radarScale = indicators[0] ?? { min: 0, max: 1 };
+            // The legend gets its own band so it never covers the circle (#1089).
+            const radarLegendOverrides = applyLegendOverridesPlotly({ font: { color: textColor } }, spec.legend);
+            const radarBand = reservePlotlyLegendBand({
+                position: spec.legend?.position,
+                visible: (radarLegendOverrides.showlegend ?? radarTraces.length > 1) !== false,
+                labels: radarInputs.map((input) => input.name),
+                legendFontSize: spec.legend?.textFormat?.fontSize ?? 12,
+                width: Math.max(0, (width ?? 0) - 2),
+                height: Math.max(0, (height ?? 0) - 2),
+                hasTitle: Boolean(title),
+                titleFontSize: spec.titleTextFormat?.fontSize ?? 16,
+                hasBottomAxisTitle: false,
+                hasLeftAxisTitle: false,
+                leftAxisDepth: 50,
+                rightAxisDepth: 50,
+                axisFontSize: 12,
+            });
             setPlotData(radarTraces);
             setLayout({
                 title: { text: plotlyTitleText(title, spec.titleTextFormat) },
                 font: { color: textColor },
                 paper_bgcolor: bgColor,
                 plot_bgcolor: bgColor,
-                showlegend: radarTraces.length > 1,
+                showlegend: radarLegendOverrides.showlegend ?? radarTraces.length > 1,
+                legend: { ...radarLegendOverrides.legend, ...(radarBand.legend ?? {}) },
                 polar: {
                     radialaxis: {
                         visible: radarAxisOptions?.visible !== false,
                         range: [radarScale.min, radarScale.max],
                     },
                 },
-                margin: { l: 50, r: 50, t: 50, b: 50 },
+                margin: {
+                    l: Math.max(50, radarBand.margin.l),
+                    r: Math.max(50, radarBand.margin.r),
+                    t: Math.max(50, radarBand.margin.t),
+                    b: Math.max(50, radarBand.margin.b),
+                },
                 autosize: true,
             });
             return;
@@ -1705,62 +1748,34 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
             else if (effectiveChartType === "boxplot") {
                 const rawValues = seriesValuesOf(seriesData);
                 const quartileMethod = spec.quartileMethod;
-                const showOutliers = spec.showOutliers;
+                const showOutliers = spec.showOutliers !== false;
                 const showMeanMarker = spec.showMeanMarker === true;
-                // Plotly's box trace computes quartiles/fences itself from
-                // raw values, so a spec-pinned quartile method (or Excel's
-                // "no outliers → whiskers span min/max" semantics) requires
-                // switching to plotly's precomputed-statistics signature
-                // (q1/median/q3/lowerfence/upperfence arrays). When neither
-                // option is set the raw-values trace is kept unchanged.
-                const usePrecomputed = quartileMethod != null || showOutliers === false;
-                let trace;
-                if (usePrecomputed) {
-                    const summary = computeBoxplotSummary(rawValues, {
-                        quartileMethod,
-                    });
-                    if (!summary)
-                        continue;
-                    const hideOutliers = showOutliers === false;
-                    trace = {
-                        type: "box",
-                        name: dataLabel,
-                        // Precomputed boxes need an explicit category so each
-                        // series lands on its own slot (raw mode derives it from
-                        // the trace name).
-                        x: [dataLabel || `trace ${currentSeriesIndex}`],
-                        q1: [summary.q1],
-                        median: [summary.median],
-                        q3: [summary.q3],
-                        // Excel: hiding outlier points extends the whiskers to
-                        // the full min/max; with outliers shown they stop at the
-                        // most extreme points inside the 1.5×IQR fences.
-                        lowerfence: [hideOutliers ? summary.min : summary.lowerWhisker],
-                        upperfence: [hideOutliers ? summary.max : summary.upperWhisker],
-                        ...(hideOutliers
-                            ? { boxpoints: false }
-                            : {
-                                // Sample points ride along so plotly can still draw
-                                // the outlier dots against the precomputed fences.
-                                y: [rawValues.filter((v) => v != null)],
-                                boxpoints: "outliers",
-                            }),
-                        ...(showMeanMarker
-                            ? { mean: [summary.mean], boxmean: true }
-                            : {}),
-                    };
-                }
-                else {
-                    trace = {
-                        type: "box",
-                        y: rawValues.map((v) => (v ?? null)),
-                        name: dataLabel,
-                        // Raw mode is used when outliers are visible (today's
-                        // default and `showOutliers: true` alike).
-                        boxpoints: "outliers",
-                        ...(showMeanMarker ? { boxmean: true } : {}),
-                    };
-                }
+                const showInnerPoints = spec.showInnerPoints === true;
+                const showMeanLine = spec.showMeanLine === true;
+                // A category domain groups the series by its values (one box per
+                // category per series, `boxmode: "group"` in the layout); without
+                // one each series is a box on its own slot (#1092). Plotly's box
+                // trace computes the quartiles (Excel's inclusive / exclusive
+                // methods are native), keeps the whiskers at the 1.5×IQR fences
+                // and only hides the points when outliers are off.
+                const boxDomainSource = spec.domains?.[0]?.sources?.[0];
+                const boxCategories = boxDomainSource
+                    ? (getDomainValuesFromRange(boxDomainSource, spec.hiddenDimensionStrategy) ?? []).map((v) => (v === null || v === undefined ? "" : `${v}`.trim()))
+                    : [];
+                const grouped = boxCategories.some((c) => c !== "");
+                const values = rawValues.map((v) => (v ?? null));
+                const trace = {
+                    type: "box",
+                    name: dataLabel,
+                    y: values,
+                    ...(grouped
+                        ? { x: values.map((_, i) => boxCategories[i] ?? "") }
+                        : {}),
+                    ...(quartileMethod ? { quartilemethod: quartileMethod } : {}),
+                    boxpoints: showInnerPoints ? "all" : showOutliers ? "outliers" : false,
+                    ...(showInnerPoints ? { jitter: 0, pointpos: 0 } : {}),
+                    ...(showMeanMarker || showMeanLine ? { boxmean: true } : {}),
+                };
                 applyTraceColor(trace, series.color ?? undefined, {
                     noFill: series.noFill,
                     dataPointColors: series.dataPointColors,
@@ -2171,6 +2186,14 @@ export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, r
                     ? // Excel's histogram columns touch by default (#1087).
                         { bargap: 0 }
                     : {}),
+            // Box & whisker: boxes grouped by category, `gapWidth` as for columns
+            // (#1092).
+            ...(spec.chartType === "boxplot"
+                ? {
+                    boxmode: "group",
+                    boxgap: Math.max(0, Math.min(0.95, (typeof spec.gapWidth === "number" ? spec.gapWidth : 150) / 400)),
+                }
+                : {}),
             font: {
                 family: "Untitled Sans, apple-system, sans-serif",
                 size: 12,

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,YAiBjE,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,YAmBjE,CAAC"}

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

@@ -103,6 +103,8 @@ export const showXAxis = (type) => {
         type === "histogram" ||
         // A waterfall's steps are categories (Opening, Sales, …) (#1070).
         type === "waterfall" ||
+        // A box & whisker's slots are categories (or the series names) (#1092).
+        type === "boxplot" ||
         // Stock is line-derived on a category x-axis. Radar is polar and
         // does not use the cartesian x-axis.
         type === "stock") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rowsncolumns/charts",
-  "version": "28.1.12",
+  "version": "28.1.13",
   "author": "Vinay M",
   "license": "SEE LICENSE IN LICENSE.md",
   "main": "./dist/cjs/index.js",
@@ -70,7 +70,7 @@
     "@rowsncolumns/common-types": ">=5.3.2",
     "@rowsncolumns/grid": ">=13.2.35",
     "@rowsncolumns/icons": ">=7.2.33",
-    "@rowsncolumns/spreadsheet": ">=10.4.10",
+    "@rowsncolumns/spreadsheet": ">=10.4.11",
     "@rowsncolumns/spreadsheet-state": ">=29.1.8",
     "@rowsncolumns/toolkit": ">=24.5.10",
     "@rowsncolumns/ui": ">=16.0.4",