@ant-design/agentic-ui 2.0.14 → 2.0.16

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

@@ -40,6 +40,7 @@ import {
   LinearScale,
   Tooltip
 } from "chart.js";
+import classNames from "classnames";
 import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Bar } from "react-chartjs-2";
 import ChartStatistic from "../ChartStatistic";
@@ -49,12 +50,10 @@ import {
   ChartToolBar,
   downloadChart
 } from "../components";
-import {
-  useChartStatistic
-} from "../hooks/useChartStatistic";
+import { defaultColorList } from "../const";
 import { findDataPointByXValue, isXValueEqual, toNumber } from "../utils";
+import { useStyle } from "./style";
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
-var defaultColors = "#1890ff";
 var FunnelChart = (_a) => {
   var _b = _a, {
     title,
@@ -72,7 +71,7 @@ var FunnelChart = (_a) => {
     toolbarExtra,
     renderFilterInToolbar = false,
     typeNames,
-    statistic
+    statistic: statisticConfig
   } = _b, props = __objRest(_b, [
     "title",
     "data",
@@ -92,7 +91,11 @@ var FunnelChart = (_a) => {
     "statistic"
   ]);
   const safeData = Array.isArray(data) ? data : [];
-  const statisticComponentConfigs = useChartStatistic(statistic);
+  const statistics = useMemo(() => {
+    if (!statisticConfig)
+      return null;
+    return Array.isArray(statisticConfig) ? statisticConfig : [statisticConfig];
+  }, [statisticConfig]);
   const [windowWidth, setWindowWidth] = useState(
     typeof window !== "undefined" ? window.innerWidth : 768
   );
@@ -107,6 +110,7 @@ var FunnelChart = (_a) => {
   }, []);
   const context = useContext(ConfigProvider.ConfigContext);
   const baseClassName = context == null ? void 0 : context.getPrefixCls("funnel-chart-container");
+  const { hashId, wrapSSR } = useStyle(baseClassName);
   const chartRef = useRef(null);
   const [showTrapezoid, setShowTrapezoid] = useState(true);
   const [pluginToggleKey, setPluginToggleKey] = useState(0);
@@ -167,7 +171,7 @@ var FunnelChart = (_a) => {
     return chartHeight;
   }, [height, chartHeight]);
   const processedData = useMemo(() => {
-    const baseColor = color || defaultColors;
+    const baseColor = color || defaultColorList[0];
     const labels = stages.map((x) => x.toString());
     const values = stages.map((x) => {
       const dp = findDataPointByXValue(filteredData, x);
@@ -535,68 +539,83 @@ var FunnelChart = (_a) => {
       }
     };
   }, [isMobile, axisTextColor]);
-  return /* @__PURE__ */ React.createElement(
-    ChartContainer,
-    {
-      baseClassName,
-      className,
-      theme,
-      isMobile,
-      variant: props.variant,
-      style: {
-        width: responsiveWidth
-      }
-    },
+  return wrapSSR(
     /* @__PURE__ */ React.createElement(
-      ChartToolBar,
+      ChartContainer,
       {
-        title,
+        baseClassName,
+        className,
         theme,
-        onDownload: handleDownload,
-        dataTime,
-        extra: toolbarExtra,
-        filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /* @__PURE__ */ React.createElement(
-          ChartFilter,
-          __spreadProps(__spreadValues({
-            filterOptions,
-            selectedFilter,
-            onFilterChange: setSelectedFilter
-          }, customOptions && {
-            customOptions,
-            selectedCustomSelection: selectedFilterLabel,
-            onSelectionChange: setSelectedFilterLabel
-          }), {
-            theme,
-            variant: "compact"
-          })
-        ) : void 0
-      }
-    ),
-    !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
-      ChartFilter,
-      __spreadProps(__spreadValues({
-        filterOptions,
-        selectedFilter,
-        onFilterChange: setSelectedFilter
-      }, customOptions && {
-        customOptions,
-        selectedCustomSelection: selectedFilterLabel,
-        onSelectionChange: setSelectedFilterLabel
-      }), {
-        theme
-      })
-    ),
-    statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 16 } }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
-    /* @__PURE__ */ React.createElement("div", { className: "chart-wrapper", style: { height: finalHeight } }, /* @__PURE__ */ React.createElement(
-      Bar,
-      {
-        key: `funnel-${pluginToggleKey}`,
-        ref: chartRef,
-        data: processedData,
-        options,
-        plugins: [trapezoidPlugin, rightLabelPlugin]
-      }
-    ))
+        isMobile,
+        variant: props.variant,
+        style: {
+          width: responsiveWidth
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        ChartToolBar,
+        {
+          title,
+          theme,
+          onDownload: handleDownload,
+          dataTime,
+          extra: toolbarExtra,
+          filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /* @__PURE__ */ React.createElement(
+            ChartFilter,
+            __spreadProps(__spreadValues({
+              filterOptions,
+              selectedFilter,
+              onFilterChange: setSelectedFilter
+            }, customOptions && {
+              customOptions,
+              selectedCustomSelection: selectedFilterLabel,
+              onSelectionChange: setSelectedFilterLabel
+            }), {
+              theme,
+              variant: "compact"
+            })
+          ) : void 0
+        }
+      ),
+      !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
+        ChartFilter,
+        __spreadProps(__spreadValues({
+          filterOptions,
+          selectedFilter,
+          onFilterChange: setSelectedFilter
+        }, customOptions && {
+          customOptions,
+          selectedCustomSelection: selectedFilterLabel,
+          onSelectionChange: setSelectedFilterLabel
+        }), {
+          theme
+        })
+      ),
+      statistics && /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${baseClassName}-statistic-container`, hashId)
+        },
+        statistics.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))
+      ),
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          className: classNames(`${baseClassName}-wrapper`, hashId),
+          style: { height: finalHeight }
+        },
+        /* @__PURE__ */ React.createElement(
+          Bar,
+          {
+            key: `funnel-${pluginToggleKey}`,
+            ref: chartRef,
+            data: processedData,
+            options,
+            plugins: [trapezoidPlugin, rightLabelPlugin]
+          }
+        )
+      )
+    )
   );
 };
 var FunnelChart_default = FunnelChart;

package/dist/Plugins/chart/FunnelChart/style.js

@@ -38,6 +38,18 @@ var genStyle = (token) => {
         maxWidth: "100% !important",
         maxHeight: "100% !important"
       },
+      "&-statistic-container": {
+        display: "flex",
+        gap: "16px",
+        marginBottom: "16px",
+        flexWrap: "wrap",
+        alignItems: "flex-start"
+      },
+      "&-wrapper": {
+        position: "relative",
+        width: "100%",
+        height: "100%"
+      },
       "@media (max-width: 768px)": {
         ".chart-wrapper": {
           height: "calc(100% - 100px)",

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

@@ -23,10 +23,10 @@ export interface LineChartConfigItem {
     yAxisStep?: number;
 }
 export interface LineChartProps extends ChartContainerProps {
-    /** 图表标题 */
-    title?: string;
     /** 扁平化数据数组 */
     data: LineChartDataItem[];
+    /** 图表标题 */
+    title?: string;
     /** 图表宽度，默认600px */
     width?: number | string;
     /** 图表高度，默认400px */

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

@@ -51,9 +51,7 @@ import {
   ChartToolBar,
   downloadChart
 } from "../components";
-import {
-  useChartStatistic
-} from "../hooks/useChartStatistic";
+import { defaultColorList } from "../const";
 import {
   extractAndSortXValues,
   findDataPointByXValue
@@ -67,18 +65,6 @@ ChartJS.register(
   Tooltip,
   Legend
 );
-var defaultColors = [
-  "#1677ff",
-  "#8954FC",
-  "#15e7e4",
-  "#F45BB5",
-  "#00A6FF",
-  "#33E59B",
-  "#D666E4",
-  "#6151FF",
-  "#BF3C93",
-  "#005EE0"
-];
 var LineChart = (_a) => {
   var _b = _a, {
     title,
@@ -140,7 +126,11 @@ var LineChart = (_a) => {
   const context = useContext(ConfigProvider.ConfigContext);
   const baseClassName = context == null ? void 0 : context.getPrefixCls("line-chart-container");
   const chartRef = useRef(null);
-  const statisticComponentConfigs = useChartStatistic(statisticConfig);
+  const statistics = useMemo(() => {
+    if (!statisticConfig)
+      return null;
+    return Array.isArray(statisticConfig) ? statisticConfig : [statisticConfig];
+  }, [statisticConfig]);
   const categories = useMemo(() => {
     const uniqueCategories = [
       ...new Set(safeData.map((item) => item.category))
@@ -195,7 +185,7 @@ var LineChart = (_a) => {
     const labels = xValues.map((x) => x.toString());
     const datasets = types.map((type, index) => {
       const provided = color;
-      const baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColors[index % defaultColors.length] : provided || defaultColors[index % defaultColors.length];
+      const baseColor = Array.isArray(provided) ? provided[index % provided.length] || defaultColorList[index % defaultColorList.length] : provided || defaultColorList[index % defaultColorList.length];
       const typeData = xValues.map((x) => {
         const dataPoint = findDataPointByXValue(filteredData, x, type);
         const v = dataPoint == null ? void 0 : dataPoint.y;
@@ -372,7 +362,7 @@ var LineChart = (_a) => {
         ) : void 0
       }
     ),
-    statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
+    statistics && /* @__PURE__ */ React.createElement("div", { className: `${baseClassName}-statistic-container` }, statistics.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
     !renderFilterInToolbar && filterOptions && filterOptions.length > 1 && /* @__PURE__ */ React.createElement(
       ChartFilter,
       __spreadProps(__spreadValues({
@@ -387,7 +377,14 @@ var LineChart = (_a) => {
         theme
       })
     ),
-    /* @__PURE__ */ React.createElement("div", { className: "chart-wrapper", style: { height: responsiveHeight } }, /* @__PURE__ */ React.createElement(Line, { ref: chartRef, data: processedData, options }))
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: `${baseClassName}-wrapper`,
+        style: { height: responsiveHeight }
+      },
+      /* @__PURE__ */ React.createElement(Line, { ref: chartRef, data: processedData, options })
+    )
   );
 };
 var LineChart_default = LineChart;

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

@@ -9,19 +9,25 @@ export interface RadarChartDataItem {
     filterLabel?: string;
 }
 interface RadarChartProps extends ChartContainerProps {
+    /** 扁平化数据数组 */
     data: RadarChartDataItem[];
+    /** 图表标题 */
     title?: string;
+    /** 图表宽度，默认600px */
     width?: number | string;
+    /** 图表高度，默认400px */
     height?: number | string;
+    /** 自定义CSS类名 */
     className?: string;
+    /** 数据时间 */
+    dataTime?: string;
+    /** 自定义主色（可选），支持 string 或 string[]；数组按序对应各数据序列 */
+    color?: string | string[];
+    /** 头部工具条额外按钮 */
     toolbarExtra?: React.ReactNode;
     /** 是否将过滤器渲染到工具栏 */
     renderFilterInToolbar?: boolean;
-    dataTime?: string;
-    borderColor?: string;
-    backgroundColor?: string;
-    pointBackgroundColor?: string;
-    /** 统计数据组件配置 */
+    /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
     statistic?: StatisticConfigType;
     /** 图例文字最大宽度（像素），超出则显示省略号，默认80px */
     textMaxWidth?: number;

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

@@ -42,7 +42,7 @@ import {
   Tooltip
 } from "chart.js";
 import classNames from "classnames";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Radar } from "react-chartjs-2";
 import ChartStatistic from "../ChartStatistic";
 import {
@@ -51,9 +51,7 @@ import {
   ChartToolBar,
   downloadChart
 } from "../components";
-import {
-  useChartStatistic
-} from "../hooks/useChartStatistic";
+import { defaultColorList } from "../const";
 import { useStyle } from "./style";
 ChartJS.register(
   RadialLinearScale,
@@ -63,28 +61,6 @@ ChartJS.register(
   Tooltip,
   Legend
 );
-var defaultColors = [
-  "#388BFF",
-  // 第一个颜色：蓝色
-  "#917EF7",
-  // 第二个颜色：紫色
-  "#2AD8FC",
-  // 第三个颜色：青色
-  "#F45BB5",
-  // 粉色
-  "#00A6FF",
-  // 天蓝色
-  "#33E59B",
-  // 绿色
-  "#D666E4",
-  // 紫红色
-  "#6151FF",
-  // 靛蓝色
-  "#BF3C93",
-  // 玫红色
-  "#005EE0"
-  // 深蓝色
-];
 var RadarChart = (_a) => {
   var _b = _a, {
     data,
@@ -95,10 +71,8 @@ var RadarChart = (_a) => {
     toolbarExtra,
     renderFilterInToolbar = false,
     dataTime,
-    borderColor,
-    backgroundColor,
-    pointBackgroundColor,
-    statistic,
+    color,
+    statistic: statisticConfig,
     textMaxWidth = 80
   } = _b, props = __objRest(_b, [
     "data",
@@ -109,16 +83,18 @@ var RadarChart = (_a) => {
     "toolbarExtra",
     "renderFilterInToolbar",
     "dataTime",
-    "borderColor",
-    "backgroundColor",
-    "pointBackgroundColor",
+    "color",
     "statistic",
     "textMaxWidth"
   ]);
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls("radar-chart");
   const { wrapSSR, hashId } = useStyle(prefixCls);
-  const statisticComponentConfigs = useChartStatistic(statistic);
+  const statistics = useMemo(() => {
+    if (!statisticConfig)
+      return null;
+    return Array.isArray(statisticConfig) ? statisticConfig : [statisticConfig];
+  }, [statisticConfig]);
   const [windowWidth, setWindowWidth] = useState(
     typeof window !== "undefined" ? window.innerWidth : 768
   );
@@ -246,15 +222,18 @@ var RadarChart = (_a) => {
       }
       return 0;
     });
-    const safeIndex = Math.max(0, index % defaultColors.length);
-    const safeDefaultColor = defaultColors[safeIndex] || "#388BFF";
+    const providedColor = color;
+    const baseColor = Array.isArray(providedColor) ? providedColor[index % providedColor.length] : providedColor;
+    const safeIndex = Math.max(0, index % defaultColorList.length);
+    const safeDefaultColor = defaultColorList[safeIndex] || "#1677ff";
+    const finalColor = baseColor || safeDefaultColor;
     return {
       label: type || "默认",
       data: scores,
-      borderColor: borderColor || safeDefaultColor,
-      backgroundColor: backgroundColor || `${safeDefaultColor}20`,
+      borderColor: finalColor,
+      backgroundColor: `${finalColor}20`,
       borderWidth: isMobile ? 1.5 : 2,
-      pointBackgroundColor: pointBackgroundColor || safeDefaultColor,
+      pointBackgroundColor: finalColor,
       pointBorderColor: "#fff",
       pointBorderWidth: isMobile ? 1 : 2,
       pointRadius: isMobile ? 3 : 4,
@@ -281,10 +260,10 @@ var RadarChart = (_a) => {
       {
         label: "默认",
         data: [0],
-        borderColor: defaultColors[0] || "#388BFF",
-        backgroundColor: `${defaultColors[0] || "#388BFF"}20`,
+        borderColor: defaultColorList[0] || "#1677ff",
+        backgroundColor: `${defaultColorList[0] || "#1677ff"}20`,
         borderWidth: isMobile ? 1.5 : 2,
-        pointBackgroundColor: defaultColors[0] || "#388BFF",
+        pointBackgroundColor: defaultColorList[0] || "#1677ff",
         pointBorderColor: "#fff",
         pointBorderWidth: isMobile ? 1 : 2,
         pointRadius: isMobile ? 3 : 4,
@@ -565,14 +544,20 @@ var RadarChart = (_a) => {
             theme: currentConfig.theme
           })
         ),
-        statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 16 } }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(
-          ChartStatistic,
-          __spreadProps(__spreadValues({
-            key: index
-          }, config), {
-            theme: currentConfig.theme
-          })
-        ))),
+        statistics && /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(`${prefixCls}-statistic-container`, hashId)
+          },
+          statistics.map((config, index) => /* @__PURE__ */ React.createElement(
+            ChartStatistic,
+            __spreadProps(__spreadValues({
+              key: index
+            }, config), {
+              theme: currentConfig.theme
+            })
+          ))
+        ),
         /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-chart-wrapper`, hashId) }, /* @__PURE__ */ React.createElement(Radar, { ref: chartRef, data: processedData, options }))
       )
     );

package/dist/Plugins/chart/RadarChart/style.js

@@ -39,6 +39,14 @@ var genStyle = (token) => {
         overflow: "hidden"
         // 防止内容溢出
       },
+      // 统计数据容器样式
+      [`${token.componentCls}-statistic-container`]: {
+        display: "flex",
+        gap: "16px",
+        marginBottom: "16px",
+        flexWrap: "wrap",
+        alignItems: "flex-start"
+      },
       // 确保图表不会超出容器边界
       canvas: {
         maxWidth: "100% !important",

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

@@ -9,26 +9,43 @@ export interface ScatterChartDataItem {
     filterLabel?: string;
 }
 export interface ScatterChartProps extends ChartContainerProps {
+    /** 扁平化数据数组 */
     data: ScatterChartDataItem[];
+    /** 图表标题 */
     title?: string;
+    /** 图表宽度，默认600px */
     width?: number | string;
+    /** 图表高度，默认400px */
     height?: number | string;
+    /** 自定义CSS类名 */
     className?: string;
+    /** 数据时间 */
+    dataTime?: string;
+    /** 自定义主色（可选），支持 string 或 string[]；数组按序对应各数据序列 */
+    color?: string | string[];
+    /** 头部工具条额外按钮 */
     toolbarExtra?: React.ReactNode;
     /** 是否将过滤器渲染到工具栏 */
     renderFilterInToolbar?: boolean;
-    dataTime?: string;
+    /** X轴单位 */
     xUnit?: string;
+    /** Y轴单位 */
     yUnit?: string;
-    xLabel?: string;
-    yLabel?: string;
+    /** X轴标签 */
+    xAxisLabel?: string;
+    /** Y轴标签 */
+    yAxisLabel?: string;
+    /** X轴位置 */
+    xPosition?: 'top' | 'bottom';
+    /** Y轴位置 */
+    yPosition?: 'left' | 'right';
     /** 是否隐藏X轴，默认false */
     hiddenX?: boolean;
     /** 是否隐藏Y轴，默认false */
     hiddenY?: boolean;
-    borderColor?: string;
-    backgroundColor?: string;
-    /** 统计数据组件配置 */
+    /** 是否显示网格线，默认true */
+    showGrid?: boolean;
+    /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
     statistic?: StatisticConfigType;
     /** 图例文字最大宽度（像素），超出则显示省略号，默认80px */
     textMaxWidth?: number;