docs: perf

ant-design · Dec 12, 2024 · 710530e · 710530e
1 parent 32aa3a6
commit 710530e
Show file tree

Hide file tree

Showing 23 changed files with 221 additions and 509 deletions.
diff --git a/site/docs/options/graphs-demos/dendrogram/collapse-expand.md b/site/docs/options/graphs-demos/dendrogram/collapse-expand.md
@@ -1,7 +1,7 @@
 ## zh
 
-添加 G6 内置 CollapseExpand 交互，双击触发展开/收起。更多 G6 内置交互请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior)。
+通过配置 G6 内置 CollapseExpand 交互 (`collapse-expand`)，双击触发展开/收起。具体可参考 [CollapseExpandOptions](https://g6.antv.antgroup.com/api/behaviors/collapse-expand) 获取详细配置说明。
 
 ## en
 
-Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For more built-in interactions, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior).
+Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For detailed configuration instructions, refer to [CollapseExpandOptions](https://g6.antv.antgroup.com/en/api/behaviors/collapse-expand).
diff --git a/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx b/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx
@@ -1,50 +1,20 @@
 import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    {
-      id: 'Regression', depth: 1, "children": [
-        "Multiple linear regression",
-        "Partial least squares",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-    { source: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     data,
     behaviors: (behaviors) => [...behaviors, 'collapse-expand'],
   };
 
-  return <Dendrogram {...options} />
+  return <Dendrogram {...options} />;
 };
diff --git a/site/docs/options/graphs-demos/dendrogram/compact.tsx b/site/docs/options/graphs-demos/dendrogram/compact.tsx
@@ -1,56 +1,26 @@
 import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    {
-      id: 'Regression', depth: 1, "children": [
-        "Multiple linear regression",
-        "Partial least squares",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-    { source: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
-    compact: true,
     autoFit: 'view',
     data,
-    animation: false,
+    compact: true,
   };
 
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
-    <Dendrogram {...options} direction='vertical' />
-    <Dendrogram {...options} direction='horizontal' />
-    <Dendrogram {...options} direction='radial' />
-  </div>;
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <Dendrogram {...options} direction="vertical" />
+      <Dendrogram {...options} direction="horizontal" />
+      <Dendrogram {...options} direction="radial" />
+    </div>
+  );
 };
diff --git a/site/docs/options/graphs-demos/dendrogram/default.tsx b/site/docs/options/graphs-demos/dendrogram/default.tsx
@@ -1,50 +1,19 @@
 import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    {
-      id: 'Regression', depth: 1, "children": [
-        "Multiple linear regression",
-        "Partial least squares",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-    { source: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     data,
-    animation: false,
   };
 
-  return <Dendrogram {...options} />
+  return <Dendrogram {...options} />;
 };
diff --git a/site/docs/options/graphs-demos/dendrogram/direction.tsx b/site/docs/options/graphs-demos/dendrogram/direction.tsx
@@ -1,55 +1,25 @@
 import { Dendrogram, type DendrogramOptions } from '@ant-design/graphs';
-import React from 'react';
-
-const data = {
-  nodes: [
-    { id: 'Modeling Methods', depth: 0, children: ['Classification', 'Consensus', 'Regression'] },
-    { id: 'Classification', depth: 1 },
-    { id: 'Consensus', depth: 1, children: ['Models diversity', 'Methods', 'Common'] },
-    { id: 'Models diversity', depth: 2 },
-    { id: 'Methods', depth: 2 },
-    { id: 'Common', depth: 2 },
-    {
-      id: 'Regression', depth: 1, "children": [
-        "Multiple linear regression",
-        "Partial least squares",
-        "Multi-layer feedforward neural network",
-        "General regression neural network",
-        "Support vector regression"
-      ]
-    },
-    { "id": "Multiple linear regression", depth: 3 },
-    { "id": "Partial least squares", depth: 3 },
-    { "id": "Multi-layer feedforward neural network", depth: 3 },
-    { "id": "General regression neural network", depth: 3 },
-    { "id": "Support vector regression", depth: 3 },
-  ],
-  edges: [
-    { source: 'Modeling Methods', target: 'Classification' },
-    { source: 'Modeling Methods', target: 'Consensus' },
-    { source: 'Modeling Methods', target: 'Regression' },
-    { source: 'Consensus', target: 'Models diversity' },
-    { source: 'Consensus', target: 'Methods' },
-    { source: 'Consensus', target: 'Common' },
-    { source: 'Regression', target: 'Multiple linear regression' },
-    { source: 'Regression', target: 'Partial least squares' },
-    { source: 'Regression', target: 'Multi-layer feedforward neural network' },
-    { source: 'Regression', target: 'General regression neural network' },
-    { source: 'Regression', target: 'Support vector regression' },
-  ],
-};
+import React, { useEffect, useState } from 'react';
 
 export default () => {
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+      .then((res) => res.json())
+      .then(setData);
+  }, []);
+
   const options: DendrogramOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     data,
-    animation: false,
   };
 
-  return <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
-    <Dendrogram {...options} direction='vertical' />
-    <Dendrogram {...options} direction='horizontal' />
-    <Dendrogram {...options} direction='radial' />
-  </div>;
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
+      <Dendrogram {...options} direction="vertical" />
+      <Dendrogram {...options} direction="horizontal" />
+      <Dendrogram {...options} direction="radial" />
+    </div>
+  );
 };
diff --git a/site/docs/options/graphs-demos/fishbone/decision.tsx b/site/docs/options/graphs-demos/fishbone/decision.tsx
@@ -1,7 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
+import React from 'react';
 
 const data = {
   id: 'Overcome procrastination',
@@ -45,13 +43,11 @@ const data = {
   ],
 };
 
-
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
     type: 'decision',
-    data: treeToGraphData(data),
+    data,
   };
 
   return <Fishbone {...options} />;

diff --git a/site/docs/options/graphs-demos/fishbone/default.tsx b/site/docs/options/graphs-demos/fishbone/default.tsx
@@ -1,7 +1,5 @@
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
 import React from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
 
 const data = {
   id: 'Product Profitability Below Expectations',
@@ -55,9 +53,8 @@ const data = {
 
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
-    data: treeToGraphData(data),
+    data,
   };
 
   return <Fishbone {...options} />;

diff --git a/site/docs/options/graphs-demos/fishbone/layout.tsx b/site/docs/options/graphs-demos/fishbone/layout.tsx
@@ -1,7 +1,5 @@
+import { Fishbone, type FishboneOptions } from '@ant-design/graphs';
 import React from 'react';
-import { G6, Fishbone, type FishboneOptions } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
 
 const data = {
   id: 'Product Profitability Below Expectations',
@@ -53,17 +51,15 @@ const data = {
   ],
 };
 
-
 export default () => {
   const options: FishboneOptions = {
-    containerStyle: { height: '320px' },
     autoFit: 'view',
-    data: treeToGraphData(data),
+    data,
     layout: {
       hGap: 40,
       vGap: 60,
-      getRibSep: (node) => node.depth === 0 ? 0 : -40
-    }
+      getRibSep: (node) => (node.depth === 0 ? 0 : -40),
+    },
   };
 
   return <Fishbone {...options} />;

diff --git a/site/docs/options/graphs-demos/indented-tree/collapse-expand.md b/site/docs/options/graphs-demos/indented-tree/collapse-expand.md
@@ -1,27 +1,7 @@
 ## zh
 
-通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。
-
-- `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false`
-- `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'`
-- `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'`
-- `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'`
-- `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标
-- `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'`
-- `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0`
-- `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式
-- `refreshLayout`: 每次收起/展开节点后，是否刷新布局
+通过配置 `collapse-expand-react-node` 交互来启用展开/收起子节点行为。具体可参考 [CollapseExpandReactNodeOptions](/options/graphs/overview#collapseexpandreactnode) 获取详细配置说明。此外，还可以配置 `defaultExpandLevel` 来控制默认展开层级。
 
 ## en
 
-Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes.
-
-- `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false`
-- `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'`
-- `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'`
-- `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'`
-- `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon
-- `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'`
-- `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0`
-- `iconClassName/iconStyle`: CSS class name and inline styles for the icon
-- `refreshLayout`: Whether to refresh the layout after each collapse/expand operation
+Enable the expand/collapse behavior for child nodes by configuring the `collapse-expand-react-node` behavior. For detailed configuration instructions, refer to [CollapseExpandReactNodeOptions](/en/options/graphs/overview#collapseexpandreactnode). Additionally, configure `defaultExpandLevel` to control the default expansion level.