@ant-design/agentic-ui 2.1.0 → 2.2.0

package/dist/Hooks/useIntersectionOnce.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export interface UseIntersectionOnceOptions extends Omit<IntersectionObserverInit, 'root'> {
+    root?: RefObject<Element | null> | Element | null;
+}
+export declare const useIntersectionOnce: <T extends Element>(targetRef: RefObject<T>, options?: UseIntersectionOnceOptions) => boolean;

package/dist/Hooks/useIntersectionOnce.js

@@ -0,0 +1,79 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/Hooks/useIntersectionOnce.ts
+import { useEffect, useRef, useState } from "react";
+var useIntersectionOnce = (targetRef, options = {}) => {
+  const _a = options, { root } = _a, restOptions = __objRest(_a, ["root"]);
+  const [isIntersecting, setIntersecting] = useState(false);
+  const observerRef = useRef(null);
+  useEffect(() => {
+    if (isIntersecting)
+      return;
+    const element = targetRef.current;
+    if (!element)
+      return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIntersecting(true);
+      return;
+    }
+    const resolvedRoot = root && "current" in root ? root.current : root;
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          var _a2;
+          if (entry.isIntersecting || entry.intersectionRatio > 0) {
+            setIntersecting(true);
+            (_a2 = observerRef.current) == null ? void 0 : _a2.disconnect();
+          }
+        });
+      },
+      __spreadProps(__spreadValues({}, restOptions), { root: resolvedRoot != null ? resolvedRoot : null })
+    );
+    observerRef.current.observe(element);
+    return () => {
+      var _a2;
+      (_a2 = observerRef.current) == null ? void 0 : _a2.disconnect();
+      observerRef.current = null;
+    };
+  }, [
+    targetRef,
+    restOptions.rootMargin,
+    restOptions.threshold,
+    root,
+    isIntersecting
+  ]);
+  return isIntersecting;
+};
+export {
+  useIntersectionOnce
+};

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

@@ -46,15 +46,7 @@ import {
   findDataPointByXValue
 } from "../utils";
 import { useStyle } from "./style";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Filler,
-  Tooltip,
-  Legend
-);
+var areaChartComponentsRegistered = false;
 var hexToRgba = (hex, alpha) => {
   const sanitized = hex.replace("#", "");
   const isShort = sanitized.length === 3;
@@ -95,6 +87,25 @@ var AreaChart = ({
   statistic: statisticConfig,
   variant
 }) => {
+  useMemo(() => {
+    if (areaChartComponentsRegistered) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    ChartJS.register(
+      CategoryScale,
+      LinearScale,
+      PointElement,
+      LineElement,
+      Filler,
+      Tooltip,
+      Legend
+    );
+    areaChartComponentsRegistered = true;
+    return void 0;
+  }, []);
   const safeData = Array.isArray(data) ? data : [];
   const [windowWidth, setWindowWidth] = useState(
     typeof window !== "undefined" ? window.innerWidth : 768

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

@@ -45,7 +45,7 @@ import {
   findDataPointByXValue
 } from "../utils";
 import { useStyle } from "./style";
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+var barChartComponentsRegistered = false;
 var hexToRgba = (hex, alpha) => {
   const sanitized = hex.replace("#", "");
   const isShort = sanitized.length === 3;
@@ -93,6 +93,17 @@ var BarChart = ({
   dataLabelFormatter,
   chartOptions
 }) => {
+  useMemo(() => {
+    if (barChartComponentsRegistered) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+    barChartComponentsRegistered = true;
+    return void 0;
+  }, []);
   const safeData = Array.isArray(data) ? data : [];
   const [windowWidth, setWindowWidth] = useState(
     typeof window !== "undefined" ? window.innerWidth : 768

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

@@ -13,17 +13,28 @@ import {
 import React, { useImperativeHandle, useRef } from "react";
 import { Line } from "react-chartjs-2";
 import { Container } from "./Container";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Filler,
-  Title,
-  Tooltip,
-  Legend
-);
+var chartMarkAreaRegistered = false;
 var Area = (props) => {
+  React.useMemo(() => {
+    if (chartMarkAreaRegistered) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    ChartJS.register(
+      CategoryScale,
+      LinearScale,
+      PointElement,
+      LineElement,
+      Filler,
+      Title,
+      Tooltip,
+      Legend
+    );
+    chartMarkAreaRegistered = true;
+    return void 0;
+  }, []);
   const chartRef = React.useRef(void 0);
   const htmlRef = useRef(null);
   const lineChartRef = useRef(null);

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

@@ -12,15 +12,26 @@ import React, { useImperativeHandle, useRef } from "react";
 import { Bar as ChartBar } from "react-chartjs-2";
 import { stringFormatNumber } from "../utils";
 import { Container } from "./Container";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
+var chartMarkBarRegistered = false;
 var Bar = (props) => {
+  React.useMemo(() => {
+    if (chartMarkBarRegistered) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    ChartJS.register(
+      CategoryScale,
+      LinearScale,
+      BarElement,
+      Title,
+      Tooltip,
+      Legend
+    );
+    chartMarkBarRegistered = true;
+    return void 0;
+  }, []);
   const chartRef = React.useRef(void 0);
   const htmlRef = useRef(null);
   const barChartRef = useRef(null);

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

@@ -12,15 +12,26 @@ import React, { useImperativeHandle, useRef } from "react";
 import { Bar as ChartBar } from "react-chartjs-2";
 import { stringFormatNumber } from "../utils";
 import { Container } from "./Container";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-);
+var chartMarkColumnRegistered = false;
 var Column = (props) => {
+  React.useMemo(() => {
+    if (chartMarkColumnRegistered) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    ChartJS.register(
+      CategoryScale,
+      LinearScale,
+      BarElement,
+      Title,
+      Tooltip,
+      Legend
+    );
+    chartMarkColumnRegistered = true;
+    return void 0;
+  }, []);
   const chartRef = React.useRef(void 0);
   const htmlRef = useRef(null);
   const barChartRef = useRef(null);

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

@@ -13,16 +13,27 @@ import React, { useImperativeHandle, useRef } from "react";
 import { Line as ChartLine } from "react-chartjs-2";
 import { stringFormatNumber } from "../utils";
 import { Container } from "./Container";
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend
-);
+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);

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

@@ -4,8 +4,19 @@ import React, { useImperativeHandle, useRef } from "react";
 import { Doughnut } from "react-chartjs-2";
 import { defaultColorList } from "../const";
 import { Container } from "./Container";
-ChartJS.register(ArcElement, Tooltip, Legend);
+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);

package/dist/Plugins/chart/ChartRender.js

@@ -21,14 +21,10 @@ import { ProForm, ProFormSelect } from "@ant-design/pro-components";
 import { ConfigProvider, Descriptions, Dropdown, Popover, Table } from "antd";
 import React, { 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 AreaChart from "./AreaChart";
-import BarChart from "./BarChart";
-import DonutChart from "./DonutChart";
-import FunnelChart from "./FunnelChart";
-import LineChart from "./LineChart";
-import RadarChart from "./RadarChart";
-import ScatterChart from "./ScatterChart";
+import { loadChartRuntime } from "./loadChartRuntime";
 import { isNotEmpty, toNumber } from "./utils";
 var getChartMap = (i18n) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
@@ -95,6 +91,58 @@ var ChartRender = (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 (!shouldLoadRuntime)
+      return;
+    if (!isIntersecting)
+      return;
+    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;
@@ -400,6 +448,111 @@ var ChartRender = (props) => {
         )
       );
     }
+    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,
@@ -563,48 +716,29 @@ var ChartRender = (props) => {
         }
       );
     }
-    if (chartType === "descriptions" || chartData.length < 2 && (config == null ? void 0 : config.columns.length) > 8) {
-      return /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          key: config == null ? void 0 : config.index,
-          style: {
-            display: "flex",
-            flexDirection: "column",
-            gap: 8
-          }
-        },
-        chartData.map((row) => {
-          return /* @__PURE__ */ React.createElement(
-            Descriptions,
-            {
-              bordered: true,
-              key: config == null ? void 0 : config.index,
-              column: {
-                xxl: 2,
-                xl: 2,
-                lg: 2,
-                md: 2,
-                sm: 1,
-                xs: 1
-              },
-              items: config == null ? void 0 : config.columns.map((column) => {
-                if (!column.title || !column.dataIndex)
-                  return null;
-                return {
-                  label: column.title || "",
-                  children: row[column.dataIndex]
-                };
-              }).filter((item) => !!item)
-            }
-          );
-        })
-      );
-    }
-  }, [chartType, JSON.stringify(chartData), JSON.stringify(config)]);
-  if (!chartDom)
     return null;
-  return chartDom;
+  }, [
+    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

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

@@ -62,7 +62,7 @@ import {
 import LegendView from "./Legend";
 import { createBackgroundArcPlugin, createCenterTextPlugin } from "./plugins";
 import { useStyle } from "./style";
-ChartJS.register(ArcElement, Tooltip, Legend);
+var donutChartComponentsRegistered = false;
 var DonutChart = (_a) => {
   var _b = _a, {
     data,
@@ -102,6 +102,17 @@ var DonutChart = (_a) => {
     "statistic"
   ]);
   var _a2;
+  useMemo(() => {
+    if (donutChartComponentsRegistered) {
+      return void 0;
+    }
+    if (typeof window === "undefined") {
+      return void 0;
+    }
+    ChartJS.register(ArcElement, Tooltip, Legend);
+    donutChartComponentsRegistered = true;
+    return void 0;
+  }, []);
   const { isMobile, windowWidth } = useMobile();
   const defaultConfigs = [{ showLegend: true }];
   const finalConfigs = configs || defaultConfigs;

package/dist/Plugins/chart/FunnelChart/index.d.ts

@@ -44,6 +44,8 @@ export interface FunnelChartProps extends ChartContainerProps {
     toolbarExtra?: React.ReactNode;
     /** 是否将过滤器渲染到工具栏 */
     renderFilterInToolbar?: boolean;
+    /** 最底层的最小宽度占比（0-1），相对于最顶层的宽度，0-不限制 */
+    bottomLayerMinWidth?: number;
     /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
     statistic?: StatisticConfigType;
     typeNames?: {