@ant-design/agentic-ui 2.8.0 → 2.10.0

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

@@ -1,161 +1,191 @@
-// src/Plugins/chart/ChartMark/Column.tsx
-import {
-  BarElement,
-  CategoryScale,
-  Chart as ChartJS,
-  Legend,
-  LinearScale,
-  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 { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from "chart.js";
 import React, { useImperativeHandle, useRef } from "react";
 import { Bar as ChartBar } from "react-chartjs-2";
 import { stringFormatNumber } from "../utils";
 import { Container } from "./Container";
 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);
-  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 Column = function(props) {
+    React.useMemo(function() {
+        if (chartMarkColumnRegistered) {
+            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, 0.85)",
-          "rgba(255, 99, 132, 0.85)",
-          "rgba(255, 206, 86, 0.85)",
-          "rgba(75, 192, 192, 0.85)",
-          "rgba(153, 102, 255, 0.85)"
-        ];
-        const borderColors = [
-          "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,
-          backgroundColor: colors[index % colors.length],
-          borderColor: borderColors[index % borderColors.length],
-          borderWidth: 1,
-          borderRadius: 4,
-          maxBarThickness: 20
-        };
-      });
-      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,
-            backgroundColor: "rgba(54, 162, 235, 0.85)",
-            borderColor: "rgba(54, 162, 235, 1)",
-            borderWidth: 1,
-            borderRadius: 4,
-            maxBarThickness: 20
-          }
-        ]
-      };
-    }
-  };
-  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, BarElement, Title, Tooltip, Legend);
+        chartMarkColumnRegistered = true;
+        return undefined;
+    }, []);
+    var chartRef = React.useRef(undefined);
+    var htmlRef = useRef(null);
+    var barChartRef = 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, 0.85)',
+                    'rgba(255, 99, 132, 0.85)',
+                    'rgba(255, 206, 86, 0.85)',
+                    'rgba(75, 192, 192, 0.85)',
+                    'rgba(153, 102, 255, 0.85)'
+                ];
+                var borderColors = [
+                    '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,
+                    backgroundColor: colors[index % colors.length],
+                    borderColor: borderColors[index % borderColors.length],
+                    borderWidth: 1,
+                    borderRadius: 4,
+                    maxBarThickness: 20
+                };
+            });
+            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,
+                        backgroundColor: 'rgba(54, 162, 235, 0.85)',
+                        borderColor: 'rgba(54, 162, 235, 1)',
+                        borderWidth: 1,
+                        borderRadius: 4,
+                        maxBarThickness: 20
+                    }
+                ]
+            };
         }
-      },
-      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);
-          },
-          maxTicksLimit: 5
+        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);
+                    },
+                    maxTicksLimit: 5
+                }
+            }
         }
-      }
-    }
-  };
-  React.useEffect(() => {
-    if (barChartRef.current) {
-      chartRef.current = barChartRef.current;
-    }
-  }, [barChartRef.current]);
-  return /* @__PURE__ */ React.createElement(Container, { index: props.index, chartRef, htmlRef }, /* @__PURE__ */ React.createElement(ChartBar, { ref: barChartRef, data: chartData, options }));
-};
-export {
-  Column
+    };
+    // 更新 chartRef 当 Bar 组件的 ref 改变时
+    React.useEffect(function() {
+        if (barChartRef.current) {
+            chartRef.current = barChartRef.current;
+        }
+    }, [
+        barChartRef.current
+    ]);
+    return /*#__PURE__*/ React.createElement(Container, {
+        index: props.index,
+        chartRef: chartRef,
+        htmlRef: htmlRef
+    }, /*#__PURE__*/ React.createElement(ChartBar, {
+        ref: barChartRef,
+        data: chartData,
+        options: options
+    }));
 };

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

@@ -1,81 +1,122 @@
-// src/Plugins/chart/ChartMark/Container.tsx
+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_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+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 _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 _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 ResizeObserver from "rc-resize-observer";
 import React, { useEffect, useRef, useState } from "react";
 import { debounce } from "../utils";
-var Container = (props) => {
-  var _a;
-  const { chartRef, htmlRef, children } = props;
-  const sizeRef = useRef({
-    width: 0,
-    height: 0
-  });
-  const [inView, setInView] = useState(false);
-  const onSize = debounce(
-    () => {
-      var _a2;
-      if (!inView)
-        return;
-      const chart = chartRef.current;
-      if (!chart)
-        return;
-      const preSize = sizeRef.current;
-      const containerWidth2 = ((_a2 = htmlRef.current) == null ? void 0 : _a2.clientWidth) || 0;
-      const minHeight2 = 300;
-      const naturalHeight = Math.max(containerWidth2 * 0.6, minHeight2);
-      const newSize = {
-        width: containerWidth2,
-        height: naturalHeight
-      };
-      if (Math.abs(preSize.width - newSize.width) > 20 || Math.abs(preSize.height - newSize.height) > 20) {
-        chart.resize(newSize.width, newSize.height);
+export var Container = function(props) {
+    var _htmlRef_current;
+    var chartRef = props.chartRef, htmlRef = props.htmlRef, children = props.children;
+    var sizeRef = useRef({
+        width: 0,
+        height: 0
+    });
+    var _useState = _sliced_to_array(useState(false), 2), inView = _useState[0], setInView = _useState[1];
+    var onSize = debounce(function() {
+        var _htmlRef_current;
+        if (!inView) return;
+        var chart = chartRef.current;
+        if (!chart) return;
+        var preSize = sizeRef.current;
+        var containerWidth = ((_htmlRef_current = htmlRef.current) === null || _htmlRef_current === void 0 ? void 0 : _htmlRef_current.clientWidth) || 0;
+        // 让图表根据容器自然确定高度，保持最小高度
+        var minHeight = 300;
+        var naturalHeight = Math.max(containerWidth * 0.6, minHeight); // 宽高比约为 5:3
+        var newSize = {
+            width: containerWidth,
+            height: naturalHeight
+        };
+        if (Math.abs(preSize.width - newSize.width) > 20 || Math.abs(preSize.height - newSize.height) > 20) {
+            chart.resize(newSize.width, newSize.height);
+            sizeRef.current = newSize;
+            return;
+        }
+    }, 160 + props.index * 16);
+    useEffect(function() {
+        if (inView) {
+            onSize();
+        }
+        setInView(true);
+    }, [
+        inView
+    ]);
+    useEffect(function() {
+        var _htmlRef_current;
+        if (!inView) return;
+        if (!htmlRef.current) return;
+        var containerWidth = ((_htmlRef_current = htmlRef.current) === null || _htmlRef_current === void 0 ? void 0 : _htmlRef_current.clientWidth) || 0;
+        var minHeight = 300;
+        var naturalHeight = Math.max(containerWidth * 0.6, minHeight);
+        var newSize = {
+            width: containerWidth,
+            height: naturalHeight
+        };
         sizeRef.current = newSize;
-        return;
-      }
-    },
-    160 + props.index * 16
-  );
-  useEffect(() => {
-    if (inView) {
-      onSize();
+    }, [
+        htmlRef.current
+    ]);
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return /*#__PURE__*/ React.createElement("div", {
+            ref: htmlRef
+        }, "chart");
     }
-    setInView(true);
-  }, [inView]);
-  useEffect(() => {
-    var _a2;
-    if (!inView)
-      return;
-    if (!htmlRef.current)
-      return;
-    const containerWidth2 = ((_a2 = htmlRef.current) == null ? void 0 : _a2.clientWidth) || 0;
-    const minHeight2 = 300;
-    const naturalHeight = Math.max(containerWidth2 * 0.6, minHeight2);
-    const newSize = {
-      width: containerWidth2,
-      height: naturalHeight
-    };
-    sizeRef.current = newSize;
-  }, [htmlRef.current]);
-  if (typeof window === "undefined" || typeof document === "undefined") {
-    return /* @__PURE__ */ React.createElement("div", { ref: htmlRef }, "chart");
-  }
-  const containerWidth = ((_a = htmlRef.current) == null ? void 0 : _a.clientWidth) || 400;
-  const minHeight = 300;
-  const containerHeight = Math.max(containerWidth * 0.6, minHeight);
-  return /* @__PURE__ */ React.createElement(ResizeObserver, { onResize: onSize }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: htmlRef,
-      onClick: onSize,
-      style: {
-        height: `${containerHeight}px`,
-        minHeight: `${minHeight}px`,
-        width: "100%",
-        position: "relative"
-      }
-    },
-    children
-  ));
-};
-export {
-  Container
+    // 计算容器高度，使用更自然的宽高比
+    var containerWidth = ((_htmlRef_current = htmlRef.current) === null || _htmlRef_current === void 0 ? void 0 : _htmlRef_current.clientWidth) || 400;
+    var minHeight = 300;
+    var containerHeight = Math.max(containerWidth * 0.6, minHeight);
+    return /*#__PURE__*/ React.createElement(ResizeObserver, {
+        onResize: onSize
+    }, /*#__PURE__*/ React.createElement("div", {
+        ref: htmlRef,
+        onClick: onSize,
+        style: {
+            height: "".concat(containerHeight, "px"),
+            minHeight: "".concat(minHeight, "px"),
+            width: '100%',
+            position: 'relative'
+        }
+    }, children));
 };