@rowsncolumns/charts 27.0.30

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

@@ -0,0 +1,2250 @@
+"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 toolkit_1 = require("@rowsncolumns/toolkit");
+var ui_1 = require("@rowsncolumns/ui");
+var utils_1 = require("@rowsncolumns/utils");
+var charts_1 = require("echarts/charts");
+var components_1 = require("echarts/components");
+var echarts = tslib_1.__importStar(require("echarts/core"));
+var renderers_1 = require("echarts/renderers");
+var react_1 = tslib_1.__importStar(require("react"));
+var aggregation_1 = require("../utils/aggregation");
+var bar_layout_1 = require("../utils/bar-layout");
+var boxplot_1 = require("../utils/boxplot");
+var bubble_1 = require("../utils/bubble");
+var chart_spec_utils_1 = require("../utils/chart-spec-utils");
+var echarts_gl_loader_1 = require("../utils/echarts-gl-loader");
+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 overrides_1 = require("../utils/overrides");
+var radar_1 = require("../utils/radar");
+var region_map_1 = require("../utils/region-map");
+var region_map_loader_1 = require("../utils/region-map-loader");
+var stock_1 = require("../utils/stock");
+var three_d_1 = require("../utils/three-d");
+var trendline_1 = require("../utils/trendline");
+var waterfall_1 = require("../utils/waterfall");
+var webgl_1 = require("../utils/webgl");
+var helpers_1 = require("./helpers");
+// 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;
+};
+var BASIC_CHART_TYPES = new Set([
+    "bar",
+    "column",
+    "line",
+    "pie",
+    "area",
+    "doughnut",
+    "radar",
+    "stock",
+    "histogram",
+    "boxplot",
+    "waterfall",
+    "funnel",
+    "combo",
+    "regionMap",
+]);
+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 HIERARCHY_LEVEL_STYLES = [
+    {
+        itemStyle: {
+            gapWidth: 1,
+            borderColorSaturation: 0.6,
+        },
+        upperLabel: { show: false },
+    },
+    {
+        colorSaturation: [0.35, 0.65],
+        itemStyle: {
+            gapWidth: 1,
+            borderColorSaturation: 0.6,
+        },
+    },
+    {
+        colorSaturation: [0.45, 0.75],
+        itemStyle: {
+            gapWidth: 1,
+            borderColorSaturation: 0.6,
+        },
+    },
+];
+var getHierarchyDepth = function (nodes, depth) {
+    if (depth === void 0) { depth = 1; }
+    var maxDepth = depth;
+    nodes.forEach(function (node) {
+        if (node.children && node.children.length > 0) {
+            maxDepth = Math.max(maxDepth, getHierarchyDepth(node.children, depth + 1));
+        }
+    });
+    return maxDepth;
+};
+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>` embedded in the chart
+        // XML) take precedence over cell-range sources — by spec only one
+        // is populated, but if both happen to exist the inline value is
+        // the authored "ground truth".
+        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;
+};
+var buildHierarchyLevels = function (maxDepth) {
+    if (maxDepth <= 0)
+        return undefined;
+    var levels = [];
+    for (var i = 0; i < maxDepth; i++) {
+        var baseStyle = HIERARCHY_LEVEL_STYLES[Math.min(i, HIERARCHY_LEVEL_STYLES.length - 1)];
+        levels.push(tslib_1.__assign(tslib_1.__assign({}, baseStyle), { itemStyle: tslib_1.__assign({}, baseStyle.itemStyle) }));
+    }
+    return levels;
+};
+var defaultLegendConfig = {
+    padding: 10,
+    itemWidth: 10,
+    itemHeight: 4,
+    top: 20,
+};
+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 explicitChartTitle = (_b = chart.spec.title) !== null && _b !== void 0 ? _b : undefined;
+    var hierarchyTitleRef = (0, react_1.useRef)(explicitChartTitle);
+    var title = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : hierarchyTitleRef.current;
+    var el = (0, react_1.useRef)(null);
+    var chartRef = (0, react_1.useRef)(undefined);
+    var focusSheet = (0, spreadsheet_1.useFocusSheet)();
+    var shouldFocusSheetRef = (0, react_1.useRef)(false);
+    var previousChartType = (0, react_1.useRef)(undefined);
+    var previousSeriesCount = (0, react_1.useRef)(undefined);
+    // 3-D pipeline state. echarts-gl is lazy-loaded the first time a 3-D
+    // spec renders; the tick re-runs updateChart when the module lands so
+    // the chart upgrades from the immediate 2-D fallback to true 3-D.
+    var renderedIn3D = (0, react_1.useRef)(false);
+    var glUpgradeRequested = (0, react_1.useRef)(false);
+    var _c = tslib_1.__read((0, react_1.useState)(0), 2), glUpgradeTick = _c[0], setGlUpgradeTick = _c[1];
+    // Region-map (choropleth) pipeline state. The map option (geo +
+    // visualMap) doesn't merge back into a cartesian one, so the instance
+    // is re-initialized when entering/leaving the region-map rendering.
+    var renderedAsRegionMap = (0, react_1.useRef)(false);
+    // Initialize line chart
+    var initializeChart = function () {
+        var _a, _b;
+        if (el.current && !chartRef.current) {
+            chartRef.current = echarts.init(el.current);
+            chartRef.current.setOption({
+                title: {
+                    left: "top",
+                    padding: 10,
+                    textStyle: {
+                        fontSize: 16,
+                        fontWeight: "normal",
+                        fontFamily: "Untitled Sans, apple-system, sans-serif",
+                    },
+                },
+                tooltip: {
+                    textStyle: {
+                        fontSize: 12,
+                    },
+                    trigger: "axis",
+                },
+                legend: defaultLegendConfig,
+                grid: {
+                    left: "3%",
+                    right: "4%",
+                    bottom: "3%",
+                    containLabel: true,
+                },
+                xAxis: [
+                    {
+                        type: "category",
+                        name: (_a = spec.horizontalAxisTitle) !== null && _a !== void 0 ? _a : "", // Set your x-axis title here
+                        nameLocation: "middle",
+                        nameGap: 30,
+                    },
+                ],
+                yAxis: [
+                    {
+                        type: "value",
+                        name: (_b = spec.verticalAxisTitle) !== null && _b !== void 0 ? _b : "", // Set your y-axis title here
+                        nameLocation: "middle",
+                        nameGap: 50,
+                    },
+                ],
+                series: [],
+            });
+        }
+    };
+    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 seriesValues = 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 === seriesValues.length;
+        if (canAggregate) {
+            var aggregatedValues_1 = (0, aggregation_1.aggregateSeriesByDomain)(rawDomainValues, seriesValues, aggregateType, orderedDomainValues);
+            if (spec.chartType === "pie") {
+                return orderedDomainValues.map(function (name, idx) {
+                    var _a;
+                    return ({
+                        value: (_a = aggregatedValues_1[idx]) !== null && _a !== void 0 ? _a : 0,
+                        name: name,
+                    });
+                });
+            }
+            return aggregatedValues_1;
+        }
+        var numericValues = seriesValues;
+        if (spec.chartType === "pie") {
+            var domainSheetRange = (_a = spec.domains[0]) === null || _a === void 0 ? void 0 : _a.sources[0];
+            if (!domainSheetRange) {
+                return [];
+            }
+            var domainValues = getDomainValuesFromRange(domainSheetRange, spec.hiddenDimensionStrategy);
+            return domainValues.map(function (name, idx) { return ({
+                value: numericValues[idx],
+                name: name,
+            }); });
+        }
+        return numericValues;
+    }, [getSeriesValuesFromRange, getDomainValuesFromRange]);
+    // Resize a chart
+    var resizeChart = function () {
+        var _a;
+        (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.resize();
+    };
+    /**
+     * Triggers a chart update
+     */
+    var updateChart = function () { return tslib_1.__awaiter(void 0, void 0, void 0, function () {
+        var threeDRenderKind, canRender3D, willRender3D, isRegionMap, regionSpec, geoScope, geo, labels, seriesEntry, values, _a, data, unmatched, min, max, textColor, ramp, noDataColor, borderColor, regionSeriesLabel, seriesName, chartDomains, chartSeries, legend, chartType, position, showAxis, isBubble, isHierarchy, skipHeaders_1, labelValues, perSeriesX, perSeriesSize, seriesInputs, i, seriesEntry, resolvedLabel, _b, xValues, sizeValues_1, sharedXValues, sharedSizeValues, _c, categories_1, preparedSeries, sizeValues, sizeScale_1, xAxisConfig, tooltipFormatter, bubbleSeriesLabel_1, hierarchyRows, headerTitle, hierarchyData, rootName, seriesDisplayName, hierarchyDepth, levels, tooltipFormatter, hierarchySeriesLabel, categories_2, threeDSeriesInputs, _d, _e, seriesEntry, dataLabel, _f, _g, values, e_1_1, seriesNames_1, threeDPalette_1, seriesColorAt_1, categoryAxisLabel, seriesAxisLabel, threeDTooltipFormatter, threeDSeries, visualMap, xAxis3D, yAxis3D, surfacePoints, _h, zMin, zMax, skipHeaders, categories, radarSeriesInputs, _j, _k, seriesEntry, label, values, indicators, radarData, radarStyle_1, radarColors_1, radarSeriesLabel, variant, categories, seriesValues, stockSeriesLabel_1, upColor_1, downColor_1, volumePoints, hasVolume, stockGrid, baseStockXAxis, stockXAxis, volumeYAxis, volumeSeries, stockAxisPointer, candleData, lineSeries, stockColors_1, isStacked, isCircularChart, isOfPie, ofPieLayout, isHorizontalBarChart, shouldAggregate, primaryDomainSource, rawPrimaryDomainValues, aggregateDomainValues, pushSeriesOverlays, sideBySideBarCount, specBarGap, specBarCategoryGap, _l, _m, series, dataLabel, _o, _p, _loop_1, _q, _r, sheetRange, e_2_1, labels, seriesEntry, rawValues, _s, main_1, secondary, otherTotal, total, ofPieType_1, secondScale, halfAngle_1, hasSecondary, MAIN_CX_1, CY_1, MAIN_RADIUS_PCT_1, SECONDARY_CX_1, secondaryRadiusPct_1, BAR_LEFT_1, BAR_RIGHT, barHalfFrac_1, ofPiePalette_1, paletteAt_1, connectorColor_1, primaryDomainSource_1, rawDomainValues, labels, seriesEntry, rawValues_1, totalIndices, steps, accent_1, decreaseColor_1, totalColor_1, connectors, primaryDomainSource_2, rawDomainValues, labels_1, seriesEntry, rawValues, quartileMethod, showOutliers, showMeanMarker, boxStats, boxLabels, outlierPoints, meanPoints, _t, _u, seriesEntry, label, rawValues, summary, boxIndex, lo, hi, _v, _w, outlier, boxSeries, boxColor, rawValues, _x, labels, counts, isPareto_1, cumulativePercents, pareto, histogramSeries, histogramColor, renderedSeriesCount, replaceMerge, gridConfig, valueAxisBase, isPareto, hasSecondaryAxis, tooltipConfig, finalLegend, seriesLabelOption, isDoughnut, doughnutHoleSize, barSeries, len, categoryTotals_1, barSeries_1, barSeries_1_1, s, i, raw, n, barSeries_2, barSeries_2_1, s, seriesWithLabels;
+        var e_1, _y, e_3, _z, e_2, _0, e_4, _1, e_5, _2, e_6, _3, e_7, _4, e_8, _5;
+        var _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, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91, _92, _93, _94, _95, _96, _97, _98, _99, _100, _101, _102, _103;
+        return tslib_1.__generator(this, function (_104) {
+            switch (_104.label) {
+                case 0:
+                    (0, utils_1.debug)("Updating chart", chart);
+                    threeDRenderKind = (0, three_d_1.resolve3DRenderKind)(spec.sourceChartType);
+                    canRender3D = threeDRenderKind !== null && (0, webgl_1.isWebGLAvailable)();
+                    willRender3D = canRender3D && (0, echarts_gl_loader_1.getEchartsGlState)() === "ready";
+                    if (canRender3D && !willRender3D && (0, echarts_gl_loader_1.getEchartsGlState)() !== "failed") {
+                        // Kick off the echarts-gl load in the background (once). The 2-D
+                        // fallback renders immediately; the tick re-runs updateChart to
+                        // upgrade to 3-D when the module resolves. A failed load latches
+                        // and the chart simply stays 2-D.
+                        if (!glUpgradeRequested.current) {
+                            glUpgradeRequested.current = true;
+                            (0, echarts_gl_loader_1.loadEchartsGl)().then(function (loaded) {
+                                if (loaded) {
+                                    setGlUpgradeTick(function (tick) { return tick + 1; });
+                                }
+                            });
+                        }
+                    }
+                    if (renderedIn3D.current && !willRender3D) {
+                        // Leaving 3-D (spec edit) — the grid3D option doesn't merge back
+                        // into a cartesian one, so re-initialize from a clean slate and
+                        // let the normal 2-D flow below do a full structural render.
+                        (_6 = chartRef.current) === null || _6 === void 0 ? void 0 : _6.dispose();
+                        chartRef.current = undefined;
+                        renderedIn3D.current = false;
+                        previousChartType.current = undefined;
+                        previousSeriesCount.current = undefined;
+                        initializeChart();
+                        applyThemeOptions();
+                    }
+                    isRegionMap = (0, region_map_1.isRegionMapSpec)(spec);
+                    if (renderedAsRegionMap.current && !isRegionMap) {
+                        // Leaving the region map (spec edit) — the geo/visualMap option
+                        // doesn't merge back into a cartesian one, so re-initialize from
+                        // a clean slate and let the normal flow below do a full
+                        // structural render.
+                        (_7 = chartRef.current) === null || _7 === void 0 ? void 0 : _7.dispose();
+                        chartRef.current = undefined;
+                        renderedAsRegionMap.current = false;
+                        previousChartType.current = undefined;
+                        previousSeriesCount.current = undefined;
+                        initializeChart();
+                        applyThemeOptions();
+                    }
+                    if (!isRegionMap) return [3 /*break*/, 2];
+                    regionSpec = spec;
+                    geoScope = (0, region_map_1.resolveGeoScope)(regionSpec.geoScope);
+                    return [4 /*yield*/, (0, region_map_loader_1.loadRegionMapGeo)(geoScope)];
+                case 1:
+                    geo = _104.sent();
+                    // Entering the region map from a cartesian render: the previous
+                    // grid/axis option doesn't merge into the map one, so start from
+                    // a bare instance (theme options are re-applied after setOption).
+                    if (!renderedAsRegionMap.current && chartRef.current) {
+                        chartRef.current.dispose();
+                        chartRef.current = undefined;
+                    }
+                    if (el.current && !chartRef.current) {
+                        chartRef.current = echarts.init(el.current);
+                    }
+                    if (!geo) {
+                        // Map asset failed to load (or unknown scope) — the loader
+                        // already warned once; render an empty chart, never crash.
+                        (_8 = chartRef.current) === null || _8 === void 0 ? void 0 : _8.setOption({ series: [] }, { replaceMerge: ["series", "visualMap"] });
+                        renderedAsRegionMap.current = true;
+                        applyThemeOptions();
+                        previousChartType.current = spec.chartType;
+                        previousSeriesCount.current = 0;
+                        return [2 /*return*/];
+                    }
+                    labels = flattenChartDataValues(regionSpec.domains, getDomainValuesFromRange, regionSpec.hiddenDimensionStrategy, false);
+                    seriesEntry = (_9 = regionSpec.series) === null || _9 === void 0 ? void 0 : _9[0];
+                    values = seriesEntry
+                        ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, regionSpec.hiddenDimensionStrategy)
+                        : [];
+                    _a = (0, region_map_1.buildRegionMapData)(labels, values, geo.regionNames), data = _a.data, unmatched = _a.unmatched, min = _a.min, max = _a.max;
+                    (0, region_map_1.warnOnceForUnmatchedRegions)(geoScope, unmatched);
+                    textColor = (0, spreadsheet_1.getStringifiedColor)({ theme: 1, tint: isDarkMode ? 1 : 0 }, theme);
+                    ramp = (0, region_map_1.buildSequentialColorRamp)(theme.themeColors.accent1, !!isDarkMode);
+                    noDataColor = isDarkMode
+                        ? "rgba(255,255,255,0.08)"
+                        : "rgba(0,0,0,0.06)";
+                    borderColor = isDarkMode ? "rgba(255,255,255,0.3)" : "#FFFFFF";
+                    regionSeriesLabel = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                    seriesName = (seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
+                        ? seriesEntry.dataLabel
+                        : "";
+                    (_10 = chartRef.current) === null || _10 === void 0 ? void 0 : _10.setOption({
+                        // The visualMap color scale is the value legend; the series
+                        // legend stays hidden unless an authored override turns it on.
+                        legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: false }), spec.legend),
+                        tooltip: {
+                            textStyle: { fontSize: 12 },
+                            trigger: "item",
+                            formatter: function (params) {
+                                var _a;
+                                var value = Array.isArray(params === null || params === void 0 ? void 0 : params.value)
+                                    ? params.value[params.value.length - 1]
+                                    : params === null || params === void 0 ? void 0 : params.value;
+                                return typeof value === "number" && Number.isFinite(value)
+                                    ? "".concat(params === null || params === void 0 ? void 0 : params.name, ": ").concat(value)
+                                    : "".concat((_a = params === null || params === void 0 ? void 0 : params.name) !== null && _a !== void 0 ? _a : "");
+                            },
+                        },
+                        visualMap: [
+                            {
+                                type: "continuous",
+                                min: min,
+                                max: max,
+                                left: "left",
+                                bottom: 10,
+                                inRange: { color: ramp },
+                                textStyle: { color: textColor, fontSize: 12 },
+                            },
+                        ],
+                        series: [
+                            {
+                                type: "map",
+                                map: geoScope,
+                                name: seriesName,
+                                data: data,
+                                roam: false,
+                                // Region names label the shapes only when the authored
+                                // dataLabels override asks for them.
+                                label: tslib_1.__assign({ show: false }, (regionSeriesLabel !== null && regionSeriesLabel !== void 0 ? regionSeriesLabel : {})),
+                                emphasis: { label: { show: false } },
+                                select: { disabled: true },
+                                itemStyle: {
+                                    areaColor: noDataColor,
+                                    borderColor: borderColor,
+                                    borderWidth: 0.5,
+                                },
+                            },
+                        ],
+                    }, { replaceMerge: ["series", "visualMap", "legend", "tooltip"] });
+                    // Re-apply theme-derived title / palette / tooltip colors — lost
+                    // when the instance was re-initialized on entry.
+                    renderedAsRegionMap.current = true;
+                    applyThemeOptions();
+                    previousChartType.current = spec.chartType;
+                    previousSeriesCount.current = 1;
+                    return [2 /*return*/];
+                case 2:
+                    chartDomains = [];
+                    chartSeries = [];
+                    legend = tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { data: [] });
+                    chartType = (0, helpers_1.chartTypeToEchartsType)(spec === null || spec === void 0 ? void 0 : spec.chartType);
+                    position = chart.position;
+                    showAxis = (0, helpers_1.showXAxis)(spec === null || spec === void 0 ? void 0 : spec.chartType);
+                    isBubble = isBubbleChartSpec(spec);
+                    isHierarchy = isHierarchyChartSpec(spec);
+                    if (!isBubble) return [3 /*break*/, 8];
+                    hierarchyTitleRef.current = explicitChartTitle;
+                    skipHeaders_1 = spec.useFirstRowAsHeaders !== false;
+                    labelValues = flattenChartDataValues(spec.bubbleLabels, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
+                    perSeriesX = ((_11 = spec.domains) !== null && _11 !== void 0 ? _11 : []).map(function (dom) {
+                        return flattenChartDataValues([dom], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
+                    });
+                    perSeriesSize = ((_12 = spec.bubbleSizes) !== null && _12 !== void 0 ? _12 : []).map(function (sz) {
+                        return flattenChartDataValues([sz], getSeriesValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders_1);
+                    });
+                    seriesInputs = [];
+                    i = 0;
+                    _104.label = 3;
+                case 3:
+                    if (!(i < spec.series.length)) return [3 /*break*/, 7];
+                    seriesEntry = spec.series[i];
+                    resolvedLabel = (_13 = seriesEntry.dataLabel) !== null && _13 !== void 0 ? _13 : "";
+                    if (!(resolvedLabel && (0, utils_1.isAFormula)(resolvedLabel))) return [3 /*break*/, 5];
+                    _b = chart_spec_utils_1.coerceCalculatedLabel;
+                    return [4 /*yield*/, onRequestCalculate(resolvedLabel, (_14 = position.sheetId) !== null && _14 !== void 0 ? _14 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                case 4:
+                    resolvedLabel = _b.apply(void 0, [_104.sent()]);
+                    _104.label = 5;
+                case 5:
+                    xValues = (_15 = perSeriesX[i]) !== null && _15 !== void 0 ? _15 : perSeriesX[0];
+                    sizeValues_1 = (_16 = perSeriesSize[i]) !== null && _16 !== void 0 ? _16 : 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 } : {})));
+                    _104.label = 6;
+                case 6:
+                    i++;
+                    return [3 /*break*/, 3];
+                case 7:
+                    sharedXValues = (_17 = perSeriesX[0]) !== null && _17 !== void 0 ? _17 : [];
+                    sharedSizeValues = (_18 = perSeriesSize[0]) !== null && _18 !== void 0 ? _18 : [];
+                    _c = (0, bubble_1.prepareBubbleSeriesData)({
+                        xValues: sharedXValues,
+                        labelValues: labelValues,
+                        sizeValues: sharedSizeValues,
+                        series: seriesInputs,
+                    }), categories_1 = _c.categories, preparedSeries = _c.series, sizeValues = _c.sizeValues;
+                    sizeScale_1 = (0, bubble_1.createBubbleSizeScale)(sizeValues);
+                    xAxisConfig = categories_1.length > 0
+                        ? {
+                            type: "category",
+                            data: categories_1,
+                            name: (_19 = spec.horizontalAxisTitle) !== null && _19 !== void 0 ? _19 : "",
+                            nameLocation: "middle",
+                            nameGap: 30,
+                        }
+                        : {
+                            type: "value",
+                            name: (_20 = spec.horizontalAxisTitle) !== null && _20 !== void 0 ? _20 : "",
+                            nameLocation: "middle",
+                            nameGap: 30,
+                        };
+                    tooltipFormatter = function (params) {
+                        var _a, _b, _c, _d;
+                        var _e = tslib_1.__read(((_a = params.value) !== null && _a !== void 0 ? _a : []), 3), rawX = _e[0], y = _e[1], size = _e[2];
+                        var label = categories_1.length > 0
+                            ? (_d = (_c = (_b = params.data) === null || _b === void 0 ? void 0 : _b.xLabel) !== null && _c !== void 0 ? _c : categories_1[Math.round(rawX)]) !== null && _d !== void 0 ? _d : rawX
+                            : rawX;
+                        var bubbleName = params.name ? "".concat(params.name, "<br/>") : "";
+                        var seriesName = params.seriesName ? "".concat(params.seriesName, "<br/>") : "";
+                        return "".concat(seriesName).concat(bubbleName, "X: ").concat(label !== null && label !== void 0 ? label : "", "<br/>Y: ").concat(y !== null && y !== void 0 ? y : "", "<br/>Size: ").concat(size !== null && size !== void 0 ? size : "");
+                    };
+                    bubbleSeriesLabel_1 = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                    (_21 = chartRef.current) === null || _21 === void 0 ? void 0 : _21.setOption({
+                        xAxis: [
+                            (0, overrides_1.applyAxisOverrides)(tslib_1.__assign({}, xAxisConfig), spec.categoryAxisOptions),
+                        ],
+                        yAxis: [
+                            (0, overrides_1.applyAxisOverrides)({
+                                type: "value",
+                                name: (_22 = spec.verticalAxisTitle) !== null && _22 !== void 0 ? _22 : "",
+                                nameLocation: "middle",
+                                nameGap: 45,
+                            }, spec.valueAxisOptions),
+                        ],
+                        legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, legend), { show: preparedSeries.length > 1, data: preparedSeries.map(function (entry) { return entry.name; }) }), spec.legend),
+                        grid: {
+                            left: "3%",
+                            right: "4%",
+                            bottom: "3%",
+                            containLabel: true,
+                        },
+                        tooltip: {
+                            trigger: "item",
+                            formatter: tooltipFormatter,
+                        },
+                        // Scatter vs bubble — scatter uses small fixed markers
+                        // (optionally connected with a line per scatterStyle); bubble
+                        // applies a size scale on the 3rd dimension. Pre-fix scatter
+                        // routed through the bubble code, producing Y-scaled giant
+                        // circles instead of Excel's small dots.
+                        series: preparedSeries.map(function (entry, index) {
+                            var _a, _b, _c, _d, _e, _f;
+                            var isScatter = spec.chartType === "scatter";
+                            var scatterStyle = (_a = spec.scatterStyle) !== null && _a !== void 0 ? _a : (isScatter ? "lineMarker" : undefined);
+                            var seriesEntry = (_b = spec.series) === null || _b === void 0 ? void 0 : _b[index];
+                            var seriesColor = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color;
+                            var perMarker = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.marker;
+                            if (isScatter) {
+                                var symbol = perMarker === null || perMarker === void 0 ? void 0 : perMarker.symbol;
+                                var noMarkers = symbol === "none";
+                                var wantsLine = scatterStyle === "line" ||
+                                    scatterStyle === "lineMarker" ||
+                                    scatterStyle === "smooth" ||
+                                    scatterStyle === "smoothMarker";
+                                var wantsMarkers = !noMarkers &&
+                                    (scatterStyle === "marker" ||
+                                        scatterStyle === "lineMarker" ||
+                                        scatterStyle === "smoothMarker" ||
+                                        !scatterStyle);
+                                var smooth = scatterStyle === "smooth" || scatterStyle === "smoothMarker";
+                                return wantsLine
+                                    ? tslib_1.__assign({ type: "line", name: entry.name, data: entry.points, showSymbol: wantsMarkers, smooth: smooth, symbol: (_c = (0, helpers_1.mapMarkerSymbolToEcharts)(symbol)) !== null && _c !== void 0 ? _c : "circle", symbolSize: (_d = perMarker === null || perMarker === void 0 ? void 0 : perMarker.size) !== null && _d !== void 0 ? _d : 6 }, (seriesColor
+                                        ? {
+                                            itemStyle: { color: seriesColor },
+                                            lineStyle: { color: seriesColor },
+                                        }
+                                        : {})) : tslib_1.__assign({ type: "scatter", name: entry.name, data: entry.points, symbol: (_e = (0, helpers_1.mapMarkerSymbolToEcharts)(symbol)) !== null && _e !== void 0 ? _e : "circle", symbolSize: (_f = perMarker === null || perMarker === void 0 ? void 0 : perMarker.size) !== null && _f !== void 0 ? _f : 6 }, (seriesColor
+                                    ? { itemStyle: { color: seriesColor } }
+                                    : {}));
+                            }
+                            return tslib_1.__assign({ type: chartType, name: entry.name, data: entry.points, symbolSize: function (data) { var _a; return sizeScale_1((_a = data === null || data === void 0 ? void 0 : data[2]) !== null && _a !== void 0 ? _a : 0); }, label: {
+                                    show: true,
+                                    formatter: function (params) { var _a; return (_a = params.name) !== null && _a !== void 0 ? _a : ""; },
+                                } }, (seriesColor ? { itemStyle: { color: seriesColor } } : {}));
+                        }).map(function (s) {
+                            var _a;
+                            return bubbleSeriesLabel_1
+                                ? tslib_1.__assign(tslib_1.__assign({}, s), { label: tslib_1.__assign(tslib_1.__assign({}, ((_a = s.label) !== null && _a !== void 0 ? _a : {})), bubbleSeriesLabel_1) }) : s;
+                        }),
+                    }, {
+                        replaceMerge: [
+                            "series",
+                            "xAxis",
+                            "yAxis",
+                            "legend",
+                            "grid",
+                            "tooltip",
+                        ],
+                    });
+                    previousChartType.current = spec.chartType;
+                    previousSeriesCount.current = preparedSeries.length;
+                    return [2 /*return*/];
+                case 8:
+                    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.buildHierarchyTree)(hierarchyRows);
+                        rootName = hierarchyData.length === 1 ? (_24 = (_23 = hierarchyData[0]) === null || _23 === void 0 ? void 0 : _23.name) !== null && _24 !== void 0 ? _24 : "" : "";
+                        seriesDisplayName = (_26 = (_25 = explicitChartTitle !== null && explicitChartTitle !== void 0 ? explicitChartTitle : headerTitle) !== null && _25 !== void 0 ? _25 : rootName) !== null && _26 !== void 0 ? _26 : "";
+                        hierarchyDepth = getHierarchyDepth(hierarchyData);
+                        levels = buildHierarchyLevels(hierarchyDepth);
+                        tooltipFormatter = function (params) {
+                            var _a;
+                            var value = Array.isArray(params.value)
+                                ? params.value[params.value.length - 1]
+                                : (_a = params.value) !== null && _a !== void 0 ? _a : "";
+                            return "".concat(params.name, ": ").concat(value);
+                        };
+                        hierarchySeriesLabel = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                        (_27 = chartRef.current) === null || _27 === void 0 ? void 0 : _27.setOption({
+                            xAxis: [
+                                {
+                                    type: "category",
+                                    show: false,
+                                },
+                            ],
+                            yAxis: [
+                                {
+                                    type: "value",
+                                    show: false,
+                                },
+                            ],
+                            legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: false }), spec.legend),
+                            grid: {
+                                left: 0,
+                                right: 0,
+                                top: 0,
+                                bottom: 0,
+                            },
+                            tooltip: {
+                                trigger: "item",
+                                formatter: tooltipFormatter,
+                            },
+                            series: [
+                                {
+                                    type: chartType,
+                                    name: seriesDisplayName,
+                                    rootName: rootName || seriesDisplayName || "",
+                                    data: hierarchyData,
+                                    label: tslib_1.__assign({ show: true, formatter: "{b}" }, (hierarchySeriesLabel !== null && hierarchySeriesLabel !== void 0 ? hierarchySeriesLabel : {})),
+                                    upperLabel: spec.chartType === "treemap"
+                                        ? {
+                                            show: true,
+                                            padding: [0, 0, 0, 4],
+                                        }
+                                        : undefined,
+                                    levels: levels,
+                                    colorMappingBy: "index",
+                                },
+                            ],
+                        }, {
+                            replaceMerge: [
+                                "series",
+                                "xAxis",
+                                "yAxis",
+                                "legend",
+                                "grid",
+                                "tooltip",
+                            ],
+                        });
+                        previousChartType.current = spec.chartType;
+                        previousSeriesCount.current = 1;
+                        return [2 /*return*/];
+                    }
+                    else {
+                        hierarchyTitleRef.current = explicitChartTitle;
+                    }
+                    if (!isBasicChartSpec(spec)) {
+                        (0, utils_1.debug)("Unsupported chart type", spec.chartType);
+                        return [2 /*return*/];
+                    }
+                    if (!(willRender3D && threeDRenderKind)) return [3 /*break*/, 19];
+                    categories_2 = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
+                    threeDSeriesInputs = [];
+                    _104.label = 9;
+                case 9:
+                    _104.trys.push([9, 16, 17, 18]);
+                    _d = tslib_1.__values((_28 = spec.series) !== null && _28 !== void 0 ? _28 : []), _e = _d.next();
+                    _104.label = 10;
+                case 10:
+                    if (!!_e.done) return [3 /*break*/, 15];
+                    seriesEntry = _e.value;
+                    if (!(!(0, utils_1.isNil)(seriesEntry.dataLabel) && (0, utils_1.isAFormula)(seriesEntry.dataLabel))) return [3 /*break*/, 12];
+                    _g = chart_spec_utils_1.coerceCalculatedLabel;
+                    return [4 /*yield*/, onRequestCalculate(seriesEntry.dataLabel, (_29 = position.sheetId) !== null && _29 !== void 0 ? _29 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                case 11:
+                    _f = _g.apply(void 0, [_104.sent()]);
+                    return [3 /*break*/, 13];
+                case 12:
+                    _f = (_30 = seriesEntry.dataLabel) !== null && _30 !== void 0 ? _30 : "";
+                    _104.label = 13;
+                case 13:
+                    dataLabel = _f;
+                    values = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(sanitizeChartValue);
+                    threeDSeriesInputs.push({ name: dataLabel, values: values });
+                    _104.label = 14;
+                case 14:
+                    _e = _d.next();
+                    return [3 /*break*/, 10];
+                case 15: return [3 /*break*/, 18];
+                case 16:
+                    e_1_1 = _104.sent();
+                    e_1 = { error: e_1_1 };
+                    return [3 /*break*/, 18];
+                case 17:
+                    try {
+                        if (_e && !_e.done && (_y = _d.return)) _y.call(_d);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                    return [7 /*endfinally*/];
+                case 18:
+                    seriesNames_1 = threeDSeriesInputs.map(function (entry, index) { return entry.name || "Series ".concat(index + 1); });
+                    threeDPalette_1 = [
+                        theme.themeColors.accent1,
+                        theme.themeColors.accent2,
+                        theme.themeColors.accent3,
+                        theme.themeColors.accent4,
+                        theme.themeColors.accent5,
+                        theme.themeColors.accent6,
+                    ];
+                    seriesColorAt_1 = function (index) {
+                        var _a, _b, _c;
+                        return (_c = (_b = (_a = spec.series) === null || _a === void 0 ? void 0 : _a[index]) === null || _b === void 0 ? void 0 : _b.color) !== null && _c !== void 0 ? _c : threeDPalette_1[index % threeDPalette_1.length];
+                    };
+                    // Entering 3-D from a 2-D render: the cartesian option doesn't
+                    // merge into a grid3D one, so re-initialize the echarts instance
+                    // from scratch (theme options are re-applied after setOption).
+                    if (!renderedIn3D.current && chartRef.current) {
+                        chartRef.current.dispose();
+                        chartRef.current = undefined;
+                    }
+                    if (el.current && !chartRef.current) {
+                        chartRef.current = echarts.init(el.current);
+                    }
+                    categoryAxisLabel = function (value) { var _a; return Number.isInteger(value) ? (_a = categories_2[value]) !== null && _a !== void 0 ? _a : "" : ""; };
+                    seriesAxisLabel = function (value) { var _a; return Number.isInteger(value) ? (_a = seriesNames_1[value]) !== null && _a !== void 0 ? _a : "" : ""; };
+                    threeDTooltipFormatter = function (params) {
+                        var _a, _b, _c, _d, _e, _f, _g, _h;
+                        var value = ((_a = params === null || params === void 0 ? void 0 : params.value) !== null && _a !== void 0 ? _a : []);
+                        var categoryLabel = (_c = categories_2[Math.round((_b = value[0]) !== null && _b !== void 0 ? _b : 0)]) !== null && _c !== void 0 ? _c : String((_d = value[0]) !== null && _d !== void 0 ? _d : "");
+                        var seriesLabel = (_g = (_f = seriesNames_1[Math.round((_e = value[1]) !== null && _e !== void 0 ? _e : 0)]) !== null && _f !== void 0 ? _f : params === null || params === void 0 ? void 0 : params.seriesName) !== null && _g !== void 0 ? _g : "";
+                        return "".concat(seriesLabel ? "".concat(seriesLabel, "<br/>") : "").concat(categoryLabel, ": ").concat((_h = value[2]) !== null && _h !== void 0 ? _h : "");
+                    };
+                    threeDSeries = void 0;
+                    visualMap = void 0;
+                    xAxis3D = void 0;
+                    yAxis3D = void 0;
+                    if (threeDRenderKind === "bar3D") {
+                        xAxis3D = { type: "category", data: categories_2 };
+                        yAxis3D = { type: "category", data: seriesNames_1 };
+                        threeDSeries = [
+                            {
+                                type: "bar3D",
+                                shading: "lambert",
+                                data: (0, three_d_1.buildBar3DData)(threeDSeriesInputs).map(function (_a) {
+                                    var _b = tslib_1.__read(_a, 3), x = _b[0], y = _b[1], z = _b[2];
+                                    return ({
+                                        value: [x, y, z],
+                                        itemStyle: { color: seriesColorAt_1(y) },
+                                    });
+                                }),
+                            },
+                        ];
+                    }
+                    else if (threeDRenderKind === "line3D") {
+                        xAxis3D = {
+                            type: "value",
+                            axisLabel: { formatter: categoryAxisLabel },
+                            min: 0,
+                            max: Math.max(categories_2.length - 1, 1),
+                        };
+                        yAxis3D = {
+                            type: "value",
+                            axisLabel: { formatter: seriesAxisLabel },
+                            min: 0,
+                            max: Math.max(seriesNames_1.length - 1, 1),
+                        };
+                        threeDSeries = (0, three_d_1.buildLine3DSeries)(threeDSeriesInputs).map(function (entry, index) { return ({
+                            type: "line3D",
+                            name: seriesNames_1[index],
+                            data: entry.data,
+                            lineStyle: { width: 3, color: seriesColorAt_1(index) },
+                        }); });
+                    }
+                    else {
+                        surfacePoints = (0, three_d_1.buildSurfaceData)(threeDSeriesInputs);
+                        _h = tslib_1.__read((0, three_d_1.getValueExtent)(surfacePoints), 2), zMin = _h[0], zMax = _h[1];
+                        xAxis3D = {
+                            type: "value",
+                            axisLabel: { formatter: categoryAxisLabel },
+                            min: 0,
+                            max: Math.max(categories_2.length - 1, 1),
+                        };
+                        yAxis3D = {
+                            type: "value",
+                            axisLabel: { formatter: seriesAxisLabel },
+                            min: 0,
+                            max: Math.max(seriesNames_1.length - 1, 1),
+                        };
+                        threeDSeries = [
+                            {
+                                type: "surface",
+                                data: surfacePoints,
+                                wireframe: { show: true },
+                                shading: "color",
+                            },
+                        ];
+                        visualMap = {
+                            show: false,
+                            dimension: 2,
+                            min: zMin,
+                            max: zMax,
+                            seriesIndex: 0,
+                            inRange: { color: tslib_1.__spreadArray([], tslib_1.__read(three_d_1.SURFACE_COLOR_RAMP), false) },
+                        };
+                    }
+                    (_31 = chartRef.current) === null || _31 === void 0 ? void 0 : _31.setOption(tslib_1.__assign(tslib_1.__assign({ tooltip: {
+                            textStyle: { fontSize: 12 },
+                            formatter: threeDTooltipFormatter,
+                        }, legend: threeDRenderKind === "line3D"
+                            ? (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, defaultLegendConfig), { show: seriesNames_1.length > 1, data: seriesNames_1 }), spec.legend)
+                            : { show: false }, xAxis3D: tslib_1.__assign(tslib_1.__assign({}, xAxis3D), { name: (_32 = spec.horizontalAxisTitle) !== null && _32 !== void 0 ? _32 : "" }), yAxis3D: tslib_1.__assign(tslib_1.__assign({}, yAxis3D), { name: "" }), zAxis3D: { type: "value", name: (_33 = spec.verticalAxisTitle) !== null && _33 !== void 0 ? _33 : "" }, grid3D: {
+                            boxDepth: Math.max(20, Math.min(100, seriesNames_1.length * 20)),
+                            viewControl: { autoRotate: false },
+                        } }, (visualMap ? { visualMap: [visualMap] } : {})), { series: threeDSeries }), {
+                        replaceMerge: [
+                            "series",
+                            "xAxis3D",
+                            "yAxis3D",
+                            "zAxis3D",
+                            "visualMap",
+                            "legend",
+                            "tooltip",
+                        ],
+                    });
+                    // Re-apply theme-derived title / palette / tooltip colors — lost
+                    // when the instance was re-initialized on entry into 3-D.
+                    renderedIn3D.current = true;
+                    applyThemeOptions();
+                    previousChartType.current = spec.chartType;
+                    previousSeriesCount.current = threeDSeries.length;
+                    return [2 /*return*/];
+                case 19:
+                    // ---------------------------- Radar ----------------------------
+                    // Radar is polar: a top-level `radar.indicator` list (one axis per
+                    // category) plus one `radar`-type series carrying every data series'
+                    // value vector. radarStyle controls markers / filled area.
+                    if (spec.chartType === "radar") {
+                        skipHeaders = false;
+                        categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, skipHeaders);
+                        radarSeriesInputs = [];
+                        try {
+                            for (_j = tslib_1.__values((_34 = spec.series) !== null && _34 !== void 0 ? _34 : []), _k = _j.next(); !_k.done; _k = _j.next()) {
+                                seriesEntry = _k.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)); });
+                                radarSeriesInputs.push({ name: label, values: values });
+                            }
+                        }
+                        catch (e_3_1) { e_3 = { error: e_3_1 }; }
+                        finally {
+                            try {
+                                if (_k && !_k.done && (_z = _j.return)) _z.call(_j);
+                            }
+                            finally { if (e_3) throw e_3.error; }
+                        }
+                        indicators = (0, radar_1.buildRadarIndicators)(categories, radarSeriesInputs);
+                        radarData = (0, radar_1.buildRadarSeriesData)(radarSeriesInputs, indicators.length);
+                        radarStyle_1 = (_35 = spec.radarStyle) !== null && _35 !== void 0 ? _35 : "standard";
+                        radarColors_1 = radarSeriesInputs.map(function (_, i) { var _a, _b; return (_b = (_a = spec.series) === null || _a === void 0 ? void 0 : _a[i]) === null || _b === void 0 ? void 0 : _b.color; });
+                        radarSeriesLabel = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                        (_36 = chartRef.current) === null || _36 === void 0 ? void 0 : _36.setOption({
+                            radar: {
+                                indicator: indicators.length
+                                    ? indicators
+                                    : [{ name: "", max: 1 }],
+                            },
+                            legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, legend), { show: radarData.length > 1, data: radarData.map(function (d) { return d.name; }) }), spec.legend),
+                            tooltip: { trigger: "item" },
+                            series: [
+                                tslib_1.__assign(tslib_1.__assign({ type: "radar", symbol: radarStyle_1 === "standard" ? "none" : "circle" }, (radarSeriesLabel ? { label: radarSeriesLabel } : {})), { data: radarData.map(function (d, i) { return (tslib_1.__assign(tslib_1.__assign({ value: d.value, name: d.name }, (radarStyle_1 === "filled" ? { areaStyle: {} } : {})), (radarColors_1[i]
+                                        ? {
+                                            itemStyle: { color: radarColors_1[i] },
+                                            lineStyle: { color: radarColors_1[i] },
+                                        }
+                                        : {}))); }) }),
+                            ],
+                        }, {
+                            replaceMerge: [
+                                "series",
+                                "xAxis",
+                                "yAxis",
+                                "radar",
+                                "legend",
+                                "grid",
+                                "tooltip",
+                            ],
+                        });
+                        previousChartType.current = spec.chartType;
+                        previousSeriesCount.current = radarData.length;
+                        return [2 /*return*/];
+                    }
+                    // ---------------------------- Stock ----------------------------
+                    // Line-derived stock: fan the price-role series (open/high/low/close)
+                    // out into separate line series over the category (date) domain. The
+                    // V-variants additionally get a volume column sub-pane below the
+                    // price plot.
+                    if (spec.chartType === "stock") {
+                        variant = ((_37 = spec.stockVariant) !== null && _37 !== void 0 ? _37 : "HLC");
+                        categories = flattenChartDataValues(spec.domains, getDomainValuesFromRange, spec.hiddenDimensionStrategy, false).map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
+                        seriesValues = ((_38 = spec.series) !== null && _38 !== void 0 ? _38 : []).map(function (seriesEntry) {
+                            return flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
+                        });
+                        stockSeriesLabel_1 = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                        upColor_1 = theme.themeColors.accent1;
+                        downColor_1 = theme.themeColors.accent2;
+                        volumePoints = (0, stock_1.toVolumeSeries)(seriesValues, variant);
+                        hasVolume = ((_39 = volumePoints === null || volumePoints === void 0 ? void 0 : volumePoints.length) !== null && _39 !== void 0 ? _39 : 0) > 0;
+                        stockGrid = hasVolume
+                            ? [
+                                { left: "10%", right: "4%", top: "8%", height: "56%" },
+                                { left: "10%", right: "4%", top: "74%", height: "18%" },
+                            ]
+                            : [{ left: "3%", right: "4%", bottom: "3%", containLabel: true }];
+                        baseStockXAxis = (0, overrides_1.applyAxisOverrides)({
+                            type: "category",
+                            data: categories,
+                            show: true,
+                            axisLine: { show: true },
+                            axisTick: { show: true },
+                            splitLine: { show: false },
+                            name: (_40 = spec.horizontalAxisTitle) !== null && _40 !== void 0 ? _40 : "",
+                            nameLocation: "middle",
+                            nameGap: 30,
+                        }, spec.categoryAxisOptions);
+                        stockXAxis = hasVolume
+                            ? [
+                                tslib_1.__assign(tslib_1.__assign({}, baseStockXAxis), { gridIndex: 0, axisLabel: { show: false }, axisTick: { show: false }, name: "" }),
+                                tslib_1.__assign(tslib_1.__assign({}, baseStockXAxis), { gridIndex: 1 }),
+                            ]
+                            : [baseStockXAxis];
+                        volumeYAxis = {
+                            type: "value",
+                            gridIndex: 1,
+                            scale: true,
+                            splitNumber: 2,
+                            axisLabel: { show: false },
+                            axisLine: { show: false },
+                            axisTick: { show: false },
+                            splitLine: { show: false },
+                        };
+                        volumeSeries = hasVolume
+                            ? [
+                                {
+                                    type: "bar",
+                                    name: "Volume",
+                                    xAxisIndex: 1,
+                                    yAxisIndex: 1,
+                                    data: (volumePoints !== null && volumePoints !== void 0 ? volumePoints : []).map(function (p) { return ({
+                                        value: p.value,
+                                        itemStyle: { color: p.up ? upColor_1 : downColor_1 },
+                                    }); }),
+                                },
+                            ]
+                            : [];
+                        stockAxisPointer = {
+                            link: hasVolume ? [{ xAxisIndex: "all" }] : [],
+                        };
+                        // OHLC / VOHLC variants carry an `open`, so they render as a
+                        // candlestick (Excel's open-high-low-close stock chart). HLC / VHLC
+                        // (no open) fall through to the line-derived rendering below.
+                        if (variant === "OHLC" || variant === "VOHLC") {
+                            candleData = (0, stock_1.toCandlestick)(seriesValues, variant);
+                            (_41 = chartRef.current) === null || _41 === void 0 ? void 0 : _41.setOption({
+                                xAxis: stockXAxis,
+                                yAxis: tslib_1.__spreadArray([
+                                    (0, overrides_1.applyAxisOverrides)({
+                                        type: "value",
+                                        show: true,
+                                        scale: true,
+                                        name: (_42 = spec.verticalAxisTitle) !== null && _42 !== void 0 ? _42 : "",
+                                        nameLocation: "middle",
+                                        nameGap: 50,
+                                        gridIndex: 0,
+                                    }, spec.valueAxisOptions)
+                                ], tslib_1.__read((hasVolume ? [volumeYAxis] : [])), false),
+                                legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, legend), { show: false }), spec.legend),
+                                grid: stockGrid,
+                                tooltip: { trigger: "axis" },
+                                axisPointer: stockAxisPointer,
+                                series: tslib_1.__spreadArray([
+                                    {
+                                        type: "candlestick",
+                                        name: spec.title || "Stock",
+                                        data: candleData,
+                                        itemStyle: {
+                                            color: upColor_1,
+                                            color0: downColor_1,
+                                            borderColor: upColor_1,
+                                            borderColor0: downColor_1,
+                                        },
+                                    }
+                                ], tslib_1.__read(volumeSeries), false),
+                            }, {
+                                replaceMerge: [
+                                    "series",
+                                    "xAxis",
+                                    "yAxis",
+                                    "legend",
+                                    "grid",
+                                    "tooltip",
+                                ],
+                            });
+                            previousChartType.current = spec.chartType;
+                            previousSeriesCount.current = 1 + volumeSeries.length;
+                            return [2 /*return*/];
+                        }
+                        lineSeries = (0, stock_1.toLineSeries)(seriesValues, variant);
+                        stockColors_1 = [
+                            theme.themeColors.accent1,
+                            theme.themeColors.accent2,
+                            theme.themeColors.accent3,
+                            theme.themeColors.accent4,
+                        ];
+                        (_43 = chartRef.current) === null || _43 === void 0 ? void 0 : _43.setOption({
+                            xAxis: stockXAxis,
+                            yAxis: tslib_1.__spreadArray([
+                                (0, overrides_1.applyAxisOverrides)({
+                                    type: "value",
+                                    show: true,
+                                    name: (_44 = spec.verticalAxisTitle) !== null && _44 !== void 0 ? _44 : "",
+                                    nameLocation: "middle",
+                                    nameGap: 50,
+                                    gridIndex: 0,
+                                }, spec.valueAxisOptions)
+                            ], tslib_1.__read((hasVolume ? [volumeYAxis] : [])), false),
+                            legend: (0, overrides_1.applyLegendOverrides)(tslib_1.__assign(tslib_1.__assign({}, legend), { show: lineSeries.length > 1, data: lineSeries.map(function (s) { return s.name; }) }), spec.legend),
+                            grid: stockGrid,
+                            tooltip: { trigger: "axis" },
+                            axisPointer: stockAxisPointer,
+                            series: tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(lineSeries.map(function (s, i) { return (tslib_1.__assign({ type: "line", name: s.name, data: s.values, showSymbol: false, itemStyle: { color: stockColors_1[i % stockColors_1.length] }, lineStyle: { color: stockColors_1[i % stockColors_1.length] } }, (stockSeriesLabel_1 ? { label: stockSeriesLabel_1 } : {}))); })), false), tslib_1.__read(volumeSeries), false),
+                        }, {
+                            replaceMerge: [
+                                "series",
+                                "xAxis",
+                                "yAxis",
+                                "legend",
+                                "grid",
+                                "tooltip",
+                            ],
+                        });
+                        previousChartType.current = spec.chartType;
+                        previousSeriesCount.current = lineSeries.length + volumeSeries.length;
+                        return [2 /*return*/];
+                    }
+                    isStacked = spec.stackedType && spec.stackedType !== "UNSTACKED";
+                    isCircularChart = spec.chartType === "pie" || spec.chartType === "doughnut";
+                    isOfPie = isCircularChart && (0, of_pie_1.isOfPieChartSpec)(spec);
+                    ofPieLayout = null;
+                    isHorizontalBarChart = spec.chartType === "bar";
+                    shouldAggregate = (0, aggregation_1.shouldAggregateSeries)(spec.series);
+                    primaryDomainSource = (_47 = (_46 = (_45 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _45 === void 0 ? void 0 : _45[0]) === null || _46 === void 0 ? void 0 : _46.sources) === null || _47 === void 0 ? void 0 : _47[0];
+                    rawPrimaryDomainValues = primaryDomainSource
+                        ? (0, aggregation_1.sanitizeDomainValues)((_48 = getDomainValuesFromRange(primaryDomainSource, spec.hiddenDimensionStrategy)) !== null && _48 !== void 0 ? _48 : [])
+                        : [];
+                    aggregateDomainValues = (0, aggregation_1.getDomainValuesForAxis)(rawPrimaryDomainValues, shouldAggregate);
+                    (_49 = spec.domains) === null || _49 === void 0 ? void 0 : _49.forEach(function (domain, domainIndex) {
+                        domain.sources.forEach(function (sheetRange, sourceIndex) {
+                            var _a, _b, _c;
+                            var axisData = [];
+                            if (domainIndex === 0 && sourceIndex === 0) {
+                                axisData = aggregateDomainValues;
+                            }
+                            else {
+                                var rawValues = (0, aggregation_1.sanitizeDomainValues)((_a = getDomainValuesFromRange(sheetRange, spec.hiddenDimensionStrategy)) !== null && _a !== void 0 ? _a : []);
+                                axisData = (0, aggregation_1.getDomainValuesForAxis)(rawValues, shouldAggregate);
+                            }
+                            var axisTitle = domainIndex === 0 && sourceIndex === 0 && !isCircularChart
+                                ? isHorizontalBarChart
+                                    ? (_b = spec.verticalAxisTitle) !== null && _b !== void 0 ? _b : ""
+                                    : (_c = spec.horizontalAxisTitle) !== null && _c !== void 0 ? _c : ""
+                                : undefined;
+                            chartDomains.push({
+                                type: "category",
+                                data: axisData,
+                                show: showAxis && !isCircularChart,
+                                axisLine: { show: !isCircularChart },
+                                axisTick: { show: !isCircularChart },
+                                splitLine: { show: !isCircularChart },
+                                name: axisTitle,
+                                nameLocation: "middle",
+                                nameGap: 30,
+                            });
+                        });
+                    });
+                    if (chartDomains.length === 0 && !isCircularChart) {
+                        chartDomains.push({
+                            type: "category",
+                            show: showAxis,
+                            axisLine: { show: true },
+                            axisTick: { show: true },
+                            splitLine: { show: true },
+                            gridIndex: 0,
+                            name: isHorizontalBarChart
+                                ? (_50 = spec.verticalAxisTitle) !== null && _50 !== void 0 ? _50 : ""
+                                : (_51 = spec.horizontalAxisTitle) !== null && _51 !== void 0 ? _51 : "",
+                            nameLocation: "middle",
+                            nameGap: 30,
+                        });
+                    }
+                    pushSeriesOverlays = function (series, data, dataLabel) {
+                        var e_9, _a;
+                        var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+                        var numericValues = Array.isArray(data)
+                            ? data.map(function (v) {
+                                return typeof v === "number"
+                                    ? v
+                                    : v && typeof v === "object" && "value" in v
+                                        ? v.value
+                                        : Number(v);
+                            })
+                            : [];
+                        if (numericValues.length === 0)
+                            return;
+                        var seriesColor = (_b = series.color) !== null && _b !== void 0 ? _b : theme.themeColors.accent1;
+                        var useSecondary = series.useSecondaryAxis ? { yAxisIndex: 1 } : {};
+                        try {
+                            // Trendlines — one overlay line series per spec.
+                            for (var _m = tslib_1.__values((_c = series.trendlines) !== null && _c !== void 0 ? _c : []), _o = _m.next(); !_o.done; _o = _m.next()) {
+                                var tl = _o.value;
+                                var result = (0, trendline_1.computeTrendline)(numericValues, {
+                                    type: tl.type,
+                                    order: tl.order,
+                                    period: tl.period,
+                                    forecastForward: tl.forecastForward,
+                                    forecastBackward: tl.forecastBackward,
+                                });
+                                if (!result || result.points.length < 2)
+                                    continue;
+                                var tlName = (_d = tl.name) !== null && _d !== void 0 ? _d : "".concat(dataLabel ? dataLabel + " " : "").concat((_e = tl.type) !== null && _e !== void 0 ? _e : "linear", " trend");
+                                chartSeries.push(tslib_1.__assign({ type: "line", name: tlName, 
+                                    // Index x lets the trendline overlay the category axis even
+                                    // when forecasting extends beyond the data range.
+                                    data: result.points.map(function (p) { return [p.x, p.y]; }), showSymbol: false, smooth: tl.type === "poly", lineStyle: {
+                                        color: (_f = tl.color) !== null && _f !== void 0 ? _f : seriesColor,
+                                        type: "dashed",
+                                        width: 2,
+                                    }, itemStyle: { color: (_g = tl.color) !== null && _g !== void 0 ? _g : seriesColor }, tooltip: { show: false }, z: 5 }, useSecondary));
+                            }
+                        }
+                        catch (e_9_1) { e_9 = { error: e_9_1 }; }
+                        finally {
+                            try {
+                                if (_o && !_o.done && (_a = _m.return)) _a.call(_m);
+                            }
+                            finally { if (e_9) throw e_9.error; }
+                        }
+                        // Error bars — drawn as a custom series of vertical/horizontal
+                        // whiskers. 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)(numericValues, (0, error_bars_1.resolveCustomErrorBarValues)(series.errorBars, function (range) {
+                            return getSeriesValuesFromRange(range, spec.hiddenDimensionStrategy);
+                        }));
+                        if (magnitudes) {
+                            var direction_1 = (_j = (_h = series.errorBars) === null || _h === void 0 ? void 0 : _h.direction) !== null && _j !== void 0 ? _j : "y";
+                            var noEndCap_1 = (_l = (_k = series.errorBars) === null || _k === void 0 ? void 0 : _k.noEndCap) !== null && _l !== void 0 ? _l : false;
+                            var errorData = numericValues.map(function (v, i) {
+                                var _a, _b;
+                                return [
+                                    i,
+                                    typeof v === "number" ? v : 0,
+                                    (_a = magnitudes.plus[i]) !== null && _a !== void 0 ? _a : 0,
+                                    (_b = magnitudes.minus[i]) !== null && _b !== void 0 ? _b : 0,
+                                ];
+                            });
+                            chartSeries.push(tslib_1.__assign(tslib_1.__assign({ type: "custom", name: "".concat(dataLabel ? dataLabel + " " : "", "error"), data: errorData, z: 6, tooltip: { show: false } }, useSecondary), { renderItem: function (_params, api) {
+                                    var value = api.value(1);
+                                    var plus = api.value(2);
+                                    var minus = api.value(3);
+                                    var capHalf = 5;
+                                    if (direction_1 === "x") {
+                                        var center_1 = api.coord([value, api.value(0)]);
+                                        var hi_1 = api.coord([value + plus, api.value(0)]);
+                                        var lo_1 = api.coord([value - minus, api.value(0)]);
+                                        var children_1 = [
+                                            {
+                                                type: "line",
+                                                shape: { x1: lo_1[0], y1: center_1[1], x2: hi_1[0], y2: center_1[1] },
+                                                style: { stroke: seriesColor, lineWidth: 1 },
+                                            },
+                                        ];
+                                        if (!noEndCap_1) {
+                                            children_1.push({
+                                                type: "line",
+                                                shape: {
+                                                    x1: hi_1[0],
+                                                    y1: center_1[1] - capHalf,
+                                                    x2: hi_1[0],
+                                                    y2: center_1[1] + capHalf,
+                                                },
+                                                style: { stroke: seriesColor, lineWidth: 1 },
+                                            }, {
+                                                type: "line",
+                                                shape: {
+                                                    x1: lo_1[0],
+                                                    y1: center_1[1] - capHalf,
+                                                    x2: lo_1[0],
+                                                    y2: center_1[1] + capHalf,
+                                                },
+                                                style: { stroke: seriesColor, lineWidth: 1 },
+                                            });
+                                        }
+                                        return { type: "group", children: children_1 };
+                                    }
+                                    var center = api.coord([api.value(0), value]);
+                                    var hi = api.coord([api.value(0), value + plus]);
+                                    var lo = api.coord([api.value(0), value - minus]);
+                                    var children = [
+                                        {
+                                            type: "line",
+                                            shape: { x1: center[0], y1: lo[1], x2: center[0], y2: hi[1] },
+                                            style: { stroke: seriesColor, lineWidth: 1 },
+                                        },
+                                    ];
+                                    if (!noEndCap_1) {
+                                        children.push({
+                                            type: "line",
+                                            shape: {
+                                                x1: center[0] - capHalf,
+                                                y1: hi[1],
+                                                x2: center[0] + capHalf,
+                                                y2: hi[1],
+                                            },
+                                            style: { stroke: seriesColor, lineWidth: 1 },
+                                        }, {
+                                            type: "line",
+                                            shape: {
+                                                x1: center[0] - capHalf,
+                                                y1: lo[1],
+                                                x2: center[0] + capHalf,
+                                                y2: lo[1],
+                                            },
+                                            style: { stroke: seriesColor, lineWidth: 1 },
+                                        });
+                                    }
+                                    return { type: "group", children: children };
+                                } }));
+                        }
+                    };
+                    sideBySideBarCount = isStacked
+                        ? 1
+                        : ((_52 = spec.series) !== null && _52 !== void 0 ? _52 : []).reduce(function (count, s) {
+                            var _a, _b, _c;
+                            var seriesType = (_a = s.seriesChartType) !== null && _a !== void 0 ? _a : spec.chartType;
+                            return seriesType === "bar" || seriesType === "column"
+                                ? count + Math.max(1, (_c = (_b = s.sources) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0)
+                                : count;
+                        }, 0);
+                    specBarGap = (0, bar_layout_1.overlapToBarGap)(spec.overlap);
+                    specBarCategoryGap = (0, bar_layout_1.gapWidthToBarCategoryGap)(spec.gapWidth, {
+                        seriesCount: sideBySideBarCount,
+                        overlap: isStacked ? 0 : spec.overlap,
+                    });
+                    _104.label = 20;
+                case 20:
+                    _104.trys.push([20, 27, 28, 29]);
+                    _l = tslib_1.__values((_53 = spec.series) !== null && _53 !== void 0 ? _53 : []), _m = _l.next();
+                    _104.label = 21;
+                case 21:
+                    if (!!_m.done) return [3 /*break*/, 26];
+                    series = _m.value;
+                    if (!(!(0, utils_1.isNil)(series.dataLabel) && (0, utils_1.isAFormula)(series.dataLabel))) return [3 /*break*/, 23];
+                    _p = chart_spec_utils_1.coerceCalculatedLabel;
+                    return [4 /*yield*/, onRequestCalculate(series.dataLabel, (_54 = position.sheetId) !== null && _54 !== void 0 ? _54 : sheetId, position.overlayPosition.anchorCell.rowIndex, position.overlayPosition.anchorCell.columnIndex)];
+                case 22:
+                    _o = _p.apply(void 0, [_104.sent()]);
+                    return [3 /*break*/, 24];
+                case 23:
+                    _o = (_55 = series.dataLabel) !== null && _55 !== void 0 ? _55 : "";
+                    _104.label = 24;
+                case 24:
+                    dataLabel = _o;
+                    // Label
+                    if (dataLabel) {
+                        (_56 = legend.data) === null || _56 === void 0 ? void 0 : _56.push(dataLabel);
+                    }
+                    _loop_1 = function (sheetRange) {
+                        var e_10, _105;
+                        var data = getSeriesData(spec, sheetRange, {
+                            aggregateEnabled: shouldAggregate,
+                            aggregateType: series.aggregateType,
+                            rawDomainValues: rawPrimaryDomainValues,
+                            orderedDomainValues: aggregateDomainValues,
+                        });
+                        // Support per-series chart type for combo charts
+                        var effectiveChartType = (_57 = series.seriesChartType) !== null && _57 !== void 0 ? _57 : spec.chartType;
+                        var seriesEchartsType = (0, helpers_1.chartTypeToEchartsType)(effectiveChartType);
+                        var seriesStyleAttrs = (0, helpers_1.getEchartsSeriesStyle)(effectiveChartType);
+                        var seriesEntry = tslib_1.__assign({ type: seriesEchartsType, name: dataLabel, data: data, stack: isStacked ? "dataLabel" : undefined, smooth: (_58 = spec.smooth) !== null && _58 !== void 0 ? _58 : undefined, radius: (_59 = spec.radius) !== null && _59 !== void 0 ? _59 : (isCircularChart ? [0, "75%"] : undefined) }, seriesStyleAttrs);
+                        // Plot this series against a secondary value axis. The 2nd
+                        // yAxis element is appended below (when any series opts in);
+                        // here we point the series at index 1.
+                        if (series.useSecondaryAxis) {
+                            seriesEntry.yAxisIndex = 1;
+                        }
+                        // Handle invertIfNegative for bar/column charts
+                        var isBarOrColumn = effectiveChartType === "bar" || effectiveChartType === "column";
+                        // Bar layout (overlap/gapWidth) — echarts reads barGap /
+                        // barCategoryGap from bar series (the last bar series wins for
+                        // the whole coordinate system), so apply them to every
+                        // bar/column series. Set before the gradient/noFill branches so
+                        // every push path carries them.
+                        if (isBarOrColumn) {
+                            if (specBarGap !== undefined) {
+                                seriesEntry.barGap = specBarGap;
+                            }
+                            if (specBarCategoryGap !== undefined) {
+                                seriesEntry.barCategoryGap = specBarCategoryGap;
+                            }
+                        }
+                        var seriesAny = series;
+                        // Gradient fill — overrides solid color when present. echarts
+                        // paints it natively via a LinearGradient on itemStyle.color
+                        // (and areaStyle for area series / lineStyle for lines).
+                        var gradientArgs = (0, gradient_1.gradientToEcharts)(series.gradient);
+                        if (gradientArgs && !seriesAny.noFill) {
+                            var gradient = new echarts.graphic.LinearGradient(gradientArgs.x, gradientArgs.y, gradientArgs.x2, gradientArgs.y2, gradientArgs.colorStops);
+                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_60 = seriesEntry.itemStyle) !== null && _60 !== void 0 ? _60 : {})), { color: gradient });
+                            if (effectiveChartType === "area") {
+                                seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_61 = seriesEntry.areaStyle) !== null && _61 !== void 0 ? _61 : {})), { color: gradient });
+                            }
+                            chartSeries.push(seriesEntry);
+                            pushSeriesOverlays(series, data, dataLabel);
+                            return "continue";
+                        }
+                        if (seriesAny.noFill) {
+                            // Transparent series (Gantt lag offset, etc.) — fill it
+                            // with `transparent` so layout is preserved but nothing
+                            // paints. Legend entries are also suppressed via `name: ""`
+                            // since the series carries no semantic information.
+                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_62 = seriesEntry.itemStyle) !== null && _62 !== void 0 ? _62 : {})), { color: "transparent", borderColor: "transparent" });
+                        }
+                        else if (isBarOrColumn &&
+                            Array.isArray(seriesAny.dataPointColors) &&
+                            seriesAny.dataPointColors.length) {
+                            // Per-data-point color overrides — Gantt-style charts colour
+                            // each task differently via `<c:dPt>`. Echarts accepts an
+                            // `itemStyle.color` function that receives the data index;
+                            // we look up the override or fall back to the series color.
+                            var overrides_2 = new Map();
+                            try {
+                                for (var _106 = (e_10 = void 0, tslib_1.__values(seriesAny.dataPointColors)), _107 = _106.next(); !_107.done; _107 = _106.next()) {
+                                    var dp = _107.value;
+                                    if (typeof dp.idx === "number" && typeof dp.color === "string") {
+                                        overrides_2.set(dp.idx, dp.color);
+                                    }
+                                }
+                            }
+                            catch (e_10_1) { e_10 = { error: e_10_1 }; }
+                            finally {
+                                try {
+                                    if (_107 && !_107.done && (_105 = _106.return)) _105.call(_106);
+                                }
+                                finally { if (e_10) throw e_10.error; }
+                            }
+                            var fallback_1 = (_63 = series.color) !== null && _63 !== void 0 ? _63 : theme.themeColors.accent1;
+                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_64 = seriesEntry.itemStyle) !== null && _64 !== void 0 ? _64 : {})), { color: function (params) { var _a; return (_a = overrides_2.get(params.dataIndex)) !== null && _a !== void 0 ? _a : fallback_1; } });
+                        }
+                        else if (isBarOrColumn && series.invertIfNegative) {
+                            var positiveColor_1 = (_65 = series.color) !== null && _65 !== void 0 ? _65 : theme.themeColors.accent1;
+                            var negativeColor_1 = (_66 = series.negativeColor) !== null && _66 !== void 0 ? _66 : "#FF0000";
+                            // Use a color function that returns different colors based on value
+                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_67 = seriesEntry.itemStyle) !== null && _67 !== void 0 ? _67 : {})), { color: function (params) {
+                                    var _a, _b;
+                                    var value = Array.isArray(params.data)
+                                        ? params.data[1]
+                                        : (_b = (_a = params.data) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : params.data;
+                                    return typeof value === "number" && value < 0
+                                        ? negativeColor_1
+                                        : positiveColor_1;
+                                } });
+                        }
+                        else if (series.color) {
+                            seriesEntry.itemStyle = tslib_1.__assign(tslib_1.__assign({}, ((_68 = seriesEntry.itemStyle) !== null && _68 !== void 0 ? _68 : {})), { color: series.color });
+                            seriesEntry.lineStyle = tslib_1.__assign(tslib_1.__assign({}, ((_69 = seriesEntry.lineStyle) !== null && _69 !== void 0 ? _69 : {})), { color: series.color });
+                            if (effectiveChartType === "area") {
+                                seriesEntry.areaStyle = tslib_1.__assign(tslib_1.__assign({}, ((_70 = seriesEntry.areaStyle) !== null && _70 !== void 0 ? _70 : {})), { color: series.color });
+                            }
+                        }
+                        chartSeries.push(seriesEntry);
+                        pushSeriesOverlays(series, data, dataLabel);
+                    };
+                    try {
+                        for (_q = (e_4 = void 0, tslib_1.__values(series.sources)), _r = _q.next(); !_r.done; _r = _q.next()) {
+                            sheetRange = _r.value;
+                            _loop_1(sheetRange);
+                        }
+                    }
+                    catch (e_4_1) { e_4 = { error: e_4_1 }; }
+                    finally {
+                        try {
+                            if (_r && !_r.done && (_1 = _q.return)) _1.call(_q);
+                        }
+                        finally { if (e_4) throw e_4.error; }
+                    }
+                    _104.label = 25;
+                case 25:
+                    _m = _l.next();
+                    return [3 /*break*/, 21];
+                case 26: return [3 /*break*/, 29];
+                case 27:
+                    e_2_1 = _104.sent();
+                    e_2 = { error: e_2_1 };
+                    return [3 /*break*/, 29];
+                case 28:
+                    try {
+                        if (_m && !_m.done && (_0 = _l.return)) _0.call(_l);
+                    }
+                    finally { if (e_2) throw e_2.error; }
+                    return [7 /*endfinally*/];
+                case 29:
+                    if (isOfPie) {
+                        labels = rawPrimaryDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
+                        seriesEntry = (_71 = spec.series) === null || _71 === void 0 ? void 0 : _71[0];
+                        rawValues = seriesEntry
+                            ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
+                            : [];
+                        _s = (0, of_pie_1.splitOfPie)(rawValues, labels, {
+                            splitType: spec.splitType,
+                            splitPos: spec.splitPos,
+                        }), main_1 = _s.main, secondary = _s.secondary, otherTotal = _s.otherTotal, total = _s.total;
+                        ofPieType_1 = (0, of_pie_1.resolveOfPieType)(spec.ofPieType);
+                        secondScale = (0, of_pie_1.clampSecondPieSize)(spec.secondPieSize) / 100;
+                        halfAngle_1 = (0, of_pie_1.otherSliceHalfAngle)(otherTotal, total);
+                        hasSecondary = secondary.length > 0;
+                        MAIN_CX_1 = 0.3;
+                        CY_1 = 0.5;
+                        MAIN_RADIUS_PCT_1 = 55;
+                        SECONDARY_CX_1 = 0.78;
+                        secondaryRadiusPct_1 = Math.min(80, MAIN_RADIUS_PCT_1 * secondScale);
+                        BAR_LEFT_1 = 0.68;
+                        BAR_RIGHT = 0.88;
+                        barHalfFrac_1 = Math.min(0.45, Math.max(0.08, 0.28 * secondScale));
+                        ofPieLayout = {
+                            ofPieType: ofPieType_1,
+                            hasSecondary: hasSecondary,
+                            barGrid: ofPieType_1 === "bar" && hasSecondary
+                                ? {
+                                    left: "".concat(BAR_LEFT_1 * 100, "%"),
+                                    right: "".concat((1 - BAR_RIGHT) * 100, "%"),
+                                    top: "".concat((CY_1 - barHalfFrac_1) * 100, "%"),
+                                    bottom: "".concat((1 - CY_1 - barHalfFrac_1) * 100, "%"),
+                                }
+                                : undefined,
+                        };
+                        chartDomains.length = 0;
+                        chartSeries.length = 0;
+                        ofPiePalette_1 = [
+                            theme.themeColors.accent1,
+                            theme.themeColors.accent2,
+                            theme.themeColors.accent3,
+                            theme.themeColors.accent4,
+                            theme.themeColors.accent5,
+                            theme.themeColors.accent6,
+                        ];
+                        paletteAt_1 = function (index) {
+                            return ofPiePalette_1[index % ofPiePalette_1.length];
+                        };
+                        chartSeries.push({
+                            type: "pie",
+                            name: (_72 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _72 !== void 0 ? _72 : "",
+                            center: ["".concat(MAIN_CX_1 * 100, "%"), "".concat(CY_1 * 100, "%")],
+                            radius: [0, "".concat(MAIN_RADIUS_PCT_1, "%")],
+                            // Rotate the pie so the "Other" slice's angular midpoint faces
+                            // the secondary plot (Excel's layout). Slices sweep clockwise
+                            // and Other is last, ending the sweep at startAngle; putting
+                            // the midpoint at 0° (3 o'clock) needs startAngle 360 - 180f.
+                            startAngle: 360 - (halfAngle_1 * 180) / Math.PI,
+                            data: main_1.map(function (s, i) { return ({
+                                name: s.label,
+                                value: s.value,
+                                itemStyle: { color: paletteAt_1(i) },
+                            }); }),
+                        });
+                        if (hasSecondary) {
+                            if (ofPieType_1 === "pie") {
+                                chartSeries.push({
+                                    type: "pie",
+                                    name: (_73 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _73 !== void 0 ? _73 : "",
+                                    center: ["".concat(SECONDARY_CX_1 * 100, "%"), "".concat(CY_1 * 100, "%")],
+                                    radius: [0, "".concat(secondaryRadiusPct_1, "%")],
+                                    data: secondary.map(function (s, i) { return ({
+                                        name: s.label,
+                                        value: s.value,
+                                        itemStyle: { color: paletteAt_1(main_1.length + i) },
+                                    }); }),
+                                });
+                            }
+                            else {
+                                // Bar-of-pie — a single-category stacked bar on the second
+                                // grid, one series per point so each segment keeps its own
+                                // color, legend entry and tooltip.
+                                secondary.forEach(function (s, i) {
+                                    chartSeries.push({
+                                        type: "bar",
+                                        name: s.label,
+                                        stack: "rnc-of-pie-secondary",
+                                        xAxisIndex: 1,
+                                        yAxisIndex: 1,
+                                        barWidth: "75%",
+                                        data: [s.value],
+                                        itemStyle: { color: paletteAt_1(main_1.length + i) },
+                                        tooltip: { formatter: "{a}: {c}" },
+                                    });
+                                });
+                            }
+                            connectorColor_1 = isDarkMode
+                                ? "rgba(255,255,255,0.45)"
+                                : "#999999";
+                            chartSeries.push({
+                                type: "custom",
+                                name: "",
+                                silent: true,
+                                animation: false,
+                                tooltip: { show: false },
+                                z: 1,
+                                data: [[0, 0]],
+                                renderItem: function (params) {
+                                    var _a, _b, _c, _d, _e;
+                                    var cs = (_a = params === null || params === void 0 ? void 0 : params.coordSys) !== null && _a !== void 0 ? _a : {};
+                                    var width = (_b = cs.width) !== null && _b !== void 0 ? _b : 0;
+                                    var height = (_c = cs.height) !== null && _c !== void 0 ? _c : 0;
+                                    if (!(width > 0) || !(height > 0)) {
+                                        return { type: "group", children: [] };
+                                    }
+                                    var x0 = (_d = cs.x) !== null && _d !== void 0 ? _d : 0;
+                                    var y0 = (_e = cs.y) !== null && _e !== void 0 ? _e : 0;
+                                    var r = ((MAIN_RADIUS_PCT_1 / 100) * Math.min(width, height)) / 2;
+                                    var cx = x0 + MAIN_CX_1 * width;
+                                    var cy = y0 + CY_1 * height;
+                                    // Boundary points of the Other slice on the main circle —
+                                    // ±halfAngle around 3 o'clock (screen y grows downwards).
+                                    var px = cx + r * Math.cos(halfAngle_1);
+                                    var pyTop = cy - r * Math.sin(halfAngle_1);
+                                    var pyBottom = cy + r * Math.sin(halfAngle_1);
+                                    var tx;
+                                    var tyTop;
+                                    var tyBottom;
+                                    if (ofPieType_1 === "pie") {
+                                        var r2 = ((secondaryRadiusPct_1 / 100) * Math.min(width, height)) / 2;
+                                        tx = x0 + SECONDARY_CX_1 * width;
+                                        tyTop = cy - r2;
+                                        tyBottom = cy + r2;
+                                    }
+                                    else {
+                                        tx = x0 + BAR_LEFT_1 * width;
+                                        tyTop = y0 + (CY_1 - barHalfFrac_1) * height;
+                                        tyBottom = y0 + (CY_1 + barHalfFrac_1) * height;
+                                    }
+                                    var style = { stroke: connectorColor_1, lineWidth: 1 };
+                                    return {
+                                        type: "group",
+                                        children: [
+                                            {
+                                                type: "line",
+                                                shape: { x1: px, y1: pyTop, x2: tx, y2: tyTop },
+                                                style: style,
+                                            },
+                                            {
+                                                type: "line",
+                                                shape: { x1: px, y1: pyBottom, x2: tx, y2: tyBottom },
+                                                style: style,
+                                            },
+                                        ],
+                                    };
+                                },
+                            });
+                        }
+                        // Legend lists every category (main + secondary); the Other slice
+                        // only exists in the main pie.
+                        legend.data = tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read(main_1.map(function (s) { return s.label; })), false), tslib_1.__read(secondary.map(function (s) { return s.label; })), false);
+                    }
+                    else if (spec.chartType === "waterfall") {
+                        primaryDomainSource_1 = (_76 = (_75 = (_74 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _74 === void 0 ? void 0 : _74[0]) === null || _75 === void 0 ? void 0 : _75.sources) === null || _76 === void 0 ? void 0 : _76[0];
+                        rawDomainValues = primaryDomainSource_1
+                            ? (0, aggregation_1.sanitizeDomainValues)((_77 = getDomainValuesFromRange(primaryDomainSource_1, spec.hiddenDimensionStrategy)) !== null && _77 !== void 0 ? _77 : [])
+                            : [];
+                        labels = rawDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
+                        seriesEntry = (_78 = spec.series) === null || _78 === void 0 ? void 0 : _78[0];
+                        rawValues_1 = seriesEntry
+                            ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); })
+                            : [];
+                        totalIndices = new Set((_79 = spec.totalIndices) !== null && _79 !== void 0 ? _79 : []);
+                        steps = (0, waterfall_1.computeWaterfall)(rawValues_1, labels, totalIndices);
+                        chartDomains.length = 0;
+                        chartDomains.push({
+                            type: "category",
+                            data: steps.map(function (s) { return s.label; }),
+                            show: showAxis,
+                            axisLine: { show: true },
+                            axisTick: { show: true },
+                            splitLine: { show: false },
+                            name: (_80 = spec.horizontalAxisTitle) !== null && _80 !== void 0 ? _80 : "",
+                            nameLocation: "middle",
+                            nameGap: 30,
+                        });
+                        chartSeries.length = 0;
+                        chartSeries.push({
+                            type: "bar",
+                            stack: "waterfall",
+                            itemStyle: { color: "transparent" },
+                            emphasis: { itemStyle: { color: "transparent" } },
+                            data: steps.map(function (s) { return s.placeholder; }),
+                            silent: true,
+                        });
+                        accent_1 = (_81 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.color) !== null && _81 !== void 0 ? _81 : theme.themeColors.accent1;
+                        decreaseColor_1 = (_83 = (_82 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.negativeColor) !== null && _82 !== void 0 ? _82 : theme.themeColors.accent2) !== null && _83 !== void 0 ? _83 : accent_1;
+                        totalColor_1 = (_84 = theme.themeColors.accent3) !== null && _84 !== void 0 ? _84 : accent_1;
+                        connectors = steps.slice(0, -1).map(function (s, i) { return [
+                            { coord: [i, s.cumulative] },
+                            { coord: [i + 1, s.cumulative] },
+                        ]; });
+                        chartSeries.push({
+                            type: "bar",
+                            stack: "waterfall",
+                            name: (_85 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _85 !== void 0 ? _85 : "",
+                            data: steps.map(function (s, i) { return ({
+                                value: s.value,
+                                itemStyle: {
+                                    color: s.isTotal
+                                        ? totalColor_1
+                                        : rawValues_1[i] < 0
+                                            ? decreaseColor_1
+                                            : accent_1,
+                                },
+                            }); }),
+                            markLine: {
+                                silent: true,
+                                symbol: "none",
+                                animation: false,
+                                label: { show: false },
+                                lineStyle: {
+                                    color: isDarkMode ? "rgba(255,255,255,0.45)" : "#999999",
+                                    width: 1,
+                                    type: "solid",
+                                },
+                                data: connectors,
+                            },
+                        });
+                        legend.data = [];
+                    }
+                    else if (spec.chartType === "funnel") {
+                        primaryDomainSource_2 = (_88 = (_87 = (_86 = spec === null || spec === void 0 ? void 0 : spec.domains) === null || _86 === void 0 ? void 0 : _86[0]) === null || _87 === void 0 ? void 0 : _87.sources) === null || _88 === void 0 ? void 0 : _88[0];
+                        rawDomainValues = primaryDomainSource_2
+                            ? (0, aggregation_1.sanitizeDomainValues)((_89 = getDomainValuesFromRange(primaryDomainSource_2, spec.hiddenDimensionStrategy)) !== null && _89 !== void 0 ? _89 : [])
+                            : [];
+                        labels_1 = rawDomainValues.map(function (v) { return String(v !== null && v !== void 0 ? v : ""); });
+                        seriesEntry = (_90 = spec.series) === null || _90 === void 0 ? void 0 : _90[0];
+                        rawValues = seriesEntry
+                            ? flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : 0); })
+                            : [];
+                        chartDomains.length = 0;
+                        chartSeries.length = 0;
+                        chartSeries.push({
+                            type: "funnel",
+                            name: (_91 = seriesEntry === null || seriesEntry === void 0 ? void 0 : seriesEntry.dataLabel) !== null && _91 !== void 0 ? _91 : "",
+                            data: rawValues.map(function (value, i) {
+                                var _a;
+                                return ({
+                                    name: (_a = labels_1[i]) !== null && _a !== void 0 ? _a : String(i),
+                                    value: value,
+                                });
+                            }),
+                            label: { show: true, position: "inside" },
+                        });
+                        legend.data = [];
+                    }
+                    else if (spec.chartType === "boxplot") {
+                        quartileMethod = spec.quartileMethod;
+                        showOutliers = spec.showOutliers;
+                        showMeanMarker = spec.showMeanMarker === true;
+                        boxStats = [];
+                        boxLabels = [];
+                        outlierPoints = [];
+                        meanPoints = [];
+                        try {
+                            for (_t = tslib_1.__values((_92 = spec.series) !== null && _92 !== void 0 ? _92 : []), _u = _t.next(); !_u.done; _u = _t.next()) {
+                                seriesEntry = _u.value;
+                                label = seriesEntry.dataLabel && !(0, utils_1.isAFormula)(seriesEntry.dataLabel)
+                                    ? seriesEntry.dataLabel
+                                    : "";
+                                rawValues = flattenChartDataValues([seriesEntry], getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
+                                summary = (0, boxplot_1.computeBoxplotSummary)(rawValues, { quartileMethod: quartileMethod });
+                                if (summary) {
+                                    boxIndex = boxStats.length;
+                                    lo = showOutliers === true ? summary.lowerWhisker : summary.min;
+                                    hi = showOutliers === true ? summary.upperWhisker : summary.max;
+                                    boxStats.push([lo, summary.q1, summary.median, summary.q3, hi]);
+                                    boxLabels.push(label);
+                                    if (showOutliers === true) {
+                                        try {
+                                            for (_v = (e_6 = void 0, tslib_1.__values(summary.outliers)), _w = _v.next(); !_w.done; _w = _v.next()) {
+                                                outlier = _w.value;
+                                                outlierPoints.push([boxIndex, outlier]);
+                                            }
+                                        }
+                                        catch (e_6_1) { e_6 = { error: e_6_1 }; }
+                                        finally {
+                                            try {
+                                                if (_w && !_w.done && (_3 = _v.return)) _3.call(_v);
+                                            }
+                                            finally { if (e_6) throw e_6.error; }
+                                        }
+                                    }
+                                    if (showMeanMarker) {
+                                        meanPoints.push([boxIndex, summary.mean]);
+                                    }
+                                }
+                            }
+                        }
+                        catch (e_5_1) { e_5 = { error: e_5_1 }; }
+                        finally {
+                            try {
+                                if (_u && !_u.done && (_2 = _t.return)) _2.call(_t);
+                            }
+                            finally { if (e_5) throw e_5.error; }
+                        }
+                        chartDomains.length = 0;
+                        chartDomains.push({
+                            type: "category",
+                            data: boxLabels,
+                            show: showAxis,
+                            axisLine: { show: true },
+                            axisTick: { show: true },
+                            splitLine: { show: false },
+                            name: (_93 = spec.horizontalAxisTitle) !== null && _93 !== void 0 ? _93 : "",
+                            nameLocation: "middle",
+                            nameGap: 30,
+                        });
+                        chartSeries.length = 0;
+                        boxSeries = {
+                            type: "boxplot",
+                            name: "",
+                            data: boxStats,
+                        };
+                        boxColor = (_95 = (_94 = spec.series) === null || _94 === void 0 ? void 0 : _94[0]) === null || _95 === void 0 ? void 0 : _95.color;
+                        if (boxColor) {
+                            boxSeries.itemStyle = { color: boxColor, borderColor: boxColor };
+                        }
+                        chartSeries.push(boxSeries);
+                        if (outlierPoints.length > 0) {
+                            chartSeries.push(tslib_1.__assign(tslib_1.__assign({ type: "scatter", name: "", data: outlierPoints, symbolSize: 6 }, (boxColor ? { itemStyle: { color: boxColor } } : {})), { tooltip: { show: false } }));
+                        }
+                        if (meanPoints.length > 0) {
+                            chartSeries.push(tslib_1.__assign(tslib_1.__assign({ type: "scatter", name: "", data: meanPoints, symbol: "diamond", symbolSize: 9 }, (boxColor ? { itemStyle: { color: boxColor } } : {})), { tooltip: { show: false } }));
+                        }
+                        legend.data = [];
+                    }
+                    else if (spec.chartType === "histogram") {
+                        rawValues = flattenChartDataValues(spec.series, getSeriesValuesFromRange, spec.hiddenDimensionStrategy).map(function (v) { return (typeof v === "number" ? v : Number(v)); });
+                        _x = (0, histogram_1.binHistogram)(rawValues, spec.binCount), labels = _x.labels, counts = _x.counts;
+                        isPareto_1 = (0, histogram_1.isParetoSpec)(spec);
+                        cumulativePercents = [];
+                        if (isPareto_1) {
+                            pareto = (0, histogram_1.computePareto)({ labels: labels, counts: counts });
+                            labels = pareto.labels;
+                            counts = pareto.counts;
+                            cumulativePercents = pareto.cumulativePercents;
+                        }
+                        chartDomains.length = 0;
+                        chartDomains.push({
+                            type: "category",
+                            data: labels,
+                            show: showAxis,
+                            axisLine: { show: true },
+                            axisTick: { show: true },
+                            splitLine: { show: false },
+                            name: (_96 = spec.horizontalAxisTitle) !== null && _96 !== void 0 ? _96 : "",
+                            nameLocation: "middle",
+                            nameGap: 30,
+                        });
+                        chartSeries.length = 0;
+                        histogramSeries = {
+                            type: "bar",
+                            name: (_99 = (_98 = (_97 = spec.series) === null || _97 === void 0 ? void 0 : _97[0]) === null || _98 === void 0 ? void 0 : _98.dataLabel) !== null && _99 !== void 0 ? _99 : "",
+                            data: counts,
+                            barCategoryGap: "1%",
+                        };
+                        histogramColor = (_101 = (_100 = spec.series) === null || _100 === void 0 ? void 0 : _100[0]) === null || _101 === void 0 ? void 0 : _101.color;
+                        if (histogramColor) {
+                            histogramSeries.itemStyle = { color: histogramColor };
+                        }
+                        chartSeries.push(histogramSeries);
+                        if (isPareto_1) {
+                            // Cumulative-% overlay on the secondary axis (yAxisIndex 1);
+                            // the matching 0-100% axis element is appended with the other
+                            // value axes below.
+                            chartSeries.push({
+                                type: "line",
+                                name: "Cumulative %",
+                                data: cumulativePercents,
+                                yAxisIndex: 1,
+                                symbol: "circle",
+                                symbolSize: 6,
+                            });
+                        }
+                        legend.data = [];
+                    }
+                    renderedSeriesCount = chartSeries.length;
+                    replaceMerge = previousChartType.current !== spec.chartType ||
+                        previousSeriesCount.current !== renderedSeriesCount
+                        ? ["series", "xAxis", "yAxis", "legend", "grid", "tooltip"]
+                        : [];
+                    gridConfig = isOfPie
+                        ? tslib_1.__spreadArray([
+                            { left: 0, right: 0, top: 0, bottom: 0 }
+                        ], tslib_1.__read(((ofPieLayout === null || ofPieLayout === void 0 ? void 0 : ofPieLayout.barGrid) ? [ofPieLayout.barGrid] : [])), false)
+                        : isCircularChart
+                            ? {
+                                left: 0,
+                                right: 0,
+                                top: 0,
+                                bottom: 0,
+                            }
+                            : {
+                                left: "3%",
+                                right: "4%",
+                                bottom: "3%",
+                                containLabel: true,
+                            };
+                    valueAxisBase = {
+                        type: "value",
+                        show: !isCircularChart,
+                        axisLine: { show: !isCircularChart },
+                        axisTick: { show: !isCircularChart },
+                        splitLine: { show: !isCircularChart },
+                        nameLocation: "middle",
+                        nameGap: 50,
+                    };
+                    isPareto = spec.chartType === "histogram" && (0, histogram_1.isParetoSpec)(spec);
+                    hasSecondaryAxis = !isCircularChart &&
+                        !isHorizontalBarChart &&
+                        (((_102 = spec.series) !== null && _102 !== void 0 ? _102 : []).some(function (s) { return s.useSecondaryAxis; }) || isPareto);
+                    tooltipConfig = {
+                        textStyle: {
+                            fontSize: 12,
+                        },
+                        trigger: isCircularChart ? "item" : "axis",
+                        formatter: isCircularChart ? "{b}: {c} ({d}%)" : undefined,
+                    };
+                    finalLegend = (0, overrides_1.applyLegendOverrides)(legend, spec.legend);
+                    seriesLabelOption = (0, overrides_1.buildSeriesLabelOption)(spec.dataLabels);
+                    isDoughnut = spec.chartType === "doughnut";
+                    doughnutHoleSize = spec.doughnutHoleSize;
+                    // PERCENT_STACKED — echarts has no built-in `barnorm: 'percent'`,
+                    // so we normalize per category here: each cell becomes
+                    // (value / category_total) * 100, while the original value is
+                    // tucked into a sibling field so the label formatter can still
+                    // surface the dollar amount. Touches only bar/column series in
+                    // the percent-stacked spec; other charts pass through unchanged.
+                    if (spec.stackedType === "PERCENT_STACKED" &&
+                        (spec.chartType === "bar" || spec.chartType === "column")) {
+                        barSeries = chartSeries.filter(function (s) { return (s === null || s === void 0 ? void 0 : s.type) === "bar"; });
+                        len = barSeries.reduce(function (m, s) { return Math.max(m, Array.isArray(s.data) ? s.data.length : 0); }, 0);
+                        categoryTotals_1 = new Array(len).fill(0);
+                        try {
+                            for (barSeries_1 = tslib_1.__values(barSeries), barSeries_1_1 = barSeries_1.next(); !barSeries_1_1.done; barSeries_1_1 = barSeries_1.next()) {
+                                s = barSeries_1_1.value;
+                                if (!Array.isArray(s.data))
+                                    continue;
+                                for (i = 0; i < s.data.length; i++) {
+                                    raw = s.data[i];
+                                    n = typeof raw === "number" ? raw : Number(raw);
+                                    if (Number.isFinite(n))
+                                        categoryTotals_1[i] += n;
+                                }
+                            }
+                        }
+                        catch (e_7_1) { e_7 = { error: e_7_1 }; }
+                        finally {
+                            try {
+                                if (barSeries_1_1 && !barSeries_1_1.done && (_4 = barSeries_1.return)) _4.call(barSeries_1);
+                            }
+                            finally { if (e_7) throw e_7.error; }
+                        }
+                        try {
+                            for (barSeries_2 = tslib_1.__values(barSeries), barSeries_2_1 = barSeries_2.next(); !barSeries_2_1.done; barSeries_2_1 = barSeries_2.next()) {
+                                s = barSeries_2_1.value;
+                                if (!Array.isArray(s.data))
+                                    continue;
+                                s.data = s.data.map(function (raw, i) {
+                                    var n = typeof raw === "number" ? raw : Number(raw);
+                                    var total = categoryTotals_1[i];
+                                    if (!Number.isFinite(n) || total === 0) {
+                                        return { value: 0, originalValue: raw };
+                                    }
+                                    return { value: (n / total) * 100, originalValue: n };
+                                });
+                            }
+                        }
+                        catch (e_8_1) { e_8 = { error: e_8_1 }; }
+                        finally {
+                            try {
+                                if (barSeries_2_1 && !barSeries_2_1.done && (_5 = barSeries_2.return)) _5.call(barSeries_2);
+                            }
+                            finally { if (e_8) throw e_8.error; }
+                        }
+                    }
+                    seriesWithLabels = chartSeries.map(function (s) {
+                        var _a;
+                        var next = tslib_1.__assign({}, s);
+                        if (seriesLabelOption) {
+                            next.label = tslib_1.__assign(tslib_1.__assign({}, ((_a = s === null || s === void 0 ? void 0 : s.label) !== null && _a !== void 0 ? _a : {})), seriesLabelOption);
+                        }
+                        if (isDoughnut && next.type === "pie") {
+                            var inner = typeof doughnutHoleSize === "number"
+                                ? Math.round(Math.max(0, Math.min(0.9, doughnutHoleSize)) * 100)
+                                : 50;
+                            next.radius = ["".concat(inner, "%"), "75%"];
+                        }
+                        return next;
+                    });
+                    // Update charts
+                    (_103 = chartRef.current) === null || _103 === void 0 ? void 0 : _103.setOption({
+                        xAxis: (function () {
+                            var _a, _b;
+                            if (isOfPie) {
+                                // Hidden 0-1 value axis on the full-container grid for the
+                                // connector overlay, plus a hidden single-category axis on
+                                // the secondary grid for bar-of-pie.
+                                var axes = [
+                                    {
+                                        type: "value",
+                                        min: 0,
+                                        max: 1,
+                                        show: false,
+                                        axisLine: { show: false },
+                                        axisTick: { show: false },
+                                        splitLine: { show: false },
+                                    },
+                                ];
+                                if (ofPieLayout === null || ofPieLayout === void 0 ? void 0 : ofPieLayout.barGrid) {
+                                    axes.push({
+                                        type: "category",
+                                        data: [""],
+                                        gridIndex: 1,
+                                        show: false,
+                                        axisLine: { show: false },
+                                        axisTick: { show: false },
+                                        splitLine: { show: false },
+                                    });
+                                }
+                                return axes;
+                            }
+                            if (isCircularChart) {
+                                return [
+                                    {
+                                        type: "category",
+                                        show: false,
+                                        axisLine: { show: false },
+                                        axisTick: { show: false },
+                                        splitLine: { show: false },
+                                    },
+                                ];
+                            }
+                            if (isHorizontalBarChart) {
+                                return [
+                                    (0, overrides_1.applyAxisOverrides)(tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { name: (_a = spec.horizontalAxisTitle) !== null && _a !== void 0 ? _a : "" }), spec.valueAxisOptions),
+                                ];
+                            }
+                            var base = chartDomains.length > 0
+                                ? chartDomains
+                                : [
+                                    {
+                                        type: "category",
+                                        show: showAxis,
+                                        axisLine: { show: true },
+                                        axisTick: { show: true },
+                                        splitLine: { show: true },
+                                        name: (_b = spec.horizontalAxisTitle) !== null && _b !== void 0 ? _b : "",
+                                        nameLocation: "middle",
+                                        nameGap: 30,
+                                    },
+                                ];
+                            return base.map(function (axis) {
+                                return (0, overrides_1.applyAxisOverrides)(axis, spec.categoryAxisOptions);
+                            });
+                        })(),
+                        yAxis: (function () {
+                            var _a, _b;
+                            if (isOfPie) {
+                                var axes_1 = [
+                                    tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { min: 0, max: 1, show: false, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false }, name: undefined }),
+                                ];
+                                if (ofPieLayout === null || ofPieLayout === void 0 ? void 0 : ofPieLayout.barGrid) {
+                                    axes_1.push({
+                                        type: "value",
+                                        gridIndex: 1,
+                                        show: false,
+                                        axisLine: { show: false },
+                                        axisTick: { show: false },
+                                        splitLine: { show: false },
+                                    });
+                                }
+                                return axes_1;
+                            }
+                            if (isCircularChart) {
+                                return [
+                                    tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { show: false, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: false }, name: undefined }),
+                                ];
+                            }
+                            if (isHorizontalBarChart) {
+                                var base = chartDomains.length > 0
+                                    ? chartDomains
+                                    : [
+                                        {
+                                            type: "category",
+                                            show: showAxis,
+                                            axisLine: { show: true },
+                                            axisTick: { show: true },
+                                            splitLine: { show: true },
+                                            name: (_a = spec.verticalAxisTitle) !== null && _a !== void 0 ? _a : "",
+                                            nameLocation: "middle",
+                                            nameGap: 30,
+                                        },
+                                    ];
+                                return base.map(function (axis) {
+                                    return (0, overrides_1.applyAxisOverrides)(axis, spec.categoryAxisOptions);
+                                });
+                            }
+                            var axes = [
+                                (0, overrides_1.applyAxisOverrides)(tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { name: (_b = spec.verticalAxisTitle) !== null && _b !== void 0 ? _b : "" }), spec.valueAxisOptions),
+                            ];
+                            if (hasSecondaryAxis) {
+                                axes.push((0, overrides_1.applyAxisOverrides)(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, valueAxisBase), { name: "", splitLine: { show: false } }), (isPareto
+                                    ? {
+                                        min: 0,
+                                        max: 100,
+                                        axisLabel: { formatter: "{value}%" },
+                                    }
+                                    : {})), spec.secondaryValueAxisOptions));
+                            }
+                            return axes;
+                        })(),
+                        series: seriesWithLabels,
+                        legend: finalLegend,
+                        grid: gridConfig,
+                        tooltip: tooltipConfig,
+                    }, { replaceMerge: replaceMerge, lazyUpdate: true });
+                    previousChartType.current = spec.chartType;
+                    previousSeriesCount.current = renderedSeriesCount;
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        echarts.use([
+            components_1.TitleComponent,
+            components_1.TooltipComponent,
+            components_1.GridComponent,
+            components_1.LegendComponent,
+            components_1.RadarComponent,
+            charts_1.BarChart,
+            charts_1.BoxplotChart,
+            charts_1.CandlestickChart,
+            charts_1.CustomChart,
+            charts_1.FunnelChart,
+            charts_1.LineChart,
+            charts_1.PieChart,
+            charts_1.RadarChart,
+            charts_1.ScatterChart,
+            charts_1.TreemapChart,
+            charts_1.SunburstChart,
+            renderers_1.CanvasRenderer,
+            components_1.DatasetComponent,
+        ]);
+        initializeChart();
+    }, []);
+    // Subscribe to all chart data sources (domains, series, etc.)
+    var chartDataRanges = (0, react_1.useMemo)(function () { return (0, chart_spec_utils_1.getChartDataRanges)(chart.spec); }, [chart.spec]);
+    (0, spreadsheet_state_1.useSubscribeToMultipleRanges)(chart.chartId, chartDataRanges, updateChart);
+    // Theme-derived chart properties (title/legend/tooltip colors, series
+    // palette). Shared by the theme effect below and the 3-D / region-map
+    // pipelines, which re-initialize the echarts instance when switching
+    // between the cartesian 2-D option and the grid3D / map one and must
+    // re-apply these.
+    var applyThemeOptions = function () {
+        var _a, _b, _c, _d, _e;
+        if (chartRef.current) {
+            var textColor = (0, spreadsheet_1.getStringifiedColor)({
+                theme: 1,
+                tint: isDarkMode ? 1 : 0,
+            }, theme);
+            var bgColor = (0, spreadsheet_1.getStringifiedColor)({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme);
+            var showAxis = (0, helpers_1.showXAxis)(chart.spec.chartType);
+            // Authored chart-level text formats override the theme-derived
+            // defaults. Title, legend, and data-label colors flow through
+            // here; per-axis label colors land on each axis via
+            // `applyAxisOverrides` later in the layout build.
+            var authoredTitleFmt = chart.spec.titleTextFormat;
+            var authoredLegendFmt = (_a = chart.spec.legend) === null || _a === void 0 ? void 0 : _a.textFormat;
+            var authoredDataLabelFmt = (_b = chart.spec.dataLabels) === null || _b === void 0 ? void 0 : _b.textFormat;
+            var options = {
+                title: {
+                    text: title !== null && title !== void 0 ? title : undefined,
+                    textStyle: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ color: (_c = authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.color) !== null && _c !== void 0 ? _c : textColor }, ((authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.fontFamily)
+                        ? { fontFamily: authoredTitleFmt.fontFamily }
+                        : {})), (typeof (authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.fontSize) === "number"
+                        ? { fontSize: authoredTitleFmt.fontSize }
+                        : {})), ((authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.bold) ? { fontWeight: "bold" } : {})), ((authoredTitleFmt === null || authoredTitleFmt === void 0 ? void 0 : authoredTitleFmt.italic) ? { fontStyle: "italic" } : {})),
+                },
+                legend: {
+                    textStyle: tslib_1.__assign(tslib_1.__assign({ color: (_d = authoredLegendFmt === null || authoredLegendFmt === void 0 ? void 0 : authoredLegendFmt.color) !== null && _d !== void 0 ? _d : textColor }, ((authoredLegendFmt === null || authoredLegendFmt === void 0 ? void 0 : authoredLegendFmt.fontFamily)
+                        ? { fontFamily: authoredLegendFmt.fontFamily }
+                        : {})), (typeof (authoredLegendFmt === null || authoredLegendFmt === void 0 ? void 0 : authoredLegendFmt.fontSize) === "number"
+                        ? { fontSize: authoredLegendFmt.fontSize }
+                        : {})),
+                },
+                axisLabel: {
+                    color: (_e = authoredDataLabelFmt === null || authoredDataLabelFmt === void 0 ? void 0 : authoredDataLabelFmt.color) !== null && _e !== void 0 ? _e : textColor,
+                },
+                tooltip: {
+                    backgroundColor: bgColor,
+                    textStyle: {
+                        color: textColor,
+                    },
+                },
+                color: [
+                    theme.themeColors.accent1,
+                    theme.themeColors.accent2,
+                    theme.themeColors.accent3,
+                    theme.themeColors.accent4,
+                    theme.themeColors.accent5,
+                    theme.themeColors.accent6,
+                ],
+            };
+            // Skip when rendering 3-D or a region map: merging a cartesian
+            // yAxis into a grid3D / map option would create a stray empty
+            // 2-D axis over the WebGL scene / choropleth.
+            if (showAxis &&
+                !renderedIn3D.current &&
+                !renderedAsRegionMap.current) {
+                options.yAxis = {
+                    splitLine: {
+                        lineStyle: {
+                            color: isDarkMode ? "rgba(255,255,255,0.3)" : "#CCCCCC",
+                        },
+                    },
+                };
+            }
+            chartRef.current.setOption(options);
+        }
+    };
+    // Update chart properties
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        applyThemeOptions();
+    }, [theme, title, isDarkMode, chart.spec.chartType]);
+    // Draw chart. `glUpgradeTick` re-runs the draw when the lazily loaded
+    // echarts-gl module resolves, upgrading a 3-D spec's immediate 2-D
+    // fallback to the true 3-D rendering.
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        updateChart();
+    }, [
+        chart.spec,
+        getDomainValuesFromRange,
+        getSeriesValuesFromRange,
+        glUpgradeTick,
+    ]);
+    // Resize chart
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        resizeChart();
+    }, [
+        chart.position.overlayPosition.widthPixels,
+        chart.position.overlayPosition.heightPixels,
+    ]);
+    // Chrome bug
+    (0, ui_1.useOnVisibilityChange)(function (state) {
+        return state === "visible" ? resizeChart() : null;
+    });
+    (0, ui_1.useIsomorphicLayoutEffect)(function () {
+        var _a;
+        (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.resize({ silent: true });
+    }, [width, height]);
+    var onDownloadChart = function () {
+        var _a;
+        if (chartRef.current) {
+            var url = chartRef.current.getDataURL({
+                type: "png",
+                backgroundColor: (0, spreadsheet_1.getStringifiedColor)({ theme: 0, tint: isDarkMode ? -1 : 1 }, theme),
+            });
+            (0, toolkit_1.createDownloadableFile)((_a = chart.spec.title) !== null && _a !== void 0 ? _a : "Chart", url);
+        }
+    };
+    // Excel's "Rounded Corners" chart style (`<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 — otherwise
+    // every imported chart would silently gain a radius.
+    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")),
+                    react_1.default.createElement(ui_1.DropdownMenuSub, null,
+                        react_1.default.createElement(ui_1.DropdownMenuSubTrigger, null,
+                            "Download chart",
+                            react_1.default.createElement(ui_1.DropdownRightSlot, null,
+                                react_1.default.createElement(icons_1.ChevronRightIcon, null))),
+                        react_1.default.createElement(ui_1.DropdownMenuSubContent, null,
+                            react_1.default.createElement(ui_1.DropdownMenuItem, { onClick: function () { return onDownloadChart === null || onDownloadChart === void 0 ? void 0 : onDownloadChart(); } }, "PNG Image (.png)"))))))) : null,
+        react_1.default.createElement("div", { className: "flex-1", ref: el })));
+};
+exports.BasicChart = BasicChart;