@ant-design/agentic-ui 2.16.0 → 2.16.1

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

@@ -3,9 +3,6 @@ function _array_like_to_array(arr, len) {
     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 _array_without_holes(arr) {
     if (Array.isArray(arr)) return _array_like_to_array(arr);
 }
@@ -25,33 +22,6 @@ function _define_property(obj, key, value) {
 function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
-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 _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.");
 }
@@ -94,9 +64,6 @@ function _object_spread_props(target, source) {
     }
     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 _to_consumable_array(arr) {
     return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
 }
@@ -109,49 +76,14 @@ function _unsupported_iterable_to_array(o, minLen) {
     if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
 import { ConfigProvider } from "antd";
-import { CategoryScale, Chart as ChartJS, Filler, Legend, LinearScale, LineElement, PointElement, Tooltip } from "chart.js";
 import classNames from "classnames";
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useMemo, useRef } from "react";
 import { Line } from "react-chartjs-2";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
-import { extractAndSortXValues, findDataPointByXValue } from "../utils";
+import { useChartDataFilter, useChartStatistics, useChartTheme, useResponsiveSize } from "../hooks";
+import { extractAndSortXValues, findDataPointByXValue, hexToRgba, registerLineChartComponents } from "../utils";
 import { useStyle } from "./style";
-/**
- * @fileoverview 面积图组件文件
- *
- * 该文件提供了面积图组件的实现，基于 Chart.js 和 react-chartjs-2。
- * 支持数据可视化、交互、配置、统计等功能。
- *
- * @author md-editor
- * @version 1.0.0
- * @since 2024
- */ var areaChartComponentsRegistered = false;
-/**
- * 将十六进制颜色转换为带透明度的 RGBA 字符串
- *
- * 支持3位和6位十六进制颜色格式，并添加透明度。
- *
- * @param {string} hex - 十六进制颜色值（如 '#ff0000' 或 '#f00'）
- * @param {number} alpha - 透明度值（0-1之间）
- * @returns {string} RGBA 颜色字符串
- *
- * @example
- * ```typescript
- * hexToRgba('#ff0000', 0.5); // 'rgba(255, 0, 0, 0.5)'
- * hexToRgba('#f00', 0.8); // 'rgba(255, 0, 0, 0.8)'
- * ```
- *
- * @since 1.0.0
- */ var hexToRgba = function(hex, alpha) {
-    var sanitized = hex.replace('#', '');
-    var isShort = sanitized.length === 3;
-    var r = parseInt(isShort ? sanitized[0] + sanitized[0] : sanitized.slice(0, 2), 16);
-    var g = parseInt(isShort ? sanitized[1] + sanitized[1] : sanitized.slice(2, 4), 16);
-    var b = parseInt(isShort ? sanitized[2] + sanitized[2] : sanitized.slice(4, 6), 16);
-    var a = Math.max(0, Math.min(1, alpha));
-    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")");
-};
 /**
  * 面积图组件
  *
@@ -179,104 +111,22 @@ import { useStyle } from "./style";
  *
  * @since 1.0.0
  */ var AreaChart = function(param) {
-    var title = param.title, data = param.data, _param_width = param.width, width = _param_width === void 0 ? 600 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 400 : _param_height, className = param.className, dataTime = param.dataTime, _param_theme = param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme, color = param.color, _param_showLegend = param.showLegend, showLegend = _param_showLegend === void 0 ? true : _param_showLegend, _param_legendPosition = param.legendPosition, legendPosition = _param_legendPosition === void 0 ? 'bottom' : _param_legendPosition, _param_legendAlign = param.legendAlign, legendAlign = _param_legendAlign === void 0 ? 'start' : _param_legendAlign, _param_showGrid = param.showGrid, showGrid = _param_showGrid === void 0 ? true : _param_showGrid, _param_xPosition = param.xPosition, xPosition = _param_xPosition === void 0 ? 'bottom' : _param_xPosition, _param_yPosition = param.yPosition, yPosition = _param_yPosition === void 0 ? 'left' : _param_yPosition, _param_hiddenX = param.hiddenX, hiddenX = _param_hiddenX === void 0 ? false : _param_hiddenX, _param_hiddenY = param.hiddenY, hiddenY = _param_hiddenY === void 0 ? false : _param_hiddenY, toolbarExtra = param.toolbarExtra, _param_renderFilterInToolbar = param.renderFilterInToolbar, renderFilterInToolbar = _param_renderFilterInToolbar === void 0 ? false : _param_renderFilterInToolbar, statisticConfig = param.statistic, variant = param.variant;
-    useMemo(function() {
-        if (areaChartComponentsRegistered) {
-            return undefined;
-        }
-        if (typeof window === 'undefined') {
-            return undefined;
-        }
-        ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend);
-        areaChartComponentsRegistered = true;
-        return undefined;
-    }, []);
-    var safeData = Array.isArray(data) ? data : [];
-    // 响应式尺寸计算
-    var _useState = _sliced_to_array(useState(typeof window !== 'undefined' ? window.innerWidth : 768), 2), windowWidth = _useState[0], setWindowWidth = _useState[1];
-    var isMobile = windowWidth <= 768;
-    var responsiveWidth = isMobile ? '100%' : width;
-    var responsiveHeight = isMobile ? Math.min(windowWidth * 0.8, 400) : height;
-    // 监听窗口大小变化
-    useEffect(function() {
-        var handleResize = function() {
-            setWindowWidth(window.innerWidth);
-        };
-        if (typeof window !== 'undefined') {
-            window.addEventListener('resize', handleResize);
-            return function() {
-                return window.removeEventListener('resize', handleResize);
-            };
-        }
-    }, []);
+    var title = param.title, data = param.data, _param_width = param.width, width = _param_width === void 0 ? 600 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 400 : _param_height, className = param.className, dataTime = param.dataTime, _param_theme = param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme, color = param.color, _param_showLegend = param.showLegend, showLegend = _param_showLegend === void 0 ? true : _param_showLegend, _param_legendPosition = param.legendPosition, legendPosition = _param_legendPosition === void 0 ? 'bottom' : _param_legendPosition, _param_legendAlign = param.legendAlign, legendAlign = _param_legendAlign === void 0 ? 'start' : _param_legendAlign, _param_showGrid = param.showGrid, showGrid = _param_showGrid === void 0 ? true : _param_showGrid, _param_xPosition = param.xPosition, xPosition = _param_xPosition === void 0 ? 'bottom' : _param_xPosition, _param_yPosition = param.yPosition, yPosition = _param_yPosition === void 0 ? 'left' : _param_yPosition, _param_hiddenX = param.hiddenX, hiddenX = _param_hiddenX === void 0 ? false : _param_hiddenX, _param_hiddenY = param.hiddenY, hiddenY = _param_hiddenY === void 0 ? false : _param_hiddenY, toolbarExtra = param.toolbarExtra, _param_renderFilterInToolbar = param.renderFilterInToolbar, renderFilterInToolbar = _param_renderFilterInToolbar === void 0 ? false : _param_renderFilterInToolbar, statisticConfig = param.statistic, variant = param.variant, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading;
+    // 注册 Chart.js 组件
+    registerLineChartComponents();
+    // 响应式尺寸
+    var _useResponsiveSize = useResponsiveSize(width, height), responsiveWidth = _useResponsiveSize.responsiveWidth, responsiveHeight = _useResponsiveSize.responsiveHeight, isMobile = _useResponsiveSize.isMobile;
     // 样式注册
     var context = useContext(ConfigProvider.ConfigContext);
     var baseClassName = context === null || context === void 0 ? void 0 : context.getPrefixCls('area-chart-container');
     var _useStyle = useStyle(baseClassName), wrapSSR = _useStyle.wrapSSR, hashId = _useStyle.hashId;
     var chartRef = useRef(null);
     // 处理 ChartStatistic 组件配置
-    var statistics = useMemo(function() {
-        if (!statisticConfig) return null;
-        return Array.isArray(statisticConfig) ? statisticConfig : [
-            statisticConfig
-        ];
-    }, [
-        statisticConfig
-    ]);
-    // 从数据中提取唯一的类别作为筛选选项
-    var categories = useMemo(function() {
-        var uniqueCategories = _to_consumable_array(new Set(safeData.map(function(item) {
-            return item.category;
-        }))).filter(Boolean);
-        return uniqueCategories;
-    }, [
-        safeData
-    ]);
-    // 从数据中提取 filterLabel，过滤掉 undefined 值
-    var validFilterLabels = useMemo(function() {
-        return safeData.map(function(item) {
-            return item.filterLabel;
-        }).filter(function(filterLabel) {
-            return filterLabel !== undefined;
-        });
-    }, [
-        safeData
-    ]);
-    var filterLabels = useMemo(function() {
-        return validFilterLabels.length > 0 ? _to_consumable_array(new Set(validFilterLabels)) : undefined;
-    }, [
-        validFilterLabels
-    ]);
-    // 状态管理
-    var _useState1 = _sliced_to_array(useState(categories.find(Boolean) || ''), 2), selectedFilter = _useState1[0], setSelectedFilter = _useState1[1];
-    var _useState2 = _sliced_to_array(useState(filterLabels && filterLabels.length > 0 ? filterLabels[0] : undefined), 2), selectedFilterLabel = _useState2[0], setSelectedFilterLabel = _useState2[1];
-    // 当数据变化导致当前选中分类失效时，自动回退到首个有效分类或空（显示全部）
-    useEffect(function() {
-        if (selectedFilter && !categories.includes(selectedFilter)) {
-            setSelectedFilter(categories.find(Boolean) || '');
-        }
-    }, [
-        categories,
-        selectedFilter
-    ]);
-    // 筛选数据
-    var filteredData = useMemo(function() {
-        var base = selectedFilter ? safeData.filter(function(item) {
-            return item.category === selectedFilter;
-        }) : safeData;
-        var withFilterLabel = !filterLabels || !selectedFilterLabel ? base : base.filter(function(item) {
-            return item.filterLabel === selectedFilterLabel;
-        });
-        // 统一过滤掉 x 为空（null/undefined）的数据，避免后续 toString 报错
-        return withFilterLabel.filter(function(item) {
-            return item.x !== null && item.x !== undefined;
-        });
-    }, [
-        safeData,
-        selectedFilter,
-        filterLabels,
-        selectedFilterLabel
-    ]);
+    var statistics = useChartStatistics(statisticConfig);
+    // 数据筛选
+    var _useChartDataFilter = useChartDataFilter(data), filteredData = _useChartDataFilter.filteredData, filterOptions = _useChartDataFilter.filterOptions, filterLabels = _useChartDataFilter.filterLabels, selectedFilter = _useChartDataFilter.selectedFilter, setSelectedFilter = _useChartDataFilter.setSelectedFilter, selectedFilterLabel = _useChartDataFilter.selectedFilterLabel, setSelectedFilterLabel = _useChartDataFilter.setSelectedFilterLabel, filteredDataByFilterLabel = _useChartDataFilter.filteredDataByFilterLabel;
+    // 主题颜色
+    var _useChartTheme = useChartTheme(theme), axisTextColor = _useChartTheme.axisTextColor, gridColor = _useChartTheme.gridColor, isLight = _useChartTheme.isLight;
     // 从数据中提取唯一的类型
     var types = useMemo(function() {
         return _to_consumable_array(new Set(filteredData.map(function(item) {
@@ -355,31 +205,6 @@ import { useStyle } from "./style";
         types,
         xValues
     ]);
-    // 筛选器选项
-    var filterOptions = useMemo(function() {
-        return categories.map(function(category) {
-            return {
-                label: category || '默认',
-                value: category || '默认'
-            };
-        });
-    }, [
-        categories
-    ]);
-    // 根据 filterLabel 筛选数据 - 只有当 filterLabels 存在时才生成
-    var filteredDataByFilterLabel = useMemo(function() {
-        return filterLabels === null || filterLabels === void 0 ? void 0 : filterLabels.map(function(item) {
-            return {
-                key: item,
-                label: item
-            };
-        });
-    }, [
-        filterLabels
-    ]);
-    var isLight = theme === 'light';
-    var axisTextColor = isLight ? 'rgba(0, 25, 61, 0.3255)' : 'rgba(255, 255, 255, 0.8)';
-    var gridColor = isLight ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.2)';
     var options = {
         responsive: true,
         maintainAspectRatio: false,
@@ -515,6 +340,7 @@ import { useStyle } from "./style";
         onDownload: handleDownload,
         extra: toolbarExtra,
         dataTime: dataTime,
+        loading: loading,
         filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
             filterOptions: filterOptions,
             selectedFilter: selectedFilter,

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

@@ -134,6 +134,8 @@ export interface BarChartProps extends ChartContainerProps {
     renderFilterInToolbar?: boolean;
     /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
     statistic?: StatisticConfigType;
+    /** 是否显示加载状态（当图表未闭合时显示） */
+    loading?: boolean;
 }
 declare const BarChart: React.FC<BarChartProps>;
 export default BarChart;

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

@@ -120,7 +120,7 @@ import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Bar } from "react-chartjs-2";
 import { ChartContainer, ChartFilter, ChartStatistic, ChartToolBar, downloadChart } from "../components";
 import { defaultColorList } from "../const";
-import { extractAndSortXValues, findDataPointByXValue } from "../utils";
+import { extractAndSortXValues, findDataPointByXValue, hexToRgba } from "../utils";
 import { useStyle } from "./style";
 /**
  * @fileoverview 柱状图组件文件
@@ -132,21 +132,11 @@ import { useStyle } from "./style";
  * @version 1.0.0
  * @since 2024
  */ var barChartComponentsRegistered = false;
-// 将十六进制颜色转换为带透明度的 rgba 字符串
-var hexToRgba = function(hex, alpha) {
-    var sanitized = hex.replace('#', '');
-    var isShort = sanitized.length === 3;
-    var r = parseInt(isShort ? sanitized[0] + sanitized[0] : sanitized.slice(0, 2), 16);
-    var g = parseInt(isShort ? sanitized[1] + sanitized[1] : sanitized.slice(2, 4), 16);
-    var b = parseInt(isShort ? sanitized[2] + sanitized[2] : sanitized.slice(4, 6), 16);
-    var a = Math.max(0, Math.min(1, alpha));
-    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")");
-};
 // 正负柱状图颜色（与需求给定的 rgba 保持一致）
 var POSITIVE_COLOR_HEX = '#388BFF'; // rgba(56, 139, 255, 1)
 var NEGATIVE_COLOR_HEX = '#F78826'; // rgba(247, 136, 38, 1)
 var BarChart = function(param) {
-    var title = param.title, data = param.data, _param_width = param.width, width = _param_width === void 0 ? 600 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 400 : _param_height, className = param.className, dataTime = param.dataTime, _param_theme = param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme, color = param.color, _param_showLegend = param.showLegend, showLegend = _param_showLegend === void 0 ? true : _param_showLegend, _param_legendPosition = param.legendPosition, legendPosition = _param_legendPosition === void 0 ? 'bottom' : _param_legendPosition, _param_legendAlign = param.legendAlign, legendAlign = _param_legendAlign === void 0 ? 'start' : _param_legendAlign, _param_showGrid = param.showGrid, showGrid = _param_showGrid === void 0 ? true : _param_showGrid, _param_xPosition = param.xPosition, xPosition = _param_xPosition === void 0 ? 'bottom' : _param_xPosition, _param_yPosition = param.yPosition, yPosition = _param_yPosition === void 0 ? 'left' : _param_yPosition, _param_hiddenX = param.hiddenX, hiddenX = _param_hiddenX === void 0 ? false : _param_hiddenX, _param_hiddenY = param.hiddenY, hiddenY = _param_hiddenY === void 0 ? false : _param_hiddenY, _param_stacked = param.stacked, stacked = _param_stacked === void 0 ? false : _param_stacked, _param_indexAxis = param.indexAxis, indexAxis = _param_indexAxis === void 0 ? 'x' : _param_indexAxis, maxBarThickness = param.maxBarThickness, toolbarExtra = param.toolbarExtra, _param_renderFilterInToolbar = param.renderFilterInToolbar, renderFilterInToolbar = _param_renderFilterInToolbar === void 0 ? false : _param_renderFilterInToolbar, statisticConfig = param.statistic, variant = param.variant, _param_showDataLabels = param.showDataLabels, showDataLabels = _param_showDataLabels === void 0 ? false : _param_showDataLabels, dataLabelFormatter = param.dataLabelFormatter, chartOptions = param.chartOptions;
+    var title = param.title, data = param.data, _param_width = param.width, width = _param_width === void 0 ? 600 : _param_width, _param_height = param.height, height = _param_height === void 0 ? 400 : _param_height, className = param.className, dataTime = param.dataTime, _param_theme = param.theme, theme = _param_theme === void 0 ? 'light' : _param_theme, color = param.color, _param_showLegend = param.showLegend, showLegend = _param_showLegend === void 0 ? true : _param_showLegend, _param_legendPosition = param.legendPosition, legendPosition = _param_legendPosition === void 0 ? 'bottom' : _param_legendPosition, _param_legendAlign = param.legendAlign, legendAlign = _param_legendAlign === void 0 ? 'start' : _param_legendAlign, _param_showGrid = param.showGrid, showGrid = _param_showGrid === void 0 ? true : _param_showGrid, _param_xPosition = param.xPosition, xPosition = _param_xPosition === void 0 ? 'bottom' : _param_xPosition, _param_yPosition = param.yPosition, yPosition = _param_yPosition === void 0 ? 'left' : _param_yPosition, _param_hiddenX = param.hiddenX, hiddenX = _param_hiddenX === void 0 ? false : _param_hiddenX, _param_hiddenY = param.hiddenY, hiddenY = _param_hiddenY === void 0 ? false : _param_hiddenY, _param_stacked = param.stacked, stacked = _param_stacked === void 0 ? false : _param_stacked, _param_indexAxis = param.indexAxis, indexAxis = _param_indexAxis === void 0 ? 'x' : _param_indexAxis, maxBarThickness = param.maxBarThickness, toolbarExtra = param.toolbarExtra, _param_renderFilterInToolbar = param.renderFilterInToolbar, renderFilterInToolbar = _param_renderFilterInToolbar === void 0 ? false : _param_renderFilterInToolbar, statisticConfig = param.statistic, variant = param.variant, _param_showDataLabels = param.showDataLabels, showDataLabels = _param_showDataLabels === void 0 ? false : _param_showDataLabels, dataLabelFormatter = param.dataLabelFormatter, chartOptions = param.chartOptions, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading;
     useMemo(function() {
         if (barChartComponentsRegistered) {
             return undefined;
@@ -840,6 +830,7 @@ var BarChart = function(param) {
         onDownload: handleDownload,
         extra: toolbarExtra,
         dataTime: dataTime,
+        loading: loading,
         filter: renderFilterInToolbar && filterOptions && filterOptions.length > 1 ? /*#__PURE__*/ React.createElement(ChartFilter, _object_spread_props(_object_spread({
             filterOptions: filterOptions,
             selectedFilter: selectedFilter,

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

@@ -69,12 +69,15 @@ export var Container = function(props) {
             width: containerWidth,
             height: naturalHeight
         };
-        if (Math.abs(preSize.width - newSize.width) > 20 || Math.abs(preSize.height - newSize.height) > 20) {
+        // 增加阈值，减少频繁调整导致的抖动
+        if (Math.abs(preSize.width - newSize.width) > 30 || // 从 20 增加到 30
+        Math.abs(preSize.height - newSize.height) > 30 // 从 20 增加到 30
+        ) {
             chart.resize(newSize.width, newSize.height);
             sizeRef.current = newSize;
             return;
         }
-    }, 160 + props.index * 16);
+    }, 300 + props.index * 20);
     useEffect(function() {
         if (inView) {
             onSize();

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

@@ -78,4 +78,5 @@ export declare const ChartRender: React.FC<{
     groupBy?: string;
     filterBy?: string;
     colorLegend?: string;
+    loading?: boolean;
 }>;