@ant-design/agentic-ui 2.7.1 → 2.9.0

package/dist/Plugins/chart/ChartRender.js

@@ -1,741 +1,1017 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
     }
-  return a;
-};
-
-// src/Plugins/chart/ChartRender.tsx
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, g, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    };
+    return g = {
+        next: verb(0),
+        "throw": verb(1),
+        "return": verb(2)
+    }, typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+        return this;
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(_)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
 import { DownOutlined, SettingOutlined } from "@ant-design/icons";
 import { ProForm, ProFormSelect } from "@ant-design/pro-components";
 import { ConfigProvider, Descriptions, Dropdown, Popover, Table } from "antd";
-import React, { useContext, useMemo, useState } from "react";
+import React, { lazy, Suspense, useContext, useMemo, useState } from "react";
 import { ActionIconBox } from "../../Components/ActionIconBox";
 import { Loading } from "../../Components/Loading";
 import { useIntersectionOnce } from "../../Hooks/useIntersectionOnce";
 import { I18nContext } from "../../I18n";
 import { loadChartRuntime } from "./loadChartRuntime";
 import { isNotEmpty, toNumber } from "./utils";
-var getChartMap = (i18n) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  return {
-    pie: {
-      title: ((_a = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a.pieChart) || "饼图",
-      changeData: ["donut"]
-    },
-    donut: {
-      title: ((_b = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _b.donutChart) || "环形图",
-      changeData: ["pie"]
-    },
-    bar: {
-      title: ((_c = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _c.barChart) || "条形图",
-      changeData: ["column", "line", "area"]
-    },
-    line: {
-      title: ((_d = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _d.lineChart) || "折线图",
-      changeData: ["column", "bar", "area"]
-    },
-    column: {
-      title: ((_e = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _e.columnChart) || "柱状图",
-      changeData: ["bar", "line", "area"]
-    },
-    area: {
-      title: ((_f = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _f.areaChart) || "面积图",
-      changeData: ["column", "bar", "line"]
-    },
-    radar: {
-      title: ((_g = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _g.radarChart) || "雷达图",
-      changeData: []
-    },
-    scatter: {
-      title: ((_h = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _h.scatterChart) || "散点图",
-      changeData: []
-    },
-    funnel: {
-      title: ((_i = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _i.funnelChart) || "漏斗图",
-      changeData: []
-    },
-    table: {
-      title: ((_j = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _j.table) || "表格",
-      changeData: ["column", "line", "area", "pie", "donut"]
-    },
-    descriptions: {
-      title: ((_k = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _k.descriptions) || "定义列表",
-      changeData: ["column", "line", "area", "pie", "donut"]
-    }
-  };
-};
-var ChartRender = (props) => {
-  const [chartType, setChartType] = useState(() => props.chartType);
-  const {
-    chartData,
-    isChartList,
-    onColumnLengthChange,
-    columnLength,
-    title,
-    dataTime,
-    groupBy,
-    filterBy,
-    colorLegend
-  } = props;
-  const i18n = useContext(I18nContext);
-  const [config, setConfig] = useState(() => props.config);
-  const [renderKey, setRenderKey] = useState(0);
-  const [runtime, setRuntime] = useState(null);
-  const [runtimeError, setRuntimeError] = useState(null);
-  const [isRuntimeLoading, setRuntimeLoading] = useState(false);
-  const containerRef = React.useRef(null);
-  const isIntersecting = useIntersectionOnce(containerRef);
-  const renderDescriptionsFallback = React.useMemo(() => {
-    var _a;
-    const columnCount = ((_a = config == null ? void 0 : config.columns) == null ? void 0 : _a.length) || 0;
-    return chartData.length < 2 && columnCount > 8;
-  }, [chartData, config == null ? void 0 : config.columns]);
-  const shouldLoadRuntime = chartType !== "table" && chartType !== "descriptions" && !renderDescriptionsFallback;
-  React.useEffect(() => {
-    if (runtime)
-      return;
-    if (isRuntimeLoading)
-      return;
-    if (runtimeError)
-      return;
-    let cancelled = false;
-    setRuntimeLoading(true);
-    loadChartRuntime().then((module) => {
-      if (cancelled)
-        return;
-      setRuntime(module);
-    }).catch((error) => {
-      if (cancelled)
-        return;
-      const message = error instanceof Error ? error.message : String(error);
-      setRuntimeError(message);
-    }).finally(() => {
-      if (cancelled)
-        return;
-      setRuntimeLoading(false);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    shouldLoadRuntime,
-    isIntersecting,
-    runtime,
-    isRuntimeLoading,
-    runtimeError
-  ]);
-  const handleRetryRuntime = React.useCallback(() => {
-    setRuntime(null);
-    setRuntimeError(null);
-  }, []);
-  const ChartMap = useMemo(() => getChartMap(i18n), [i18n]);
-  const getAxisTitles = () => {
-    var _a, _b, _c, _d;
-    const xCol = (_b = (_a = config == null ? void 0 : config.columns) == null ? void 0 : _a.find) == null ? void 0 : _b.call(
-      _a,
-      (c) => (c == null ? void 0 : c.dataIndex) === (config == null ? void 0 : config.x)
-    );
-    const yCol = (_d = (_c = config == null ? void 0 : config.columns) == null ? void 0 : _c.find) == null ? void 0 : _d.call(
-      _c,
-      (c) => (c == null ? void 0 : c.dataIndex) === (config == null ? void 0 : config.y)
-    );
+/**
+ * @fileoverview 图表渲染组件文件
+ *
+ * 该文件提供了统一的图表渲染组件，支持多种图表类型的渲染和配置。
+ * 包括图表类型切换、配置管理、数据处理等功能。
+ *
+ * @author md-editor
+ * @version 1.0.0
+ * @since 2024
+ */ /**
+ * 获取图表类型映射配置
+ *
+ * 根据国际化上下文返回图表类型的配置映射，包括图表标题和可切换的图表类型。
+ * 支持多种图表类型：饼图、环形图、条形图、折线图、柱状图、面积图、雷达图、散点图、漏斗图、表格、定义列表。
+ *
+ * @param {object} i18n - 国际化上下文对象
+ * @returns {Object} 图表类型映射对象，包含每种图表类型的配置信息
+ *
+ * @example
+ * ```typescript
+ * const chartMap = getChartMap(i18n);
+ * console.log(chartMap.pie.title); // '饼图'
+ * console.log(chartMap.pie.changeData); // ['donut']
+ * ```
+ *
+ * @since 1.0.0
+ */ var getChartMap = function(i18n) {
+    var _i18n_locale, _i18n_locale1, _i18n_locale2, _i18n_locale3, _i18n_locale4, _i18n_locale5, _i18n_locale6, _i18n_locale7, _i18n_locale8, _i18n_locale9, _i18n_locale10;
     return {
-      xTitle: (xCol == null ? void 0 : xCol.title) || String((config == null ? void 0 : config.x) || ""),
-      yTitle: (yCol == null ? void 0 : yCol.title) || String((config == null ? void 0 : config.y) || "")
+        pie: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale.pieChart) || '饼图',
+            changeData: [
+                'donut'
+            ]
+        },
+        donut: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale1 = i18n.locale) === null || _i18n_locale1 === void 0 ? void 0 : _i18n_locale1.donutChart) || '环形图',
+            changeData: [
+                'pie'
+            ]
+        },
+        bar: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale2 = i18n.locale) === null || _i18n_locale2 === void 0 ? void 0 : _i18n_locale2.barChart) || '条形图',
+            changeData: [
+                'column',
+                'line',
+                'area'
+            ]
+        },
+        line: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale3 = i18n.locale) === null || _i18n_locale3 === void 0 ? void 0 : _i18n_locale3.lineChart) || '折线图',
+            changeData: [
+                'column',
+                'bar',
+                'area'
+            ]
+        },
+        column: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale4 = i18n.locale) === null || _i18n_locale4 === void 0 ? void 0 : _i18n_locale4.columnChart) || '柱状图',
+            changeData: [
+                'bar',
+                'line',
+                'area'
+            ]
+        },
+        area: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale5 = i18n.locale) === null || _i18n_locale5 === void 0 ? void 0 : _i18n_locale5.areaChart) || '面积图',
+            changeData: [
+                'column',
+                'bar',
+                'line'
+            ]
+        },
+        radar: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale6 = i18n.locale) === null || _i18n_locale6 === void 0 ? void 0 : _i18n_locale6.radarChart) || '雷达图',
+            changeData: []
+        },
+        scatter: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale7 = i18n.locale) === null || _i18n_locale7 === void 0 ? void 0 : _i18n_locale7.scatterChart) || '散点图',
+            changeData: []
+        },
+        funnel: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale8 = i18n.locale) === null || _i18n_locale8 === void 0 ? void 0 : _i18n_locale8.funnelChart) || '漏斗图',
+            changeData: []
+        },
+        table: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale9 = i18n.locale) === null || _i18n_locale9 === void 0 ? void 0 : _i18n_locale9.table) || '表格',
+            changeData: [
+                'column',
+                'line',
+                'area',
+                'pie',
+                'donut'
+            ]
+        },
+        descriptions: {
+            title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale10 = i18n.locale) === null || _i18n_locale10 === void 0 ? void 0 : _i18n_locale10.descriptions) || '定义列表',
+            changeData: [
+                'column',
+                'line',
+                'area',
+                'pie',
+                'donut'
+            ]
+        }
     };
-  };
-  const buildXIndexer = () => {
-    const map = /* @__PURE__ */ new Map();
-    let idx = 1;
-    (chartData || []).forEach((row) => {
-      const key = row == null ? void 0 : row[config == null ? void 0 : config.x];
-      if (isNotEmpty(key) && !map.has(key)) {
-        map.set(key, idx++);
-      }
-    });
-    return map;
-  };
-  const getFieldValue = (row, field) => {
-    if (field && isNotEmpty(row[field])) {
-      return String(row[field]);
+};
+/**
+ * 图表运行时渲染器组件实现
+ * 负责使用已加载的 runtime 渲染图表
+ */ var ChartRuntimeRendererImpl = function(param) {
+    var chartType = param.chartType, runtime = param.runtime, convertDonutData = param.convertDonutData, convertFlatData = param.convertFlatData, config = param.config, renderKey = param.renderKey, title = param.title, dataTime = param.dataTime, toolBar = param.toolBar, filterBy = param.filterBy, groupBy = param.groupBy, colorLegend = param.colorLegend, chartData = param.chartData, getFieldValue = param.getFieldValue;
+    var DonutChart = runtime.DonutChart, FunnelChart = runtime.FunnelChart, AreaChart = runtime.AreaChart, BarChart = runtime.BarChart, LineChart = runtime.LineChart, RadarChart = runtime.RadarChart, ScatterChart = runtime.ScatterChart;
+    if (chartType === 'pie') {
+        return /*#__PURE__*/ React.createElement(DonutChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-pie-").concat(renderKey),
+            data: convertDonutData,
+            configs: [
+                {
+                    chartStyle: 'pie',
+                    showLegend: true
+                }
+            ],
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title,
+            showToolbar: true,
+            dataTime: dataTime,
+            toolbarExtra: toolBar
+        });
     }
-    return void 0;
-  };
-  const convertFlatData = useMemo(() => {
-    const { xTitle, yTitle } = getAxisTitles();
-    const xIndexer = buildXIndexer();
-    return (chartData || []).map((row, i) => {
-      var _a;
-      const rawX = row == null ? void 0 : row[config == null ? void 0 : config.x];
-      const rawY = row == null ? void 0 : row[config == null ? void 0 : config.y];
-      const category = getFieldValue(row, groupBy);
-      const type = getFieldValue(row, colorLegend);
-      const filterLabel = getFieldValue(row, filterBy);
-      const x = typeof rawX === "number" ? rawX : isNotEmpty(rawX) ? String(rawX) : String((_a = xIndexer.get(rawX)) != null ? _a : i + 1);
-      const y = typeof rawY === "number" ? rawY : isNotEmpty(rawY) ? String(rawY) : "";
-      return __spreadValues(__spreadValues(__spreadValues({
-        x,
-        y,
-        xtitle: xTitle,
-        ytitle: yTitle
-      }, type ? { type } : {}), category ? { category } : {}), filterLabel ? { filterLabel } : {});
-    });
-  }, [
-    JSON.stringify(chartData),
-    JSON.stringify(config),
-    title,
-    groupBy,
-    colorLegend,
-    filterBy
-  ]);
-  const convertDonutData = useMemo(() => {
-    return (chartData || []).map((row) => {
-      var _a;
-      const category = getFieldValue(row, groupBy);
-      const label = String((_a = row == null ? void 0 : row[config == null ? void 0 : config.x]) != null ? _a : "");
-      const value = toNumber(row == null ? void 0 : row[config == null ? void 0 : config.y], 0);
-      const filterLabel = getFieldValue(row, filterBy);
-      return __spreadValues(__spreadValues({
-        label,
-        value
-      }, category ? { category } : {}), filterLabel ? { filterLabel } : {});
-    });
-  }, [
-    JSON.stringify(chartData),
-    JSON.stringify(config),
-    title,
-    groupBy,
-    filterBy
-  ]);
-  React.useEffect(() => {
-    setChartType(props.chartType);
-  }, [props.chartType]);
-  const getChartPopover = () => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-    return [
-      /* @__PURE__ */ React.createElement(
-        Dropdown,
-        {
-          key: "dropdown",
-          menu: {
-            items: ((_b = (_a = ChartMap[chartType]) == null ? void 0 : _a.changeData) == null ? void 0 : _b.map((key) => {
-              var _a2, _b2;
-              return {
-                key,
-                label: ((_a2 = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _a2[key + "eChart"]) || ((_b2 = ChartMap[key]) == null ? void 0 : _b2.title),
-                onClick: () => {
-                  setChartType(key);
+    if (chartType === 'donut') {
+        return /*#__PURE__*/ React.createElement(DonutChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-donut-").concat(renderKey),
+            data: convertDonutData,
+            configs: [
+                {
+                    chartStyle: 'donut',
+                    showLegend: true
                 }
-              };
-            })) || []
-          },
-          getPopupContainer: () => document.body
+            ],
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title,
+            showToolbar: true,
+            dataTime: dataTime,
+            toolbarExtra: toolBar
+        });
+    }
+    if (chartType === 'bar') {
+        var _config_rest, _config_rest1, _config_rest2;
+        var _config_rest_showLegend, _config_rest_showGrid;
+        return /*#__PURE__*/ React.createElement(BarChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-bar-").concat(renderKey),
+            data: convertFlatData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            indexAxis: 'y',
+            stacked: config === null || config === void 0 ? void 0 : (_config_rest = config.rest) === null || _config_rest === void 0 ? void 0 : _config_rest.stacked,
+            showLegend: (_config_rest_showLegend = config === null || config === void 0 ? void 0 : (_config_rest1 = config.rest) === null || _config_rest1 === void 0 ? void 0 : _config_rest1.showLegend) !== null && _config_rest_showLegend !== void 0 ? _config_rest_showLegend : true,
+            showGrid: (_config_rest_showGrid = config === null || config === void 0 ? void 0 : (_config_rest2 = config.rest) === null || _config_rest2 === void 0 ? void 0 : _config_rest2.showGrid) !== null && _config_rest_showGrid !== void 0 ? _config_rest_showGrid : true,
+            dataTime: dataTime,
+            toolbarExtra: toolBar
+        });
+    }
+    if (chartType === 'line') {
+        var _config_rest3, _config_rest4;
+        var _config_rest_showLegend1, _config_rest_showGrid1;
+        return /*#__PURE__*/ React.createElement(LineChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-line-").concat(renderKey),
+            data: convertFlatData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            showLegend: (_config_rest_showLegend1 = config === null || config === void 0 ? void 0 : (_config_rest3 = config.rest) === null || _config_rest3 === void 0 ? void 0 : _config_rest3.showLegend) !== null && _config_rest_showLegend1 !== void 0 ? _config_rest_showLegend1 : true,
+            showGrid: (_config_rest_showGrid1 = config === null || config === void 0 ? void 0 : (_config_rest4 = config.rest) === null || _config_rest4 === void 0 ? void 0 : _config_rest4.showGrid) !== null && _config_rest_showGrid1 !== void 0 ? _config_rest_showGrid1 : true,
+            dataTime: dataTime,
+            toolbarExtra: toolBar
+        });
+    }
+    if (chartType === 'column') {
+        var _config_rest5, _config_rest6, _config_rest7;
+        var _config_rest_showLegend2, _config_rest_showGrid2;
+        return /*#__PURE__*/ React.createElement(BarChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-column-").concat(renderKey),
+            data: convertFlatData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            indexAxis: 'x',
+            stacked: config === null || config === void 0 ? void 0 : (_config_rest5 = config.rest) === null || _config_rest5 === void 0 ? void 0 : _config_rest5.stacked,
+            showLegend: (_config_rest_showLegend2 = config === null || config === void 0 ? void 0 : (_config_rest6 = config.rest) === null || _config_rest6 === void 0 ? void 0 : _config_rest6.showLegend) !== null && _config_rest_showLegend2 !== void 0 ? _config_rest_showLegend2 : true,
+            showGrid: (_config_rest_showGrid2 = config === null || config === void 0 ? void 0 : (_config_rest7 = config.rest) === null || _config_rest7 === void 0 ? void 0 : _config_rest7.showGrid) !== null && _config_rest_showGrid2 !== void 0 ? _config_rest_showGrid2 : true,
+            dataTime: dataTime,
+            toolbarExtra: toolBar
+        });
+    }
+    if (chartType === 'area') {
+        var _config_rest8, _config_rest9;
+        var _config_rest_showLegend3, _config_rest_showGrid3;
+        return /*#__PURE__*/ React.createElement(AreaChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-area-").concat(renderKey),
+            data: convertFlatData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            showLegend: (_config_rest_showLegend3 = config === null || config === void 0 ? void 0 : (_config_rest8 = config.rest) === null || _config_rest8 === void 0 ? void 0 : _config_rest8.showLegend) !== null && _config_rest_showLegend3 !== void 0 ? _config_rest_showLegend3 : true,
+            showGrid: (_config_rest_showGrid3 = config === null || config === void 0 ? void 0 : (_config_rest9 = config.rest) === null || _config_rest9 === void 0 ? void 0 : _config_rest9.showGrid) !== null && _config_rest_showGrid3 !== void 0 ? _config_rest_showGrid3 : true,
+            dataTime: dataTime,
+            toolbarExtra: toolBar
+        });
+    }
+    if (chartType === 'radar') {
+        var radarData = (chartData || []).map(function(row, i) {
+            var filterLabel = getFieldValue(row, filterBy);
+            var category = getFieldValue(row, groupBy);
+            var type = getFieldValue(row, colorLegend);
+            var _row_config_x;
+            return _object_spread({
+                label: String((_row_config_x = row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.x]) !== null && _row_config_x !== void 0 ? _row_config_x : i + 1),
+                score: row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.y]
+            }, category ? {
+                category: category
+            } : {}, type ? {
+                type: type
+            } : {}, filterLabel ? {
+                filterLabel: filterLabel
+            } : {});
+        });
+        return /*#__PURE__*/ React.createElement(RadarChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-radar-").concat(renderKey),
+            data: radarData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            dataTime: dataTime,
+            toolbarExtra: toolBar
+        });
+    }
+    if (chartType === 'scatter') {
+        var scatterData = (chartData || []).map(function(row) {
+            var filterLabel = getFieldValue(row, filterBy);
+            var category = getFieldValue(row, groupBy);
+            var type = getFieldValue(row, colorLegend);
+            return _object_spread({
+                x: row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.x],
+                y: row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.y]
+            }, category ? {
+                category: category
+            } : {}, type ? {
+                type: type
+            } : {}, filterLabel ? {
+                filterLabel: filterLabel
+            } : {});
+        });
+        return /*#__PURE__*/ React.createElement(ScatterChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-scatter-").concat(renderKey),
+            data: scatterData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            dataTime: dataTime,
+            toolbarExtra: toolBar
+        });
+    }
+    if (chartType === 'funnel') {
+        var funnelData = (chartData || []).map(function(row, i) {
+            var filterLabel = getFieldValue(row, filterBy);
+            var category = getFieldValue(row, groupBy);
+            var type = getFieldValue(row, colorLegend);
+            var _row_config_x;
+            return _object_spread({
+                x: String((_row_config_x = row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.x]) !== null && _row_config_x !== void 0 ? _row_config_x : i + 1),
+                y: toNumber(row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.y], 0)
+            }, (row === null || row === void 0 ? void 0 : row.ratio) !== undefined ? {
+                ratio: row.ratio
+            } : {}, category ? {
+                category: category
+            } : {}, type ? {
+                type: type
+            } : {}, filterLabel ? {
+                filterLabel: filterLabel
+            } : {});
+        });
+        return /*#__PURE__*/ React.createElement(FunnelChart, {
+            key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-funnel-").concat(renderKey),
+            data: funnelData,
+            height: (config === null || config === void 0 ? void 0 : config.height) || 400,
+            title: title || '',
+            dataTime: dataTime,
+            typeNames: {
+                rate: '转化率',
+                name: colorLegend || '转化'
+            },
+            toolbarExtra: toolBar
+        });
+    }
+    return null;
+};
+/**
+ * 图表运行时渲染器组件
+ * 使用 React.lazy 延迟加载，仅在需要时加载图表运行时
+ */ var ChartRuntimeRenderer = /*#__PURE__*/ lazy(/*#__PURE__*/ _async_to_generator(function() {
+    var runtime;
+    return _ts_generator(this, function(_state) {
+        switch(_state.label){
+            case 0:
+                return [
+                    4,
+                    loadChartRuntime()
+                ];
+            case 1:
+                runtime = _state.sent();
+                return [
+                    2,
+                    {
+                        default: function(props) {
+                            return /*#__PURE__*/ React.createElement(ChartRuntimeRendererImpl, _object_spread_props(_object_spread({}, props), {
+                                runtime: runtime
+                            }));
+                        }
+                    }
+                ];
+        }
+    });
+}));
+/**
+ * 加载中的占位组件
+ */ var ChartRuntimeFallback = function(param) {
+    var _param_height = param.height, height = _param_height === void 0 ? 240 : _param_height;
+    return /*#__PURE__*/ React.createElement("div", {
+        style: {
+            minHeight: height,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            color: '#6B7280'
         },
-        /* @__PURE__ */ React.createElement(
-          "span",
-          {
-            style: {
-              fontSize: 12,
-              display: "flex",
-              alignItems: "center",
-              gap: 4,
-              border: "1px solid #f0f0f0",
-              padding: "4px 12px",
-              borderRadius: "1em"
-            }
-          },
-          (_c = ChartMap[chartType]) == null ? void 0 : _c.title,
-          /* @__PURE__ */ React.createElement(
-            DownOutlined,
-            {
-              style: {
-                fontSize: 8
-              }
+        role: "status",
+        "aria-live": "polite"
+    }, /*#__PURE__*/ React.createElement(Loading, null));
+};
+/**
+ * ChartRender 组件 - 图表渲染组件
+ *
+ * 该组件用于渲染各种类型的图表，支持饼图、柱状图、折线图、面积图、表格等。
+ * 提供图表类型切换、全屏显示、下载、配置等功能。
+ * 使用 React.lazy 和 Suspense 实现代码分割和延迟加载，优化性能。
+ *
+ * @component
+ * @description 图表渲染组件，支持多种图表类型的渲染和交互
+ * @param {Object} props - 组件属性
+ * @param {'pie'|'bar'|'line'|'column'|'area'|'descriptions'|'table'} props.chartType - 图表类型
+ * @param {Record<string, any>[]} props.chartData - 图表数据
+ * @param {Object} props.config - 图表配置
+ * @param {any} props.config.height - 图表高度
+ * @param {any} props.config.x - X轴字段
+ * @param {any} props.config.y - Y轴字段
+ * @param {any} props.config.rest - 其他配置
+ * @param {any} [props.config.index] - 图表索引
+ * @param {any} [props.config.chartData] - 图表数据
+ * @param {any} [props.config.columns] - 列配置
+ * @param {any} [props.node] - 节点数据
+ * @param {any} [props.title] - 图表标题
+ * @param {boolean} [props.isChartList] - 是否为图表列表
+ * @param {number} [props.columnLength] - 列长度
+ * @param {(value: number) => void} [props.onColumnLengthChange] - 列长度变化回调
+ * @param {string} [props.dataTime] - 数据时间
+ * @param {string} [props.groupBy] - 业务分组维度
+ * @param {string} [props.filterBy] - 主筛选维度
+ * @param {string} [props.colorLegend] - 数据系列维度
+ *
+ * @example
+ * ```tsx
+ * <ChartRender
+ *   chartType="pie"
+ *   chartData={[{ name: "A", value: 10 }, { name: "B", value: 20 }]}
+ *   config={{
+ *     height: 300,
+ *     x: "name",
+ *     y: "value"
+ *   }}
+ *   title="销售数据"
+ *   dataTime="2025-06-30 00:00:00"
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的图表组件
+ *
+ * @remarks
+ * - 支持多种图表类型（饼图、柱状图、折线图、面积图、表格等）
+ * - 提供图表类型切换功能
+ * - 支持全屏显示
+ * - 提供图表下载功能
+ * - 支持图表配置和自定义
+ * - 提供响应式布局
+ * - 集成国际化支持
+ * - 提供图表属性工具栏
+ * - 使用 React.lazy 和 Suspense 实现代码分割
+ */ export var ChartRender = function(props) {
+    var _useState = _sliced_to_array(useState(function() {
+        return props.chartType;
+    }), 2), chartType = _useState[0], setChartType = _useState[1];
+    var chartData = props.chartData, isChartList = props.isChartList, onColumnLengthChange = props.onColumnLengthChange, columnLength = props.columnLength, title = props.title, dataTime = props.dataTime, groupBy = props.groupBy, filterBy = props.filterBy, colorLegend = props.colorLegend;
+    var i18n = useContext(I18nContext);
+    var _useState1 = _sliced_to_array(useState(function() {
+        return props.config;
+    }), 2), config = _useState1[0], setConfig = _useState1[1];
+    var _useState2 = _sliced_to_array(useState(0), 2), renderKey = _useState2[0], setRenderKey = _useState2[1];
+    var containerRef = React.useRef(null);
+    var isIntersecting = useIntersectionOnce(containerRef);
+    var renderDescriptionsFallback = React.useMemo(function() {
+        var _config_columns;
+        var columnCount = (config === null || config === void 0 ? void 0 : (_config_columns = config.columns) === null || _config_columns === void 0 ? void 0 : _config_columns.length) || 0;
+        return chartData.length < 2 && columnCount > 8;
+    }, [
+        chartData,
+        config === null || config === void 0 ? void 0 : config.columns
+    ]);
+    var shouldLoadRuntime = chartType !== 'table' && chartType !== 'descriptions' && !renderDescriptionsFallback;
+    // 获取国际化的图表类型映射
+    var ChartMap = useMemo(function() {
+        return getChartMap(i18n);
+    }, [
+        i18n
+    ]);
+    var getAxisTitles = function() {
+        var _config_columns_find, _config_columns, _config_columns_find1, _config_columns1;
+        var xCol = config === null || config === void 0 ? void 0 : (_config_columns = config.columns) === null || _config_columns === void 0 ? void 0 : (_config_columns_find = _config_columns.find) === null || _config_columns_find === void 0 ? void 0 : _config_columns_find.call(_config_columns, function(c) {
+            return (c === null || c === void 0 ? void 0 : c.dataIndex) === (config === null || config === void 0 ? void 0 : config.x);
+        });
+        var yCol = config === null || config === void 0 ? void 0 : (_config_columns1 = config.columns) === null || _config_columns1 === void 0 ? void 0 : (_config_columns_find1 = _config_columns1.find) === null || _config_columns_find1 === void 0 ? void 0 : _config_columns_find1.call(_config_columns1, function(c) {
+            return (c === null || c === void 0 ? void 0 : c.dataIndex) === (config === null || config === void 0 ? void 0 : config.y);
+        });
+        return {
+            xTitle: (xCol === null || xCol === void 0 ? void 0 : xCol.title) || String((config === null || config === void 0 ? void 0 : config.x) || ''),
+            yTitle: (yCol === null || yCol === void 0 ? void 0 : yCol.title) || String((config === null || config === void 0 ? void 0 : config.y) || '')
+        };
+    };
+    var buildXIndexer = function() {
+        var map = new Map();
+        var idx = 1;
+        (chartData || []).forEach(function(row) {
+            var key = row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.x];
+            if (isNotEmpty(key) && !map.has(key)) {
+                map.set(key, idx++);
             }
-          )
-        )
-      ),
-      isChartList ? /* @__PURE__ */ React.createElement(
-        Dropdown,
-        {
-          key: "dropdown",
-          menu: {
-            items: new Array(4).fill(0).map((_, i) => {
-              return {
-                key: i + 1,
-                label: i + 1,
-                onClick: () => {
-                  onColumnLengthChange == null ? void 0 : onColumnLengthChange(i + 1);
+        });
+        return map;
+    };
+    var getFieldValue = function(row, field) {
+        if (field && isNotEmpty(row[field])) {
+            return String(row[field]);
+        }
+        return undefined;
+    };
+    var convertFlatData = useMemo(function() {
+        var _getAxisTitles = getAxisTitles(), xTitle = _getAxisTitles.xTitle, yTitle = _getAxisTitles.yTitle;
+        var xIndexer = buildXIndexer();
+        return (chartData || []).map(function(row, i) {
+            var rawX = row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.x];
+            var rawY = row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.y];
+            var category = getFieldValue(row, groupBy);
+            var type = getFieldValue(row, colorLegend);
+            var filterLabel = getFieldValue(row, filterBy);
+            var _xIndexer_get;
+            var x = typeof rawX === 'number' ? rawX : isNotEmpty(rawX) ? String(rawX) : String((_xIndexer_get = xIndexer.get(rawX)) !== null && _xIndexer_get !== void 0 ? _xIndexer_get : i + 1);
+            var y = typeof rawY === 'number' ? rawY : isNotEmpty(rawY) ? String(rawY) : '';
+            return _object_spread({
+                x: x,
+                y: y,
+                xtitle: xTitle,
+                ytitle: yTitle
+            }, type ? {
+                type: type
+            } : {}, category ? {
+                category: category
+            } : {}, filterLabel ? {
+                filterLabel: filterLabel
+            } : {});
+        });
+    }, [
+        JSON.stringify(chartData),
+        JSON.stringify(config),
+        title,
+        groupBy,
+        colorLegend,
+        filterBy
+    ]);
+    var convertDonutData = useMemo(function() {
+        return (chartData || []).map(function(row) {
+            var category = getFieldValue(row, groupBy);
+            var _row_config_x;
+            var label = String((_row_config_x = row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.x]) !== null && _row_config_x !== void 0 ? _row_config_x : '');
+            var value = toNumber(row === null || row === void 0 ? void 0 : row[config === null || config === void 0 ? void 0 : config.y], 0);
+            var filterLabel = getFieldValue(row, filterBy);
+            return _object_spread({
+                label: label,
+                value: value
+            }, category ? {
+                category: category
+            } : {}, filterLabel ? {
+                filterLabel: filterLabel
+            } : {});
+        });
+    }, [
+        JSON.stringify(chartData),
+        JSON.stringify(config),
+        title,
+        groupBy,
+        filterBy
+    ]);
+    React.useEffect(function() {
+        setChartType(props.chartType);
+    }, [
+        props.chartType
+    ]);
+    /**
+   * 图表配置
+   */ var getChartPopover = function() {
+        var _ChartMap_chartType_changeData, _ChartMap_chartType, _ChartMap_chartType1, _i18n_locale, _i18n_locale1, _i18n_locale2, _config_columns_filter, _config_columns, _config_columns_filter1, _config_columns1, _i18n_locale3;
+        return [
+            /*#__PURE__*/ React.createElement(Dropdown, {
+                key: "dropdown",
+                menu: {
+                    items: ((_ChartMap_chartType = ChartMap[chartType]) === null || _ChartMap_chartType === void 0 ? void 0 : (_ChartMap_chartType_changeData = _ChartMap_chartType.changeData) === null || _ChartMap_chartType_changeData === void 0 ? void 0 : _ChartMap_chartType_changeData.map(function(key) {
+                        var _i18n_locale, _ChartMap_key;
+                        return {
+                            key: key,
+                            label: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale[key + 'eChart']) || ((_ChartMap_key = ChartMap[key]) === null || _ChartMap_key === void 0 ? void 0 : _ChartMap_key.title),
+                            onClick: function() {
+                                setChartType(key);
+                            }
+                        };
+                    })) || []
+                },
+                getPopupContainer: function() {
+                    return document.body;
                 }
-              };
-            })
-          },
-          getPopupContainer: () => document.body
-        },
-        /* @__PURE__ */ React.createElement(
-          "span",
-          {
-            style: {
-              fontSize: 12,
-              display: "flex",
-              alignItems: "center",
-              gap: 4,
-              border: "1px solid #f0f0f0",
-              padding: "4px 12px",
-              borderRadius: "1em"
-            }
-          },
-          columnLength,
-          " ",
-          ((_d = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _d.columns) || "列",
-          /* @__PURE__ */ React.createElement(
-            DownOutlined,
-            {
-              style: {
-                fontSize: 8
-              }
-            }
-          )
-        )
-      ) : null,
-      /* @__PURE__ */ React.createElement(
-        Popover,
-        {
-          arrow: false,
-          styles: {
-            body: {
-              padding: 8
-            }
-          },
-          key: "config",
-          title: ((_e = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _e.configChart) || "配置图表",
-          trigger: "click",
-          getPopupContainer: () => document.body,
-          content: /* @__PURE__ */ React.createElement(ConfigProvider, { componentSize: "small" }, /* @__PURE__ */ React.createElement(
-            ProForm,
-            {
-              submitter: {
-                searchConfig: {
-                  submitText: ((_f = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _f.updateChart) || "更新"
+            }, /*#__PURE__*/ React.createElement("span", {
+                style: {
+                    fontSize: 12,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 4,
+                    border: '1px solid #f0f0f0',
+                    padding: '4px 12px',
+                    borderRadius: '1em'
                 }
-              },
-              style: {
-                width: 300
-              },
-              initialValues: config,
-              onFinish: (values) => {
-                setConfig(__spreadValues(__spreadValues({}, props.config), values));
-                setRenderKey((k) => k + 1);
-              }
-            },
-            /* @__PURE__ */ React.createElement(
-              "div",
-              {
+            }, (_ChartMap_chartType1 = ChartMap[chartType]) === null || _ChartMap_chartType1 === void 0 ? void 0 : _ChartMap_chartType1.title, /*#__PURE__*/ React.createElement(DownOutlined, {
                 style: {
-                  maxHeight: "70vh",
-                  overflow: "auto"
+                    fontSize: 8
                 }
-              },
-              /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  style: {
-                    display: "flex",
-                    gap: 8
-                  }
+            }))),
+            isChartList ? /*#__PURE__*/ React.createElement(Dropdown, {
+                key: "dropdown",
+                menu: {
+                    items: new Array(4).fill(0).map(function(_, i) {
+                        return {
+                            key: i + 1,
+                            label: i + 1,
+                            onClick: function() {
+                                onColumnLengthChange === null || onColumnLengthChange === void 0 ? void 0 : onColumnLengthChange(i + 1);
+                            }
+                        };
+                    })
+                },
+                getPopupContainer: function() {
+                    return document.body;
+                }
+            }, /*#__PURE__*/ React.createElement("span", {
+                style: {
+                    fontSize: 12,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 4,
+                    border: '1px solid #f0f0f0',
+                    padding: '4px 12px',
+                    borderRadius: '1em'
+                }
+            }, columnLength, " ", (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale = i18n.locale) === null || _i18n_locale === void 0 ? void 0 : _i18n_locale.columns) || '列', /*#__PURE__*/ React.createElement(DownOutlined, {
+                style: {
+                    fontSize: 8
+                }
+            }))) : null,
+            /*#__PURE__*/ React.createElement(Popover, {
+                arrow: false,
+                styles: {
+                    body: {
+                        padding: 8
+                    }
+                },
+                key: "config",
+                title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale1 = i18n.locale) === null || _i18n_locale1 === void 0 ? void 0 : _i18n_locale1.configChart) || '配置图表',
+                trigger: 'click',
+                getPopupContainer: function() {
+                    return document.body;
                 },
-                /* @__PURE__ */ React.createElement(
-                  ProFormSelect,
-                  {
+                content: /*#__PURE__*/ React.createElement(ConfigProvider, {
+                    componentSize: "small"
+                }, /*#__PURE__*/ React.createElement(ProForm, {
+                    submitter: {
+                        searchConfig: {
+                            submitText: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale2 = i18n.locale) === null || _i18n_locale2 === void 0 ? void 0 : _i18n_locale2.updateChart) || '更新'
+                        }
+                    },
+                    style: {
+                        width: 300
+                    },
+                    initialValues: config,
+                    onFinish: function(values) {
+                        setConfig(_object_spread({}, props.config, values));
+                        setRenderKey(function(k) {
+                            return k + 1;
+                        });
+                    }
+                }, /*#__PURE__*/ React.createElement("div", {
+                    style: {
+                        maxHeight: '70vh',
+                        overflow: 'auto'
+                    }
+                }, /*#__PURE__*/ React.createElement("div", {
+                    style: {
+                        display: 'flex',
+                        gap: 8
+                    }
+                }, /*#__PURE__*/ React.createElement(ProFormSelect, {
                     label: "X",
                     name: "x",
                     fieldProps: {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                      }
+                        onClick: function(e) {
+                            e.stopPropagation();
+                        }
                     },
-                    options: (_h = (_g = config.columns) == null ? void 0 : _g.filter((item) => item.title)) == null ? void 0 : _h.map((item) => {
-                      return {
-                        label: item.title,
-                        value: item.dataIndex
-                      };
+                    options: (_config_columns = config.columns) === null || _config_columns === void 0 ? void 0 : (_config_columns_filter = _config_columns.filter(function(item) {
+                        return item.title;
+                    })) === null || _config_columns_filter === void 0 ? void 0 : _config_columns_filter.map(function(item) {
+                        return {
+                            label: item.title,
+                            value: item.dataIndex
+                        };
                     })
-                  }
-                ),
-                /* @__PURE__ */ React.createElement(
-                  ProFormSelect,
-                  {
+                }), /*#__PURE__*/ React.createElement(ProFormSelect, {
                     name: "y",
                     label: "Y",
                     fieldProps: {
-                      onClick: (e) => {
-                        e.stopPropagation();
-                      }
+                        onClick: function(e) {
+                            e.stopPropagation();
+                        }
                     },
-                    options: (_j = (_i = config.columns) == null ? void 0 : _i.filter((item) => item.title)) == null ? void 0 : _j.map((item) => {
-                      return {
-                        label: item.title,
-                        value: item.dataIndex
-                      };
+                    options: (_config_columns1 = config.columns) === null || _config_columns1 === void 0 ? void 0 : (_config_columns_filter1 = _config_columns1.filter(function(item) {
+                        return item.title;
+                    })) === null || _config_columns_filter1 === void 0 ? void 0 : _config_columns_filter1.map(function(item) {
+                        return {
+                            label: item.title,
+                            value: item.dataIndex
+                        };
                     })
-                  }
-                )
-              )
-            )
-          ))
-        },
-        /* @__PURE__ */ React.createElement(
-          ActionIconBox,
-          {
-            title: ((_k = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _k.configChart) || "配置图表",
-            onClick: () => setRenderKey((k) => k + 1)
-          },
-          /* @__PURE__ */ React.createElement(SettingOutlined, { style: { color: "rgba(0, 25, 61, 0.3255)" } })
-        )
-      )
-    ].filter((item) => !!item);
-  };
-  const toolBar = getChartPopover();
-  const chartDom = useMemo(() => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
-    if (typeof window === "undefined")
-      return null;
-    if (false)
-      return null;
-    if (window == null ? void 0 : window.notRenderChart)
-      return null;
-    if (chartType === "table") {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: config == null ? void 0 : config.index,
-          contentEditable: false,
-          style: {
-            margin: 12,
-            overflow: "auto",
-            border: "1px solid #eee",
-            borderRadius: "0.5em",
-            flex: 1,
-            maxWidth: "calc(100% - 32px)",
-            maxHeight: 400,
-            userSelect: "none"
-          }
-        },
-        /* @__PURE__ */ React.createElement(
-          Table,
-          {
-            size: "small",
-            dataSource: chartData,
-            columns: config == null ? void 0 : config.columns,
-            pagination: false,
-            rowKey: (record) => record.key
-          }
-        )
-      );
-    }
-    if (chartType === "descriptions" || renderDescriptionsFallback) {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: config == null ? void 0 : config.index,
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 8
-          }
-        },
-        chartData.map((row, rowIndex) => {
-          var _a2;
-          return /* @__PURE__ */ React.createElement(
-            Descriptions,
-            {
-              bordered: true,
-              key: `${config == null ? void 0 : config.index}-${rowIndex}`,
-              column: {
-                xxl: 2,
-                xl: 2,
-                lg: 2,
-                md: 2,
-                sm: 1,
-                xs: 1
-              },
-              items: (_a2 = config == null ? void 0 : config.columns) == null ? void 0 : _a2.map((column) => {
-                if (!column.title || !column.dataIndex)
-                  return null;
-                return {
-                  label: column.title || "",
-                  children: row[column.dataIndex]
-                };
-              }).filter((item) => !!item)
-            }
-          );
-        })
-      );
-    }
-    if (!runtime && shouldLoadRuntime) {
-      const height = (config == null ? void 0 : config.height) || 240;
-      if (runtimeError) {
-        return /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            style: {
-              minHeight: height,
-              display: "flex",
-              flexDirection: "column",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%",
-              gap: 8,
-              color: "rgba(239, 68, 68, 0.8)"
-            },
-            role: "alert"
-          },
-          /* @__PURE__ */ React.createElement("span", null, runtimeError),
-          /* @__PURE__ */ React.createElement(
-            "button",
-            {
-              type: "button",
-              onClick: handleRetryRuntime,
-              style: {
-                padding: "4px 12px",
-                borderRadius: "0.5em",
-                border: "1px solid rgba(239, 68, 68, 0.5)",
-                background: "transparent",
-                color: "rgba(239, 68, 68, 0.8)",
-                cursor: "pointer"
-              }
-            },
-            "重试加载"
-          )
-        );
-      }
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          style: {
-            minHeight: height,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: "100%",
-            color: "#6B7280"
-          },
-          role: "status",
-          "aria-live": "polite"
-        },
-        isRuntimeLoading || !isIntersecting ? /* @__PURE__ */ React.createElement(Loading, null) : null
-      );
-    }
-    if (!runtime) {
-      return null;
-    }
-    const {
-      DonutChart,
-      FunnelChart,
-      AreaChart,
-      BarChart,
-      LineChart,
-      RadarChart,
-      ScatterChart
-    } = runtime;
-    if (chartType === "pie") {
-      return /* @__PURE__ */ React.createElement(
-        DonutChart,
-        {
-          key: `${config == null ? void 0 : config.index}-pie-${renderKey}`,
-          data: convertDonutData,
-          configs: [{ chartStyle: "pie", showLegend: true }],
-          height: (config == null ? void 0 : config.height) || 400,
-          title,
-          showToolbar: true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "donut") {
-      return /* @__PURE__ */ React.createElement(
-        DonutChart,
-        {
-          key: `${config == null ? void 0 : config.index}-donut-${renderKey}`,
-          data: convertDonutData,
-          configs: [{ chartStyle: "donut", showLegend: true }],
-          height: (config == null ? void 0 : config.height) || 400,
-          title,
-          showToolbar: true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "bar") {
-      return /* @__PURE__ */ React.createElement(
-        BarChart,
-        {
-          key: `${config == null ? void 0 : config.index}-bar-${renderKey}`,
-          data: convertFlatData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          indexAxis: "y",
-          stacked: (_a = config == null ? void 0 : config.rest) == null ? void 0 : _a.stacked,
-          showLegend: (_c = (_b = config == null ? void 0 : config.rest) == null ? void 0 : _b.showLegend) != null ? _c : true,
-          showGrid: (_e = (_d = config == null ? void 0 : config.rest) == null ? void 0 : _d.showGrid) != null ? _e : true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "line") {
-      return /* @__PURE__ */ React.createElement(
-        LineChart,
-        {
-          key: `${config == null ? void 0 : config.index}-line-${renderKey}`,
-          data: convertFlatData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          showLegend: (_g = (_f = config == null ? void 0 : config.rest) == null ? void 0 : _f.showLegend) != null ? _g : true,
-          showGrid: (_i = (_h = config == null ? void 0 : config.rest) == null ? void 0 : _h.showGrid) != null ? _i : true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "column") {
-      return /* @__PURE__ */ React.createElement(
-        BarChart,
-        {
-          key: `${config == null ? void 0 : config.index}-column-${renderKey}`,
-          data: convertFlatData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          indexAxis: "x",
-          stacked: (_j = config == null ? void 0 : config.rest) == null ? void 0 : _j.stacked,
-          showLegend: (_l = (_k = config == null ? void 0 : config.rest) == null ? void 0 : _k.showLegend) != null ? _l : true,
-          showGrid: (_n = (_m = config == null ? void 0 : config.rest) == null ? void 0 : _m.showGrid) != null ? _n : true,
-          dataTime,
-          toolbarExtra: toolBar
-        }
-      );
-    }
-    if (chartType === "area") {
-      return /* @__PURE__ */ React.createElement(
-        AreaChart,
-        {
-          key: `${config == null ? void 0 : config.index}-area-${renderKey}`,
-          data: convertFlatData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          showLegend: (_p = (_o = config == null ? void 0 : config.rest) == null ? void 0 : _o.showLegend) != null ? _p : true,
-          showGrid: (_r = (_q = config == null ? void 0 : config.rest) == null ? void 0 : _q.showGrid) != null ? _r : true,
-          dataTime,
-          toolbarExtra: toolBar
+                })))))
+            }, /*#__PURE__*/ React.createElement(ActionIconBox, {
+                title: (i18n === null || i18n === void 0 ? void 0 : (_i18n_locale3 = i18n.locale) === null || _i18n_locale3 === void 0 ? void 0 : _i18n_locale3.configChart) || '配置图表',
+                onClick: function() {
+                    return setRenderKey(function(k) {
+                        return k + 1;
+                    });
+                }
+            }, /*#__PURE__*/ React.createElement(SettingOutlined, {
+                style: {
+                    color: 'rgba(0, 25, 61, 0.3255)'
+                }
+            })))
+        ].filter(function(item) {
+            return !!item;
+        });
+    };
+    var toolBar = getChartPopover();
+    var chartDom = useMemo(function() {
+        var _window;
+        if (typeof window === 'undefined') return null;
+        if (process.env.NODE_ENV === 'test') return null;
+        //@ts-ignore
+        if ((_window = window) === null || _window === void 0 ? void 0 : _window.notRenderChart) return null;
+        if (chartType === 'table') {
+            return /*#__PURE__*/ React.createElement("div", {
+                key: config === null || config === void 0 ? void 0 : config.index,
+                contentEditable: false,
+                style: {
+                    margin: 12,
+                    overflow: 'auto',
+                    border: '1px solid #eee',
+                    borderRadius: '0.5em',
+                    flex: 1,
+                    maxWidth: 'calc(100% - 32px)',
+                    maxHeight: 400,
+                    userSelect: 'none'
+                }
+            }, /*#__PURE__*/ React.createElement(Table, {
+                size: "small",
+                dataSource: chartData,
+                columns: config === null || config === void 0 ? void 0 : config.columns,
+                pagination: false,
+                rowKey: function(record) {
+                    return record.key;
+                }
+            }));
         }
-      );
-    }
-    if (chartType === "radar") {
-      const radarData = (chartData || []).map((row, i) => {
-        var _a2;
-        const filterLabel = getFieldValue(row, filterBy);
-        const category = getFieldValue(row, groupBy);
-        const type = getFieldValue(row, colorLegend);
-        return __spreadValues(__spreadValues(__spreadValues({
-          label: String((_a2 = row == null ? void 0 : row[config == null ? void 0 : config.x]) != null ? _a2 : i + 1),
-          score: row == null ? void 0 : row[config == null ? void 0 : config.y]
-        }, category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
-      });
-      return /* @__PURE__ */ React.createElement(
-        RadarChart,
-        {
-          key: `${config == null ? void 0 : config.index}-radar-${renderKey}`,
-          data: radarData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          dataTime,
-          toolbarExtra: toolBar
+        if (chartType === 'descriptions' || renderDescriptionsFallback) {
+            return /*#__PURE__*/ React.createElement("div", {
+                key: config === null || config === void 0 ? void 0 : config.index,
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 8
+                }
+            }, chartData.map(function(row, rowIndex) {
+                var _config_columns;
+                return /*#__PURE__*/ React.createElement(Descriptions, {
+                    bordered: true,
+                    key: "".concat(config === null || config === void 0 ? void 0 : config.index, "-").concat(rowIndex),
+                    column: {
+                        xxl: 2,
+                        xl: 2,
+                        lg: 2,
+                        md: 2,
+                        sm: 1,
+                        xs: 1
+                    },
+                    items: config === null || config === void 0 ? void 0 : (_config_columns = config.columns) === null || _config_columns === void 0 ? void 0 : _config_columns.map(function(column) {
+                        if (!column.title || !column.dataIndex) return null;
+                        return {
+                            label: column.title || '',
+                            children: row[column.dataIndex]
+                        };
+                    }).filter(function(item) {
+                        return !!item;
+                    })
+                });
+            }));
         }
-      );
-    }
-    if (chartType === "scatter") {
-      const scatterData = (chartData || []).map((row) => {
-        const filterLabel = getFieldValue(row, filterBy);
-        const category = getFieldValue(row, groupBy);
-        const type = getFieldValue(row, colorLegend);
-        return __spreadValues(__spreadValues(__spreadValues({
-          x: row == null ? void 0 : row[config == null ? void 0 : config.x],
-          y: row == null ? void 0 : row[config == null ? void 0 : config.y]
-        }, category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
-      });
-      return /* @__PURE__ */ React.createElement(
-        ScatterChart,
-        {
-          key: `${config == null ? void 0 : config.index}-scatter-${renderKey}`,
-          data: scatterData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          dataTime,
-          toolbarExtra: toolBar
+        if (shouldLoadRuntime && isIntersecting) {
+            return /*#__PURE__*/ React.createElement(Suspense, {
+                fallback: /*#__PURE__*/ React.createElement(ChartRuntimeFallback, {
+                    height: (config === null || config === void 0 ? void 0 : config.height) || 240
+                })
+            }, /*#__PURE__*/ React.createElement(ChartRuntimeRenderer, {
+                chartType: chartType,
+                convertDonutData: convertDonutData,
+                convertFlatData: convertFlatData,
+                config: config,
+                renderKey: renderKey,
+                title: title,
+                dataTime: dataTime,
+                toolBar: toolBar,
+                filterBy: filterBy,
+                groupBy: groupBy,
+                colorLegend: colorLegend,
+                chartData: chartData,
+                getFieldValue: getFieldValue
+            }));
         }
-      );
-    }
-    if (chartType === "funnel") {
-      const funnelData = (chartData || []).map((row, i) => {
-        var _a2;
-        const filterLabel = getFieldValue(row, filterBy);
-        const category = getFieldValue(row, groupBy);
-        const type = getFieldValue(row, colorLegend);
-        return __spreadValues(__spreadValues(__spreadValues(__spreadValues({
-          x: String((_a2 = row == null ? void 0 : row[config == null ? void 0 : config.x]) != null ? _a2 : i + 1),
-          y: toNumber(row == null ? void 0 : row[config == null ? void 0 : config.y], 0)
-        }, (row == null ? void 0 : row.ratio) !== void 0 ? { ratio: row.ratio } : {}), category ? { category } : {}), type ? { type } : {}), filterLabel ? { filterLabel } : {});
-      });
-      return /* @__PURE__ */ React.createElement(
-        FunnelChart,
-        {
-          key: `${config == null ? void 0 : config.index}-funnel-${renderKey}`,
-          data: funnelData,
-          height: (config == null ? void 0 : config.height) || 400,
-          title: title || "",
-          dataTime,
-          typeNames: { rate: "转化率", name: colorLegend || "转化" },
-          toolbarExtra: toolBar
+        if (shouldLoadRuntime && !isIntersecting) {
+            return /*#__PURE__*/ React.createElement(ChartRuntimeFallback, {
+                height: (config === null || config === void 0 ? void 0 : config.height) || 240
+            });
         }
-      );
-    }
-    return null;
-  }, [
-    chartType,
-    JSON.stringify(chartData),
-    JSON.stringify(config),
-    renderKey,
-    toolBar,
-    convertDonutData,
-    convertFlatData,
-    title,
-    dataTime,
-    filterBy,
-    groupBy,
-    colorLegend,
-    runtime,
-    runtimeError,
-    isRuntimeLoading,
-    isIntersecting,
-    shouldLoadRuntime,
-    renderDescriptionsFallback,
-    handleRetryRuntime
-  ]);
-  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, style: { width: "100%" }, contentEditable: false }, chartDom);
-};
-export {
-  ChartRender
+        return null;
+    }, [
+        chartType,
+        JSON.stringify(chartData),
+        JSON.stringify(config),
+        renderKey,
+        toolBar,
+        convertDonutData,
+        convertFlatData,
+        title,
+        dataTime,
+        filterBy,
+        groupBy,
+        colorLegend,
+        isIntersecting,
+        shouldLoadRuntime,
+        renderDescriptionsFallback
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: containerRef,
+        style: {
+            width: '100%'
+        },
+        contentEditable: false
+    }, chartDom);
 };