@ant-design/agentic-ui 2.0.0

package/dist/plugins/chart/BarChart/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/BarChart/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("BarChart", (token) => {
+    const barToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(barToken)];
+  });
+}
+export {
+  useStyle
+};

package/dist/plugins/chart/ChartAttrToolBar/ChartAttrToolBarStyle.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+/**
+ * BubbleChat
+ * @param prefixCls
+ * @returns
+ */
+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/ChartAttrToolBar/ChartAttrToolBarStyle.js

@@ -0,0 +1,57 @@
+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/ChartAttrToolBar/ChartAttrToolBarStyle.ts
+import {
+  useEditorStyleRegister
+} from "../../../hooks/useStyle";
+var genStyle = (token) => {
+  return {
+    [token.componentCls]: {
+      display: "flex",
+      justifyContent: "flex-end",
+      alignItems: "center",
+      padding: "6px 8px",
+      width: "100%",
+      borderBottom: "1px solid rgba(77, 77, 77, 0.03)",
+      zIndex: 10,
+      gap: "4px",
+      "&-item": {
+        display: "flex",
+        alignItems: "center",
+        gap: "4px",
+        padding: "4px",
+        borderRadius: "12px",
+        cursor: "pointer"
+      }
+    }
+  };
+};
+function useStyle(prefixCls) {
+  return useEditorStyleRegister("ChartAttr-" + prefixCls, (token) => {
+    const editorToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genStyle(editorToken)];
+  });
+}
+export {
+  useStyle
+};

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { NodeEntry } from 'slate';
+import { ChartNode } from '../../../MarkdownEditor';
+/**
+ * ChartAttrToolBar 组件 - 图表属性工具栏组件
+ *
+ * 该组件提供图表编辑时的属性工具栏，支持图表配置、删除等操作。
+ * 集成到 Markdown 编辑器中，提供图表节点的交互功能。
+ *
+ * @component
+ * @description 图表属性工具栏组件，提供图表编辑功能
+ * @param {Object} props - 组件属性
+ * @param {Array} [props.options] - 工具栏选项配置
+ * @param {React.ReactNode} props.options.icon - 选项图标
+ * @param {string} [props.options.title] - 选项标题
+ * @param {React.CSSProperties} [props.options.style] - 选项样式
+ * @param {() => void} [props.options.onClick] - 选项点击回调
+ * @param {NodeEntry<ChartNode>} props.node - 图表节点
+ * @param {React.ReactNode} [props.title] - 工具栏标题
+ *
+ * @example
+ * ```tsx
+ * <ChartAttrToolBar
+ *   node={chartNode}
+ *   title="图表设置"
+ *   options={[
+ *     {
+ *       icon: <SettingIcon />,
+ *       title: "设置",
+ *       onClick: () => console.log('设置图表')
+ *     }
+ *   ]}
+ * />
+ * ```
+ *
+ * @returns {React.ReactElement} 渲染的图表属性工具栏组件
+ *
+ * @remarks
+ * - 集成到 Markdown 编辑器
+ * - 支持图表节点删除
+ * - 提供自定义工具栏选项
+ * - 支持只读模式
+ * - 阻止事件冒泡
+ * - 使用 Tooltip 提供提示
+ * - 响应式布局设计
+ */
+export declare const ChartAttrToolBar: React.FC<{
+    options?: {
+        icon: React.ReactNode;
+        title?: string;
+        style?: React.CSSProperties;
+        onClick?: () => void;
+    }[];
+    node: NodeEntry<ChartNode>;
+    title?: React.ReactNode;
+}>;

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

@@ -0,0 +1,87 @@
+// src/plugins/chart/ChartAttrToolBar/index.tsx
+import { DeleteOutlined } from "@ant-design/icons";
+import { ConfigProvider, Tooltip } from "antd";
+import classNames from "classnames";
+import React, { useContext, useRef } from "react";
+import { Transforms } from "slate";
+import { ReactEditor } from "slate-react";
+import { I18nContext } from "../../../i18n";
+import { EditorUtils } from "../../../MarkdownEditor";
+import { useEditorStore } from "../../../MarkdownEditor/editor/store";
+import { useStyle } from "./ChartAttrToolBarStyle";
+var ChartAttrToolBar = (props) => {
+  var _a, _b;
+  const { markdownEditorRef, readonly } = useEditorStore();
+  const i18n = useContext(I18nContext);
+  const chartNodeRef = useRef();
+  const remove = React.useCallback(() => {
+    const chart = props.node;
+    if (!chart)
+      return;
+    Transforms.delete(markdownEditorRef.current, {
+      at: EditorUtils.findPath(markdownEditorRef.current, chart)
+    });
+    chartNodeRef.current = void 0;
+    ReactEditor.focus(markdownEditorRef.current);
+  }, [markdownEditorRef.current]);
+  const context = useContext(ConfigProvider.ConfigContext);
+  const baseClassName = context == null ? void 0 : context.getPrefixCls(`chart-attr-toolbar`);
+  const { wrapSSR, hashId } = useStyle(baseClassName);
+  return wrapSSR(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: classNames(baseClassName, hashId),
+        style: {
+          width: "auto"
+        },
+        contentEditable: false,
+        "data-testid": "chart-attr-toolbar",
+        onClick: (e) => {
+          e.stopPropagation();
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          style: {
+            flex: 1,
+            fontWeight: "bold"
+          },
+          onClick: (e) => {
+            e.stopPropagation();
+          }
+        },
+        props.title
+      ),
+      (_a = props == null ? void 0 : props.options) == null ? void 0 : _a.map((item, index) => {
+        if (!item.icon)
+          return null;
+        if (!item.title) {
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              key: index,
+              className: classNames(`${baseClassName}-item`, hashId),
+              onClick: item.onClick,
+              style: item.style
+            },
+            item.icon
+          );
+        }
+        return /* @__PURE__ */ React.createElement(Tooltip, { mouseEnterDelay: 0.3, key: index, title: item.title }, /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            className: classNames(`${baseClassName}-item`, hashId),
+            onClick: item.onClick
+          },
+          item.icon
+        ));
+      }),
+      readonly ? null : /* @__PURE__ */ React.createElement(Tooltip, { mouseEnterDelay: 0.3, title: ((_b = i18n == null ? void 0 : i18n.locale) == null ? void 0 : _b.delete) || "删除" }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${baseClassName}-item`, hashId) }, /* @__PURE__ */ React.createElement(DeleteOutlined, { onClick: remove })))
+    )
+  );
+};
+export {
+  ChartAttrToolBar
+};

package/dist/plugins/chart/ChartMark/Area.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChartProps } from './useChart';
+export declare const Area: React.FC<ChartProps>;

package/dist/plugins/chart/ChartMark/Area.js

@@ -0,0 +1,147 @@
+// src/plugins/chart/ChartMark/Area.tsx
+import {
+  CategoryScale,
+  Chart as ChartJS,
+  Filler,
+  Legend,
+  LinearScale,
+  LineElement,
+  PointElement,
+  Title,
+  Tooltip
+} from "chart.js";
+import React, { useImperativeHandle, useRef } from "react";
+import { Line } from "react-chartjs-2";
+import { Container } from "./Container";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Filler,
+  Title,
+  Tooltip,
+  Legend
+);
+var Area = (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, 0.3)",
+          "rgba(255, 99, 132, 0.3)",
+          "rgba(255, 206, 86, 0.3)",
+          "rgba(75, 192, 192, 0.3)",
+          "rgba(153, 102, 255, 0.3)"
+        ];
+        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,
+          fill: true,
+          backgroundColor: colors[index % colors.length],
+          borderColor: borderColors[index % borderColors.length],
+          borderWidth: 1,
+          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: true,
+            backgroundColor: "rgba(54, 162, 235, 0.3)",
+            borderColor: "rgba(54, 162, 235, 1)",
+            borderWidth: 1,
+            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
+        }
+      },
+      y: {
+        display: true,
+        title: {
+          display: false
+        }
+      }
+    },
+    elements: {
+      point: {
+        radius: 2,
+        hoverRadius: 4
+      }
+    }
+  };
+  React.useEffect(() => {
+    if (lineChartRef.current) {
+      chartRef.current = lineChartRef.current;
+    }
+  }, [lineChartRef.current]);
+  return /* @__PURE__ */ React.createElement(Container, { index: props.index, chartRef, htmlRef }, /* @__PURE__ */ React.createElement(Line, { ref: lineChartRef, data: chartData, options }));
+};
+export {
+  Area
+};

package/dist/plugins/chart/ChartMark/Bar.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChartProps } from './useChart';
+export declare const Bar: React.FC<ChartProps>;

package/dist/plugins/chart/ChartMark/Bar.js

@@ -0,0 +1,151 @@
+// src/plugins/chart/ChartMark/Bar.tsx
+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";
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+);
+var Bar = (props) => {
+  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] = [];
+        }
+        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 = {
+    indexAxis: "y",
+    // 水平条形图
+    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) {
+            return stringFormatNumber(value);
+          }
+        }
+      },
+      y: {
+        display: true,
+        title: {
+          display: false
+        },
+        ticks: {
+          callback: function(value, index) {
+            const label = chartData.labels[index];
+            return stringFormatNumber(label);
+          }
+        }
+      }
+    }
+  };
+  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 {
+  Bar
+};

package/dist/plugins/chart/ChartMark/Column.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChartProps } from './useChart';
+export declare const Column: React.FC<ChartProps>;