docs: improve graph options docs (#2806)

* refactor: split code and description * docs: optimize graphs docs * docs: perf graph overview and mindmap * docs: perf * docs: perf * docs: perf en * docs: perf * docs: perf * chore: remove unnecessary codes * fix: remove unnecessary codes
ant-design · Dec 13, 2024 · 686623b · 686623b
1 parent d1c2370
commit 686623b
Show file tree

Hide file tree

Showing 126 changed files with 2,600 additions and 1,761 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,6 +1,5 @@
 **/*.svg
 **/*.html
-*.md
 package.json
 .umi
 .umi-production
@@ -11,4 +10,4 @@ dist
 node_modules
 *.ejs
 gatsby-browser.js
-*.min.js
+*.min.js
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/.dumirc.ts b/site/.dumirc.ts
@@ -56,7 +56,7 @@ export default defineConfig({
         slug: 'docs/options',
         title: {
           zh: '选项',
-          en: 'Option',
+          en: 'Options',
         },
       },
       {
@@ -151,10 +151,10 @@ export default defineConfig({
       {
         slug: 'options/graphs',
         title: {
-          zh: '关系图',
-          en: 'Relation Graph',
+          zh: '关系图组件',
+          en: 'Relation Graph Components',
         },
-        order: 1,
+        order: 2,
       },
     ],
     examples: [