@rowsncolumns/charts 27.0.30

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

@@ -0,0 +1,1586 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicChart = void 0;
+var tslib_1 = require("tslib");
+var icons_1 = require("@rowsncolumns/icons");
+var spreadsheet_1 = require("@rowsncolumns/spreadsheet");
+var spreadsheet_state_1 = require("@rowsncolumns/spreadsheet-state");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var react_1 = tslib_1.__importStar(require("react"));
+var react_plotly_js_1 = tslib_1.__importDefault(require("react-plotly.js"));
+var aggregation_1 = require("../../utils/aggregation");
+var boxplot_1 = require("../../utils/boxplot");
+var bubble_1 = require("../../utils/bubble");
+var chart_spec_utils_1 = require("../../utils/chart-spec-utils");
+var error_bars_1 = require("../../utils/error-bars");
+var gradient_1 = require("../../utils/gradient");
+var hierarchy_1 = require("../../utils/hierarchy");
+var histogram_1 = require("../../utils/histogram");
+var of_pie_1 = require("../../utils/of-pie");
+var radar_1 = require("../../utils/radar");
+var region_map_1 = require("../../utils/region-map");
+var stock_1 = require("../../utils/stock");
+var trendline_1 = require("../../utils/trendline");
+var helpers_1 = require("./helpers");
+var 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".
+var 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. */
+var applyTextFormatToFont = function (font, fmt) {
+    if (!fmt)
+        return font;
+    var next = tslib_1.__assign({}, (font !== null && font !== void 0 ? 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;
+};
+var applyLegendOverridesPlotly = function (legend, opts) {
+    if (!opts)
+        return { legend: legend, showlegend: undefined };
+    if (opts.position === "none") {
+        return { legend: legend, showlegend: false };
+    }
+    var next = tslib_1.__assign({}, (legend !== null && legend !== void 0 ? 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 };
+};
+var applyAxisOverridesPlotly = function (axis, opts) {
+    var _a, _b, _c, _d;
+    if (!opts)
+        return axis;
+    var next = tslib_1.__assign({}, (axis !== null && axis !== void 0 ? axis : {}));
+    if (opts.logarithmic)
+        next.type = "log";
+    if (opts.reverse)
+        next.autorange = "reversed";
+    if (typeof opts.min === "number" || typeof opts.max === "number") {
+        next.range = [(_a = opts.min) !== null && _a !== void 0 ? _a : null, (_b = opts.max) !== null && _b !== void 0 ? _b : 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 = tslib_1.__assign(tslib_1.__assign({}, ((_c = next.title) !== null && _c !== void 0 ? _c : {})), { font: applyTextFormatToFont((_d = next.title) === null || _d === void 0 ? void 0 : _d.font, opts.textFormat) });
+    }
+    return next;
+};
+var PLOTLY_DLBL_POS_PIE = {
+    center: "inside",
+    inside: "inside",
+    outside: "outside",
+    insideEnd: "inside",
+    outsideEnd: "outside",
+    bestFit: "outside",
+};
+var PLOTLY_DLBL_POS_BAR = {
+    center: "inside",
+    inside: "inside",
+    outside: "outside",
+    insideEnd: "inside",
+    outsideEnd: "outside",
+    bestFit: "outside",
+};
+var applyDataLabelsToTracePlotly = function (trace, opts, chartType) {
+    var _a;
+    if (!(opts === null || opts === void 0 ? void 0 : opts.show))
+        return trace;
+    var next = tslib_1.__assign({}, trace);
+    var isCircular = chartType === "pie" || chartType === "doughnut";
+    var posMap = isCircular ? PLOTLY_DLBL_POS_PIE : PLOTLY_DLBL_POS_BAR;
+    var position = opts.position ? (_a = posMap[opts.position]) !== null && _a !== void 0 ? _a : "inside" : "inside";
+    if (isCircular) {
+        // Plotly's pie trace uses `textinfo` to control which fields render.
+        var 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.
+        var pattern_1 = opts.numberFormatPattern;
+        var yVals = Array.isArray(next.y) ? next.y : [];
+        next.text = pattern_1
+            ? yVals.map(function (v) { return (v === null || v === undefined ? "" : (0, utils_1.ssfFormat)(pattern_1, v)); })
+            : next.y;
+        next.textposition = position;
+    }
+    return next;
+};
+var BUBBLE_CHART_TYPES = new Set([
+    "bubble",
+    "scatter",
+]);
+var HIERARCHY_CHART_TYPES = new Set([
+    "treemap",
+    "sunburst",
+]);
+var isBasicChartSpec = function (spec) {
+    return BASIC_CHART_TYPES.has(spec.chartType);
+};
+var isBubbleChartSpec = function (spec) {
+    return BUBBLE_CHART_TYPES.has(spec.chartType);
+};
+var isHierarchyChartSpec = function (spec) {
+    return HIERARCHY_CHART_TYPES.has(spec.chartType);
+};
+var flattenChartDataValues = function (chartData, extractor, hiddenStrategy, skipFirstRow) {
+    if (skipFirstRow === void 0) { skipFirstRow = false; }
+    if (!chartData || chartData.length === 0)
+        return [];
+    var values = [];
+    chartData.forEach(function (entry) {
+        // Inline values (`<c:strLit>` / `<c:numLit>`) take precedence over
+        // cell-range sources — only one is populated by spec.
+        var inline = entry
+            .inlineValues;
+        if (inline && inline.length) {
+            var trimmed = skipFirstRow ? inline.slice(1) : inline;
+            values.push.apply(values, tslib_1.__spreadArray([], tslib_1.__read(trimmed), false));
+            return;
+        }
+        entry.sources.forEach(function (source) {
+            var _a;
+            var extracted = (_a = extractor(source, hiddenStrategy)) !== null && _a !== void 0 ? _a : [];
+            var trimmed = skipFirstRow && extracted.length > 0 ? extracted.slice(1) : extracted;
+            values.push.apply(values, tslib_1.__spreadArray([], tslib_1.__read(trimmed), false));
+        });
+    });
+    return values;
+};
+// Excel error values that should be treated as null in charts
+var 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
+ */
+var isErrorValue = function (value) {
+    if (typeof value !== "string")
+        return false;
+    return EXCEL_ERROR_VALUES.has(value.toUpperCase());
+};
+/**
+ * Sanitize a value for chart display - convert errors to undefined
+ */
+var sanitizeChartValue = function (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") {
+        var num = parseFloat(value);
+        return isNaN(num) ? undefined : num;
+    }
+    return undefined;
+};
+/**
+ * Add alpha transparency to a color (hex or rgb)
+ */
+var addAlphaToColor = function (color, alpha) {
+    if (!color)
+        return "rgba(0, 0, 0, ".concat(alpha, ")");
+    // Handle hex colors
+    if (color.startsWith("#")) {
+        var hex = color.slice(1);
+        var r = parseInt(hex.slice(0, 2), 16);
+        var g = parseInt(hex.slice(2, 4), 16);
+        var b = parseInt(hex.slice(4, 6), 16);
+        return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(alpha, ")");
+    }
+    // Handle rgb/rgba colors
+    if (color.startsWith("rgb")) {
+        var match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
+        if (match) {
+            return "rgba(".concat(match[1], ", ").concat(match[2], ", ").concat(match[3], ", ").concat(alpha, ")");
+        }
+    }
+    return color;
+};
+var BasicChart = function (_a) {
+    var _b;
+    var width = _a.width, height = _a.height, chart = _a.chart, theme = _a.theme, isDarkMode = _a.isDarkMode, sheetId = _a.sheetId, readonly = _a.readonly, getDomainValuesFromRange = _a.getDomainValuesFromRange, getSeriesValuesFromRange = _a.getSeriesValuesFromRange, onDeleteChart = _a.onDeleteChart, onRequestEdit = _a.onRequestEdit, onRequestCalculate = _a.onRequestCalculate, isSelected = _a.isSelected;
+    var spec = chart.spec;
+    var hierarchyTitleRef = (0, react_1.useRef)(undefined);
+    var explicitChartTitle = (_b = chart.spec.title) !== null && _b !== void 0 ? _b : undefined;
+    var title = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : hierarchyTitleRef.current;
+    var plotRef = (0, react_1.useRef)(null);
+    var focusSheet = (0, spreadsheet_1.useFocusSheet)();
+    var shouldFocusSheetRef = (0, react_1.useRef)(false);
+    var _c = tslib_1.__read((0, react_1.useState)([]), 2), plotData = _c[0], setPlotData = _c[1];
+    var _d = tslib_1.__read((0, react_1.useState)({}), 2), layout = _d[0], setLayout = _d[1];
+    var getSeriesData = (0, react_1.useCallback)(function (spec, sheetRange, options) {
+        var _a;
+        var rawSeriesValues = getSeriesValuesFromRange(sheetRange, spec.hiddenDimensionStrategy);
+        // Sanitize values - convert error strings like #N/A to null
+        var sanitizedValues = rawSeriesValues.map(sanitizeChartValue);
+        var aggregateEnabled = options.aggregateEnabled, aggregateType = options.aggregateType, rawDomainValues = options.rawDomainValues, orderedDomainValues = options.orderedDomainValues;
+        var canAggregate = aggregateEnabled &&
+            !!aggregateType &&
+            rawDomainValues.length > 0 &&
+            orderedDomainValues.length > 0 &&
+            rawDomainValues.length === sanitizedValues.length;
+        if (canAggregate) {
+            var aggregatedValues = (0, aggregation_1.aggregateSeriesByDomain)(rawDomainValues, sanitizedValues, aggregateType, orderedDomainValues).map(function (value) { return value !== null && value !== void 0 ? 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
+        var seriesValues = sanitizedValues;
+        if ((spec.chartType === "pie" || spec.chartType === "doughnut")) {
+            var domainSheetRange = (_a = spec.domains[0]) === null || _a === void 0 ? void 0 : _a.sources[0];
+            if (!domainSheetRange) {
+                return { values: [], labels: [] };
+            }
+            var domainValues = getDomainValuesFromRange(domainSheetRange, spec.hiddenDimensionStrategy);
+            return {
+                values: seriesValues,
+                labels: domainValues,
+            };
+        }
+        return seriesValues;
+    }, [getSeriesValuesFromRange, getDomainValuesFromRange]);
+    /**
+     * Triggers a chart update
+     */
+    var updateChart = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var traces, chartType, position, isBubble, isHierarchy, textColor, bgColor, gridColor, skipHeaders_1, labels, perSeriesX, perSeriesSize, seriesInputs, i, seriesEntry, resolvedLabel, _a, xValues, sizeValues_1, sharedXValues, sharedSizeValues, _b, categories_1, preparedSeries, sizeValues, sizeScale_1, hasStringX_1, palette_1, isScatter_1, scatterStyle_1, plotlyModeForScatterStyle_1, lineShapeFor_1, traces_1, titleFmt, xAxisFmt, yAxisFmt, legendFmt, bubbleLayout, hierarchyRows, headerTitle, hierarchyData, seriesName, hierarchyTrace, layoutForHierarchy, labels, seriesEntry, rawValues_1, locations_1, z_1, ramp_1, colorscale, geoScope, regionTrace, categories, radarStyle, radarTraces, radarInputs, _c, _d, seriesEntry, label, values, indicators, _loop_1, i, maxR, variant, categories, seriesValues, volumePoints_1, hasVolume, buildVolumeTrace, volumeLayout, priceYAxisDomain, roles, xs_1, candleTrace, lineSeries, stockPalette_1, xs_2, stockTraces, isStacked, isHorizontalBarChart, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, domainData, assignCartesianData, themeColorPalette, applyTraceColor, hasSecondaryAxis, isPareto, isOfPie, ofPieHandled, ofPieExtras, decorateCartesianTrace, seriesIndex, _e, _f, series, currentSeriesIndex, dataLabel, _g, _h, _loop_2, _j, _k, sheetRange, e_1_1, authoredTitleFmt, newLayout, dlOpts, doughnutHole, formattedTraces, sortedTraces;
+        var e_2, _l, e_1, _m, e_3, _o;
+        var _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52;
+        return tslib_1.__generator(this, function (_53) {
+            switch (_53.label) {
+                case 0:
+                    (0, utils_1.debug)("Updating chart", chart);
+                    traces = [];
+                    chartType = (0, helpers_1.chartTypeToPlotlyType)(spec === null || spec === void 0 ? void 0 : spec.chartType);
+                    position = chart.position;
+                    isBubble = isBubbleChartSpec(spec);
+                    isHierarchy = isHierarchyChartSpec(spec);
+                    textColor = (0, spreadsheet_1.getStringifiedColor)({
+                        theme: 1,
+                        tint: isDarkMode ? 1 : 0,
+                    }, theme);
+                    bgColor = (0, spreadsheet_1.getStringifiedColor)({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
+                    gridColor = isDarkMode ? "rgba(255,255,255,0.3)" : "#CCCCCC";
+                    if (!isBubble) return [3 /*break*/, 6];
+                    skipHeaders_1 = spec.useFirstRowAsHeaders !== false;
+                    labels = flattenChartDataValues(spec.bubbleLabels, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1).map(bubble_1.toLabelString);
+                    perSeriesX = ((_p = spec.domains) !== null && _p !== void 0 ? _p : []).map(function (dom) {
+                        return flattenChartDataValues([dom], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
+                    });
+                    perSeriesSize = ((_q = spec.bubbleSizes) !== null && _q !== void 0 ? _q : []).map(function (sz) {
+                        return flattenChartDataValues([sz], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
+                    });
+                    seriesInputs = [];
+                    i = 0;
+                    _53.label = 1;
+                case 1:
+                    if (!(i < spec.series.length)) return [3 /*break*/, 5];
+                    seriesEntry = spec.series[i];
+                    resolvedLabel = (_r = seriesEntry.dataLabel) !== null && _r !== void 0 ? _r : "";
+                    if (!(resolvedLabel && (0, utils_1.isAFormula)(resolvedLabel))) return [3 /*break*/, 3];
+                    _a = chart_spec_utils_1.coerceCalculatedLabel;
+                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_s = chart.position.sheetId) !== null && _s !== void 0 ? _s : sheetId, chart.position.overlayPosition.anchorCell.rowIndex, chart.position.overlayPosition.anchorCell.columnIndex)];
+                case 2:
+                    resolvedLabel = _a.apply(void 0, [_53.sent()]);
+                    _53.label = 3;
+                case 3:
+                    xValues = (_t = perSeriesX[i]) !== null && _t !== void 0 ? _t : perSeriesX[0];
+                    sizeValues_1 = (_u = perSeriesSize[i]) !== null && _u !== void 0 ? _u : perSeriesSize[0];
+                    seriesInputs.push(tslib_1.__assign(tslib_1.__assign({ name: resolvedLabel, values: flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1) }, (xValues ? { xValues: xValues } : {})), (sizeValues_1 ? { sizeValues: sizeValues_1 } : {})));
+                    _53.label = 4;
+                case 4:
+                    i++;
+                    return [3 /*break*/, 1];
+                case 5:
+                    sharedXValues = (_v = perSeriesX[0]) !== null && _v !== void 0 ? _v : [];
+                    sharedSizeValues = (_w = perSeriesSize[0]) !== null && _w !== void 0 ? _w : [];
+                    _b = (0, bubble_1.prepareBubbleSeriesData)({
+                        xValues: sharedXValues,
+                        labelValues: labels,
+                        sizeValues: sharedSizeValues,
+                        series: seriesInputs,
+                    }), categories_1 = _b.categories, preparedSeries = _b.series, sizeValues = _b.sizeValues;
+                    sizeScale_1 = (0, bubble_1.createBubbleSizeScale)(sizeValues);
+                    hasStringX_1 = categories_1.length > 0;
+                    palette_1 = [
+                        theme.themeColors.accent1,
+                        theme.themeColors.accent2,
+                        theme.themeColors.accent3,
+                        theme.themeColors.accent4,
+                        theme.themeColors.accent5,
+                        theme.themeColors.accent6,
+                    ];
+                    isScatter_1 = spec.chartType === "scatter";
+                    scatterStyle_1 = (_x = spec.scatterStyle) !== null && _x !== void 0 ? _x : (isScatter_1 ? "lineMarker" : undefined);
+                    plotlyModeForScatterStyle_1 = function (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";
+                        }
+                    };
+                    lineShapeFor_1 = function (style) {
+                        return style === "smooth" || style === "smoothMarker"
+                            ? "spline"
+                            : "linear";
+                    };
+                    traces_1 = preparedSeries.map(function (entry, index) {
+                        var _a, _b, _c, _d, _e, _f;
+                        var xValues = entry.points.map(function (point) {
+                            var _a, _b;
+                            return hasStringX_1
+                                ? (_b = (_a = point.xLabel) !== null && _a !== void 0 ? _a : categories_1[Math.round(point.value[0])]) !== null && _b !== void 0 ? _b : point.value[0]
+                                : point.value[0];
+                        });
+                        var yValues = entry.points.map(function (point) { return point.value[1]; });
+                        var labelValuesForSeries = entry.points.map(function (point) { return point.name; });
+                        var seriesColor = (_b = (_a = spec.series[index]) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : palette_1[index % palette_1.length];
+                        var perSeriesMarker = (_d = (_c = spec.series[index]) === null || _c === void 0 ? void 0 : _c.marker) !== null && _d !== void 0 ? _d : undefined;
+                        if (isScatter_1) {
+                            // 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.
+                            var symbol = perSeriesMarker === null || perSeriesMarker === void 0 ? void 0 : perSeriesMarker.symbol;
+                            var noMarkers = symbol === "none";
+                            var mode = noMarkers
+                                ? "lines"
+                                : plotlyModeForScatterStyle_1(scatterStyle_1);
+                            var markerSize = (_e = perSeriesMarker === null || perSeriesMarker === void 0 ? void 0 : perSeriesMarker.size) !== null && _e !== void 0 ? _e : 6;
+                            var markerColor = (_f = perSeriesMarker === null || perSeriesMarker === void 0 ? void 0 : perSeriesMarker.color) !== null && _f !== void 0 ? _f : seriesColor;
+                            return tslib_1.__assign({ type: "scatter", mode: mode, x: xValues, y: yValues, text: labelValuesForSeries, name: entry.name, hovertemplate: "%{text}<br>X: %{x}<br>Y: %{y}<extra></extra>", line: {
+                                    shape: lineShapeFor_1(scatterStyle_1),
+                                    color: seriesColor,
+                                    width: 2,
+                                } }, (noMarkers
+                                ? {}
+                                : {
+                                    marker: {
+                                        size: markerSize,
+                                        color: markerColor,
+                                        symbol: (0, helpers_1.mapMarkerSymbolToPlotly)(symbol),
+                                    },
+                                }));
+                        }
+                        // Bubble — third dimension scaled into marker diameter.
+                        var rawSizes = entry.points.map(function (point) { return point.value[2]; });
+                        var scaledSizes = rawSizes.map(function (value) { return sizeScale_1(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,
+                            },
+                        };
+                    });
+                    titleFmt = spec.titleTextFormat;
+                    xAxisFmt = (_y = spec.categoryAxisOptions) === null || _y === void 0 ? void 0 : _y.textFormat;
+                    yAxisFmt = (_z = spec.valueAxisOptions) === null || _z === void 0 ? void 0 : _z.textFormat;
+                    legendFmt = (_0 = spec.legend) === null || _0 === void 0 ? void 0 : _0.textFormat;
+                    bubbleLayout = {
+                        title: {
+                            text: title !== null && title !== void 0 ? title : undefined,
+                            font: {
+                                family: (_1 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontFamily) !== null && _1 !== void 0 ? _1 : "Untitled Sans, apple-system, sans-serif",
+                                size: (_2 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.fontSize) !== null && _2 !== void 0 ? _2 : 16,
+                                color: (_3 = titleFmt === null || titleFmt === void 0 ? void 0 : titleFmt.color) !== null && _3 !== void 0 ? _3 : textColor,
+                            },
+                            x: 0.02,
+                            xanchor: "left",
+                        },
+                        xaxis: {
+                            title: {
+                                text: (_4 = spec.horizontalAxisTitle) !== null && _4 !== void 0 ? _4 : "",
+                                font: { color: (_5 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _5 !== void 0 ? _5 : textColor },
+                            },
+                            gridcolor: gridColor,
+                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_6 = xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.color) !== null && _6 !== void 0 ? _6 : textColor }, ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontFamily) ? { family: xAxisFmt.fontFamily } : {})), ((xAxisFmt === null || xAxisFmt === void 0 ? void 0 : xAxisFmt.fontSize) ? { size: xAxisFmt.fontSize } : {})),
+                            type: hasStringX_1 ? "category" : "linear",
+                        },
+                        yaxis: {
+                            title: {
+                                text: (_7 = spec.verticalAxisTitle) !== null && _7 !== void 0 ? _7 : "",
+                                font: { color: (_8 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _8 !== void 0 ? _8 : textColor },
+                            },
+                            gridcolor: gridColor,
+                            tickfont: tslib_1.__assign(tslib_1.__assign({ color: (_9 = yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.color) !== null && _9 !== void 0 ? _9 : textColor }, ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontFamily) ? { family: yAxisFmt.fontFamily } : {})), ((yAxisFmt === null || yAxisFmt === void 0 ? void 0 : yAxisFmt.fontSize) ? { size: yAxisFmt.fontSize } : {})),
+                        },
+                        legend: {
+                            font: tslib_1.__assign(tslib_1.__assign({ color: (_10 = legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.color) !== null && _10 !== void 0 ? _10 : textColor }, ((legendFmt === null || legendFmt === void 0 ? void 0 : legendFmt.fontFamily) ? { family: legendFmt.fontFamily } : {})), ((legendFmt === null || legendFmt === void 0 ? void 0 : 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_1);
+                    setLayout(bubbleLayout);
+                    return [2 /*return*/];
+                case 6:
+                    if (isHierarchy) {
+                        hierarchyRows = (0, hierarchy_1.extractHierarchyRows)(spec, {
+                            getDomainValuesFromRange: getDomainValuesFromRange,
+                            getSeriesValuesFromRange: getSeriesValuesFromRange,
+                            hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+                        });
+                        headerTitle = (0, hierarchy_1.getHierarchyHeaderTitle)(spec, {
+                            getDomainValuesFromRange: getDomainValuesFromRange,
+                            getSeriesValuesFromRange: getSeriesValuesFromRange,
+                            hiddenDimensionStrategy: spec.hiddenDimensionStrategy,
+                        });
+                        hierarchyTitleRef.current = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle;
+                        hierarchyData = (0, hierarchy_1.toPlotlyHierarchy)(hierarchyRows);
+                        seriesName = hierarchyData.labels.length === 1
+                            ? (_11 = hierarchyData.labels[0]) !== null && _11 !== void 0 ? _11 : ""
+                            : (_12 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _12 !== void 0 ? _12 : "";
+                        hierarchyTrace = {
+                            type: chartType,
+                            labels: hierarchyData.labels,
+                            parents: hierarchyData.parents,
+                            values: hierarchyData.values,
+                            name: seriesName,
+                            textinfo: "label+value",
+                            branchvalues: "total",
+                        };
+                        layoutForHierarchy = {
+                            title: {
+                                text: title !== null && title !== void 0 ? 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 [2 /*return*/];
+                    }
+                    hierarchyTitleRef.current = explicitChartTitle;
+                    if (!isBasicChartSpec(spec)) {
+                        (0, utils_1.debug)("Unsupported chart type", spec.chartType);
+                        return [2 /*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 ((0, region_map_1.isRegionMapSpec)(spec)) {
+                        labels = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : "").trim(); });
+                        seriesEntry = (_13 = spec.series) === null || _13 === void 0 ? void 0 : _13[0];
+                        rawValues_1 = seriesEntry
+                            ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
+                            : [];
+                        locations_1 = [];
+                        z_1 = [];
+                        labels.forEach(function (label, i) {
+                            var value = rawValues_1[i];
+                            if (label && typeof value === "number" && Number.isFinite(value)) {
+                                locations_1.push(label);
+                                z_1.push(value);
+                            }
+                        });
+                        ramp_1 = (0, region_map_1.buildSequentialColorRamp)(theme.themeColors.accent1, !!isDarkMode);
+                        colorscale = ramp_1.map(function (color, i) { return [i / (ramp_1.length - 1), color]; });
+                        geoScope = (0, region_map_1.resolveGeoScope)(spec.geoScope);
+                        regionTrace = {
+                            type: "choropleth",
+                            locations: locations_1,
+                            z: z_1,
+                            locationmode: "country names",
+                            colorscale: 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 !== null && title !== void 0 ? title : undefined },
+                            font: { color: textColor },
+                            paper_bgcolor: bgColor,
+                            plot_bgcolor: bgColor,
+                            showlegend: false,
+                            geo: {
+                                scope: (PLOTLY_GEO_SCOPES.has(geoScope)
+                                    ? geoScope
+                                    : region_map_1.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 [2 /*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") {
+                        categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
+                        radarStyle = (_14 = spec.radarStyle) !== null && _14 !== void 0 ? _14 : "standard";
+                        radarTraces = [];
+                        radarInputs = [];
+                        try {
+                            for (_c = tslib_1.__values((_15 = spec.series) !== null && _15 !== void 0 ? _15 : []), _d = _c.next(); !_d.done; _d = _c.next()) {
+                                seriesEntry = _d.value;
+                                label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
+                                    ? seriesEntry.dataLabel
+                                    : "";
+                                values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
+                                radarInputs.push({ name: label, values: values });
+                            }
+                        }
+                        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+                        finally {
+                            try {
+                                if (_d && !_d.done && (_l = _c.return)) _l.call(_c);
+                            }
+                            finally { if (e_2) throw e_2.error; }
+                        }
+                        indicators = (0, radar_1.buildRadarIndicators)(categories, radarInputs);
+                        _loop_1 = function (i) {
+                            var input = radarInputs[i];
+                            var seriesColor = (_18 = (_17 = (_16 = spec.series) === null || _16 === void 0 ? void 0 : _16[i]) === null || _17 === void 0 ? void 0 : _17.color) !== null && _18 !== void 0 ? _18 : undefined;
+                            var r = indicators.map(function (_, idx) { var _a; return (_a = input.values[idx]) !== null && _a !== void 0 ? _a : 0; });
+                            var theta = indicators.map(function (ind) { return ind.name; });
+                            radarTraces.push(tslib_1.__assign(tslib_1.__assign({ type: "scatterpolar", r: r.length ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(r), false), [r[0]], false) : r, theta: theta.length ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(theta), false), [theta[0]], false) : theta, name: input.name, mode: radarStyle === "standard" ? "lines" : "lines+markers" }, (radarStyle === "filled" ? { fill: "toself" } : {})), (seriesColor ? { line: { color: seriesColor } } : {})));
+                        };
+                        for (i = 0; i < radarInputs.length; i++) {
+                            _loop_1(i);
+                        }
+                        maxR = indicators.reduce(function (m, ind) { return Math.max(m, ind.max); }, 0);
+                        setPlotData(radarTraces);
+                        setLayout({
+                            title: { text: title !== null && title !== void 0 ? 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 [2 /*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") {
+                        variant = ((_19 = spec.stockVariant) !== null && _19 !== void 0 ? _19 : "HLC");
+                        categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
+                        seriesValues = ((_20 = spec.series) !== null && _20 !== void 0 ? _20 : []).map(function (seriesEntry) {
+                            return flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
+                        });
+                        volumePoints_1 = (0, stock_1.toVolumeSeries)(seriesValues, variant);
+                        hasVolume = ((_21 = volumePoints_1 === null || volumePoints_1 === void 0 ? void 0 : volumePoints_1.length) !== null && _21 !== void 0 ? _21 : 0) > 0;
+                        buildVolumeTrace = function (xs) {
+                            return ({
+                                type: "bar",
+                                x: xs,
+                                y: (volumePoints_1 !== null && volumePoints_1 !== void 0 ? volumePoints_1 : []).map(function (p) { return p.value; }),
+                                name: "Volume",
+                                yaxis: "y2",
+                                showlegend: false,
+                                marker: {
+                                    color: (volumePoints_1 !== null && volumePoints_1 !== void 0 ? volumePoints_1 : []).map(function (p) {
+                                        return p.up ? theme.themeColors.accent1 : theme.themeColors.accent2;
+                                    }),
+                                },
+                            });
+                        };
+                        volumeLayout = hasVolume
+                            ? {
+                                yaxis2: {
+                                    domain: [0, 0.22],
+                                    automargin: true,
+                                    showgrid: false,
+                                    showticklabels: false,
+                                },
+                            }
+                            : {};
+                        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") {
+                            roles = (0, stock_1.assignStockRoles)(seriesValues, variant);
+                            xs_1 = categories.length > 0
+                                ? categories
+                                : ((_22 = roles.close) !== null && _22 !== void 0 ? _22 : []).map(function (_, i) { return i + 1; });
+                            candleTrace = {
+                                type: "candlestick",
+                                x: xs_1,
+                                open: ((_23 = roles.open) !== null && _23 !== void 0 ? _23 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                high: ((_24 = roles.high) !== null && _24 !== void 0 ? _24 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                low: ((_25 = roles.low) !== null && _25 !== void 0 ? _25 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                close: ((_26 = roles.close) !== null && _26 !== void 0 ? _26 : []).map(function (v) { return v !== null && v !== void 0 ? v : null; }),
+                                increasing: { line: { color: theme.themeColors.accent1 } },
+                                decreasing: { line: { color: theme.themeColors.accent2 } },
+                            };
+                            setPlotData(hasVolume ? [candleTrace, buildVolumeTrace(xs_1)] : [candleTrace]);
+                            setLayout(tslib_1.__assign(tslib_1.__assign({ title: { text: title !== null && title !== void 0 ? title : undefined }, font: { color: textColor }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: false, xaxis: {
+                                    title: { text: (_27 = spec.horizontalAxisTitle) !== null && _27 !== void 0 ? _27 : "" },
+                                    automargin: true,
+                                    showgrid: true,
+                                    gridcolor: gridColor,
+                                    rangeslider: { visible: false },
+                                }, yaxis: tslib_1.__assign({ title: { text: (_28 = spec.verticalAxisTitle) !== null && _28 !== void 0 ? _28 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
+                            return [2 /*return*/];
+                        }
+                        lineSeries = (0, stock_1.toLineSeries)(seriesValues, variant);
+                        stockPalette_1 = [
+                            theme.themeColors.accent1,
+                            theme.themeColors.accent2,
+                            theme.themeColors.accent3,
+                            theme.themeColors.accent4,
+                        ];
+                        xs_2 = categories.length > 0
+                            ? categories
+                            : ((_30 = (_29 = lineSeries[0]) === null || _29 === void 0 ? void 0 : _29.values) !== null && _30 !== void 0 ? _30 : []).map(function (_, i) { return i + 1; });
+                        stockTraces = lineSeries.map(function (s, i) { return ({
+                            type: "scatter",
+                            mode: "lines",
+                            x: xs_2,
+                            y: s.values.map(function (v) { return (v !== null && v !== void 0 ? v : null); }),
+                            name: s.name,
+                            line: { color: stockPalette_1[i % stockPalette_1.length] },
+                        }); });
+                        setPlotData(hasVolume ? tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(stockTraces), false), [buildVolumeTrace(xs_2)], false) : stockTraces);
+                        setLayout(tslib_1.__assign(tslib_1.__assign({ title: { text: title !== null && title !== void 0 ? title : undefined }, font: { color: textColor }, paper_bgcolor: bgColor, plot_bgcolor: bgColor, showlegend: stockTraces.length > 1, xaxis: {
+                                title: { text: (_31 = spec.horizontalAxisTitle) !== null && _31 !== void 0 ? _31 : "" },
+                                automargin: true,
+                                showgrid: true,
+                                gridcolor: gridColor,
+                            }, yaxis: tslib_1.__assign({ title: { text: (_32 = spec.verticalAxisTitle) !== null && _32 !== void 0 ? _32 : "" }, automargin: true, showgrid: true, gridcolor: gridColor }, priceYAxisDomain) }, volumeLayout), { margin: { l: 50, r: 50, t: 50, b: 50 }, autosize: true }));
+                        return [2 /*return*/];
+                    }
+                    isStacked = spec.stackedType && spec.stackedType !== "UNSTACKED";
+                    isHorizontalBarChart = spec.chartType === "bar";
+                    shouldAggregate = (0, aggregation_1.shouldAggregateSeries)(spec.series);
+                    primaryDomainSource = (_35 = (_34 = (_33 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _33 === void 0 ? void 0 : _33[0]) === null || _34 === void 0 ? void 0 : _34.sources) === null || _35 === void 0 ? void 0 : _35[0];
+                    rawPrimaryDomainValues = primaryDomainSource
+                        ? (0, aggregation_1.sanitizeDomainValues)((_36 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _36 !== void 0 ? _36 : [])
+                        : [];
+                    domainData = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
+                    (_37 = spec.domains) === null || _37 === void 0 ? void 0 : _37.forEach(function (domain, domainIndex) {
+                        domain.sources.forEach(function (sheetRange, sourceIndex) {
+                            var _a;
+                            if (domainIndex === 0 && sourceIndex === 0) {
+                                domainData = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
+                            }
+                            else {
+                                var rawValues = (0, aggregation_1.sanitizeDomainValues)((_a = getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy)) !== null && _a !== void 0 ? _a : []);
+                                domainData = (0, aggregation_1.getDomainValuesForAxis)(rawValues, shouldAggregate);
+                            }
+                        });
+                    });
+                    assignCartesianData = function (categories, values) {
+                        // Convert undefined to null for Plotly (Datum type accepts null but not undefined)
+                        var plotlyValues = values.map(function (v) { return v !== null && v !== void 0 ? v : null; });
+                        // When categories is empty but we have values, generate index-based x values
+                        // so Plotly can render the chart
+                        var effectiveCategories = categories.length === 0 && plotlyValues.length > 0
+                            ? Array.from({ length: plotlyValues.length }, function (_, i) { return i + 1; })
+                            : categories;
+                        if (isHorizontalBarChart) {
+                            return {
+                                x: plotlyValues,
+                                y: effectiveCategories,
+                                orientation: "h",
+                            };
+                        }
+                        return { x: effectiveCategories, y: plotlyValues, orientation: undefined };
+                    };
+                    themeColorPalette = [
+                        theme.themeColors.accent1,
+                        theme.themeColors.accent2,
+                        theme.themeColors.accent3,
+                        theme.themeColors.accent4,
+                        theme.themeColors.accent5,
+                        theme.themeColors.accent6,
+                    ];
+                    applyTraceColor = function (trace, seriesColor, options) {
+                        var e_4, _a;
+                        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+                        var target = trace;
+                        var chartTypeForStyling = (_b = options === null || options === void 0 ? void 0 : options.effectiveChartType) !== null && _b !== void 0 ? _b : spec.chartType;
+                        var 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 === null || options === void 0 ? void 0 : options.noFill) {
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_c = target.marker) !== null && _c !== void 0 ? _c : {})), { color: "rgba(0,0,0,0)", line: tslib_1.__assign(tslib_1.__assign({}, ((_e = (_d = target.marker) === null || _d === void 0 ? void 0 : _d.line) !== null && _e !== void 0 ? _e : {})), { 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.
+                        var effectiveColor = (_g = (_f = options === null || options === void 0 ? void 0 : options.gradientColor) !== null && _f !== void 0 ? _f : seriesColor) !== null && _g !== void 0 ? _g : ((options === null || options === void 0 ? void 0 : 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 === null || options === void 0 ? void 0 : options.dataPointColors) &&
+                            (options === null || options === void 0 ? void 0 : options.dataPointColors.length)) {
+                            var overrides_1 = new Map();
+                            try {
+                                for (var _s = tslib_1.__values(options.dataPointColors), _t = _s.next(); !_t.done; _t = _s.next()) {
+                                    var dp = _t.value;
+                                    if (typeof dp.idx === "number" && typeof dp.color === "string") {
+                                        overrides_1.set(dp.idx, dp.color);
+                                    }
+                                }
+                            }
+                            catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                            finally {
+                                try {
+                                    if (_t && !_t.done && (_a = _s.return)) _a.call(_s);
+                                }
+                                finally { if (e_4) throw e_4.error; }
+                            }
+                            var fallback_1 = effectiveColor !== null && effectiveColor !== void 0 ? effectiveColor : "#4285F4";
+                            var yArray = Array.isArray(target.y)
+                                ? target.y
+                                : Array.isArray(target.x)
+                                    ? target.x
+                                    : [];
+                            var colors = yArray.map(function (_, i) { var _a; return (_a = overrides_1.get(i)) !== null && _a !== void 0 ? _a : fallback_1; });
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_h = target.marker) !== null && _h !== void 0 ? _h : {})), { color: colors });
+                            return trace;
+                        }
+                        // Handle invertIfNegative for bar/column charts
+                        if (isBarOrColumn && (options === null || options === void 0 ? void 0 : options.invertIfNegative) && (options === null || options === void 0 ? void 0 : options.values)) {
+                            var positiveColor_1 = effectiveColor !== null && effectiveColor !== void 0 ? effectiveColor : "#4285F4";
+                            var negColor_1 = (_j = options.negativeColor) !== null && _j !== void 0 ? _j : "#FF0000";
+                            // Create array of colors based on value sign
+                            var colors = options.values.map(function (v) {
+                                return typeof v === "number" && v < 0 ? negColor_1 : positiveColor_1;
+                            });
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_k = target.marker) !== null && _k !== void 0 ? _k : {})), { 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.
+                            var existingColors = (_l = target.marker) === null || _l === void 0 ? void 0 : _l.colors;
+                            if (!seriesColor &&
+                                Array.isArray(existingColors) &&
+                                existingColors.length > 1) {
+                                return trace;
+                            }
+                            var labelCount = Array.isArray(target.labels)
+                                ? target.labels.length
+                                : Array.isArray(target.y)
+                                    ? target.y.length
+                                    : 0;
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_m = target.marker) !== null && _m !== void 0 ? _m : {})), { colors: labelCount > 0
+                                    ? Array.from({ length: labelCount }, function () { return effectiveColor; })
+                                    : (_o = target.marker) === null || _o === void 0 ? void 0 : _o.colors, color: effectiveColor });
+                            return trace;
+                        }
+                        if (isBarOrColumn) {
+                            target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_p = target.marker) !== null && _p !== void 0 ? _p : {})), { color: effectiveColor });
+                            return trace;
+                        }
+                        target.marker = tslib_1.__assign(tslib_1.__assign({}, ((_q = target.marker) !== null && _q !== void 0 ? _q : {})), { color: effectiveColor });
+                        target.line = tslib_1.__assign(tslib_1.__assign({}, ((_r = target.line) !== null && _r !== void 0 ? _r : {})), { 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;
+                    };
+                    hasSecondaryAxis = false;
+                    isPareto = spec.chartType === "histogram" && (0, histogram_1.isParetoSpec)(spec);
+                    isOfPie = spec.chartType === "pie" && (0, of_pie_1.isOfPieChartSpec)(spec);
+                    ofPieHandled = false;
+                    ofPieExtras = null;
+                    decorateCartesianTrace = function (trace, series, values, dataLabel) {
+                        var e_5, _a;
+                        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                        var 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.
+                        var magnitudes = (0, error_bars_1.computeErrorBars)(values, (0, error_bars_1.resolveCustomErrorBarValues)(series.errorBars, function (range) {
+                            return getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy);
+                        }));
+                        if (magnitudes) {
+                            var direction = (_c = (_b = series.errorBars) === null || _b === void 0 ? void 0 : _b.direction) !== null && _c !== void 0 ? _c : "y";
+                            var noEndCap = (_e = (_d = series.errorBars) === null || _d === void 0 ? void 0 : _d.noEndCap) !== null && _e !== void 0 ? _e : false;
+                            var symmetric = magnitudes.plus.every(function (p, i) { return p === magnitudes.minus[i]; });
+                            var errorConfig = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ type: "data", symmetric: symmetric, array: magnitudes.plus }, (symmetric ? {} : { arrayminus: magnitudes.minus })), { color: (_f = series.color) !== null && _f !== void 0 ? _f : 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.
+                        var seriesColor = (_g = series.color) !== null && _g !== void 0 ? _g : theme.themeColors.accent1;
+                        try {
+                            for (var _m = tslib_1.__values((_h = series.trendlines) !== null && _h !== void 0 ? _h : []), _o = _m.next(); !_o.done; _o = _m.next()) {
+                                var tl = _o.value;
+                                var result = (0, trendline_1.computeTrendline)(values, {
+                                    type: tl.type,
+                                    order: tl.order,
+                                    period: tl.period,
+                                    forecastForward: tl.forecastForward,
+                                    forecastBackward: tl.forecastBackward,
+                                });
+                                if (!result || result.points.length < 2)
+                                    continue;
+                                var tlName = (_j = tl.name) !== null && _j !== void 0 ? _j : "".concat(dataLabel ? dataLabel + " " : "").concat((_k = tl.type) !== null && _k !== void 0 ? _k : "linear", " trend");
+                                // Map the fitted x (category index) back onto the category
+                                // labels where possible so the line aligns with the data.
+                                var xs = result.points.map(function (p) {
+                                    return p.x >= 0 && p.x < domainData.length ? domainData[p.x] : p.x;
+                                });
+                                var ys = result.points.map(function (p) { return p.y; });
+                                var overlay = tslib_1.__assign({ type: "scatter", mode: "lines", name: tlName, line: {
+                                        color: (_l = tl.color) !== null && _l !== void 0 ? _l : 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);
+                            }
+                        }
+                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        finally {
+                            try {
+                                if (_o && !_o.done && (_a = _m.return)) _a.call(_m);
+                            }
+                            finally { if (e_5) throw e_5.error; }
+                        }
+                    };
+                    seriesIndex = 0;
+                    _53.label = 7;
+                case 7:
+                    _53.trys.push([7, 14, 15, 16]);
+                    _e = tslib_1.__values((_38 = spec.series) !== null && _38 !== void 0 ? _38 : []), _f = _e.next();
+                    _53.label = 8;
+                case 8:
+                    if (!!_f.done) return [3 /*break*/, 13];
+                    series = _f.value;
+                    currentSeriesIndex = seriesIndex++;
+                    if (!(!(0, utils_1.isNil)(series.dataLabel) && (0, utils_1.isAFormula)(series.dataLabel))) return [3 /*break*/, 10];
+                    _h = chart_spec_utils_1.coerceCalculatedLabel;
+                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_39 = position.sheetId) !== null && _39 !== void 0 ? _39 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                case 9:
+                    _g = _h.apply(void 0, [_53.sent()]);
+                    return [3 /*break*/, 11];
+                case 10:
+                    _g = (_40 = series.dataLabel) !== null && _40 !== void 0 ? _40 : "";
+                    _53.label = 11;
+                case 11:
+                    dataLabel = _g;
+                    _loop_2 = function (sheetRange) {
+                        var seriesData = getSeriesData(spec, sheetRange, {
+                            aggregateEnabled: shouldAggregate,
+                            aggregateType: series.aggregateType,
+                            rawDomainValues: rawPrimaryDomainValues,
+                            orderedDomainValues: domainData,
+                        });
+                        // Support per-series chart type for combo charts
+                        var effectiveChartType = (_41 = series.seriesChartType) !== null && _41 !== void 0 ? _41 : spec.chartType;
+                        var seriesPlotlyType = (0, helpers_1.chartTypeToPlotlyType)(effectiveChartType);
+                        var seriesTraceStyle = (0, helpers_1.getPlotlyTraceStyle)(effectiveChartType);
+                        if (effectiveChartType === "histogram") {
+                            var rawValues = "values" in seriesData
+                                ? seriesData.values
+                                : seriesData;
+                            var 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.
+                                var _54 = (0, histogram_1.computePareto)((0, histogram_1.binHistogram)(rawValues, binCount)), labels = _54.labels, counts = _54.counts, cumulativePercents = _54.cumulativePercents;
+                                var barTrace = {
+                                    type: "bar",
+                                    x: labels,
+                                    y: counts,
+                                    name: dataLabel,
+                                };
+                                applyTraceColor(barTrace, (_42 = series.color) !== null && _42 !== void 0 ? _42 : undefined, {
+                                    noFill: series.noFill,
+                                    dataPointColors: series.dataPointColors,
+                                    seriesIndex: currentSeriesIndex,
+                                    effectiveChartType: effectiveChartType,
+                                });
+                                traces.push(barTrace);
+                                traces.push({
+                                    type: "scatter",
+                                    mode: "lines+markers",
+                                    x: labels,
+                                    y: cumulativePercents,
+                                    name: "Cumulative %",
+                                    yaxis: "y2",
+                                });
+                                hasSecondaryAxis = true;
+                            }
+                            else {
+                                var trace = tslib_1.__assign({ type: "histogram", x: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }), name: dataLabel }, (typeof binCount === "number" && binCount > 0
+                                    ? { nbinsx: binCount }
+                                    : {}));
+                                applyTraceColor(trace, (_43 = series.color) !== null && _43 !== void 0 ? _43 : undefined, {
+                                    noFill: series.noFill,
+                                    dataPointColors: series.dataPointColors,
+                                    seriesIndex: currentSeriesIndex,
+                                    effectiveChartType: effectiveChartType,
+                                });
+                                traces.push(trace);
+                            }
+                        }
+                        else if (effectiveChartType === "boxplot") {
+                            var rawValues = "values" in seriesData
+                                ? seriesData.values
+                                : seriesData;
+                            var quartileMethod = spec.quartileMethod;
+                            var showOutliers = spec.showOutliers;
+                            var 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.
+                            var usePrecomputed = quartileMethod != null || showOutliers === false;
+                            var trace = void 0;
+                            if (usePrecomputed) {
+                                var summary = (0, boxplot_1.computeBoxplotSummary)(rawValues, {
+                                    quartileMethod: quartileMethod,
+                                });
+                                if (!summary)
+                                    return "continue";
+                                var hideOutliers = showOutliers === false;
+                                trace = tslib_1.__assign(tslib_1.__assign({ 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 ".concat(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(function (v) { return v != null; })],
+                                        boxpoints: "outliers",
+                                    })), (showMeanMarker
+                                    ? { mean: [summary.mean], boxmean: true }
+                                    : {}));
+                            }
+                            else {
+                                trace = tslib_1.__assign({ type: "box", y: rawValues.map(function (v) { return (v !== null && v !== void 0 ? 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, (_44 = series.color) !== null && _44 !== void 0 ? _44 : undefined, {
+                                noFill: series.noFill,
+                                dataPointColors: series.dataPointColors,
+                                seriesIndex: currentSeriesIndex,
+                                effectiveChartType: effectiveChartType,
+                            });
+                            traces.push(trace);
+                        }
+                        else if (effectiveChartType === "waterfall") {
+                            var 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.
+                            var totalIndices_1 = new Set((_45 = spec.totalIndices) !== null && _45 !== void 0 ? _45 : []);
+                            var trace = {
+                                type: "waterfall",
+                                x: domainData,
+                                y: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }),
+                                measure: rawValues.map(function (_, i) {
+                                    return totalIndices_1.has(i) ? "total" : "relative";
+                                }),
+                                name: dataLabel,
+                            };
+                            applyTraceColor(trace, (_46 = series.color) !== null && _46 !== void 0 ? _46 : undefined, {
+                                noFill: series.noFill,
+                                dataPointColors: series.dataPointColors,
+                                seriesIndex: currentSeriesIndex,
+                                effectiveChartType: effectiveChartType,
+                            });
+                            traces.push(trace);
+                        }
+                        else if (effectiveChartType === "funnel") {
+                            var rawValues = "values" in seriesData
+                                ? seriesData.values
+                                : seriesData;
+                            var trace = {
+                                type: "funnel",
+                                y: domainData,
+                                x: rawValues.map(function (v) { return (v !== null && v !== void 0 ? v : null); }),
+                                name: dataLabel,
+                            };
+                            applyTraceColor(trace, (_47 = series.color) !== null && _47 !== void 0 ? _47 : undefined, {
+                                noFill: series.noFill,
+                                dataPointColors: series.dataPointColors,
+                                seriesIndex: currentSeriesIndex,
+                                effectiveChartType: 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)
+                                return "continue";
+                            ofPieHandled = true;
+                            var pieData = seriesData;
+                            var _55 = (0, of_pie_1.splitOfPie)(pieData.values, pieData.labels, {
+                                splitType: spec.splitType,
+                                splitPos: spec.splitPos,
+                            }), main_1 = _55.main, secondary = _55.secondary, otherTotal = _55.otherTotal, total = _55.total;
+                            var ofPieType = (0, of_pie_1.resolveOfPieType)(spec.ofPieType);
+                            var secondScale = (0, of_pie_1.clampSecondPieSize)(spec.secondPieSize) / 100;
+                            var halfAngle = (0, of_pie_1.otherSliceHalfAngle)(otherTotal, total);
+                            var paletteAt_1 = function (index) {
+                                return 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.
+                            var MAIN_DOMAIN_X = [0, 0.55];
+                            var CY = 0.5;
+                            var SECONDARY_CX = 0.78;
+                            var BAR_LEFT = 0.68;
+                            var BAR_RIGHT = 0.88;
+                            traces.push({
+                                type: "pie",
+                                values: main_1.map(function (s) { return s.value; }),
+                                labels: main_1.map(function (s) { return 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_1.map(function (_, i) { return paletteAt_1(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.
+                                var plotW = typeof width === "number" ? Math.max(1, width - 102) : 0;
+                                var plotH = typeof height === "number" ? Math.max(1, height - 102) : 0;
+                                var hasGeometry = plotW > 1 && plotH > 1;
+                                var r = hasGeometry
+                                    ? Math.min((MAIN_DOMAIN_X[1] - MAIN_DOMAIN_X[0]) * plotW, plotH) / 2
+                                    : 0;
+                                var r2 = r * secondScale;
+                                var clampFrac = function (v, min, max) {
+                                    return Math.min(max, Math.max(min, v));
+                                };
+                                var rx2 = clampFrac(hasGeometry ? r2 / plotW : 0.14 * secondScale, 0.03, 0.19);
+                                var ry2 = clampFrac(hasGeometry ? r2 / plotH : 0.28 * secondScale, 0.05, 0.45);
+                                var barHalf = ry2;
+                                if (ofPieType === "pie") {
+                                    traces.push({
+                                        type: "pie",
+                                        values: secondary.map(function (s) { return s.value; }),
+                                        labels: secondary.map(function (s) { return 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(function (_, i) { return paletteAt_1(main_1.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(function (s, i) {
+                                        traces.push({
+                                            type: "bar",
+                                            x: [""],
+                                            y: [s.value],
+                                            name: s.label,
+                                            xaxis: "x2",
+                                            yaxis: "y2",
+                                            marker: { color: paletteAt_1(main_1.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.
+                                var shapes = [];
+                                if (hasGeometry) {
+                                    var connectorColor = isDarkMode
+                                        ? "rgba(255,255,255,0.45)"
+                                        : "#999999";
+                                    var mainCx = (MAIN_DOMAIN_X[0] + MAIN_DOMAIN_X[1]) / 2;
+                                    var px = mainCx + (r * Math.cos(halfAngle)) / plotW;
+                                    var pyTop = CY + (r * Math.sin(halfAngle)) / plotH;
+                                    var pyBottom = CY - (r * Math.sin(halfAngle)) / plotH;
+                                    var tx = ofPieType === "pie" ? SECONDARY_CX : BAR_LEFT;
+                                    var half = ofPieType === "pie" ? ry2 : barHalf;
+                                    var line = {
+                                        type: "line",
+                                        xref: "paper",
+                                        yref: "paper",
+                                        layer: "below",
+                                        line: { color: connectorColor, width: 1 },
+                                    };
+                                    shapes.push(tslib_1.__assign(tslib_1.__assign({}, line), { x0: px, y0: pyTop, x1: tx, y1: CY + half }), tslib_1.__assign(tslib_1.__assign({}, line), { x0: px, y0: pyBottom, x1: tx, y1: CY - half }));
+                                }
+                                ofPieExtras = tslib_1.__assign({ shapes: 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") {
+                            var pieData = seriesData;
+                            var 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, (_48 = series.color) !== null && _48 !== void 0 ? _48 : undefined, {
+                                noFill: series.noFill,
+                                dataPointColors: series.dataPointColors,
+                                seriesIndex: currentSeriesIndex,
+                                effectiveChartType: effectiveChartType,
+                            });
+                            traces.push(trace);
+                        }
+                        else if ("values" in seriesData && "labels" in seriesData) {
+                            var _56 = assignCartesianData(domainData, seriesData.values), x = _56.x, y = _56.y, orientation_1 = _56.orientation;
+                            var trace = tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_1, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle);
+                            applyTraceColor(trace, (_49 = series.color) !== null && _49 !== void 0 ? _49 : undefined, {
+                                noFill: series.noFill,
+                                dataPointColors: series.dataPointColors,
+                                invertIfNegative: series.invertIfNegative,
+                                negativeColor: series.negativeColor,
+                                values: seriesData.values,
+                                seriesIndex: currentSeriesIndex,
+                                effectiveChartType: effectiveChartType,
+                                gradientColor: (0, gradient_1.gradientToPlotly)(series.gradient),
+                            });
+                            decorateCartesianTrace(trace, series, seriesData.values, dataLabel);
+                            traces.push(trace);
+                        }
+                        else {
+                            var numericValues = seriesData;
+                            var _57 = assignCartesianData(domainData, numericValues), x = _57.x, y = _57.y, orientation_2 = _57.orientation;
+                            var trace = tslib_1.__assign({ type: seriesPlotlyType, x: x, y: y, orientation: orientation_2, name: dataLabel, stackgroup: isStacked ? "one" : undefined }, seriesTraceStyle);
+                            applyTraceColor(trace, (_50 = series.color) !== null && _50 !== void 0 ? _50 : undefined, {
+                                noFill: series.noFill,
+                                dataPointColors: series.dataPointColors,
+                                invertIfNegative: series.invertIfNegative,
+                                negativeColor: series.negativeColor,
+                                values: numericValues,
+                                seriesIndex: currentSeriesIndex,
+                                effectiveChartType: effectiveChartType,
+                                gradientColor: (0, gradient_1.gradientToPlotly)(series.gradient),
+                            });
+                            decorateCartesianTrace(trace, series, numericValues, dataLabel);
+                            traces.push(trace);
+                        }
+                    };
+                    try {
+                        for (_j = (e_3 = void 0, tslib_1.__values(series.sources)), _k = _j.next(); !_k.done; _k = _j.next()) {
+                            sheetRange = _k.value;
+                            _loop_2(sheetRange);
+                        }
+                    }
+                    catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                    finally {
+                        try {
+                            if (_k && !_k.done && (_o = _j.return)) _o.call(_j);
+                        }
+                        finally { if (e_3) throw e_3.error; }
+                    }
+                    _53.label = 12;
+                case 12:
+                    _f = _e.next();
+                    return [3 /*break*/, 8];
+                case 13: return [3 /*break*/, 16];
+                case 14:
+                    e_1_1 = _53.sent();
+                    e_1 = { error: e_1_1 };
+                    return [3 /*break*/, 16];
+                case 15:
+                    try {
+                        if (_f && !_f.done && (_m = _e.return)) _m.call(_e);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                    return [7 /*endfinally*/];
+                case 16:
+                    authoredTitleFmt = spec.titleTextFormat;
+                    newLayout = tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ title: {
+                            text: title !== null && title !== void 0 ? 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: (_51 = spec.horizontalAxisTitle) !== null && _51 !== void 0 ? _51 : "",
+                                font: { color: textColor },
+                            },
+                            automargin: true,
+                            showgrid: true,
+                            gridcolor: gridColor,
+                            visible: (0, helpers_1.showXAxis)(spec === null || spec === void 0 ? void 0 : 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: (_52 = spec.verticalAxisTitle) !== null && _52 !== void 0 ? _52 : "",
+                                font: { color: textColor },
+                            },
+                            showgrid: !isHorizontalBarChart,
+                            gridcolor: gridColor,
+                            automargin: true,
+                            type: isHorizontalBarChart ? "category" : undefined,
+                        }, isHorizontalBarChart
+                            ? spec.categoryAxisOptions
+                            : spec.valueAxisOptions) }, (hasSecondaryAxis
+                        ? {
+                            yaxis2: applyAxisOverridesPlotly(tslib_1.__assign({ title: { font: { color: textColor } }, overlaying: "y", side: "right", showgrid: false, automargin: true }, (isPareto
+                                ? { range: [0, 100], ticksuffix: "%" }
+                                : {})), spec.secondaryValueAxisOptions),
+                        }
+                        : {})), (function () {
+                        var _a = applyLegendOverridesPlotly({ font: { color: textColor } }, spec.legend), legendCfg = _a.legend, showlegend = _a.showlegend;
+                        return {
+                            showlegend: showlegend === undefined ? true : showlegend,
+                            legend: legendCfg,
+                        };
+                    })()), { margin: {
+                            l: 50,
+                            r: 50,
+                            t: 50,
+                            b: 50,
+                        }, autosize: true }), ((spec.chartType === "bar" || spec.chartType === "column") && spec.stackedType
+                        ? tslib_1.__assign({ barmode: spec.stackedType === "STACKED" ||
+                                spec.stackedType === "PERCENT_STACKED"
+                                ? "stack"
+                                : "group" }, (spec.stackedType === "PERCENT_STACKED"
+                            ? { barnorm: "percent" }
+                            : {})) : {})), (typeof spec.gapWidth === "number"
+                        ? { bargap: Math.max(0, Math.min(0.95, spec.gapWidth / 400)) }
+                        : {})), (ofPieExtras
+                        ? tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ shapes: ofPieExtras.shapes }, (ofPieExtras.barmode ? { barmode: ofPieExtras.barmode } : {})), (ofPieExtras.xaxis2 ? { xaxis2: ofPieExtras.xaxis2 } : {})), (ofPieExtras.yaxis2 ? { yaxis2: ofPieExtras.yaxis2 } : {})) : {}));
+                    dlOpts = spec.dataLabels;
+                    doughnutHole = spec.doughnutHoleSize;
+                    formattedTraces = traces.map(function (trace) {
+                        var next = applyDataLabelsToTracePlotly(trace, dlOpts, spec.chartType);
+                        // Doughnut is a pie trace with `hole` set.
+                        if (spec.chartType === "doughnut" && next.type === "pie") {
+                            next = tslib_1.__assign(tslib_1.__assign({}, next), { hole: typeof doughnutHole === "number" ? doughnutHole : 0.5 });
+                        }
+                        return next;
+                    });
+                    sortedTraces = tslib_1.__spreadArray([], tslib_1.__read(formattedTraces), false).sort(function (a, b) {
+                        var aHasFill = a.fill && a.fill !== "none";
+                        var bHasFill = b.fill && b.fill !== "none";
+                        if (aHasFill && !bHasFill)
+                            return -1;
+                        if (!aHasFill && bHasFill)
+                            return 1;
+                        return 0;
+                    });
+                    setPlotData(sortedTraces);
+                    setLayout(newLayout);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    // Subscribe to datarange
+    (0, spreadsheet_state_1.useSubscribeToSheet)(chart.chartId, chart.spec.dataRange, updateChart);
+    // Update chart on spec changes
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        updateChart();
+    }, [chart.spec, getDomainValuesFromRange, getSeriesValuesFromRange]);
+    // Update theme
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        updateChart();
+    }, [theme, title, isDarkMode]);
+    // Resize chart on width/height changes
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        setLayout(function (prev) { return (tslib_1.__assign(tslib_1.__assign({}, 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" && (0, of_pie_1.isOfPieChartSpec)(spec)) {
+            updateChart();
+        }
+    }, [width, height]);
+    // Chrome bug - redraw chart when visibility changes
+    (0, ui_1.useOnVisibilityChange)(function (state) {
+        if (state === "visible") {
+            updateChart();
+        }
+    });
+    var 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.
+    var roundedCornersStyle = spec.roundedCorners
+        ? { borderRadius: 8, overflow: "hidden" }
+        : undefined;
+    return (react_1.default.createElement("div", { className: "flex flex-1", style: roundedCornersStyle },
+        isSelected ? (react_1.default.createElement(ui_1.DropdownMenu, null,
+            react_1.default.createElement(ui_1.DropdownMenuTrigger, { asChild: true },
+                react_1.default.createElement(ui_1.IconButton, { className: "absolute right-1 top-1 z-10" },
+                    react_1.default.createElement(icons_1.DotsVerticalIcon, null))),
+            react_1.default.createElement(ui_1.DropdownMenuPortal, null,
+                react_1.default.createElement(ui_1.DropdownMenuContent, { align: "start", onCloseAutoFocus: function (event) {
+                        event.preventDefault();
+                        if (shouldFocusSheetRef.current) {
+                            focusSheet === null || focusSheet === void 0 ? void 0 : focusSheet();
+                        }
+                    }, onInteractOutside: function () {
+                        shouldFocusSheetRef.current = false;
+                    } },
+                    readonly ? null : (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onRequestEdit === null || onRequestEdit === void 0 ? void 0 : onRequestEdit(chart); } }, "Edit chart")),
+                    readonly ? null : (react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () {
+                            shouldFocusSheetRef.current = true;
+                            onDeleteChart === null || onDeleteChart === void 0 ? void 0 : onDeleteChart(chart.chartId);
+                        } }, "Delete chart")))))) : null,
+        react_1.default.createElement("div", { className: "flex-1 rnc-plotly-chart-container" },
+            react_1.default.createElement(react_plotly_js_1.default, { ref: plotRef, data: plotData, layout: layout, config: config, style: { width: "100%", height: "100%" } }))));
+};
+exports.BasicChart = BasicChart;