@rowsncolumns/charts 27.0.30

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

@@ -0,0 +1,1682 @@
+import { DotsVerticalIcon } from "@rowsncolumns/icons";
+import { getStringifiedColor, useFocusSheet } from "@rowsncolumns/spreadsheet";
+import { useSubscribeToSheet } from "@rowsncolumns/spreadsheet-state";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, IconButton, useIsomorphicLayoutEffect, useOnVisibilityChange, } from "@rowsncolumns/ui";
+import { debug, isAFormula, isNil, ssfFormat } from "@rowsncolumns/utils";
+import React, { useCallback, useRef, useState } from "react";
+import Plot from "react-plotly.js";
+import { aggregateSeriesByDomain, getDomainValuesForAxis, sanitizeDomainValues, shouldAggregateSeries, } from "../../utils/aggregation";
+import { computeBoxplotSummary } from "../../utils/boxplot";
+import { createBubbleSizeScale, prepareBubbleSeriesData, toLabelString, } from "../../utils/bubble";
+import { coerceCalculatedLabel } from "../../utils/chart-spec-utils";
+import { computeErrorBars, resolveCustomErrorBarValues, } from "../../utils/error-bars";
+import { gradientToPlotly } from "../../utils/gradient";
+import { extractHierarchyRows, getHierarchyHeaderTitle, 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";
+import { buildSequentialColorRamp, isRegionMapSpec, resolveGeoScope, WORLD_GEO_SCOPE, } from "../../utils/region-map";
+import { assignStockRoles, toLineSeries, toVolumeSeries, } from "../../utils/stock";
+import { computeTrendline } from "../../utils/trendline";
+import { chartTypeToPlotlyType, getPlotlyTraceStyle, mapMarkerSymbolToPlotly, showXAxis, } from "./helpers";
+const BASIC_CHART_TYPES = new Set([
+    "bar",
+    "column",
+    "line",
+    "pie",
+    "doughnut",
+    "area",
+    "radar",
+    "stock",
+    "histogram",
+    "boxplot",
+    "waterfall",
+    "funnel",
+    "combo",
+    "regionMap",
+]);
+// Plotly ships its own world geometry; these are the `layout.geo.scope`
+// values it accepts. Any other authored geoScope falls back to "world".
+const PLOTLY_GEO_SCOPES = new Set([
+    "world",
+    "usa",
+    "europe",
+    "asia",
+    "africa",
+    "north america",
+    "south america",
+]);
+// -------------------------- Phase 5.1 helpers --------------------------
+/** Merge a parsed `ChartTextFormat` onto a plotly font object. */
+const applyTextFormatToFont = (font, fmt) => {
+    if (!fmt)
+        return font;
+    const next = { ...(font ?? {}) };
+    if (fmt.color)
+        next.color = fmt.color;
+    if (fmt.fontFamily)
+        next.family = fmt.fontFamily;
+    if (typeof fmt.fontSize === "number")
+        next.size = fmt.fontSize;
+    return next;
+};
+const applyLegendOverridesPlotly = (legend, opts) => {
+    if (!opts)
+        return { legend, showlegend: undefined };
+    if (opts.position === "none") {
+        return { legend, showlegend: false };
+    }
+    const next = { ...(legend ?? {}) };
+    switch (opts.position) {
+        case "top":
+            next.orientation = "h";
+            next.x = 0.5;
+            next.xanchor = "center";
+            next.y = 1.1;
+            break;
+        case "bottom":
+            next.orientation = "h";
+            next.x = 0.5;
+            next.xanchor = "center";
+            next.y = -0.2;
+            break;
+        case "left":
+            next.orientation = "v";
+            next.x = -0.2;
+            next.y = 0.5;
+            next.yanchor = "middle";
+            break;
+        case "right":
+            next.orientation = "v";
+            next.x = 1.1;
+            next.y = 0.5;
+            next.yanchor = "middle";
+            break;
+        case "topRight":
+            next.orientation = "v";
+            next.x = 1;
+            next.y = 1;
+            next.xanchor = "right";
+            next.yanchor = "top";
+            break;
+    }
+    // Authored legend `<c:txPr>` overrides the theme-derived default.
+    next.font = applyTextFormatToFont(next.font, opts.textFormat);
+    return { legend: next, showlegend: true };
+};
+const applyAxisOverridesPlotly = (axis, opts) => {
+    if (!opts)
+        return axis;
+    const next = { ...(axis ?? {}) };
+    if (opts.logarithmic)
+        next.type = "log";
+    if (opts.reverse)
+        next.autorange = "reversed";
+    if (typeof opts.min === "number" || typeof opts.max === "number") {
+        next.range = [opts.min ?? null, opts.max ?? null];
+    }
+    if (opts.visible === false)
+        next.visible = false;
+    if (opts.showMajorGridlines === false)
+        next.showgrid = false;
+    if (opts.showMajorGridlines === true)
+        next.showgrid = true;
+    // Authored axis-label `<c:txPr>` — affects tick labels (`tickfont`)
+    // and the axis title font (`title.font`).
+    if (opts.textFormat) {
+        next.tickfont = applyTextFormatToFont(next.tickfont, opts.textFormat);
+        next.title = {
+            ...(next.title ?? {}),
+            font: applyTextFormatToFont(next.title?.font, opts.textFormat),
+        };
+    }
+    return next;
+};
+const PLOTLY_DLBL_POS_PIE = {
+    center: "inside",
+    inside: "inside",
+    outside: "outside",
+    insideEnd: "inside",
+    outsideEnd: "outside",
+    bestFit: "outside",
+};
+const PLOTLY_DLBL_POS_BAR = {
+    center: "inside",
+    inside: "inside",
+    outside: "outside",
+    insideEnd: "inside",
+    outsideEnd: "outside",
+    bestFit: "outside",
+};
+const applyDataLabelsToTracePlotly = (trace, opts, chartType) => {
+    if (!opts?.show)
+        return trace;
+    const next = { ...trace };
+    const isCircular = chartType === "pie" || chartType === "doughnut";
+    const posMap = isCircular ? PLOTLY_DLBL_POS_PIE : PLOTLY_DLBL_POS_BAR;
+    const position = opts.position ? posMap[opts.position] ?? "inside" : "inside";
+    if (isCircular) {
+        // Plotly's pie trace uses `textinfo` to control which fields render.
+        const parts = [];
+        if (opts.showCategoryName !== false && opts.showCategoryName)
+            parts.push("label");
+        if (opts.showValue !== false)
+            parts.push("value");
+        if (opts.showPercent)
+            parts.push("percent");
+        next.textinfo = parts.length ? parts.join("+") : "value";
+        next.textposition = position;
+    }
+    else {
+        // <c:dLbls><c:numFmt formatCode=…> — when authored, run each value
+        // through the same numfmt grammar the spreadsheet uses (`"$"#,##0`
+        // → `$1,831`). Plotly supports this natively via `texttemplate`
+        // with the d3-format mini-language, but our patterns are
+        // SpreadsheetML — easier to pre-format the strings.
+        const pattern = opts.numberFormatPattern;
+        const yVals = Array.isArray(next.y) ? next.y : [];
+        next.text = pattern
+            ? yVals.map((v) => (v === null || v === undefined ? "" : ssfFormat(pattern, v)))
+            : next.y;
+        next.textposition = position;
+    }
+    return next;
+};
+const BUBBLE_CHART_TYPES = new Set([
+    "bubble",
+    "scatter",
+]);
+const HIERARCHY_CHART_TYPES = new Set([
+    "treemap",
+    "sunburst",
+]);
+const isBasicChartSpec = (spec) => BASIC_CHART_TYPES.has(spec.chartType);
+const isBubbleChartSpec = (spec) => BUBBLE_CHART_TYPES.has(spec.chartType);
+const isHierarchyChartSpec = (spec) => HIERARCHY_CHART_TYPES.has(spec.chartType);
+const flattenChartDataValues = (chartData, extractor, hiddenStrategy, skipFirstRow = false) => {
+    if (!chartData || chartData.length === 0)
+        return [];
+    const values = [];
+    chartData.forEach((entry) => {
+        // Inline values (`<c:strLit>` / `<c:numLit>`) take precedence over
+        // cell-range sources — only one is populated by spec.
+        const inline = entry
+            .inlineValues;
+        if (inline && inline.length) {
+            const trimmed = skipFirstRow ? inline.slice(1) : inline;
+            values.push(...trimmed);
+            return;
+        }
+        entry.sources.forEach((source) => {
+            const extracted = extractor(source, hiddenStrategy) ?? [];
+            const trimmed = skipFirstRow && extracted.length > 0 ? extracted.slice(1) : extracted;
+            values.push(...trimmed);
+        });
+    });
+    return values;
+};
+// Excel error values that should be treated as null in charts
+const EXCEL_ERROR_VALUES = new Set([
+    "#N/A",
+    "#REF!",
+    "#VALUE!",
+    "#DIV/0!",
+    "#NAME?",
+    "#NULL!",
+    "#NUM!",
+    "#ERROR!",
+    "#GETTING_DATA",
+]);
+/**
+ * Check if a value is an Excel error string
+ */
+const isErrorValue = (value) => {
+    if (typeof value !== "string")
+        return false;
+    return EXCEL_ERROR_VALUES.has(value.toUpperCase());
+};
+/**
+ * Sanitize a value for chart display - convert errors to undefined
+ */
+const sanitizeChartValue = (value) => {
+    if (value === null || value === undefined)
+        return undefined;
+    if (isErrorValue(value))
+        return undefined;
+    if (typeof value === "number" && !isNaN(value))
+        return value;
+    if (typeof value === "string") {
+        const num = parseFloat(value);
+        return isNaN(num) ? undefined : num;
+    }
+    return undefined;
+};
+/**
+ * Add alpha transparency to a color (hex or rgb)
+ */
+const addAlphaToColor = (color, alpha) => {
+    if (!color)
+        return `rgba(0, 0, 0, ${alpha})`;
+    // Handle hex colors
+    if (color.startsWith("#")) {
+        const hex = color.slice(1);
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+    // Handle rgb/rgba colors
+    if (color.startsWith("rgb")) {
+        const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (match) {
+            return `rgba(${match[1]}, ${match[2]}, ${match[3]}, ${alpha})`;
+        }
+    }
+    return color;
+};
+export const BasicChart = ({ width, height, chart, theme, isDarkMode, sheetId, readonly, getDomainValuesFromRange, getSeriesValuesFromRange, onDeleteChart, onRequestEdit, onRequestCalculate, isSelected, }) => {
+    const spec = chart.spec;
+    const hierarchyTitleRef = useRef(undefined);
+    const explicitChartTitle = chart.spec.title ?? undefined;
+    const title = explicitChartTitle ?? hierarchyTitleRef.current;
+    const plotRef = useRef(null);
+    const focusSheet = useFocusSheet();
+    const shouldFocusSheetRef = useRef(false);
+    const [plotData, setPlotData] = useState([]);
+    const [layout, setLayout] = useState({});
+    const getSeriesData = useCallback((spec, sheetRange, options) => {
+        const rawSeriesValues = getSeriesValuesFromRange(sheetRange, spec.hiddenDimensionStrategy);
+        // Sanitize values - convert error strings like #N/A to null
+        const sanitizedValues = rawSeriesValues.map(sanitizeChartValue);
+        const { aggregateEnabled, aggregateType, rawDomainValues, orderedDomainValues, } = options;
+        const canAggregate = aggregateEnabled &&
+            !!aggregateType &&
+            rawDomainValues.length > 0 &&
+            orderedDomainValues.length > 0 &&
+            rawDomainValues.length === sanitizedValues.length;
+        if (canAggregate) {
+            const aggregatedValues = aggregateSeriesByDomain(rawDomainValues, sanitizedValues, aggregateType, orderedDomainValues).map((value) => value ?? 0);
+            if ((spec.chartType === "pie" || spec.chartType === "doughnut")) {
+                return {
+                    values: aggregatedValues,
+                    labels: orderedDomainValues,
+                };
+            }
+            return aggregatedValues;
+        }
+        // Use sanitized values - errors like #N/A become undefined
+        const seriesValues = sanitizedValues;
+        if ((spec.chartType === "pie" || spec.chartType === "doughnut")) {
+            const domainSheetRange = spec.domains[0]?.sources[0];
+            if (!domainSheetRange) {
+                return { values: [], labels: [] };
+            }
+            const domainValues = getDomainValuesFromRange(domainSheetRange, spec.hiddenDimensionStrategy);
+            return {
+                values: seriesValues,
+                labels: domainValues,
+            };
+        }
+        return seriesValues;
+    }, [getSeriesValuesFromRange, getDomainValuesFromRange]);
+    /**
+     * Triggers a chart update
+     */
+    const updateChart = async () => {
+        debug("Updating chart", chart);
+        const traces = [];
+        const chartType = chartTypeToPlotlyType(spec?.chartType);
+        const position = chart.position;
+        const isBubble = isBubbleChartSpec(spec);
+        const isHierarchy = isHierarchyChartSpec(spec);
+        const textColor = getStringifiedColor({
+            theme: 1,
+            tint: isDarkMode ? 1 : 0,
+        }, theme);
+        const bgColor = getStringifiedColor({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
+        const gridColor = isDarkMode ? "rgba(255,255,255,0.3)" : "#CCCCCC";
+        if (isBubble) {
+            const skipHeaders = spec.useFirstRowAsHeaders !== false;
+            const labels = flattenChartDataValues(spec.bubbleLabels, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders).map(toLabelString);
+            // Per-series resolved values. Scatter (always) and bubble (often)
+            // carry one xVal/bubbleSize per series in OOXML — the parser
+            // produces `spec.domains` and `spec.bubbleSizes` with one entry
+            // per series. Earlier code flattened all of them into a single
+            // shared X, which broke when series had different ranges. Now
+            // each series picks its own slot; we still expose a shared
+            // `xValues` for callers that pass a single domain (back-compat).
+            const perSeriesX = (spec.domains ?? []).map((dom) => flattenChartDataValues([dom], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders));
+            const perSeriesSize = (spec.bubbleSizes ?? []).map((sz) => flattenChartDataValues([sz], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders));
+            const seriesInputs = [];
+            for (let i = 0; i < spec.series.length; i++) {
+                const seriesEntry = spec.series[i];
+                let resolvedLabel = seriesEntry.dataLabel ?? "";
+                if (resolvedLabel && isAFormula(resolvedLabel)) {
+                    resolvedLabel = coerceCalculatedLabel(await onRequestCalculate(resolvedLabel, chart.position.sheetId ?? sheetId, chart.position.overlayPosition.anchorCell.rowIndex, chart.position.overlayPosition.anchorCell.columnIndex));
+                }
+                // Per-series X, with fallback to the first domain so single-X
+                // bubble charts still work.
+                const xValues = perSeriesX[i] ?? perSeriesX[0];
+                const sizeValues = perSeriesSize[i] ?? perSeriesSize[0];
+                seriesInputs.push({
+                    name: resolvedLabel,
+                    values: flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders),
+                    ...(xValues ? { xValues } : {}),
+                    ...(sizeValues ? { sizeValues } : {}),
+                });
+            }
+            // Shared fallbacks (legacy bubble charts with a single domain).
+            const sharedXValues = perSeriesX[0] ?? [];
+            const sharedSizeValues = perSeriesSize[0] ?? [];
+            const { categories, series: preparedSeries, sizeValues, } = prepareBubbleSeriesData({
+                xValues: sharedXValues,
+                labelValues: labels,
+                sizeValues: sharedSizeValues,
+                series: seriesInputs,
+            });
+            const sizeScale = createBubbleSizeScale(sizeValues);
+            const hasStringX = categories.length > 0;
+            const palette = [
+                theme.themeColors.accent1,
+                theme.themeColors.accent2,
+                theme.themeColors.accent3,
+                theme.themeColors.accent4,
+                theme.themeColors.accent5,
+                theme.themeColors.accent6,
+            ];
+            // Scatter and bubble share the same "BubbleChartSpec" shape but
+            // render very differently. Scatter is small fixed-size markers
+            // (optionally connected by a line per `scatterStyle`); bubble
+            // applies a size scale so the third dimension shows as bubble
+            // diameter. Treating scatter through the bubble path produced
+            // huge bubbles sized by Y values (the original mismatch with
+            // Excel's scatter chart).
+            const isScatter = spec.chartType === "scatter";
+            const scatterStyle = spec.scatterStyle ?? (isScatter ? "lineMarker" : undefined);
+            const plotlyModeForScatterStyle = (style) => {
+                switch (style) {
+                    case "line":
+                        return "lines";
+                    case "smooth":
+                        return "lines";
+                    case "marker":
+                        return "markers";
+                    case "smoothMarker":
+                        return "lines+markers";
+                    case "lineMarker":
+                    default:
+                        return "lines+markers";
+                }
+            };
+            const lineShapeFor = (style) => style === "smooth" || style === "smoothMarker"
+                ? "spline"
+                : "linear";
+            const traces = preparedSeries.map((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 ?? palette[index % palette.length];
+                const perSeriesMarker = spec.series[index]?.marker ?? undefined;
+                if (isScatter) {
+                    // Per-series marker.symbol = "none" → pure line (no markers).
+                    // Per-series marker.size overrides the default. Falls back to
+                    // chart-level scatterStyle for the line/marker mix.
+                    const symbol = perSeriesMarker?.symbol;
+                    const noMarkers = symbol === "none";
+                    const mode = noMarkers
+                        ? "lines"
+                        : plotlyModeForScatterStyle(scatterStyle);
+                    const markerSize = perSeriesMarker?.size ?? 6;
+                    const markerColor = perSeriesMarker?.color ?? seriesColor;
+                    return {
+                        type: "scatter",
+                        mode,
+                        x: xValues,
+                        y: yValues,
+                        text: labelValuesForSeries,
+                        name: entry.name,
+                        hovertemplate: "%{text}<br>X: %{x}<br>Y: %{y}<extra></extra>",
+                        line: {
+                            shape: lineShapeFor(scatterStyle),
+                            color: seriesColor,
+                            width: 2,
+                        },
+                        ...(noMarkers
+                            ? {}
+                            : {
+                                marker: {
+                                    size: markerSize,
+                                    color: markerColor,
+                                    symbol: mapMarkerSymbolToPlotly(symbol),
+                                },
+                            }),
+                    };
+                }
+                // 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`,
+            // `spec.categoryAxisOptions.textFormat`, etc. all land here.
+            const titleFmt = spec.titleTextFormat;
+            const xAxisFmt = spec.categoryAxisOptions?.textFormat;
+            const yAxisFmt = spec.valueAxisOptions?.textFormat;
+            const legendFmt = spec.legend?.textFormat;
+            const bubbleLayout = {
+                title: {
+                    text: title ?? undefined,
+                    font: {
+                        family: titleFmt?.fontFamily ?? "Untitled Sans, apple-system, sans-serif",
+                        size: titleFmt?.fontSize ?? 16,
+                        color: titleFmt?.color ?? textColor,
+                    },
+                    x: 0.02,
+                    xanchor: "left",
+                },
+                xaxis: {
+                    title: {
+                        text: spec.horizontalAxisTitle ?? "",
+                        font: { color: xAxisFmt?.color ?? textColor },
+                    },
+                    gridcolor: gridColor,
+                    tickfont: {
+                        color: xAxisFmt?.color ?? textColor,
+                        ...(xAxisFmt?.fontFamily ? { family: xAxisFmt.fontFamily } : {}),
+                        ...(xAxisFmt?.fontSize ? { size: xAxisFmt.fontSize } : {}),
+                    },
+                    type: hasStringX ? "category" : "linear",
+                },
+                yaxis: {
+                    title: {
+                        text: spec.verticalAxisTitle ?? "",
+                        font: { color: yAxisFmt?.color ?? textColor },
+                    },
+                    gridcolor: gridColor,
+                    tickfont: {
+                        color: yAxisFmt?.color ?? textColor,
+                        ...(yAxisFmt?.fontFamily ? { family: yAxisFmt.fontFamily } : {}),
+                        ...(yAxisFmt?.fontSize ? { size: yAxisFmt.fontSize } : {}),
+                    },
+                },
+                legend: {
+                    font: {
+                        color: legendFmt?.color ?? textColor,
+                        ...(legendFmt?.fontFamily ? { family: legendFmt.fontFamily } : {}),
+                        ...(legendFmt?.fontSize ? { size: legendFmt.fontSize } : {}),
+                    },
+                },
+                paper_bgcolor: bgColor,
+                plot_bgcolor: bgColor,
+                showlegend: preparedSeries.length > 1,
+                margin: { l: 60, r: 20, t: 50, b: 50 },
+            };
+            setPlotData(traces);
+            setLayout(bubbleLayout);
+            return;
+        }
+        if (isHierarchy) {
+            const hierarchyRows = extractHierarchyRows(spec, {
+                getDomainValuesFromRange,
+                getSeriesValuesFromRange,
+                hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+            });
+            const headerTitle = getHierarchyHeaderTitle(spec, {
+                getDomainValuesFromRange,
+                getSeriesValuesFromRange,
+                hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+            });
+            hierarchyTitleRef.current = explicitChartTitle ?? headerTitle;
+            const hierarchyData = toPlotlyHierarchy(hierarchyRows);
+            const seriesName = hierarchyData.labels.length === 1
+                ? hierarchyData.labels[0] ?? ""
+                : explicitChartTitle ?? headerTitle ?? "";
+            const hierarchyTrace = {
+                type: chartType,
+                labels: hierarchyData.labels,
+                parents: hierarchyData.parents,
+                values: hierarchyData.values,
+                name: seriesName,
+                textinfo: "label+value",
+                branchvalues: "total",
+            };
+            const layoutForHierarchy = {
+                title: {
+                    text: title ?? undefined,
+                    font: {
+                        family: "Untitled Sans, apple-system, sans-serif",
+                        size: 16,
+                        color: textColor,
+                    },
+                    x: 0.02,
+                    xanchor: "left",
+                },
+                font: {
+                    family: "Untitled Sans, apple-system, sans-serif",
+                    size: 12,
+                    color: textColor,
+                },
+                paper_bgcolor: bgColor,
+                plot_bgcolor: bgColor,
+                showlegend: false,
+                margin: { l: 20, r: 20, t: 50, b: 20 },
+            };
+            setPlotData([hierarchyTrace]);
+            setLayout(layoutForHierarchy);
+            return;
+        }
+        hierarchyTitleRef.current = explicitChartTitle;
+        if (!isBasicChartSpec(spec)) {
+            debug("Unsupported chart type", spec.chartType);
+            return;
+        }
+        // ------------------------- Region map -------------------------
+        // Filled map / choropleth (`chartType: "regionMap"`, or a payload
+        // degraded to another basic type carrying `sourceChartType:
+        // "REGION_MAP"`). Plotly ships its own world geometry, so this maps
+        // straight onto the built-in `choropleth` trace with
+        // `locationmode: "country names"` — plotly does its own (lenient)
+        // country-name matching and silently skips labels it can't place.
+        if (isRegionMapSpec(spec)) {
+            const labels = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map((v) => String(v ?? "").trim());
+            const seriesEntry = spec.series?.[0];
+            const rawValues = seriesEntry
+                ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)))
+                : [];
+            const locations = [];
+            const z = [];
+            labels.forEach((label, i) => {
+                const value = rawValues[i];
+                if (label && typeof value === "number" && Number.isFinite(value)) {
+                    locations.push(label);
+                    z.push(value);
+                }
+            });
+            // Sequential single-hue ramp from the theme accent (same helper
+            // the echarts renderer uses), expressed as a plotly colorscale.
+            const ramp = buildSequentialColorRamp(theme.themeColors.accent1, !!isDarkMode);
+            const colorscale = ramp.map((color, i) => [i / (ramp.length - 1), color]);
+            const geoScope = resolveGeoScope(spec.geoScope);
+            const regionTrace = {
+                type: "choropleth",
+                locations,
+                z,
+                locationmode: "country names",
+                colorscale,
+                marker: {
+                    line: {
+                        color: isDarkMode ? "rgba(255,255,255,0.3)" : "#FFFFFF",
+                        width: 0.5,
+                    },
+                },
+                colorbar: {
+                    thickness: 10,
+                    outlinewidth: 0,
+                    tickfont: { color: textColor, size: 12 },
+                },
+                hovertemplate: "%{location}: %{z}<extra></extra>",
+            };
+            setPlotData([regionTrace]);
+            setLayout({
+                title: { text: title ?? undefined },
+                font: { color: textColor },
+                paper_bgcolor: bgColor,
+                plot_bgcolor: bgColor,
+                showlegend: false,
+                geo: {
+                    scope: (PLOTLY_GEO_SCOPES.has(geoScope)
+                        ? geoScope
+                        : WORLD_GEO_SCOPE),
+                    bgcolor: bgColor,
+                    showframe: false,
+                    showcoastlines: false,
+                    // Regions without data keep a neutral land fill so "no data"
+                    // reads differently from "small value".
+                    showland: true,
+                    landcolor: isDarkMode
+                        ? "rgba(255,255,255,0.08)"
+                        : "rgba(0,0,0,0.06)",
+                },
+                margin: { l: 20, r: 20, t: 50, b: 20 },
+                autosize: true,
+            });
+            return;
+        }
+        // ---------------------------- Radar ----------------------------
+        // Plotly renders radar via `scatterpolar` traces: r = the values,
+        // theta = the category names (closed by appending the first point).
+        if (spec.chartType === "radar") {
+            const categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map((v) => String(v ?? ""));
+            const radarStyle = spec.radarStyle ?? "standard";
+            const radarTraces = [];
+            const radarInputs = [];
+            for (const seriesEntry of spec.series ?? []) {
+                const label = seriesEntry.dataLabel && !isAFormula(seriesEntry.dataLabel)
+                    ? seriesEntry.dataLabel
+                    : "";
+                const values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v)));
+                radarInputs.push({ name: label, values });
+            }
+            // buildRadarIndicators keeps category/value alignment consistent
+            // with the echarts renderer (and validates we have axes).
+            const indicators = buildRadarIndicators(categories, radarInputs);
+            for (let i = 0; i < radarInputs.length; i++) {
+                const input = radarInputs[i];
+                const seriesColor = spec.series?.[i]?.color ?? undefined;
+                const r = indicators.map((_, idx) => input.values[idx] ?? 0);
+                const theta = indicators.map((ind) => ind.name);
+                radarTraces.push({
+                    type: "scatterpolar",
+                    r: r.length ? [...r, r[0]] : r,
+                    theta: theta.length ? [...theta, theta[0]] : theta,
+                    name: input.name,
+                    mode: radarStyle === "standard" ? "lines" : "lines+markers",
+                    ...(radarStyle === "filled" ? { fill: "toself" } : {}),
+                    ...(seriesColor ? { line: { color: seriesColor } } : {}),
+                });
+            }
+            const maxR = indicators.reduce((m, ind) => Math.max(m, ind.max), 0);
+            setPlotData(radarTraces);
+            setLayout({
+                title: { text: title ?? undefined },
+                font: { color: textColor },
+                paper_bgcolor: bgColor,
+                plot_bgcolor: bgColor,
+                showlegend: radarTraces.length > 1,
+                polar: {
+                    radialaxis: {
+                        visible: true,
+                        range: [0, maxR > 0 ? maxR : 1],
+                    },
+                },
+                margin: { l: 50, r: 50, t: 50, b: 50 },
+                autosize: true,
+            });
+            return;
+        }
+        // ---------------------------- Stock ----------------------------
+        // Line-derived stock: one scatter line trace per price role. The
+        // V-variants additionally get a volume column sub-pane below the
+        // price plot.
+        if (spec.chartType === "stock") {
+            const variant = (spec.stockVariant ?? "HLC");
+            const categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map((v) => String(v ?? ""));
+            const seriesValues = (spec.series ?? []).map((seriesEntry) => flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map((v) => (typeof v === "number" ? v : Number(v))));
+            // V-variants (VHLC / VOHLC) carry a volume series drawn as a
+            // column sub-pane under the price plot: the shared x-axis is
+            // split into two stacked y-axis domains (price ~70%, volume
+            // ~22%) and the columns are colored by up/down day to match the
+            // price plot.
+            const volumePoints = toVolumeSeries(seriesValues, variant);
+            const hasVolume = (volumePoints?.length ?? 0) > 0;
+            const buildVolumeTrace = (xs) => ({
+                type: "bar",
+                x: xs,
+                y: (volumePoints ?? []).map((p) => p.value),
+                name: "Volume",
+                yaxis: "y2",
+                showlegend: false,
+                marker: {
+                    color: (volumePoints ?? []).map((p) => p.up ? theme.themeColors.accent1 : theme.themeColors.accent2),
+                },
+            });
+            const volumeLayout = hasVolume
+                ? {
+                    yaxis2: {
+                        domain: [0, 0.22],
+                        automargin: true,
+                        showgrid: false,
+                        showticklabels: false,
+                    },
+                }
+                : {};
+            // The price y-axis keeps the top of the plot when a volume pane
+            // sits below it.
+            const priceYAxisDomain = hasVolume ? { domain: [0.3, 1] } : {};
+            // OHLC / VOHLC variants render as a native candlestick; HLC / VHLC
+            // (no open) fall through to the line-derived rendering below.
+            if (variant === "OHLC" || variant === "VOHLC") {
+                const roles = assignStockRoles(seriesValues, variant);
+                const xs = categories.length > 0
+                    ? categories
+                    : (roles.close ?? []).map((_, i) => i + 1);
+                const candleTrace = {
+                    type: "candlestick",
+                    x: xs,
+                    open: (roles.open ?? []).map((v) => v ?? null),
+                    high: (roles.high ?? []).map((v) => v ?? null),
+                    low: (roles.low ?? []).map((v) => v ?? null),
+                    close: (roles.close ?? []).map((v) => v ?? null),
+                    increasing: { line: { color: theme.themeColors.accent1 } },
+                    decreasing: { line: { color: theme.themeColors.accent2 } },
+                };
+                setPlotData(hasVolume ? [candleTrace, buildVolumeTrace(xs)] : [candleTrace]);
+                setLayout({
+                    title: { text: title ?? undefined },
+                    font: { color: textColor },
+                    paper_bgcolor: bgColor,
+                    plot_bgcolor: bgColor,
+                    showlegend: false,
+                    xaxis: {
+                        title: { text: spec.horizontalAxisTitle ?? "" },
+                        automargin: true,
+                        showgrid: true,
+                        gridcolor: gridColor,
+                        rangeslider: { visible: false },
+                    },
+                    yaxis: {
+                        title: { text: spec.verticalAxisTitle ?? "" },
+                        automargin: true,
+                        showgrid: true,
+                        gridcolor: gridColor,
+                        ...priceYAxisDomain,
+                    },
+                    ...volumeLayout,
+                    margin: { l: 50, r: 50, t: 50, b: 50 },
+                    autosize: true,
+                });
+                return;
+            }
+            const lineSeries = toLineSeries(seriesValues, variant);
+            const stockPalette = [
+                theme.themeColors.accent1,
+                theme.themeColors.accent2,
+                theme.themeColors.accent3,
+                theme.themeColors.accent4,
+            ];
+            const xs = categories.length > 0
+                ? categories
+                : (lineSeries[0]?.values ?? []).map((_, i) => i + 1);
+            const stockTraces = lineSeries.map((s, i) => ({
+                type: "scatter",
+                mode: "lines",
+                x: xs,
+                y: s.values.map((v) => (v ?? null)),
+                name: s.name,
+                line: { color: stockPalette[i % stockPalette.length] },
+            }));
+            setPlotData(hasVolume ? [...stockTraces, buildVolumeTrace(xs)] : stockTraces);
+            setLayout({
+                title: { text: title ?? undefined },
+                font: { color: textColor },
+                paper_bgcolor: bgColor,
+                plot_bgcolor: bgColor,
+                showlegend: stockTraces.length > 1,
+                xaxis: {
+                    title: { text: spec.horizontalAxisTitle ?? "" },
+                    automargin: true,
+                    showgrid: true,
+                    gridcolor: gridColor,
+                },
+                yaxis: {
+                    title: { text: spec.verticalAxisTitle ?? "" },
+                    automargin: true,
+                    showgrid: true,
+                    gridcolor: gridColor,
+                    ...priceYAxisDomain,
+                },
+                ...volumeLayout,
+                margin: { l: 50, r: 50, t: 50, b: 50 },
+                autosize: true,
+            });
+            return;
+        }
+        const isStacked = spec.stackedType && spec.stackedType !== "UNSTACKED";
+        const isHorizontalBarChart = spec.chartType === "bar";
+        // Get domain data (x-axis)
+        const shouldAggregate = shouldAggregateSeries(spec.series);
+        const primaryDomainSource = spec?.domains?.[0]?.sources?.[0];
+        const rawPrimaryDomainValues = primaryDomainSource
+            ? sanitizeDomainValues(getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy) ?? [])
+            : [];
+        let domainData = getDomainValuesForAxis(rawPrimaryDomainValues, shouldAggregate);
+        spec.domains?.forEach((domain, domainIndex) => {
+            domain.sources.forEach((sheetRange, sourceIndex) => {
+                if (domainIndex === 0 && sourceIndex === 0) {
+                    domainData = getDomainValuesForAxis(rawPrimaryDomainValues, shouldAggregate);
+                }
+                else {
+                    const rawValues = sanitizeDomainValues(getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy) ?? []);
+                    domainData = getDomainValuesForAxis(rawValues, shouldAggregate);
+                }
+            });
+        });
+        const assignCartesianData = (categories, values) => {
+            // Convert undefined to null for Plotly (Datum type accepts null but not undefined)
+            const plotlyValues = values.map((v) => v ?? null);
+            // When categories is empty but we have values, generate index-based x values
+            // so Plotly can render the chart
+            const effectiveCategories = categories.length === 0 && plotlyValues.length > 0
+                ? Array.from({ length: plotlyValues.length }, (_, i) => i + 1)
+                : categories;
+            if (isHorizontalBarChart) {
+                return {
+                    x: plotlyValues,
+                    y: effectiveCategories,
+                    orientation: "h",
+                };
+            }
+            return { x: effectiveCategories, y: plotlyValues, orientation: undefined };
+        };
+        // Theme color palette for fallback
+        const themeColorPalette = [
+            theme.themeColors.accent1,
+            theme.themeColors.accent2,
+            theme.themeColors.accent3,
+            theme.themeColors.accent4,
+            theme.themeColors.accent5,
+            theme.themeColors.accent6,
+        ];
+        const applyTraceColor = (trace, seriesColor, options) => {
+            const target = trace;
+            const chartTypeForStyling = options?.effectiveChartType ?? spec.chartType;
+            const isBarOrColumn = chartTypeForStyling === "bar" || chartTypeForStyling === "column";
+            // Transparent series (Gantt lag offset). Set marker color to
+            // `rgba(0,0,0,0)` so the bar layout is preserved but invisible.
+            if (options?.noFill) {
+                target.marker = {
+                    ...(target.marker ?? {}),
+                    color: "rgba(0,0,0,0)",
+                    line: {
+                        ...(target.marker?.line ?? {}),
+                        color: "rgba(0,0,0,0)",
+                        width: 0,
+                    },
+                };
+                return trace;
+            }
+            // Get effective color - gradient fallback wins, then series color,
+            // then theme palette. Plotly cannot paint the real gradient, so the
+            // median stop stands in for the whole ramp.
+            const effectiveColor = options?.gradientColor ??
+                seriesColor ??
+                (options?.seriesIndex !== undefined
+                    ? themeColorPalette[options.seriesIndex % themeColorPalette.length]
+                    : undefined);
+            // Per-data-point color overrides — Gantt charts use `<c:dPt>` to
+            // give every task its own color. Build a per-point color array
+            // by category index, falling back to the series color for points
+            // without an override.
+            if (isBarOrColumn &&
+                Array.isArray(options?.dataPointColors) &&
+                options?.dataPointColors.length) {
+                const overrides = new Map();
+                for (const dp of options.dataPointColors) {
+                    if (typeof dp.idx === "number" && typeof dp.color === "string") {
+                        overrides.set(dp.idx, dp.color);
+                    }
+                }
+                const fallback = effectiveColor ?? "#4285F4";
+                const yArray = Array.isArray(target.y)
+                    ? target.y
+                    : Array.isArray(target.x)
+                        ? target.x
+                        : [];
+                const colors = yArray.map((_, i) => overrides.get(i) ?? fallback);
+                target.marker = { ...(target.marker ?? {}), color: colors };
+                return trace;
+            }
+            // Handle invertIfNegative for bar/column charts
+            if (isBarOrColumn && options?.invertIfNegative && options?.values) {
+                const positiveColor = effectiveColor ?? "#4285F4";
+                const negColor = options.negativeColor ?? "#FF0000";
+                // Create array of colors based on value sign
+                const colors = options.values.map((v) => typeof v === "number" && v < 0 ? negColor : positiveColor);
+                target.marker = { ...(target.marker ?? {}), color: colors };
+                return trace;
+            }
+            if (!effectiveColor) {
+                return trace;
+            }
+            if (chartTypeForStyling === "pie") {
+                // Don't clobber the distinct per-slice palette the trace was built
+                // with (accent1..accent6) with a single repeated color. Only repeat
+                // a uniform color when the user explicitly authored a series color;
+                // otherwise keep the multi-color palette so each slice stays distinct.
+                const existingColors = target.marker?.colors;
+                if (!seriesColor &&
+                    Array.isArray(existingColors) &&
+                    existingColors.length > 1) {
+                    return trace;
+                }
+                const labelCount = Array.isArray(target.labels)
+                    ? target.labels.length
+                    : Array.isArray(target.y)
+                        ? target.y.length
+                        : 0;
+                target.marker = {
+                    ...(target.marker ?? {}),
+                    colors: labelCount > 0
+                        ? Array.from({ length: labelCount }, () => effectiveColor)
+                        : target.marker?.colors,
+                    color: effectiveColor,
+                };
+                return trace;
+            }
+            if (isBarOrColumn) {
+                target.marker = { ...(target.marker ?? {}), color: effectiveColor };
+                return trace;
+            }
+            target.marker = { ...(target.marker ?? {}), color: effectiveColor };
+            target.line = { ...(target.line ?? {}), color: effectiveColor };
+            if (target.fill && target.fill !== "none") {
+                // Add transparency to area fills so they don't cover other traces
+                target.fillcolor = addAlphaToColor(effectiveColor, 0.5);
+            }
+            return trace;
+        };
+        // Track whether any series opts into the secondary value axis; the
+        // yaxis2 layout block is added below when true.
+        let hasSecondaryAxis = false;
+        // Pareto — a histogram whose bins are sorted descending with a
+        // cumulative-% line overlaid on a secondary 0-100% axis. Arrives
+        // as a plain histogram spec carrying `sourceChartType: "PARETO"`.
+        const isPareto = spec.chartType === "histogram" && isParetoSpec(spec);
+        // Pie-of-pie / bar-of-pie composite. The pie branch below fills
+        // `ofPieExtras` with connector-line shapes and (for bar-of-pie) the
+        // hidden secondary axes + stack mode merged into the layout later.
+        const isOfPie = spec.chartType === "pie" && isOfPieChartSpec(spec);
+        let ofPieHandled = false;
+        let ofPieExtras = null;
+        /**
+         * Attach cartesian-only features to a freshly-built line/bar/area
+         * trace: native error bars, secondary-axis assignment, and trendline
+         * overlay traces (computed by the shared utils/trendline regression).
+         */
+        const decorateCartesianTrace = (trace, series, values, dataLabel) => {
+            const target = trace;
+            // Secondary value axis. Plotly overlays a second y-axis named
+            // "y2" and the trace points at it via `yaxis: "y2"`.
+            if (series.useSecondaryAxis) {
+                target.yaxis = "y2";
+                hasSecondaryAxis = true;
+            }
+            // Error bars — native plotly `error_y` / `error_x`. valueType
+            // "custom" reads per-point magnitudes from the spec's plus/minus
+            // ranges, resolved through the same extractor the series values
+            // use.
+            const magnitudes = computeErrorBars(values, resolveCustomErrorBarValues(series.errorBars, (range) => getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy)));
+            if (magnitudes) {
+                const direction = series.errorBars?.direction ?? "y";
+                const noEndCap = series.errorBars?.noEndCap ?? false;
+                const symmetric = magnitudes.plus.every((p, i) => p === magnitudes.minus[i]);
+                const errorConfig = {
+                    type: "data",
+                    symmetric,
+                    array: magnitudes.plus,
+                    ...(symmetric ? {} : { arrayminus: magnitudes.minus }),
+                    color: series.color ?? undefined,
+                    ...(noEndCap ? { width: 0 } : {}),
+                };
+                if (direction === "x") {
+                    target.error_x = errorConfig;
+                }
+                else {
+                    target.error_y = errorConfig;
+                }
+            }
+            // Trendlines — one overlay scatter trace per spec, reusing the
+            // shared regression util.
+            const seriesColor = series.color ?? theme.themeColors.accent1;
+            for (const tl of series.trendlines ?? []) {
+                const result = computeTrendline(values, {
+                    type: tl.type,
+                    order: tl.order,
+                    period: tl.period,
+                    forecastForward: tl.forecastForward,
+                    forecastBackward: tl.forecastBackward,
+                });
+                if (!result || result.points.length < 2)
+                    continue;
+                const tlName = tl.name ??
+                    `${dataLabel ? dataLabel + " " : ""}${tl.type ?? "linear"} trend`;
+                // Map the fitted x (category index) back onto the category
+                // labels where possible so the line aligns with the data.
+                const xs = result.points.map((p) => p.x >= 0 && p.x < domainData.length ? domainData[p.x] : p.x);
+                const ys = result.points.map((p) => p.y);
+                const overlay = {
+                    type: "scatter",
+                    mode: "lines",
+                    name: tlName,
+                    line: {
+                        color: tl.color ?? seriesColor,
+                        dash: "dash",
+                        width: 2,
+                    },
+                    hoverinfo: "skip",
+                    ...(series.useSecondaryAxis ? { yaxis: "y2" } : {}),
+                };
+                if (isHorizontalBarChart) {
+                    overlay.x = ys;
+                    overlay.y = xs;
+                    overlay.orientation = "h";
+                }
+                else {
+                    overlay.x = xs;
+                    overlay.y = ys;
+                }
+                traces.push(overlay);
+            }
+        };
+        // Create traces for each series
+        let seriesIndex = 0;
+        for (const series of spec.series ?? []) {
+            const currentSeriesIndex = seriesIndex++;
+            const dataLabel = !isNil(series.dataLabel) && isAFormula(series.dataLabel)
+                ? coerceCalculatedLabel(await onRequestCalculate(series.dataLabel, position.sheetId ?? sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex))
+                : series.dataLabel ?? "";
+            for (const sheetRange of series.sources) {
+                const seriesData = getSeriesData(spec, sheetRange, {
+                    aggregateEnabled: shouldAggregate,
+                    aggregateType: series.aggregateType,
+                    rawDomainValues: rawPrimaryDomainValues,
+                    orderedDomainValues: domainData,
+                });
+                // Support per-series chart type for combo charts
+                const effectiveChartType = series.seriesChartType ?? spec.chartType;
+                const seriesPlotlyType = chartTypeToPlotlyType(effectiveChartType);
+                const seriesTraceStyle = getPlotlyTraceStyle(effectiveChartType);
+                if (effectiveChartType === "histogram") {
+                    const rawValues = "values" in seriesData
+                        ? seriesData.values
+                        : seriesData;
+                    const binCount = spec.binCount;
+                    if (isPareto) {
+                        // Plotly's native histogram trace bins in axis order and
+                        // can't reorder bins, so Pareto pre-bins with the shared
+                        // util, sorts descending, and renders a bar trace plus the
+                        // cumulative-% line pointed at the y2 overlay axis.
+                        const { labels, counts, cumulativePercents } = computePareto(binHistogram(rawValues, binCount));
+                        const barTrace = {
+                            type: "bar",
+                            x: labels,
+                            y: counts,
+                            name: dataLabel,
+                        };
+                        applyTraceColor(barTrace, series.color ?? undefined, {
+                            noFill: series.noFill,
+                            dataPointColors: series.dataPointColors,
+                            seriesIndex: currentSeriesIndex,
+                            effectiveChartType,
+                        });
+                        traces.push(barTrace);
+                        traces.push({
+                            type: "scatter",
+                            mode: "lines+markers",
+                            x: labels,
+                            y: cumulativePercents,
+                            name: "Cumulative %",
+                            yaxis: "y2",
+                        });
+                        hasSecondaryAxis = true;
+                    }
+                    else {
+                        const trace = {
+                            type: "histogram",
+                            x: rawValues.map((v) => (v ?? null)),
+                            name: dataLabel,
+                            ...(typeof binCount === "number" && binCount > 0
+                                ? { nbinsx: binCount }
+                                : {}),
+                        };
+                        applyTraceColor(trace, series.color ?? undefined, {
+                            noFill: series.noFill,
+                            dataPointColors: series.dataPointColors,
+                            seriesIndex: currentSeriesIndex,
+                            effectiveChartType,
+                        });
+                        traces.push(trace);
+                    }
+                }
+                else if (effectiveChartType === "boxplot") {
+                    const rawValues = "values" in seriesData
+                        ? seriesData.values
+                        : seriesData;
+                    const quartileMethod = spec.quartileMethod;
+                    const showOutliers = spec.showOutliers;
+                    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 } : {}),
+                        };
+                    }
+                    applyTraceColor(trace, series.color ?? undefined, {
+                        noFill: series.noFill,
+                        dataPointColors: series.dataPointColors,
+                        seriesIndex: currentSeriesIndex,
+                        effectiveChartType,
+                    });
+                    traces.push(trace);
+                }
+                else if (effectiveChartType === "waterfall") {
+                    const rawValues = "values" in seriesData
+                        ? seriesData.values
+                        : 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 ?? []);
+                    const trace = {
+                        type: "waterfall",
+                        x: domainData,
+                        y: rawValues.map((v) => (v ?? null)),
+                        measure: rawValues.map((_, i) => totalIndices.has(i) ? "total" : "relative"),
+                        name: dataLabel,
+                    };
+                    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 trace = {
+                        type: "funnel",
+                        y: domainData,
+                        x: rawValues.map((v) => (v ?? null)),
+                        name: dataLabel,
+                    };
+                    applyTraceColor(trace, series.color ?? undefined, {
+                        noFill: series.noFill,
+                        dataPointColors: series.dataPointColors,
+                        seriesIndex: currentSeriesIndex,
+                        effectiveChartType,
+                    });
+                    traces.push(trace);
+                }
+                else if (effectiveChartType === "pie" && isOfPie) {
+                    // Pie-of-pie / bar-of-pie — split the minor slices into a
+                    // secondary pie or stacked bar beside the main pie, replace
+                    // them with an aggregated "Other" slice, and join the two
+                    // plots with connector-line shapes. Only the first pie series
+                    // participates (of-pie is a single-series chart in Excel).
+                    if (ofPieHandled)
+                        continue;
+                    ofPieHandled = true;
+                    const pieData = seriesData;
+                    const { main, secondary, otherTotal, total } = splitOfPie(pieData.values, pieData.labels, {
+                        splitType: spec.splitType,
+                        splitPos: spec.splitPos,
+                    });
+                    const ofPieType = resolveOfPieType(spec.ofPieType);
+                    const secondScale = clampSecondPieSize(spec.secondPieSize) / 100;
+                    const halfAngle = otherSliceHalfAngle(otherTotal, total);
+                    const paletteAt = (index) => themeColorPalette[index % themeColorPalette.length];
+                    // Layout in paper coordinates (0-1 across the plot area
+                    // inside the margins). Main pie on the left, secondary plot
+                    // on the right.
+                    const MAIN_DOMAIN_X = [0, 0.55];
+                    const CY = 0.5;
+                    const SECONDARY_CX = 0.78;
+                    const BAR_LEFT = 0.68;
+                    const BAR_RIGHT = 0.88;
+                    traces.push({
+                        type: "pie",
+                        values: main.map((s) => s.value),
+                        labels: main.map((s) => s.label),
+                        name: dataLabel,
+                        domain: { x: MAIN_DOMAIN_X, y: [0, 1] },
+                        sort: false,
+                        direction: "clockwise",
+                        // Rotate so the "Other" slice's angular midpoint faces the
+                        // secondary plot (Excel's layout). Other is the last slice
+                        // of a clockwise sweep starting at `rotation`° from 12
+                        // o'clock, so its midpoint lands at 3 o'clock when the
+                        // sweep starts 90° + halfAngle past the top.
+                        rotation: (90 + (halfAngle * 180) / Math.PI) % 360,
+                        marker: { colors: main.map((_, i) => paletteAt(i)) },
+                    });
+                    if (secondary.length > 0) {
+                        // Paper coords are relative while the pie is circular in
+                        // pixels — convert the main pie's pixel radius into
+                        // separate x/y paper fractions to compensate for the
+                        // aspect ratio. Falls back to fixed fractions when the
+                        // container size isn't known yet.
+                        const plotW = typeof width === "number" ? Math.max(1, width - 102) : 0;
+                        const plotH = typeof height === "number" ? Math.max(1, height - 102) : 0;
+                        const hasGeometry = plotW > 1 && plotH > 1;
+                        const r = hasGeometry
+                            ? Math.min((MAIN_DOMAIN_X[1] - MAIN_DOMAIN_X[0]) * plotW, plotH) / 2
+                            : 0;
+                        const r2 = r * secondScale;
+                        const clampFrac = (v, min, max) => Math.min(max, Math.max(min, v));
+                        const rx2 = clampFrac(hasGeometry ? r2 / plotW : 0.14 * secondScale, 0.03, 0.19);
+                        const ry2 = clampFrac(hasGeometry ? r2 / plotH : 0.28 * secondScale, 0.05, 0.45);
+                        const barHalf = ry2;
+                        if (ofPieType === "pie") {
+                            traces.push({
+                                type: "pie",
+                                values: secondary.map((s) => s.value),
+                                labels: secondary.map((s) => s.label),
+                                name: dataLabel,
+                                domain: {
+                                    x: [SECONDARY_CX - rx2, SECONDARY_CX + rx2],
+                                    y: [CY - ry2, CY + ry2],
+                                },
+                                sort: false,
+                                direction: "clockwise",
+                                marker: {
+                                    colors: secondary.map((_, i) => paletteAt(main.length + i)),
+                                },
+                            });
+                        }
+                        else {
+                            // Bar-of-pie — a single-category stacked bar on hidden
+                            // secondary axes; one trace per point so each segment
+                            // keeps its own color and legend entry.
+                            secondary.forEach((s, i) => {
+                                traces.push({
+                                    type: "bar",
+                                    x: [""],
+                                    y: [s.value],
+                                    name: s.label,
+                                    xaxis: "x2",
+                                    yaxis: "y2",
+                                    marker: { color: paletteAt(main.length + i) },
+                                });
+                            });
+                        }
+                        // Connector lines from the Other slice's edges to the top
+                        // and bottom of the secondary plot. Skipped (gracefully)
+                        // when the container size isn't known — pure paper-coord
+                        // geometry can't compensate for the pixel aspect ratio.
+                        const shapes = [];
+                        if (hasGeometry) {
+                            const connectorColor = isDarkMode
+                                ? "rgba(255,255,255,0.45)"
+                                : "#999999";
+                            const mainCx = (MAIN_DOMAIN_X[0] + MAIN_DOMAIN_X[1]) / 2;
+                            const px = mainCx + (r * Math.cos(halfAngle)) / plotW;
+                            const pyTop = CY + (r * Math.sin(halfAngle)) / plotH;
+                            const pyBottom = CY - (r * Math.sin(halfAngle)) / plotH;
+                            const tx = ofPieType === "pie" ? SECONDARY_CX : BAR_LEFT;
+                            const half = ofPieType === "pie" ? ry2 : barHalf;
+                            const line = {
+                                type: "line",
+                                xref: "paper",
+                                yref: "paper",
+                                layer: "below",
+                                line: { color: connectorColor, width: 1 },
+                            };
+                            shapes.push({ ...line, x0: px, y0: pyTop, x1: tx, y1: CY + half }, { ...line, x0: px, y0: pyBottom, x1: tx, y1: CY - half });
+                        }
+                        ofPieExtras = {
+                            shapes,
+                            ...(ofPieType === "bar"
+                                ? {
+                                    barmode: "stack",
+                                    xaxis2: {
+                                        domain: [BAR_LEFT, BAR_RIGHT],
+                                        anchor: "y2",
+                                        visible: false,
+                                        fixedrange: true,
+                                    },
+                                    yaxis2: {
+                                        domain: [CY - barHalf, CY + barHalf],
+                                        anchor: "x2",
+                                        visible: false,
+                                        fixedrange: true,
+                                    },
+                                }
+                                : {}),
+                        };
+                    }
+                }
+                else if (effectiveChartType === "pie") {
+                    const pieData = seriesData;
+                    const trace = {
+                        type: seriesPlotlyType,
+                        values: pieData.values,
+                        labels: pieData.labels,
+                        name: dataLabel,
+                        marker: {
+                            colors: [
+                                theme.themeColors.accent1,
+                                theme.themeColors.accent2,
+                                theme.themeColors.accent3,
+                                theme.themeColors.accent4,
+                                theme.themeColors.accent5,
+                                theme.themeColors.accent6,
+                            ],
+                        },
+                    };
+                    applyTraceColor(trace, series.color ?? undefined, {
+                        noFill: series.noFill,
+                        dataPointColors: series.dataPointColors,
+                        seriesIndex: currentSeriesIndex,
+                        effectiveChartType,
+                    });
+                    traces.push(trace);
+                }
+                else if ("values" in seriesData && "labels" in seriesData) {
+                    const { x, y, orientation } = assignCartesianData(domainData, seriesData.values);
+                    const trace = {
+                        type: seriesPlotlyType,
+                        x,
+                        y,
+                        orientation,
+                        name: dataLabel,
+                        stackgroup: isStacked ? "one" : undefined,
+                        ...seriesTraceStyle,
+                    };
+                    applyTraceColor(trace, series.color ?? undefined, {
+                        noFill: series.noFill,
+                        dataPointColors: series.dataPointColors,
+                        invertIfNegative: series.invertIfNegative,
+                        negativeColor: series.negativeColor,
+                        values: seriesData.values,
+                        seriesIndex: currentSeriesIndex,
+                        effectiveChartType,
+                        gradientColor: gradientToPlotly(series.gradient),
+                    });
+                    decorateCartesianTrace(trace, series, seriesData.values, dataLabel);
+                    traces.push(trace);
+                }
+                else {
+                    const numericValues = seriesData;
+                    const { x, y, orientation } = assignCartesianData(domainData, numericValues);
+                    const trace = {
+                        type: seriesPlotlyType,
+                        x,
+                        y,
+                        orientation,
+                        name: dataLabel,
+                        stackgroup: isStacked ? "one" : undefined,
+                        ...seriesTraceStyle,
+                    };
+                    applyTraceColor(trace, series.color ?? undefined, {
+                        noFill: series.noFill,
+                        dataPointColors: series.dataPointColors,
+                        invertIfNegative: series.invertIfNegative,
+                        negativeColor: series.negativeColor,
+                        values: numericValues,
+                        seriesIndex: currentSeriesIndex,
+                        effectiveChartType,
+                        gradientColor: gradientToPlotly(series.gradient),
+                    });
+                    decorateCartesianTrace(trace, series, numericValues, dataLabel);
+                    traces.push(trace);
+                }
+            }
+        }
+        // Authored title formatting (parsed from <c:title><c:txPr> or
+        // <c:title><c:tx><c:rich>) overrides the theme-derived default.
+        const authoredTitleFmt = spec.titleTextFormat;
+        const newLayout = {
+            title: {
+                text: title ?? undefined,
+                font: applyTextFormatToFont({
+                    family: "Untitled Sans, apple-system, sans-serif",
+                    size: 16,
+                    color: textColor,
+                }, authoredTitleFmt),
+                x: 0.02, // Small left margin (0.02 = 2% from left edge)
+                xanchor: "left",
+            },
+            font: {
+                family: "Untitled Sans, apple-system, sans-serif",
+                size: 12,
+                color: textColor,
+            },
+            paper_bgcolor: bgColor,
+            plot_bgcolor: bgColor,
+            xaxis: applyAxisOverridesPlotly({
+                title: {
+                    text: spec.horizontalAxisTitle ?? "",
+                    font: { color: textColor },
+                },
+                automargin: true,
+                showgrid: true,
+                gridcolor: gridColor,
+                visible: showXAxis(spec?.chartType),
+                type: isHorizontalBarChart ? "linear" : undefined,
+            }, 
+            // For horizontal bar, OOXML's value axis is the X axis.
+            isHorizontalBarChart
+                ? spec.valueAxisOptions
+                : spec.categoryAxisOptions),
+            yaxis: applyAxisOverridesPlotly({
+                title: {
+                    text: spec.verticalAxisTitle ?? "",
+                    font: { color: textColor },
+                },
+                showgrid: !isHorizontalBarChart,
+                gridcolor: gridColor,
+                automargin: true,
+                type: isHorizontalBarChart ? "category" : undefined,
+            }, isHorizontalBarChart
+                ? spec.categoryAxisOptions
+                : spec.valueAxisOptions),
+            // Secondary value axis — a second y-axis overlaying the first on
+            // the right. Series with `useSecondaryAxis` were pointed at "y2".
+            ...(hasSecondaryAxis
+                ? {
+                    yaxis2: applyAxisOverridesPlotly({
+                        title: { font: { color: textColor } },
+                        overlaying: "y",
+                        side: "right",
+                        showgrid: false,
+                        automargin: true,
+                        // Pareto — the cumulative-% axis is clamped 0-100%.
+                        ...(isPareto
+                            ? { range: [0, 100], ticksuffix: "%" }
+                            : {}),
+                    }, spec.secondaryValueAxisOptions),
+                }
+                : {}),
+            ...(() => {
+                const { legend: legendCfg, showlegend } = applyLegendOverridesPlotly({ font: { color: textColor } }, spec.legend);
+                return {
+                    showlegend: showlegend === undefined ? true : showlegend,
+                    legend: legendCfg,
+                };
+            })(),
+            margin: {
+                l: 50,
+                r: 50,
+                t: 50,
+                b: 50,
+            },
+            autosize: true,
+            // Bar/column stacking. Plotly's `barmode: "stack"` stacks bars
+            // at the same X (or Y for horizontal). `barnorm: "percent"`
+            // normalises each category's stack to 100% — Excel's
+            // `percentStacked` grouping. Default is grouped (clustered).
+            ...((spec.chartType === "bar" || spec.chartType === "column") && spec.stackedType
+                ? {
+                    barmode: spec.stackedType === "STACKED" ||
+                        spec.stackedType === "PERCENT_STACKED"
+                        ? "stack"
+                        : "group",
+                    ...(spec.stackedType === "PERCENT_STACKED"
+                        ? { barnorm: "percent" }
+                        : {}),
+                }
+                : {}),
+            // gapWidth — Excel stores 0..500 as a percentage of bar width.
+            // Plotly's `bargap` is a fraction of the slot (0..1). Approx:
+            // gapWidth=150 (default) → ~0.4 bargap.
+            ...(typeof spec.gapWidth === "number"
+                ? { bargap: Math.max(0, Math.min(0.95, spec.gapWidth / 400)) }
+                : {}),
+            // Of-pie composite — connector-line shapes plus (bar-of-pie) the
+            // hidden secondary axes and stacked bar mode.
+            ...(ofPieExtras
+                ? {
+                    shapes: ofPieExtras.shapes,
+                    ...(ofPieExtras.barmode ? { barmode: ofPieExtras.barmode } : {}),
+                    ...(ofPieExtras.xaxis2 ? { xaxis2: ofPieExtras.xaxis2 } : {}),
+                    ...(ofPieExtras.yaxis2 ? { yaxis2: ofPieExtras.yaxis2 } : {}),
+                }
+                : {}),
+        };
+        // Phase 5.1: apply data labels per trace, and set the doughnut hole
+        // when chartType === "doughnut".
+        const dlOpts = spec.dataLabels;
+        const doughnutHole = spec.doughnutHoleSize;
+        const formattedTraces = traces.map((trace) => {
+            let next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType);
+            // Doughnut is a pie trace with `hole` set.
+            if (spec.chartType === "doughnut" && next.type === "pie") {
+                next = {
+                    ...next,
+                    hole: typeof doughnutHole === "number" ? doughnutHole : 0.5,
+                };
+            }
+            return next;
+        });
+        // Sort traces so area charts (with fill) render first (behind other traces)
+        const sortedTraces = [...formattedTraces].sort((a, b) => {
+            const aHasFill = a.fill && a.fill !== "none";
+            const bHasFill = b.fill && b.fill !== "none";
+            if (aHasFill && !bHasFill)
+                return -1;
+            if (!aHasFill && bHasFill)
+                return 1;
+            return 0;
+        });
+        setPlotData(sortedTraces);
+        setLayout(newLayout);
+    };
+    // Subscribe to datarange
+    useSubscribeToSheet(chart.chartId, chart.spec.dataRange, updateChart);
+    // Update chart on spec changes
+    useIsomorphicLayoutEffect(() => {
+        updateChart();
+    }, [chart.spec, getDomainValuesFromRange, getSeriesValuesFromRange]);
+    // Update theme
+    useIsomorphicLayoutEffect(() => {
+        updateChart();
+    }, [theme, title, isDarkMode]);
+    // Resize chart on width/height changes
+    useIsomorphicLayoutEffect(() => {
+        setLayout((prev) => ({
+            ...prev,
+            width: width - 2,
+            height: height - 2,
+        }));
+        // Of-pie composites derive their connector-line shapes and
+        // secondary-plot domains from the container's pixel aspect ratio —
+        // rebuild them for the new size.
+        if (spec.chartType === "pie" && isOfPieChartSpec(spec)) {
+            updateChart();
+        }
+    }, [width, height]);
+    // Chrome bug - redraw chart when visibility changes
+    useOnVisibilityChange((state) => {
+        if (state === "visible") {
+            updateChart();
+        }
+    });
+    const config = {
+        responsive: true,
+        // Static so a body drag falls through to the EmbedDraggable move handler
+        // (Excel/Sheets behavior) instead of triggering Plotly's zoom-box.
+        // staticPlot also drops the modebar and the `.plot-container .draglayer`
+        // element the move's cancel selector keys off of.
+        displayModeBar: false,
+        displaylogo: false,
+        staticPlot: true,
+    };
+    // Excel's "Rounded Corners" chart frame (`<c:roundedCorners val="1"/>`
+    // at the chartSpace root). Default per OOXML §21.2.2.183 is square,
+    // so only opt in when the workbook explicitly set the flag.
+    const roundedCornersStyle = spec.roundedCorners
+        ? { borderRadius: 8, overflow: "hidden" }
+        : undefined;
+    return (React.createElement("div", { className: "flex flex-1", style: roundedCornersStyle },
+        isSelected ? (React.createElement(DropdownMenu, null,
+            React.createElement(DropdownMenuTrigger, { asChild: true },
+                React.createElement(IconButton, { className: "absolute right-1 top-1 z-10" },
+                    React.createElement(DotsVerticalIcon, null))),
+            React.createElement(DropdownMenuPortal, null,
+                React.createElement(DropdownMenuContent, { align: "start", onCloseAutoFocus: (event) => {
+                        event.preventDefault();
+                        if (shouldFocusSheetRef.current) {
+                            focusSheet?.();
+                        }
+                    }, onInteractOutside: () => {
+                        shouldFocusSheetRef.current = false;
+                    } },
+                    readonly ? null : (React.createElement(DropdownMenuItem, { onClick: () => onRequestEdit?.(chart) }, "Edit chart")),
+                    readonly ? null : (React.createElement(DropdownMenuItem, { onClick: () => {
+                            shouldFocusSheetRef.current = true;
+                            onDeleteChart?.(chart.chartId);
+                        } }, "Delete chart")))))) : null,
+        React.createElement("div", { className: "flex-1 rnc-plotly-chart-container" },
+            React.createElement(Plot, { ref: plotRef, data: plotData, layout: layout, config: config, style: { width: "100%", height: "100%" } }))));
+};