docs: perf

ant-design · Dec 13, 2024 · f571165 · f571165
1 parent 710530e
commit f571165
Show file tree

Hide file tree

Showing 34 changed files with 385 additions and 424 deletions.
diff --git a/packages/graphs/src/components/flow-direction-graph/index.tsx b/packages/graphs/src/components/flow-direction-graph/index.tsx
@@ -10,13 +10,17 @@ import React, {
 import { BaseGraph } from '../../core/base-graph';
 import { COMMON_OPTIONS } from '../../core/constants';
 import { mergeOptions } from '../../core/utils/options';
-import { DEFAULT_OPTIONS } from './options';
+import { DEFAULT_OPTIONS, getFlowDirectionGraphOptions } from './options';
 import type { FlowDirectionGraphOptions } from './types';
 
 export const FlowDirectionGraph: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<FlowDirectionGraphOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<FlowDirectionGraphOptions>>(({ children, ...props }, ref) => {
-  const options = useMemo(() => mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, props), [props]);
+  const { labelField, ...restProps } = props;
+  const options = useMemo(
+    () => mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFlowDirectionGraphOptions({ labelField }), restProps),
+    [props],
+  );
 
   return (
     <BaseGraph {...options} ref={ref}>

diff --git a/packages/graphs/src/components/flow-graph/options.tsx b/packages/graphs/src/components/flow-graph/options.tsx
@@ -23,7 +23,9 @@ export const DEFAULT_OPTIONS: FlowGraphOptions = {
       lineWidth: 2,
       endArrow: true,
       radius: 8,
-      router: { type: 'orth' },
+      router: {
+        type: 'orth',
+      },
     },
   },
   layout: {

diff --git a/packages/graphs/src/components/organization-chart/index.tsx b/packages/graphs/src/components/organization-chart/index.tsx
@@ -17,11 +17,11 @@ export const OrganizationChart: ForwardRefExoticComponent<
   PropsWithoutRef<PropsWithChildren<OrganizationChartOptions>> & RefAttributes<Graph>
 > = forwardRef<Graph, PropsWithChildren<OrganizationChartOptions>>(({ children, ...props }, ref) => {
   const options = useMemo(() => {
-    const { direction = 'vertical', ...restProps } = props;
+    const { direction = 'vertical', labelField, ...restProps } = props;
     const options = mergeOptions(
       COMMON_OPTIONS,
       DEFAULT_OPTIONS,
-      getOrganizationChartOptions({ direction }),
+      getOrganizationChartOptions({ direction, labelField }),
       restProps,
     );
     return options;

diff --git a/packages/graphs/src/components/organization-chart/options.tsx b/packages/graphs/src/components/organization-chart/options.tsx
@@ -1,17 +1,14 @@
 import React from 'react';
 import { RCNode } from '../../core/base';
+import { formatLabel } from '../../core/utils/label';
+import type { GraphOptions } from '../../types';
 import { OrganizationChartOptions } from './types';
 
 const { TextNode } = RCNode;
 
-export const DEFAULT_OPTIONS: OrganizationChartOptions = {
+export const DEFAULT_OPTIONS: GraphOptions = {
   node: {
     type: 'react',
-    style: {
-      component: (data) => <TextNode type="filled" text={data.id} />,
-      size: [100, 40],
-      ports: [{ placement: 'top' }, { placement: 'bottom' }],
-    },
     state: {
       active: {
         halo: false,
@@ -20,69 +17,56 @@ export const DEFAULT_OPTIONS: OrganizationChartOptions = {
         halo: false,
       },
     },
-    animation: false,
   },
   edge: {
     type: 'polyline',
     style: {
       lineWidth: 2,
-      router: { type: 'orth' },
+      router: {
+        type: 'orth',
+      },
     },
-    animation: false,
   },
   layout: {
     type: 'dagre',
+    animation: false,
   },
   transforms: ['translate-react-node-origin'],
 };
 
 export function getOrganizationChartOptions({
   direction,
-}: Pick<OrganizationChartOptions, 'direction'>): OrganizationChartOptions {
-  let options = {};
-
-  if (direction === 'vertical') {
-    options = {
-      node: {
-        style: {
-          ports: [{ placement: 'top' }, { placement: 'bottom' }],
+  labelField,
+}: Pick<OrganizationChartOptions, 'direction' | 'labelField'>): GraphOptions {
+  const options: GraphOptions = {
+    node: {
+      style: {
+        component: (data) => {
+          const label = formatLabel(data, labelField);
+          return <TextNode type="filled" text={label} />;
         },
+        size: [100, 40],
+        ports:
+          direction === 'vertical'
+            ? [{ placement: 'top' }, { placement: 'bottom' }]
+            : [{ placement: 'left' }, { placement: 'right' }],
       },
-      transforms: (prev) => [
-        ...prev,
-        {
-          type: 'collapse-expand-react-node',
-          key: 'collapse-expand-react-node',
-          enable: false,
-          refreshLayout: true,
-        },
-      ],
-      layout: {
-        rankdir: 'TB',
-      },
-    };
-  } else {
-    options = {
-      node: {
-        style: {
-          ports: [{ placement: 'left' }, { placement: 'right' }],
-        },
-      },
-      transforms: (prev) => [
-        ...prev,
-        {
-          type: 'collapse-expand-react-node',
-          key: 'collapse-expand-react-node',
-          iconPlacement: 'right',
-          enable: false,
-          refreshLayout: true,
-        },
-      ],
-      layout: {
-        rankdir: 'LR',
+    },
+    transforms: (prev) => [
+      ...prev,
+      {
+        type: 'collapse-expand-react-node',
+        key: 'collapse-expand-react-node',
+        iconPlacement: direction === 'vertical' ? 'bottom' : 'right',
+        enable: false,
+        refreshLayout: true,
       },
-    };
-  }
+    ],
+    layout: {
+      type: 'dagre',
+      rankdir: direction === 'vertical' ? 'TB' : 'LR',
+    },
+  };
 
   return options;
 }
diff --git a/packages/graphs/src/components/organization-chart/types.ts b/packages/graphs/src/components/organization-chart/types.ts
@@ -1,3 +1,4 @@
+import type { NodeData } from '@antv/g6';
 import type { GraphOptions } from '../../types';
 
 export interface OrganizationChartOptions extends GraphOptions {
@@ -6,4 +7,11 @@ export interface OrganizationChartOptions extends GraphOptions {
    * @default 'vertical'
    */
   direction?: 'vertical' | 'horizontal';
+  /**
+   * Selects a field from the data to use as the label for the node.
+   * If a string is provided, it will select the field as `data[labelField]`.
+   * If a function is provided, it will call the function with the data and use the returned value.
+   * @default (data) => data.id
+   */
+  labelField?: string | ((data: NodeData) => string);
 }
diff --git a/site/docs/options/graphs-common/dagre-layout.en.md b/site/docs/options/graphs-common/dagre-layout.en.md
diff --git a/site/docs/options/graphs-common/dagre-layout.zh.md b/site/docs/options/graphs-common/dagre-layout.zh.md
@@ -0,0 +1,17 @@
+### Layout
+
+Dagre 层次布局。配置如下：
+
+也可以参考 [Dagre Wiki](https://github.com/dagrejs/dagre/wiki)
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| rankdir | 节点排列方向。可以是 `TB`、`BT`、`LR` 或 `RL`，其中 T = 上，B = 下，L = 左，R = 右 | string | `TB` |
+| align | 节点排列对齐方式。可以是 `UL`、`UR`、`DL` 或 `DR`，其中 U = 上，D = 下，L = 左，R = 右 | string | `undefined` |
+| nodesep | 布局中节点水平间隔的像素数 | number | `50` |
+| edgesep | 布局中边水平间隔的像素数 | number | `10` |
+| ranksep | 布局中每个等级之间的像素数 | number | `50` |
+| marginx | 图表左右两侧的边距像素数 | number | `0` |
+| marginy | 图表上下两侧的边距像素数 | number | `0` |
+| acyclicer | 如果设置为 greedy，则使用贪婪启发式算法来找到图的反馈弧集。反馈弧集是可以移除以使图无环的边集 | string | `undefined` |
+| ranker | 为输入图中的每个节点分配等级的算法类型。可能的值：`network-simplex`、`tight-tree` 或 `longest-path` | string | `network-simplex` |
diff --git a/site/docs/options/graphs-common/graph-data.zh.md b/site/docs/options/graphs-common/graph-data.zh.md
@@ -1,61 +1,8 @@
 ### Data
 
-支持两种数据配置方式：
+图数据。若开启“展开-收起”交互，需确保数据中包含 `children` 字段。
 
-1. **推荐**：使用树图数据（TreeData 格式）。通过内置函数，可将其转换为标准图格式数据。
-
-TreeData 类型定义：
-
-```ts
-type TreeData = {
-  id: string;
-  children?: TreeData[];
-  [key: string]: unknown;
-};
-```
-
-数据准备：
-
-```ts
-const data = {
-  id: 'root',
-  children: [
-    {
-      id: 'Child 1',
-      value: 10,
-      children: [
-        { id: 'Sub 1-1', value: 5 },
-        { id: 'Sub 1-2', value: 5 },
-      ],
-    },
-    {
-      id: 'Child 2',
-      value: 20,
-      children: [
-        { id: 'Sub 2-1', value: 10 },
-        { id: 'Sub 2-2', value: 10 },
-      ],
-    },
-  ],
-};
-```
-
-调用内置工具函数，将树图数据转换成标准的图数据。
-
-```jsx
-import React from 'react';
-import { G6, Fishbone } from '@ant-design/graphs';
-
-const { treeToGraphData } = G6;
-
-export default () => {
-  return <Fishbone data={treeToGraphData(data)} {...options} />;
-};
-```
-
-2. 直接使用标准图数据。若需开启“展开-收起”交互，需确保数据中包含 `children` 字段。
-
-```javascript
+```js
 const graphData = {
   nodes: [
     { id: '1', label: 'Node 1', children: ['2', '3'] },

diff --git a/site/docs/options/graphs-common/tree-data.zh.md b/site/docs/options/graphs-common/tree-data.zh.md
@@ -42,13 +42,13 @@ const data = {
 
 2. 图数据。若开启“展开-收起”交互，需确保数据中包含 `children` 字段。
 
-```javascript
+```js
 const graphData = {
   nodes: [
-    { id: '1', label: 'Node 1', children: ['2', '3'] },
-    { id: '2', label: 'Node 2', children: ['4'] },
-    { id: '3', label: 'Node 3' },
-    { id: '4', label: 'Node 4' },
+    { id: '1', data: { label: 'Node 1' }, children: ['2', '3'] },
+    { id: '2', data: { label: 'Node 2' }, children: ['4'] },
+    { id: '3', data: { label: 'Node 3' } },
+    { id: '4', data: { label: 'Node 4' } },
   ],
   edges: [
     { source: '1', target: '2' },

diff --git a/site/docs/options/graphs-demos/flow-direction-graph/custom.tsx b/site/docs/options/graphs-demos/flow-direction-graph/custom.tsx
@@ -1,6 +1,7 @@
 import { FlowDirectionGraph, type FlowDirectionGraphOptions } from '@ant-design/graphs';
 import insertCss from 'insert-css';
 import React from 'react';
+
 const data = {
   nodes: [
     {
@@ -503,8 +504,8 @@ const transformData = (data) => {
 
 export default () => {
   const options: FlowDirectionGraphOptions = {
-    containerStyle: { height: '400px' },
     autoFit: 'view',
+    padding: 8,
     data: transformData(data),
     node: {
       style: {
@@ -537,11 +538,10 @@ export default () => {
       },
     ],
     layout: {
-      type: 'antv-dagre',
-      nodesep: -10,
-      ranksep: 100,
+      type: 'dagre',
+      nodesep: 40,
+      ranksep: 200,
     },
-    animation: false,
   };
 
   return <FlowDirectionGraph {...options} />;

diff --git a/site/docs/options/graphs-demos/flow-direction-graph/default.md b/site/docs/options/graphs-demos/flow-direction-graph/default.md
@@ -2,20 +2,10 @@
 
 简单的展示。
 
-通过交互 `map-edge-line-width` 来调整 `edge.style.lineWidth`。包含以下属性：
-
-- `value`（数值或函数，用于计算边的数值
-- `minValue` 和 `maxValue`（可选，最小值和最大值，可以是数值或函数）
-- `minLineWidth` 和 `maxLineWidth`（可选，最小线宽和最大线宽，可以是数值或函数）
-- `scale`（可选，插值函数，用于将数值映射到线宽，支持 `'linear`'、'`log'`、`'pow'`、`'sqrt'` 和自定义插值函数）
+通过配置 `map-edge-line-width` 交互来动态调整边的描边宽度 `edge.style.lineWidth` 。具体可参考 [MapEdgeLineWidthOptions](/options/graphs/overview#mapedgelineWidth) 获取详细配置说明。
 
 ## en
 
 A simple demonstration.
 
-Adjust `edge.style.lineWidth` via the behavior `map-edge-line-width`. It includes the following properties:
-
-- `value` (number or function to compute the value of the edge)
-- `minValue` and `maxValue` (optional, minimum and maximum values, can be numbers or functions)
-- `minLineWidth` and `maxLineWidth` (optional, minimum and maximum line widths, can be numbers or functions)
-- `scale` (optional, interpolation function to map values to line widths, supports `'linear'`, `'log'`, `'pow'`, `'sqrt'`, and custom interpolation functions)
+Adjust `edge.style.lineWidth` via the behavior `map-edge-line-width`. For detailed configuration instructions, refer to [MapEdgeLineWidthOptions](/en/options/graphs/overview#mapedgelineWidth).
diff --git a/site/docs/options/graphs-demos/flow-direction-graph/default.tsx b/site/docs/options/graphs-demos/flow-direction-graph/default.tsx
@@ -11,9 +11,9 @@ export default () => {
   }, []);
 
   const options: FlowDirectionGraphOptions = {
-    containerStyle: { height: '400px' },
     autoFit: 'view',
     data,
+    labelField: (d) => d.value.title,
     transforms: (transforms) => [
       ...transforms,
       {
@@ -26,12 +26,6 @@ export default () => {
         maxLineWidth: 24,
       },
     ],
-    layout: {
-      type: 'antv-dagre',
-      nodesep: 10,
-      ranksep: 60,
-    },
-    animation: false
   };
 
   return <FlowDirectionGraph {...options} />;

diff --git a/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md
@@ -1,7 +1,7 @@
 ## zh
 
-通过添加悬浮高亮交互（注册类型：`hover-activate-chain`）可以高亮显示当前元素及其所在的链路。此交互基于 G6 内置交互 `hover-activate` 实现，并继承了其[配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate)。
+通过添加悬浮高亮交互（注册类型：`hover-activate-chain`）可以高亮显示当前元素及其所在的链路。此交互基于 G6 内置交互 `hover-activate` 实现。具体可参考 [HoverActivateChainOptions](/options/graphs/overview#hoveractivatechain) 获取详细配置说明。
 
 ## en
 
-By adding the hover highlight behavior (registration type: `hover-activate-chain`), you can highlight the current element and its entire chain. This behavior is based on the G6 built-in behavior `hover-activate` and inherits its [configuration options](https://g6.antv.antgroup.com/api/behaviors/hover-activate).
+By adding the hover highlight behavior (registration type: `hover-activate-chain`), you can highlight the current element and its entire chain. This behavior is based on the G6 built-in behavior `hover-activate`. For detailed configuration instructions, refer to [HoverActivateChainOptions](/en/options/graphs/overview#hoveractivatechain).