@ant-design/agentic-ui 2.0.10 → 2.0.12

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

@@ -0,0 +1,81 @@
+// src/Plugins/chart/ChartMark/Container.tsx
+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);
+        sizeRef.current = newSize;
+        return;
+      }
+    },
+    160 + props.index * 16
+  );
+  useEffect(() => {
+    if (inView) {
+      onSize();
+    }
+    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
+};

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

@@ -0,0 +1,150 @@
+// src/Plugins/chart/ChartMark/Line.tsx
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip
+} from "chart.js";
+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 Line = (props) => {
+  const chartRef = React.useRef(void 0);
+  const htmlRef = useRef(null);
+  const lineChartRef = 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] = [];
+        }
+        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, 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,
+          fill: false,
+          backgroundColor: colors[index % colors.length],
+          borderColor: colors[index % colors.length],
+          borderWidth: 2,
+          tension: 0.1
+        };
+      });
+      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,
+            fill: false,
+            backgroundColor: "rgba(54, 162, 235, 1)",
+            borderColor: "rgba(54, 162, 235, 1)",
+            borderWidth: 2,
+            tension: 0.1
+          }
+        ]
+      };
+    }
+  };
+  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);
+          }
+        }
+      },
+      y: {
+        display: true,
+        title: {
+          display: false
+        },
+        ticks: {
+          callback: function(value) {
+            return stringFormatNumber(value);
+          }
+        }
+      }
+    },
+    elements: {
+      point: {
+        radius: 3,
+        hoverRadius: 5
+      }
+    }
+  };
+  React.useEffect(() => {
+    if (lineChartRef.current) {
+      chartRef.current = lineChartRef.current;
+    }
+  }, [lineChartRef.current]);
+  return /* @__PURE__ */ React.createElement(Container, { index: props.index, chartRef, htmlRef }, /* @__PURE__ */ React.createElement(ChartLine, { ref: lineChartRef, data: chartData, options }));
+};
+export {
+  Line
+};

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

@@ -0,0 +1,61 @@
+// src/Plugins/chart/ChartMark/Pie.tsx
+import { ArcElement, Chart as ChartJS, Legend, Tooltip } from "chart.js";
+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 Pie = (props) => {
+  const chartRef = React.useRef(void 0);
+  const htmlRef = useRef(null);
+  const pieChartRef = useRef(null);
+  useImperativeHandle(props.chartRef, () => chartRef.current, [
+    chartRef.current
+  ]);
+  const processData = () => {
+    if (!props.data || props.data.length === 0) {
+      return {
+        labels: [],
+        datasets: []
+      };
+    }
+    const labels = props.data.map((item) => item[props.xField]);
+    const data = props.data.map((item) => item[props.yField]);
+    return {
+      labels,
+      datasets: [
+        {
+          data,
+          backgroundColor: defaultColorList.slice(0, data.length),
+          borderColor: defaultColorList.slice(0, data.length).map((color) => color),
+          borderWidth: 1
+        }
+      ]
+    };
+  };
+  const chartData = processData();
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: true,
+        position: "bottom"
+      },
+      tooltip: {
+        enabled: true
+      }
+    },
+    cutout: "50%"
+    // 创建环形图效果，类似原来的 innerRadius: 0.5
+  };
+  React.useEffect(() => {
+    if (pieChartRef.current) {
+      chartRef.current = pieChartRef.current;
+    }
+  }, [pieChartRef.current]);
+  return /* @__PURE__ */ React.createElement(Container, { index: props.index, chartRef, htmlRef }, /* @__PURE__ */ React.createElement(Doughnut, { ref: pieChartRef, data: chartData, options }));
+};
+export {
+  Pie
+};

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

@@ -0,0 +1,13 @@
+// src/Plugins/chart/ChartMark/index.tsx
+import { Area } from "./Area";
+import { Bar } from "./Bar";
+import { Column } from "./Column";
+import { Line } from "./Line";
+import { Pie } from "./Pie";
+export {
+  Area,
+  Bar,
+  Column,
+  Line,
+  Pie
+};