@ant-design/agentic-ui 2.7.1 → 2.9.0

package/dist/Plugins/chart/ChartMark/Line.js

@@ -1,161 +1,189 @@
-// src/Plugins/chart/ChartMark/Line.tsx
-import {
-  CategoryScale,
-  Chart as ChartJS,
-  Legend,
-  LinearScale,
-  LineElement,
-  PointElement,
-  Title,
-  Tooltip
-} from "chart.js";
+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_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+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);
+}
+import { CategoryScale, Chart as ChartJS, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
 import React, { useImperativeHandle, useRef } from "react";
 import { Line as ChartLine } from "react-chartjs-2";
 import { stringFormatNumber } from "../utils";
 import { Container } from "./Container";
 var chartMarkLineRegistered = false;
-var Line = (props) => {
-  React.useMemo(() => {
-    if (chartMarkLineRegistered) {
-      return void 0;
-    }
-    if (typeof window === "undefined") {
-      return void 0;
-    }
-    ChartJS.register(
-      CategoryScale,
-      LinearScale,
-      PointElement,
-      LineElement,
-      Title,
-      Tooltip,
-      Legend
-    );
-    chartMarkLineRegistered = true;
-    return void 0;
-  }, []);
-  const chartRef = React.useRef(void 0);
-  const htmlRef = useRef(null);
-  const lineChartRef = useRef(null);
-  useImperativeHandle(props.chartRef, () => chartRef.current, [
-    chartRef.current
-  ]);
-  const processData = () => {
-    if (!props.data || props.data.length === 0) {
-      return {
-        labels: [],
-        datasets: []
-      };
-    }
-    const labels = [
-      ...new Set(props.data.map((item) => item[props.xField]))
-    ];
-    if (props.colorLegend) {
-      const groupedData = props.data.reduce((acc, item) => {
-        const group = item[props.colorLegend];
-        if (!acc[group]) {
-          acc[group] = [];
+export var Line = function(props) {
+    React.useMemo(function() {
+        if (chartMarkLineRegistered) {
+            return undefined;
         }
-        acc[group].push(item);
-        return acc;
-      }, {});
-      const datasets = Object.keys(groupedData).map((group, index) => {
-        const groupData = groupedData[group];
-        const data = labels.map((label) => {
-          const item = groupData.find((d) => d[props.xField] === label);
-          return item ? item[props.yField] : null;
-        });
-        const colors = [
-          "rgba(54, 162, 235, 1)",
-          "rgba(255, 99, 132, 1)",
-          "rgba(255, 206, 86, 1)",
-          "rgba(75, 192, 192, 1)",
-          "rgba(153, 102, 255, 1)"
-        ];
-        return {
-          label: group,
-          data,
-          fill: false,
-          backgroundColor: colors[index % colors.length],
-          borderColor: colors[index % colors.length],
-          borderWidth: 2,
-          tension: 0.1
-        };
-      });
-      return { labels, datasets };
-    } else {
-      const data = labels.map((label) => {
-        const item = props.data.find((d) => d[props.xField] === label);
-        return item ? item[props.yField] : null;
-      });
-      return {
-        labels,
-        datasets: [
-          {
-            label: props.yField,
-            data,
-            fill: false,
-            backgroundColor: "rgba(54, 162, 235, 1)",
-            borderColor: "rgba(54, 162, 235, 1)",
-            borderWidth: 2,
-            tension: 0.1
-          }
-        ]
-      };
-    }
-  };
-  const chartData = processData();
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: !!props.colorLegend,
-        position: "top"
-      },
-      title: {
-        display: false
-      }
-    },
-    scales: {
-      x: {
-        display: true,
-        title: {
-          display: false
-        },
-        ticks: {
-          callback: function(value, index) {
-            const label = chartData.labels[index];
-            return stringFormatNumber(label);
-          }
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend);
+        chartMarkLineRegistered = true;
+        return undefined;
+    }, []);
+    var chartRef = React.useRef(undefined);
+    var htmlRef = useRef(null);
+    var lineChartRef = useRef(null);
+    useImperativeHandle(props.chartRef, function() {
+        return chartRef.current;
+    }, [
+        chartRef.current
+    ]);
+    // 处理数据格式
+    var processData = function() {
+        if (!props.data || props.data.length === 0) {
+            return {
+                labels: [],
+                datasets: []
+            };
+        }
+        // 获取所有唯一的 x 值作为标签
+        var labels = _to_consumable_array(new Set(props.data.map(function(item) {
+            return item[props.xField];
+        })));
+        if (props.colorLegend) {
+            // 如果有颜色图例，按颜色分组数据
+            var groupedData = props.data.reduce(function(acc, item) {
+                var group = item[props.colorLegend];
+                if (!acc[group]) {
+                    acc[group] = [];
+                }
+                acc[group].push(item);
+                return acc;
+            }, {});
+            var datasets = Object.keys(groupedData).map(function(group, index) {
+                var groupData = groupedData[group];
+                var data = labels.map(function(label) {
+                    var item = groupData.find(function(d) {
+                        return d[props.xField] === label;
+                    });
+                    return item ? item[props.yField] : null;
+                });
+                var colors = [
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)'
+                ];
+                return {
+                    label: group,
+                    data: data,
+                    fill: false,
+                    backgroundColor: colors[index % colors.length],
+                    borderColor: colors[index % colors.length],
+                    borderWidth: 2,
+                    tension: 0.1
+                };
+            });
+            return {
+                labels: labels,
+                datasets: datasets
+            };
+        } else {
+            // 单一数据集
+            var data = labels.map(function(label) {
+                var item = props.data.find(function(d) {
+                    return d[props.xField] === label;
+                });
+                return item ? item[props.yField] : null;
+            });
+            return {
+                labels: labels,
+                datasets: [
+                    {
+                        label: props.yField,
+                        data: data,
+                        fill: false,
+                        backgroundColor: 'rgba(54, 162, 235, 1)',
+                        borderColor: 'rgba(54, 162, 235, 1)',
+                        borderWidth: 2,
+                        tension: 0.1
+                    }
+                ]
+            };
         }
-      },
-      y: {
-        display: true,
-        title: {
-          display: false
+    };
+    var chartData = processData();
+    var options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: !!props.colorLegend,
+                position: 'top'
+            },
+            title: {
+                display: false
+            }
         },
-        ticks: {
-          callback: function(value) {
-            return stringFormatNumber(value);
-          }
+        scales: {
+            x: {
+                display: true,
+                title: {
+                    display: false
+                },
+                ticks: {
+                    callback: function callback(value, index) {
+                        var label = chartData.labels[index];
+                        return stringFormatNumber(label);
+                    }
+                }
+            },
+            y: {
+                display: true,
+                title: {
+                    display: false
+                },
+                ticks: {
+                    callback: function callback(value) {
+                        return stringFormatNumber(value);
+                    }
+                }
+            }
+        },
+        elements: {
+            point: {
+                radius: 3,
+                hoverRadius: 5
+            }
         }
-      }
-    },
-    elements: {
-      point: {
-        radius: 3,
-        hoverRadius: 5
-      }
-    }
-  };
-  React.useEffect(() => {
-    if (lineChartRef.current) {
-      chartRef.current = lineChartRef.current;
-    }
-  }, [lineChartRef.current]);
-  return /* @__PURE__ */ React.createElement(Container, { index: props.index, chartRef, htmlRef }, /* @__PURE__ */ React.createElement(ChartLine, { ref: lineChartRef, data: chartData, options }));
-};
-export {
-  Line
+    };
+    // 更新 chartRef 当 Line 组件的 ref 改变时
+    React.useEffect(function() {
+        if (lineChartRef.current) {
+            chartRef.current = lineChartRef.current;
+        }
+    }, [
+        lineChartRef.current
+    ]);
+    return /*#__PURE__*/ React.createElement(Container, {
+        index: props.index,
+        chartRef: chartRef,
+        htmlRef: htmlRef
+    }, /*#__PURE__*/ React.createElement(ChartLine, {
+        ref: lineChartRef,
+        data: chartData,
+        options: options
+    }));
 };

package/dist/Plugins/chart/ChartMark/Pie.js

@@ -1,72 +1,88 @@
-// src/Plugins/chart/ChartMark/Pie.tsx
 import { ArcElement, Chart as ChartJS, Legend, Tooltip } from "chart.js";
 import React, { useImperativeHandle, useRef } from "react";
 import { Doughnut } from "react-chartjs-2";
 import { defaultColorList } from "../const";
 import { Container } from "./Container";
 var chartMarkPieRegistered = false;
-var Pie = (props) => {
-  React.useMemo(() => {
-    if (chartMarkPieRegistered) {
-      return void 0;
-    }
-    if (typeof window === "undefined") {
-      return void 0;
-    }
-    ChartJS.register(ArcElement, Tooltip, Legend);
-    chartMarkPieRegistered = true;
-    return void 0;
-  }, []);
-  const chartRef = React.useRef(void 0);
-  const htmlRef = useRef(null);
-  const pieChartRef = useRef(null);
-  useImperativeHandle(props.chartRef, () => chartRef.current, [
-    chartRef.current
-  ]);
-  const processData = () => {
-    if (!props.data || props.data.length === 0) {
-      return {
-        labels: [],
-        datasets: []
-      };
-    }
-    const labels = props.data.map((item) => item[props.xField]);
-    const data = props.data.map((item) => item[props.yField]);
-    return {
-      labels,
-      datasets: [
-        {
-          data,
-          backgroundColor: defaultColorList.slice(0, data.length),
-          borderColor: defaultColorList.slice(0, data.length).map((color) => color),
-          borderWidth: 1
+export var Pie = function(props) {
+    React.useMemo(function() {
+        if (chartMarkPieRegistered) {
+            return undefined;
         }
-      ]
+        if (typeof window === 'undefined') {
+            return undefined;
+        }
+        ChartJS.register(ArcElement, Tooltip, Legend);
+        chartMarkPieRegistered = true;
+        return undefined;
+    }, []);
+    var chartRef = React.useRef(undefined);
+    var htmlRef = useRef(null);
+    var pieChartRef = useRef(null);
+    useImperativeHandle(props.chartRef, function() {
+        return chartRef.current;
+    }, [
+        chartRef.current
+    ]);
+    // 处理数据格式
+    var processData = function() {
+        if (!props.data || props.data.length === 0) {
+            return {
+                labels: [],
+                datasets: []
+            };
+        }
+        // 获取标签和数据
+        var labels = props.data.map(function(item) {
+            return item[props.xField];
+        });
+        var data = props.data.map(function(item) {
+            return item[props.yField];
+        });
+        return {
+            labels: labels,
+            datasets: [
+                {
+                    data: data,
+                    backgroundColor: defaultColorList.slice(0, data.length),
+                    borderColor: defaultColorList.slice(0, data.length).map(function(color) {
+                        return color;
+                    }),
+                    borderWidth: 1
+                }
+            ]
+        };
     };
-  };
-  const chartData = processData();
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: true,
-        position: "bottom"
-      },
-      tooltip: {
-        enabled: true
-      }
-    },
-    cutout: "50%"
-    // 创建环形图效果，类似原来的 innerRadius: 0.5
-  };
-  React.useEffect(() => {
-    if (pieChartRef.current) {
-      chartRef.current = pieChartRef.current;
-    }
-  }, [pieChartRef.current]);
-  return /* @__PURE__ */ React.createElement(Container, { index: props.index, chartRef, htmlRef }, /* @__PURE__ */ React.createElement(Doughnut, { ref: pieChartRef, data: chartData, options }));
-};
-export {
-  Pie
+    var chartData = processData();
+    var options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+            legend: {
+                display: true,
+                position: 'bottom'
+            },
+            tooltip: {
+                enabled: true
+            }
+        },
+        cutout: '50%'
+    };
+    // 更新 chartRef 当 Doughnut 组件的 ref 改变时
+    React.useEffect(function() {
+        if (pieChartRef.current) {
+            chartRef.current = pieChartRef.current;
+        }
+    }, [
+        pieChartRef.current
+    ]);
+    return /*#__PURE__*/ React.createElement(Container, {
+        index: props.index,
+        chartRef: chartRef,
+        htmlRef: htmlRef
+    }, /*#__PURE__*/ React.createElement(Doughnut, {
+        ref: pieChartRef,
+        data: chartData,
+        options: options
+    }));
 };

package/dist/Plugins/chart/ChartMark/index.js

@@ -1,13 +1,6 @@
-// src/Plugins/chart/ChartMark/index.tsx
-import { Area } from "./Area";
-import { Bar } from "./Bar";
-import { Column } from "./Column";
-import { Line } from "./Line";
-import { Pie } from "./Pie";
-export {
-  Area,
-  Bar,
-  Column,
-  Line,
-  Pie
-};
+// Chart.js 不需要手动注册主题，移除 @antv/g2 相关代码
+export { Area } from "./Area";
+export { Bar } from "./Bar";
+export { Column } from "./Column";
+export { Line } from "./Line";
+export { Pie } from "./Pie";

package/dist/Plugins/chart/ChartMark/useChart.js

@@ -0,0 +1 @@
+export { };

package/dist/Plugins/chart/ChartRender.d.ts

@@ -4,6 +4,7 @@ import React from 'react';
  *
  * 该组件用于渲染各种类型的图表，支持饼图、柱状图、折线图、面积图、表格等。
  * 提供图表类型切换、全屏显示、下载、配置等功能。
+ * 使用 React.lazy 和 Suspense 实现代码分割和延迟加载，优化性能。
  *
  * @component
  * @description 图表渲染组件，支持多种图表类型的渲染和交互
@@ -54,6 +55,7 @@ import React from 'react';
  * - 提供响应式布局
  * - 集成国际化支持
  * - 提供图表属性工具栏
+ * - 使用 React.lazy 和 Suspense 实现代码分割
  */
 export declare const ChartRender: React.FC<{
     chartType: 'pie' | 'donut' | 'bar' | 'line' | 'column' | 'area' | 'radar' | 'scatter' | 'funnel' | 'descriptions' | 'table';