@antv/gpt-vis 0.3.0 → 0.3.2

package/README.ja-JP.md

@@ -1,5 +1,9 @@
 <img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.md) | [简体中文](./README.zh-CN.md) | 日本語
 
+<div align="center">
+  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" height=70">
+</div>
+
 <h1 align="center">GPT-Vis</h1>
 
 <div align="center">
@@ -11,11 +15,10 @@ GPTs、生成AI、およびLLMプロジェクトのためのコンポーネン
   <a href="/knowledges" target="_blank">知識</a> •
   <a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">エージェントデモ</a>
 </p>
-
-<div align="center">
-  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" width=500">
 </div>
 
+<div align="center">
+  <video src="https://github.com/user-attachments/assets/b8eb4a89-b0ed-4a39-8fab-316161949446" />
 </div>
 
 ## ✨ 特徴
@@ -65,7 +68,7 @@ export default () => {
 ```
 
 <details>
-<summary>🛠 カスタムレンダラー</summary>
+<summary>🛠 レンダラーUIのカスタマイズ</summary>
 
 ```jsx
 import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
@@ -140,7 +143,7 @@ set_gpt_vis(content)
 
 ## 🤖 チャート推奨データセット
 
-チャート推奨データセットは、与えられたデータに基づいてチャートタイプを推奨する能力を評価または微調整するために設計されています。データセットは現在、16種類のチャートをカバーしており、各チャートタイプには1〜3の異なるデータシナリオがあり、各シナリオには15以上のチャートデータインスタンスがあります。データセットは継続的に更新されており、使用ケースから収集したチャートデータの提供を歓迎します。データセットの詳細については、[evaluations/recommend](https://github.com/antvis/GPT-Vis/tree/main/evaluations/recommend/README.md)をご覧ください。
+チャート推奨データセットは、与えられたデータに基づいてチャートタイプを推奨する能力を評価または微調整するために設計されています。データセットは現在、16種類のチャートをカバーしており、各チャートタイプには1〜3の異なるデータシナリオがあり、各シナリオには15以上のチャートデータインスタンスがあります。データセットは継続的に更新されており、使用ケースから収集したチャートデータの提供を歓迎します。データセットの詳細については、[evaluations/recommend](https://github.com/antvis/GPT-Vis/blob/main/evaluations/datastes/recommend/README.en.md)をご覧ください。
 
 ## 💻 開発
 

package/README.md

@@ -1,5 +1,9 @@
 <img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja-JP.md)
 
+<div align="center">
+  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" height=70">
+</div>
+
 <h1 align="center">GPT-Vis</h1>
 
 <div align="center">
@@ -11,11 +15,11 @@ Components for GPTs, generative AI, and LLM projects. **Not only UI Components**
   <a href="/knowledges" target="_blank">Knowledge</a> •
   <a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">Agent Demo</a>
 </p>
-
-<div align="center">
-  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" width=500">
 </div>
 
+<div align="center">
+  <video src="https://github.com/user-attachments/assets/b8eb4a89-b0ed-4a39-8fab-316161949446" />
+  <!-- <a href="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*ut_RSJxdBMoAAAAAAAAAAAAADmJ7AQ/original" target="_blank"><img src="https://github.com/user-attachments/assets/d6e90e58-9bf7-4c40-a2db-96cbd68ed818" width="800"></a> -->
 </div>
 
 ## ✨ Features
@@ -65,7 +69,7 @@ export default () => {
 ```
 
 <details>
-<summary>🛠 Custom renderer</summary>
+<summary>🛠 Custom renderer UI</summary>
 
 ```jsx
 import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
@@ -140,7 +144,7 @@ Note: The numbers in the format of X/Y represent the metrics of the respective c
 
 ## 🤖 Chart Recommendation Dataset
 
-The chart recommendation dataset is designed to evaluate or fine-tune large language models on their ability to recommend chart types based on given data. The dataset currently encompasses 16 types of charts, with 1-3 different data scenarios per chart type, and more than 15 chart data instances for each scenario. The dataset is continuously updated, and we welcome contributions of chart data collected from your own use cases. For more detailed information about the dataset, please visit [evaluations/recommend](https://github.com/antvis/GPT-Vis/tree/main/evaluations/recommend/README.md).
+The chart recommendation dataset is designed to evaluate or fine-tune large language models on their ability to recommend chart types based on given data. The dataset currently encompasses 16 types of charts, with 1-3 different data scenarios per chart type, and more than 15 chart data instances for each scenario. The dataset is continuously updated, and we welcome contributions of chart data collected from your own use cases. For more detailed information about the dataset, please visit [evaluations/recommend](https://github.com/antvis/GPT-Vis/blob/main/evaluations/datastes/recommend/README.en.md).
 
 ## 💻 Development
 

package/README.zh-CN.md

@@ -1,5 +1,9 @@
 <img src="https://gw.alipayobjects.com/zos/antfincdn/R8sN%24GNdh6/language.svg" width="18"> [English](./README.md) | 简体中文 | [日本語](./README.ja-JP.md)
 
+<div align="center">
+  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" height=70">
+</div>
+
 <h1 align="center">GPT-Vis</h1>
 
 <div align="center">
@@ -11,11 +15,10 @@ Components for GPTs, generative AI, and LLM projects. **Not only UI Components**
   <a href="/knowledges" target="_blank">知识库</a> •
   <a href="https://tbox.alipay.com/experience/202410APr1n200110168?id=20241122F8eB00104644" target="_blank">体验 Agent</a>
 </p>
-
-<div align="center">
-  <img src="https://github.com/eosphoros-ai/GPT-Vis/assets/17919400/c8804ffb-d3d6-45d3-846f-cf217681ab05" width=500">
 </div>
 
+<div align="center">
+  <video src="https://github.com/user-attachments/assets/b8eb4a89-b0ed-4a39-8fab-316161949446" />
 </div>
 
 ## 特性
@@ -65,7 +68,7 @@ export default () => {
 ```
 
 <details>
-<summary>🛠 定制渲染器</summary>
+<summary>🛠 定制渲染 UI</summary>
 
 ```jsx
 import { GPTVisLite, withChartCode, ChartType, Pie } from '@antv/gpt-vis';
@@ -138,7 +141,7 @@ set_gpt_vis(content)
 
 ## 🤖 图表模型推荐数据集
 
-图表推荐数据集用于评测/微调大模型在“给定数据，推荐图表类型”任务上的能力。数据集目前涵盖了 16 种图表类型，每种图表类型下 1-3 个不同数据场景，每个场景下 15+ 个图表数据。数据会持续更新，也欢迎向我们贡献你的使用场景中收集的图表数据。数据集详细信息见 [evaluations/recommend](https://github.com/antvis/GPT-Vis/tree/main/evaluations/recommend/README.md)
+图表推荐数据集用于评测/微调大模型在“给定数据，推荐图表类型”任务上的能力。数据集目前涵盖了 16 种图表类型，每种图表类型下 1-3 个不同数据场景，每个场景下 15+ 个图表数据。数据会持续更新，也欢迎向我们贡献你的使用场景中收集的图表数据。数据集详细信息见 [evaluations/recommend](https://github.com/antvis/GPT-Vis/blob/main/evaluations/datastes/recommend/README.md)
 
 ## 💻 本地开发
 

package/dist/cjs/ConfigProvider/hooks/useConfig.d.ts

@@ -8,6 +8,6 @@ export declare function useMapConfig<T extends MapProps>(name: Charts, props: T)
     mapType: string | undefined;
     token: string | undefined;
 } & T;
-export declare function useGraphConfig<T extends GraphOptions>(name: Charts, defaultConfig: T, props: T): {
+export declare function useGraphConfig<T extends GraphOptions>(name: Charts, ...configs: Partial<T>[]): {
     [x: string]: any;
 };

package/dist/cjs/ConfigProvider/hooks/useConfig.js

@@ -95,9 +95,9 @@ function useGraphGlobalConfig(name) {
   const componentConfig = useComponentGlobalConfig(name);
   return (0, import_config.mergeGraphOptions)(graphConfig, componentConfig || {});
 }
-function useGraphConfig(name, defaultConfig, props) {
+function useGraphConfig(name, ...configs) {
   const globalConfig = useGraphGlobalConfig(name);
-  return (0, import_config.mergeGraphOptions)(defaultConfig, globalConfig, props);
+  return (0, import_config.mergeGraphOptions)(globalConfig, ...configs);
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/FlowDiagram/helper.d.ts

@@ -0,0 +1,7 @@
+import type { FlowGraphOptions, G6 } from '@ant-design/graphs';
+/**
+ * Adjust graph configuration based on data characteristics.
+ * @param data - graph data
+ * @returns graph options
+ */
+export declare function getGraphOptionsByData(data: G6.GraphData): FlowGraphOptions;

package/dist/cjs/FlowDiagram/helper.js

@@ -0,0 +1,83 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/FlowDiagram/helper.ts
+var helper_exports = {};
+__export(helper_exports, {
+  getGraphOptionsByData: () => getGraphOptionsByData
+});
+module.exports = __toCommonJS(helper_exports);
+function getGraphOptionsByData(data) {
+  if (isLinearStructure(data))
+    return {
+      node: {
+        style: {
+          ports: [
+            { placement: "right" },
+            { placement: "left" },
+            { placement: "top" },
+            { placement: "bottom" }
+          ]
+        }
+      },
+      layout: {
+        type: "snake",
+        cols: 3,
+        rowGap: 40
+      }
+    };
+  return {};
+}
+function isLinearStructure(data) {
+  const { nodes = [], edges = [] } = data;
+  const inDegree = {};
+  const outDegree = {};
+  const adjList = {};
+  nodes.forEach((node) => {
+    inDegree[node.id] = 0;
+    outDegree[node.id] = 0;
+    adjList[node.id] = [];
+  });
+  edges.forEach((edge) => {
+    inDegree[edge.target]++;
+    outDegree[edge.source]++;
+    adjList[edge.source].push(edge.target);
+  });
+  const visited = /* @__PURE__ */ new Set();
+  const dfs = (nodeId) => {
+    if (visited.has(nodeId))
+      return;
+    visited.add(nodeId);
+    adjList[nodeId].forEach(dfs);
+  };
+  dfs(nodes[0].id);
+  if (visited.size !== nodes.length)
+    return false;
+  const sourceNodes = nodes.filter((node) => inDegree[node.id] === 0);
+  const sinkNodes = nodes.filter((node) => outDegree[node.id] === 0);
+  if (sourceNodes.length !== 1 || sinkNodes.length !== 1)
+    return false;
+  const middleNodes = nodes.filter((node) => inDegree[node.id] === 1 && outDegree[node.id] === 1);
+  if (middleNodes.length !== nodes.length - 2)
+    return false;
+  return true;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getGraphOptionsByData
+});

package/dist/cjs/FlowDiagram/index.js

@@ -36,9 +36,11 @@ var import_graphs = require("@ant-design/graphs");
 var import_react = __toESM(require("react"));
 var import_hooks = require("../ConfigProvider/hooks");
 var import_graph = require("../utils/graph");
+var import_helper = require("./helper");
 var { TextNode } = import_graphs.RCNode;
 var defaultConfig = {
   autoResize: true,
+  autoFit: "center",
   node: {
     style: {
       component: (d) => {
@@ -53,7 +55,8 @@ var defaultConfig = {
             style: {
               fontSize: 12,
               background: "linear-gradient(-89deg, #64b7f2 0%, #4c95f3 100%)"
-            }
+            },
+            borderWidth: 2
           }
         );
       },
@@ -94,7 +97,12 @@ var defaultConfig = {
 var FlowDiagram = (props) => {
   const { data: propsData, ...restProps } = props;
   const data = (0, import_react.useMemo)(() => (0, import_graph.visGraphData2GraphData)(propsData), [propsData]);
-  const config = (0, import_hooks.useGraphConfig)("FlowDiagram", defaultConfig, restProps);
+  const config = (0, import_hooks.useGraphConfig)(
+    "FlowDiagram",
+    defaultConfig,
+    (0, import_helper.getGraphOptionsByData)(data),
+    restProps
+  );
   return /* @__PURE__ */ import_react.default.createElement(import_graphs.FlowGraph, { data, ...config });
 };
 var FlowDiagram_default = FlowDiagram;

package/dist/cjs/Text/utils/useAntdDarkAlgorithm.js

@@ -25,11 +25,11 @@ module.exports = __toCommonJS(useAntdDarkAlgorithm_exports);
 var import_antd = require("antd");
 var import_lodash = require("lodash");
 var import_react = require("react");
-var { darkAlgorithm } = import_antd.theme;
 var useAntdDarkAlgorithm = () => {
-  var _a;
+  var _a, _b;
+  const darkAlgorithm = (_a = import_antd.theme) == null ? void 0 : _a.darkAlgorithm;
   const config = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
-  const currentAlgorithm = (_a = config.theme) == null ? void 0 : _a.algorithm;
+  const currentAlgorithm = (_b = config.theme) == null ? void 0 : _b.algorithm;
   if ((0, import_lodash.isArray)(currentAlgorithm) && currentAlgorithm.includes(darkAlgorithm))
     return true;
   return currentAlgorithm === darkAlgorithm;

package/dist/cjs/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.3.0";
+declare const _default: "0.3.2";
 export default _default;

package/dist/cjs/version.js

@@ -22,4 +22,4 @@ __export(version_exports, {
   default: () => version_default
 });
 module.exports = __toCommonJS(version_exports);
-var version_default = "0.3.0";
+var version_default = "0.3.2";

package/dist/esm/ConfigProvider/hooks/useConfig.d.ts

@@ -8,6 +8,6 @@ export declare function useMapConfig<T extends MapProps>(name: Charts, props: T)
     mapType: string | undefined;
     token: string | undefined;
 } & T;
-export declare function useGraphConfig<T extends GraphOptions>(name: Charts, defaultConfig: T, props: T): {
+export declare function useGraphConfig<T extends GraphOptions>(name: Charts, ...configs: Partial<T>[]): {
     [x: string]: any;
 };

package/dist/esm/ConfigProvider/hooks/useConfig.js

@@ -51,7 +51,10 @@ function useGraphGlobalConfig(name) {
   var componentConfig = useComponentGlobalConfig(name);
   return mergeGraphOptions(graphConfig, componentConfig || {});
 }
-export function useGraphConfig(name, defaultConfig, props) {
+export function useGraphConfig(name) {
   var globalConfig = useGraphGlobalConfig(name);
-  return mergeGraphOptions(defaultConfig, globalConfig, props);
+  for (var _len = arguments.length, configs = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    configs[_key - 1] = arguments[_key];
+  }
+  return mergeGraphOptions.apply(void 0, [globalConfig].concat(configs));
 }

package/dist/esm/FlowDiagram/helper.d.ts

@@ -0,0 +1,7 @@
+import type { FlowGraphOptions, G6 } from '@ant-design/graphs';
+/**
+ * Adjust graph configuration based on data characteristics.
+ * @param data - graph data
+ * @returns graph options
+ */
+export declare function getGraphOptionsByData(data: G6.GraphData): FlowGraphOptions;

package/dist/esm/FlowDiagram/helper.js

@@ -0,0 +1,76 @@
+/**
+ * Adjust graph configuration based on data characteristics.
+ * @param data - graph data
+ * @returns graph options
+ */
+export function getGraphOptionsByData(data) {
+  if (isLinearStructure(data)) return {
+    node: {
+      style: {
+        ports: [{
+          placement: 'right'
+        }, {
+          placement: 'left'
+        }, {
+          placement: 'top'
+        }, {
+          placement: 'bottom'
+        }]
+      }
+    },
+    layout: {
+      type: 'snake',
+      cols: 3,
+      rowGap: 40
+    }
+  };
+  return {};
+}
+function isLinearStructure(data) {
+  var _data$nodes = data.nodes,
+    nodes = _data$nodes === void 0 ? [] : _data$nodes,
+    _data$edges = data.edges,
+    edges = _data$edges === void 0 ? [] : _data$edges;
+  var inDegree = {};
+  var outDegree = {};
+  var adjList = {};
+  nodes.forEach(function (node) {
+    inDegree[node.id] = 0;
+    outDegree[node.id] = 0;
+    adjList[node.id] = [];
+  });
+  edges.forEach(function (edge) {
+    inDegree[edge.target]++;
+    outDegree[edge.source]++;
+    adjList[edge.source].push(edge.target);
+  });
+
+  // 检查图是否连通
+  // Check if the graph is connected
+  var visited = new Set();
+  var dfs = function dfs(nodeId) {
+    if (visited.has(nodeId)) return;
+    visited.add(nodeId);
+    adjList[nodeId].forEach(dfs);
+  };
+  dfs(nodes[0].id);
+  if (visited.size !== nodes.length) return false;
+
+  // 检查是否有且仅有一个源节点和一个汇节点
+  // Check if there is exactly one source node and one sink node
+  var sourceNodes = nodes.filter(function (node) {
+    return inDegree[node.id] === 0;
+  });
+  var sinkNodes = nodes.filter(function (node) {
+    return outDegree[node.id] === 0;
+  });
+  if (sourceNodes.length !== 1 || sinkNodes.length !== 1) return false;
+
+  // 检查中间节点是否只有一个前驱和一个后继
+  // Check if the middle nodes have only one predecessor and one successor
+  var middleNodes = nodes.filter(function (node) {
+    return inDegree[node.id] === 1 && outDegree[node.id] === 1;
+  });
+  if (middleNodes.length !== nodes.length - 2) return false;
+  return true;
+}

package/dist/esm/FlowDiagram/index.js

@@ -6,9 +6,11 @@ import { FlowGraph as ADCFlowGraph, RCNode } from '@ant-design/graphs';
 import React, { useMemo } from 'react';
 import { useGraphConfig } from "../ConfigProvider/hooks";
 import { visGraphData2GraphData } from "../utils/graph";
+import { getGraphOptionsByData } from "./helper";
 var TextNode = RCNode.TextNode;
 var defaultConfig = {
   autoResize: true,
+  autoFit: 'center',
   node: {
     style: {
       component: function component(d) {
@@ -21,7 +23,8 @@ var defaultConfig = {
           style: {
             fontSize: 12,
             background: 'linear-gradient(-89deg, #64b7f2 0%, #4c95f3 100%)'
-          }
+          },
+          borderWidth: 2
         });
       },
       size: [140, 32]
@@ -67,7 +70,7 @@ var FlowDiagram = function FlowDiagram(props) {
   var data = useMemo(function () {
     return visGraphData2GraphData(propsData);
   }, [propsData]);
-  var config = useGraphConfig('FlowDiagram', defaultConfig, restProps);
+  var config = useGraphConfig('FlowDiagram', defaultConfig, getGraphOptionsByData(data), restProps);
   return /*#__PURE__*/React.createElement(ADCFlowGraph, _extends({
     data: data
   }, config));

package/dist/esm/Text/utils/useAntdDarkAlgorithm.js

@@ -1,11 +1,12 @@
 import { ConfigProvider, theme as antdTheme } from 'antd';
 import { isArray } from 'lodash';
 import { useContext } from 'react';
-var darkAlgorithm = antdTheme.darkAlgorithm;
 
 /** 判断是否运用了 antd dark algorithm */
 export var useAntdDarkAlgorithm = function useAntdDarkAlgorithm() {
   var _config$theme;
+  // 放到函数内部，避免用户使用 antd@4，theme 变量不存在情况！！！
+  var darkAlgorithm = antdTheme === null || antdTheme === void 0 ? void 0 : antdTheme.darkAlgorithm;
   var config = useContext(ConfigProvider.ConfigContext);
   var currentAlgorithm = (_config$theme = config.theme) === null || _config$theme === void 0 ? void 0 : _config$theme.algorithm;
   if (isArray(currentAlgorithm) && currentAlgorithm.includes(darkAlgorithm)) return true;

package/dist/esm/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "0.3.0";
+declare const _default: "0.3.2";
 export default _default;

package/dist/esm/version.js

@@ -1 +1 @@
-export default '0.3.0';
+export default '0.3.2';