@ant-design/agentic-ui 2.0.3 → 2.0.4

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

@@ -1,3 +1,4 @@
+import { ChartOptions } from 'chart.js';
 import React from 'react';
 import { ChartContainerProps } from '../components';
 import { StatisticConfigType } from '../hooks/useChartStatistic';
@@ -80,6 +81,8 @@ export interface BarChartProps extends ChartContainerProps {
         dataIndex: number;
         datasetIndex: number;
     }) => string;
+    /** 外部传入的 Chart.js 选项，会与默认选项合并 */
+    chartOptions?: Partial<ChartOptions<'bar'>>;
 }
 declare const BarChart: React.FC<BarChartProps>;
 export default BarChart;

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

@@ -91,7 +91,8 @@ var BarChart = ({
   statistic: statisticConfig,
   variant,
   showDataLabels = false,
-  dataLabelFormatter
+  dataLabelFormatter,
+  chartOptions
 }) => {
   const safeData = Array.isArray(data) ? data : [];
   const [windowWidth, setWindowWidth] = useState(
@@ -351,10 +352,93 @@ var BarChart = ({
   const isLight = theme === "light";
   const axisTextColor = isLight ? "rgba(0, 25, 61, 0.3255)" : "rgba(255, 255, 255, 0.8)";
   const gridColor = isLight ? "rgba(0,0,0,0.08)" : "rgba(255,255,255,0.2)";
-  const options = {
+  const calculateLabelWidth = (text, fontSize = 11) => {
+    const canvas = document.createElement("canvas");
+    const context2 = canvas.getContext("2d");
+    if (!context2)
+      return text.length * fontSize * 0.6;
+    context2.font = `${fontSize}px Arial, sans-serif`;
+    const metrics = context2.measureText(text);
+    return metrics.width;
+  };
+  const calculateMaxLabelWidth = useMemo(() => {
+    if (!showDataLabels || !filteredData.length)
+      return 0;
+    const fontSize = isMobile ? 10 : 11;
+    let maxWidth = 0;
+    filteredData.forEach((item) => {
+      const value = typeof item.y === "number" ? item.y : Number(item.y);
+      if (Number.isFinite(value)) {
+        let labelText = "";
+        if (dataLabelFormatter) {
+          labelText = dataLabelFormatter({
+            value,
+            label: String(item.x),
+            datasetLabel: String(item.type || "默认"),
+            dataIndex: 0,
+            datasetIndex: 0
+          });
+        } else {
+          labelText = value.toLocaleString();
+        }
+        const width2 = calculateLabelWidth(labelText, fontSize);
+        maxWidth = Math.max(maxWidth, width2);
+      }
+    });
+    return maxWidth;
+  }, [filteredData, showDataLabels, dataLabelFormatter, isMobile]);
+  const calculateDynamicPadding = useMemo(() => {
+    if (!showDataLabels || calculateMaxLabelWidth === 0)
+      return { top: 0, right: 0, bottom: 0, left: 0 };
+    const basePadding = 8;
+    const labelPadding = Math.ceil(calculateMaxLabelWidth);
+    if (indexAxis === "y") {
+      return {
+        top: basePadding,
+        right: Math.max(basePadding, labelPadding),
+        bottom: basePadding,
+        left: basePadding
+      };
+    } else {
+      return {
+        top: Math.max(basePadding, labelPadding),
+        right: basePadding,
+        bottom: basePadding,
+        left: basePadding
+      };
+    }
+  }, [showDataLabels, calculateMaxLabelWidth, indexAxis]);
+  const deepMerge = (target, source) => {
+    var _a;
+    if (!source || typeof source !== "object")
+      return source;
+    if (!target || typeof target !== "object")
+      return source;
+    const result = __spreadValues({}, target);
+    for (const key in source) {
+      if (source.hasOwnProperty(key)) {
+        if (typeof source[key] === "object" && source[key] !== null && !Array.isArray(source[key])) {
+          if (key === "layout" && source[key].padding && ((_a = target.layout) == null ? void 0 : _a.padding)) {
+            result[key] = __spreadProps(__spreadValues(__spreadValues({}, target[key]), source[key]), {
+              padding: __spreadValues(__spreadValues({}, target[key].padding), source[key].padding)
+            });
+          } else {
+            result[key] = deepMerge(target[key] || {}, source[key]);
+          }
+        } else {
+          result[key] = source[key];
+        }
+      }
+    }
+    return result;
+  };
+  const defaultOptions = {
     responsive: true,
     maintainAspectRatio: false,
     indexAxis,
+    layout: {
+      padding: calculateDynamicPadding
+    },
     plugins: __spreadValues({
       legend: {
         display: showLegend,
@@ -526,6 +610,7 @@ var BarChart = ({
       }
     }
   };
+  const options = chartOptions ? deepMerge(defaultOptions, chartOptions) : defaultOptions;
   const handleDownload = () => {
     downloadChart(chartRef.current, "bar-chart");
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/agentic-ui",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "面向智能体的 UI 组件库，提供多步推理可视化、工具调用展示、任务执行协同等 Agentic UI 能力",
   "repository": "git@github.com:ant-design/agentic-ui.git",
   "license": "MIT",