@ant-design/agentic-ui 2.0.0

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { ChartContainerProps } from '../components';
+import { StatisticConfigType } from '../hooks/useChartStatistic';
+import { ChartDataItem } from '../utils';
+export type LineChartDataItem = ChartDataItem;
+export interface LineChartConfigItem {
+    datasets: Array<(string | {
+        x: number;
+        y: number;
+    })[]>;
+    theme?: 'light' | 'dark';
+    showLegend?: boolean;
+    legendPosition?: 'top' | 'left' | 'bottom' | 'right';
+    legendAlign?: 'start' | 'center' | 'end';
+    showGrid?: boolean;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    xAxisMin?: number;
+    xAxisMax?: number;
+    yAxisMin?: number;
+    yAxisMax?: number;
+    xAxisStep?: number;
+    yAxisStep?: number;
+}
+export interface LineChartProps extends ChartContainerProps {
+    /** 图表标题 */
+    title?: string;
+    /** 扁平化数据数组 */
+    data: LineChartDataItem[];
+    /** 图表宽度，默认600px */
+    width?: number | string;
+    /** 图表高度，默认400px */
+    height?: number | string;
+    /** 自定义CSS类名 */
+    className?: string;
+    /** 数据时间 */
+    dataTime?: string;
+    /** 图表主题 */
+    theme?: 'dark' | 'light';
+    /** 自定义主色（可选），支持 string 或 string[]；数组按序对应各数据序列 */
+    color?: string | string[];
+    /** 是否显示图例，默认true */
+    showLegend?: boolean;
+    /** 图例位置 */
+    legendPosition?: 'top' | 'left' | 'bottom' | 'right';
+    /** 图例水平对齐方式 */
+    legendAlign?: 'start' | 'center' | 'end';
+    /** 是否显示网格线，默认true */
+    showGrid?: boolean;
+    /** X轴位置 */
+    xPosition?: 'top' | 'bottom';
+    /** Y轴位置 */
+    yPosition?: 'left' | 'right';
+    /** 头部工具条额外按钮 */
+    toolbarExtra?: React.ReactNode;
+    /** ChartStatistic组件配置：object表示单个配置，array表示多个配置 */
+    statistic?: StatisticConfigType;
+}
+declare const LineChart: React.FC<LineChartProps>;
+export default LineChart;

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

@@ -0,0 +1,373 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/plugins/chart/LineChart/index.tsx
+import { ConfigProvider } from "antd";
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Tooltip
+} from "chart.js";
+import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Line } from "react-chartjs-2";
+import {
+  ChartContainer,
+  ChartFilter,
+  ChartStatistic,
+  ChartToolBar,
+  downloadChart
+} from "../components";
+import {
+  useChartStatistic
+} from "../hooks/useChartStatistic";
+import {
+  extractAndSortXValues,
+  findDataPointByXValue
+} from "../utils";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Tooltip,
+  Legend
+);
+var defaultColors = [
+  "#1677ff",
+  "#8954FC",
+  "#15e7e4",
+  "#F45BB5",
+  "#00A6FF",
+  "#33E59B",
+  "#D666E4",
+  "#6151FF",
+  "#BF3C93",
+  "#005EE0"
+];
+var LineChart = (_a) => {
+  var _b = _a, {
+    title,
+    data,
+    width = 600,
+    height = 400,
+    className,
+    dataTime,
+    theme = "light",
+    color,
+    showLegend = true,
+    legendPosition = "bottom",
+    legendAlign = "start",
+    showGrid = true,
+    xPosition = "bottom",
+    yPosition = "left",
+    toolbarExtra,
+    statistic: statisticConfig
+  } = _b, props = __objRest(_b, [
+    "title",
+    "data",
+    "width",
+    "height",
+    "className",
+    "dataTime",
+    "theme",
+    "color",
+    "showLegend",
+    "legendPosition",
+    "legendAlign",
+    "showGrid",
+    "xPosition",
+    "yPosition",
+    "toolbarExtra",
+    "statistic"
+  ]);
+  const safeData = Array.isArray(data) ? data : [];
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 768
+  );
+  const isMobile = windowWidth <= 768;
+  const responsiveWidth = isMobile ? "100%" : width;
+  const responsiveHeight = isMobile ? Math.min(windowWidth * 0.8, 400) : height;
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
+  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 categories = useMemo(() => {
+    const uniqueCategories = [
+      ...new Set(safeData.map((item) => item.category))
+    ].filter(Boolean);
+    return uniqueCategories;
+  }, [safeData]);
+  const validFilterLabels = useMemo(() => {
+    return safeData.map((item) => item.filterLabel).filter(
+      (filterLabel) => filterLabel !== void 0
+    );
+  }, [safeData]);
+  const filterLabels = useMemo(() => {
+    return validFilterLabels.length > 0 ? [...new Set(validFilterLabels)] : void 0;
+  }, [validFilterLabels]);
+  const [selectedFilter, setSelectedFilter] = useState(
+    categories.find(Boolean) || ""
+  );
+  const [selectedFilterLabel, setSelectedFilterLabel] = useState(
+    filterLabels && filterLabels.length > 0 ? filterLabels[0] : void 0
+  );
+  useEffect(() => {
+    if (selectedFilter && !categories.includes(selectedFilter)) {
+      setSelectedFilter(categories.find(Boolean) || "");
+    }
+  }, [categories, selectedFilter]);
+  const filteredData = useMemo(() => {
+    const base = selectedFilter ? safeData.filter((item) => item.category === selectedFilter) : safeData;
+    const withFilterLabel = !filterLabels || !selectedFilterLabel ? base : base.filter((item) => item.filterLabel === selectedFilterLabel);
+    return withFilterLabel.filter(
+      (item) => item.x !== null && item.x !== void 0
+    );
+  }, [safeData, selectedFilter, filterLabels, selectedFilterLabel]);
+  const types = useMemo(() => {
+    return [...new Set(filteredData.map((item) => item.type))];
+  }, [filteredData]);
+  const xValues = useMemo(() => {
+    return extractAndSortXValues(filteredData);
+  }, [filteredData]);
+  const xTitle = useMemo(() => {
+    const titles = [
+      ...new Set(filteredData.map((item) => item.xtitle).filter(Boolean))
+    ];
+    return titles[0] || "";
+  }, [filteredData]);
+  const yTitle = useMemo(() => {
+    const titles = [
+      ...new Set(filteredData.map((item) => item.ytitle).filter(Boolean))
+    ];
+    return titles[0] || "";
+  }, [filteredData]);
+  const processedData = useMemo(() => {
+    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 typeData = xValues.map((x) => {
+        const dataPoint = findDataPointByXValue(filteredData, x, type);
+        const v = dataPoint == null ? void 0 : dataPoint.y;
+        const n = typeof v === "number" ? v : Number(v);
+        return Number.isFinite(n) ? n : null;
+      });
+      return {
+        label: type || "默认",
+        data: typeData,
+        borderColor: baseColor,
+        backgroundColor: `${baseColor}33`,
+        pointBackgroundColor: baseColor,
+        pointBorderColor: "#fff",
+        pointBorderWidth: 1,
+        borderWidth: 3,
+        tension: 0,
+        fill: false
+      };
+    });
+    return { labels, datasets };
+  }, [filteredData, types, xValues]);
+  const filterOptions = useMemo(() => {
+    return categories.map((category) => ({
+      label: category || "默认",
+      value: category || "默认"
+    }));
+  }, [categories]);
+  const filteredDataByFilterLabel = useMemo(() => {
+    return filterLabels == null ? void 0 : filterLabels.map((item) => ({
+      key: item,
+      label: item
+    }));
+  }, [filterLabels]);
+  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 = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: showLegend && types.length > 0,
+        position: legendPosition,
+        align: legendAlign,
+        labels: {
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12, weight: "normal" },
+          padding: isMobile ? 10 : 12,
+          usePointStyle: true,
+          pointStyle: "rectRounded"
+        }
+      },
+      tooltip: {
+        backgroundColor: isLight ? "rgba(255,255,255,0.95)" : "rgba(0,0,0,0.85)",
+        titleColor: isLight ? "#333" : "#fff",
+        bodyColor: isLight ? "#333" : "#fff",
+        borderColor: isLight ? "rgba(0,0,0,0.12)" : "rgba(255,255,255,0.2)",
+        borderWidth: 1,
+        cornerRadius: isMobile ? 6 : 8,
+        displayColors: true,
+        callbacks: {
+          label: (context2) => {
+            const label = context2.dataset.label || "";
+            const y = context2.parsed.y;
+            return `${label}: ${y}`;
+          }
+        }
+      }
+    },
+    scales: {
+      x: {
+        position: xPosition,
+        title: {
+          display: !!xTitle,
+          text: xTitle,
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12, weight: "normal" },
+          align: "end"
+        },
+        grid: {
+          display: showGrid,
+          color: gridColor,
+          lineWidth: 1,
+          drawTicks: false,
+          tickLength: 0
+        },
+        ticks: {
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12 },
+          padding: isMobile ? 10 : 12
+        },
+        border: {
+          color: gridColor
+        }
+      },
+      y: {
+        position: yPosition,
+        beginAtZero: true,
+        title: {
+          display: !!yTitle,
+          text: yTitle,
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12, weight: "normal" },
+          align: "end"
+        },
+        grid: {
+          display: showGrid,
+          color: gridColor,
+          lineWidth: 1,
+          drawTicks: false,
+          tickLength: 0
+        },
+        ticks: {
+          color: axisTextColor,
+          font: { size: isMobile ? 10 : 12 },
+          padding: isMobile ? 10 : 12
+        },
+        border: {
+          color: gridColor
+        }
+      }
+    },
+    elements: {
+      point: {
+        radius: isMobile ? 2 : 3,
+        hoverRadius: isMobile ? 3 : 5,
+        borderWidth: isMobile ? 1 : 2,
+        hoverBorderWidth: isMobile ? 1 : 2
+      },
+      line: {
+        borderWidth: 3
+      }
+    }
+  };
+  const handleDownload = () => {
+    downloadChart(chartRef.current, "line-chart");
+  };
+  return /* @__PURE__ */ React.createElement(
+    ChartContainer,
+    {
+      baseClassName,
+      className,
+      theme,
+      isMobile,
+      variant: props.variant,
+      style: {
+        width: responsiveWidth
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      ChartToolBar,
+      {
+        title,
+        theme,
+        onDownload: handleDownload,
+        extra: toolbarExtra,
+        dataTime
+      }
+    ),
+    statisticComponentConfigs && /* @__PURE__ */ React.createElement("div", { className: "chart-statistic-container" }, statisticComponentConfigs.map((config, index) => /* @__PURE__ */ React.createElement(ChartStatistic, __spreadProps(__spreadValues({ key: index }, config), { theme })))),
+    /* @__PURE__ */ React.createElement(
+      ChartFilter,
+      __spreadProps(__spreadValues({
+        filterOptions,
+        selectedFilter,
+        onFilterChange: setSelectedFilter
+      }, filterLabels && {
+        customOptions: filteredDataByFilterLabel,
+        selectedCustomSelection: selectedFilterLabel,
+        onSelectionChange: setSelectedFilterLabel
+      }), {
+        theme
+      })
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: "chart-wrapper", style: { height: responsiveHeight } }, /* @__PURE__ */ React.createElement(Line, { ref: chartRef, data: processedData, options }))
+  );
+};
+var LineChart_default = LineChart;
+export {
+  LineChart_default as default
+};

package/dist/plugins/chart/LineChart/style.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function useStyle(prefixCls?: string): {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};

package/dist/plugins/chart/LineChart/style.js

@@ -0,0 +1,89 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/plugins/chart/LineChart/style.ts
+import {
+  useEditorStyleRegister
+} from "../../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      // 折线图容器样式
+      ".chart-wrapper": {
+        width: "100%",
+        height: "calc(100% - 120px)",
+        minHeight: 300,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+      },
+      // 确保图表不会超出容器边界
+      canvas: {
+        maxWidth: "100% !important",
+        maxHeight: "100% !important"
+      },
+      // 移动端响应式样式
+      "@media (max-width: 768px)": {
+        // 移动端优化
+        ".chart-wrapper": {
+          height: "calc(100% - 100px)",
+          // 移动端减少更多空间
+          minHeight: 250
+          // 移动端最小高度
+        },
+        // 移动端图表标题样式优化
+        ".chart-title": {
+          fontSize: 14,
+          marginBottom: 8,
+          textAlign: "center"
+        },
+        // 移动端筛选器样式优化
+        ".chart-filter": {
+          flexWrap: "wrap",
+          gap: 8,
+          marginBottom: 12,
+          ".filter-button": {
+            fontSize: 12,
+            padding: "6px 12px"
+          }
+        }
+      },
+      // 超小屏幕优化 (375px以下)
+      "@media (max-width: 375px)": {
+        padding: 8,
+        ".chart-wrapper": {
+          minHeight: 220
+        }
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("LineChart", (token) => {
+    const lineToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(lineToken)];
+  });
+}
+export {
+  useStyle
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ChartContainerProps } from '../components';
+import { StatisticConfigType } from '../hooks/useChartStatistic';
+export interface RadarChartDataItem {
+    category?: string;
+    label: string;
+    type?: string;
+    score: number | string;
+    filterLabel?: string;
+}
+interface RadarChartProps extends ChartContainerProps {
+    data: RadarChartDataItem[];
+    title?: string;
+    width?: number | string;
+    height?: number | string;
+    className?: string;
+    toolbarExtra?: React.ReactNode;
+    dataTime?: string;
+    borderColor?: string;
+    backgroundColor?: string;
+    pointBackgroundColor?: string;
+    /** 统计数据组件配置 */
+    statistic?: StatisticConfigType;
+    /** 图例文字最大宽度（像素），超出则显示省略号，默认80px */
+    textMaxWidth?: number;
+}
+declare const RadarChart: React.FC<RadarChartProps>;
+export default RadarChart;