diff --git a/packages/graphs/src/components/flow-direction-graph/options.tsx b/packages/graphs/src/components/flow-direction-graph/options.tsx index 571693718..1ae4ea519 100644 --- a/packages/graphs/src/components/flow-direction-graph/options.tsx +++ b/packages/graphs/src/components/flow-direction-graph/options.tsx @@ -5,11 +5,12 @@ import type { GraphOptions } from '../../types'; const { TextNode } = RCNode; export const DEFAULT_OPTIONS: GraphOptions = { + padding: [20, 0, 0, 50], node: { type: 'react', style: { component: (data) => , - size: [80, 40], + size: [100, 40], ports: [{ placement: 'left' }, { placement: 'right' }], }, state: { diff --git a/packages/graphs/src/components/flow-graph/options.tsx b/packages/graphs/src/components/flow-graph/options.tsx index 3b08237c4..904c6837e 100644 --- a/packages/graphs/src/components/flow-graph/options.tsx +++ b/packages/graphs/src/components/flow-graph/options.tsx @@ -5,11 +5,12 @@ import type { FlowGraphOptions } from './types'; const { TextNode } = RCNode; export const DEFAULT_OPTIONS: FlowGraphOptions = { + padding: [20, 0, 0, 50], node: { type: 'react', style: { component: (data) => , - size: [80, 40], + size: [100, 40], ports: [{ placement: 'left' }, { placement: 'right' }], }, state: { diff --git a/packages/graphs/src/components/indented-tree/index.tsx b/packages/graphs/src/components/indented-tree/index.tsx index 0bb55de86..d9e6ad937 100644 --- a/packages/graphs/src/components/indented-tree/index.tsx +++ b/packages/graphs/src/components/indented-tree/index.tsx @@ -17,11 +17,11 @@ export const IndentedTree: ForwardRefExoticComponent< PropsWithoutRef> & RefAttributes > = forwardRef>(({ children, ...props }, ref) => { const options = useMemo(() => { - const { type = 'default', nodeMinWidth, nodeMaxWidth, mode = 'right', ...restProps } = props; + const { type = 'default', nodeMinWidth, nodeMaxWidth, direction = 'right', ...restProps } = props; const options = mergeOptions( COMMON_OPTIONS, DEFAULT_OPTIONS, - getIndentedTreeOptions({ type, nodeMinWidth, nodeMaxWidth, mode }), + getIndentedTreeOptions({ type, nodeMinWidth, nodeMaxWidth, direction }), restProps, ); return options; diff --git a/packages/graphs/src/components/indented-tree/options.tsx b/packages/graphs/src/components/indented-tree/options.tsx index 3f4460b86..da2ad5d65 100644 --- a/packages/graphs/src/components/indented-tree/options.tsx +++ b/packages/graphs/src/components/indented-tree/options.tsx @@ -80,8 +80,8 @@ export const getIndentedTreeOptions = ({ type, nodeMinWidth, nodeMaxWidth, - mode, -}: Pick): IndentedTreeOptions => { + direction, +}: Pick): IndentedTreeOptions => { let options: IndentedTreeOptions = {}; const minWidth = nodeMinWidth || 0; const maxWidth = nodeMaxWidth || 300; @@ -201,10 +201,10 @@ export const getIndentedTreeOptions = ({ }; } - if (mode) { + if (direction) { options.layout ||= {} as SingleLayoutOptions; Object.assign(options.layout as SingleLayoutOptions, { - direction: mode === 'alternate' ? 'H' : mode === 'left' ? 'RL' : 'LR', + direction: direction === 'alternate' ? 'H' : direction === 'left' ? 'RL' : 'LR', }); } diff --git a/packages/graphs/src/components/indented-tree/types.ts b/packages/graphs/src/components/indented-tree/types.ts index 10181d593..6fb804016 100644 --- a/packages/graphs/src/components/indented-tree/types.ts +++ b/packages/graphs/src/components/indented-tree/types.ts @@ -7,10 +7,10 @@ export interface IndentedTreeOptions extends GraphOptions { */ type?: 'default' | 'linear' | 'boxed'; /** - * The mode of the mind map. + * The direction of the mind map. * @default 'right' */ - mode?: 'left' | 'right' | 'alternate'; + direction?: 'left' | 'right' | 'alternate'; /** * The minimum width of the tree nodes. If the text of a tree node is too short, it will be centered. * @default 0 diff --git a/packages/graphs/src/components/mind-map/index.tsx b/packages/graphs/src/components/mind-map/index.tsx index 244958967..67bab1b2f 100644 --- a/packages/graphs/src/components/mind-map/index.tsx +++ b/packages/graphs/src/components/mind-map/index.tsx @@ -17,11 +17,11 @@ export const MindMap: ForwardRefExoticComponent< PropsWithoutRef> & RefAttributes > = forwardRef>(({ children, ...props }, ref) => { const options = useMemo(() => { - const { type = 'default', nodeMinWidth, nodeMaxWidth, mode = 'alternate', ...restProps } = props; + const { type = 'default', nodeMinWidth, nodeMaxWidth, direction = 'alternate', ...restProps } = props; const options = mergeOptions( COMMON_OPTIONS, DEFAULT_OPTIONS, - getMindMapOptions({ type, nodeMinWidth, nodeMaxWidth, mode }), + getMindMapOptions({ type, nodeMinWidth, nodeMaxWidth, direction }), restProps, ); return options; diff --git a/packages/graphs/src/components/mind-map/options.tsx b/packages/graphs/src/components/mind-map/options.tsx index c4f38d923..01c5a49af 100644 --- a/packages/graphs/src/components/mind-map/options.tsx +++ b/packages/graphs/src/components/mind-map/options.tsx @@ -77,10 +77,10 @@ export const DEFAULT_OPTIONS: MindMapOptions = { export function getMindMapOptions({ type, - mode, + direction, nodeMinWidth, nodeMaxWidth, -}: Pick): MindMapOptions { +}: Pick): MindMapOptions { let options: MindMapOptions = {}; if (type === 'boxed') { const minWidth = nodeMinWidth || 120; @@ -209,9 +209,9 @@ export function getMindMapOptions({ }; } - if (mode) { + if (direction) { options.layout ||= {} as SingleLayoutOptions; - (options.layout as SingleLayoutOptions).direction = mode === 'alternate' ? 'H' : mode === 'left' ? 'RL' : 'LR'; + (options.layout as SingleLayoutOptions).direction = direction === 'alternate' ? 'H' : direction === 'left' ? 'RL' : 'LR'; } return options; diff --git a/packages/graphs/src/components/mind-map/types.ts b/packages/graphs/src/components/mind-map/types.ts index 7aef3f8ea..94cb9478f 100644 --- a/packages/graphs/src/components/mind-map/types.ts +++ b/packages/graphs/src/components/mind-map/types.ts @@ -7,10 +7,10 @@ export interface MindMapOptions extends GraphOptions { */ type?: 'default' | 'linear' | 'boxed'; /** - * The mode of the mind map. + * The direction of the mind map. * @default 'alternate' */ - mode?: 'left' | 'right' | 'alternate'; + direction?: 'left' | 'right' | 'alternate'; /** * The minimum width of the node. * @default 0(default) 120(boxed) diff --git a/packages/graphs/src/components/network-graph/options.tsx b/packages/graphs/src/components/network-graph/options.tsx index e3c57ae61..d8fc3d977 100644 --- a/packages/graphs/src/components/network-graph/options.tsx +++ b/packages/graphs/src/components/network-graph/options.tsx @@ -5,9 +5,6 @@ const SIZE = 32; export const DEFAULT_OPTIONS: NetworkGraphOptions = { node: { type: 'circle', - style: { - size: SIZE, - }, }, layout: { type: 'd3-force', diff --git a/packages/graphs/src/components/organization-chart/options.tsx b/packages/graphs/src/components/organization-chart/options.tsx index 4599e66df..34349e626 100644 --- a/packages/graphs/src/components/organization-chart/options.tsx +++ b/packages/graphs/src/components/organization-chart/options.tsx @@ -5,12 +5,12 @@ import { OrganizationChartOptions } from './types'; const { TextNode } = RCNode; export const DEFAULT_OPTIONS: OrganizationChartOptions = { - padding: [20, 0, 0, 40], + padding: [20, 0, 0, 50], node: { type: 'react', style: { component: (data) => , - size: [80, 40], + size: [100, 40], ports: [{ placement: 'top' }, { placement: 'bottom' }], }, state: { diff --git a/packages/graphs/src/types.ts b/packages/graphs/src/types.ts index 9873f6f9b..a19848fae 100644 --- a/packages/graphs/src/types.ts +++ b/packages/graphs/src/types.ts @@ -18,15 +18,15 @@ export interface GraphOptions extends ContainerConfig, Omit BehaviorOptions); + behaviors?: BehaviorOptions | ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions); /** * 画布插件 */ - plugins?: PluginOptions | ((this: Graph, prev: PluginOptions) => PluginOptions); + plugins?: PluginOptions | ((this: Graph, plugins: PluginOptions) => PluginOptions); /** * 数据转换器 */ - transforms?: TransformOptions | ((this: Graph, prev: TransformOptions) => TransformOptions); + transforms?: TransformOptions | ((this: Graph, transforms: TransformOptions) => TransformOptions); } export type ParsedGraphOptions = Required; diff --git a/site/.dumirc.ts b/site/.dumirc.ts index c974112b9..c7f37dcfc 100644 --- a/site/.dumirc.ts +++ b/site/.dumirc.ts @@ -138,6 +138,14 @@ export default defineConfig({ }, order: 10, }, + { + slug: 'options/graphs', + title: { + zh: '关系图', + en: 'Relation Graph', + }, + order: 1, + }, ], examples: [ { @@ -160,7 +168,7 @@ export default defineConfig({ slug: 'relations', icon: 'line', title: { - zh: '关系图表', + zh: '关系图', en: 'Relations', }, }, diff --git a/site/docs/options/general-properties.zh.md b/site/docs/options/general-properties.zh.md new file mode 100644 index 000000000..91c1d3e70 --- /dev/null +++ b/site/docs/options/general-properties.zh.md @@ -0,0 +1,14 @@ +--- +title: 通用属性 +--- + +> Tips: 以下通用属性适用于 charts 组件，不支持的组件会单独说明。 + +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ---------------------------------------------------------- | ------------------------------- | ------- | +| containerStyle | 配置图表容器的样式，接受一个包含 CSS 属性和值的对象 | `React.CSSProperties` | - | +| containerAttributes | 为图表容器添加自定义的 HTML 属性 | `Record` | - | +| className | 添加在组件最外层的 className | `string` | - | +| loading | 表示图表是否处于加载状态 | `boolean` | `false` | +| loadingTemplate | 自定义加载模板，当图表加载时显示的元素 | `React.ReactElement` | - | +| errorTemplate | 自定义错误模板，当图表出错时调用的函数，返回显示的错误信息 | `(e: Error) => React.ReactNode` | - | diff --git a/site/docs/options/graphs/demos/dendrogram/collapse-expand.tsx b/site/docs/options/graphs/demos/dendrogram/collapse-expand.tsx new file mode 100644 index 000000000..c95dd75ff --- /dev/null +++ b/site/docs/options/graphs/demos/dendrogram/collapse-expand.tsx @@ -0,0 +1,50 @@ +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' }, + ], +}; +export default () => { + const options: DendrogramOptions = { + containerStyle: { height: '320px' }, + autoFit: 'view', + data, + behaviors: (behaviors) => [...behaviors, 'collapse-expand'], + }; + + return +}; diff --git a/site/docs/options/graphs/demos/dendrogram/compact.tsx b/site/docs/options/graphs/demos/dendrogram/compact.tsx new file mode 100644 index 000000000..9a70ea7e5 --- /dev/null +++ b/site/docs/options/graphs/demos/dendrogram/compact.tsx @@ -0,0 +1,56 @@ +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' }, + ], +}; + +export default () => { + const options: DendrogramOptions = { + containerStyle: { height: '320px' }, + compact: true, + autoFit: 'view', + data, + animation: false, + }; + + return
+ + + +
; +}; diff --git a/site/docs/options/graphs/demos/dendrogram/default.tsx b/site/docs/options/graphs/demos/dendrogram/default.tsx new file mode 100644 index 000000000..109518764 --- /dev/null +++ b/site/docs/options/graphs/demos/dendrogram/default.tsx @@ -0,0 +1,50 @@ +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' }, + ], +}; +export default () => { + const options: DendrogramOptions = { + containerStyle: { height: '320px' }, + autoFit: 'view', + data, + animation: false, + }; + + return +}; diff --git a/site/docs/options/graphs/demos/dendrogram/direction.tsx b/site/docs/options/graphs/demos/dendrogram/direction.tsx new file mode 100644 index 000000000..59fdebd89 --- /dev/null +++ b/site/docs/options/graphs/demos/dendrogram/direction.tsx @@ -0,0 +1,55 @@ +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' }, + ], +}; + +export default () => { + const options: DendrogramOptions = { + containerStyle: { height: '320px' }, + autoFit: 'view', + data, + animation: false, + }; + + return
+ + + +
; +}; diff --git a/site/docs/options/graphs/demos/flow-direction-graph/default.tsx b/site/docs/options/graphs/demos/flow-direction-graph/default.tsx new file mode 100644 index 000000000..c740387da --- /dev/null +++ b/site/docs/options/graphs/demos/flow-direction-graph/default.tsx @@ -0,0 +1,38 @@ +import { FlowDirectionGraph, type FlowDirectionGraphOptions } from '@ant-design/graphs'; +import React, { useEffect, useState } from 'react'; + +export default () => { + const [data, setData] = useState(undefined); + + useEffect(() => { + fetch('https://assets.antv.antgroup.com/g6/flow-analysis.json') + .then((res) => res.json()) + .then(setData); + }, []); + + const options: FlowDirectionGraphOptions = { + containerStyle: { height: '400px' }, + autoFit: 'view', + data, + transforms: (transforms) => [ + ...transforms, + { + type: 'map-edge-line-width', + key: 'map-edge-line-width', + value: (d) => Math.random(), + minValue: 0, + maxValue: 1, + minLineWidth: 1, + maxLineWidth: 24, + }, + ], + layout: { + type: 'antv-dagre', + nodesep: 10, + ranksep: 60, + }, + animation: false + }; + + return ; +}; diff --git a/site/docs/options/graphs/demos/flow-graph/custom-node.tsx b/site/docs/options/graphs/demos/flow-graph/custom-node.tsx new file mode 100644 index 000000000..f6b973fb0 --- /dev/null +++ b/site/docs/options/graphs/demos/flow-graph/custom-node.tsx @@ -0,0 +1,50 @@ +import { type FlowDirectionGraphOptions, FlowGraph } from '@ant-design/graphs'; +import React, { useEffect, useState } from 'react'; + +const CustomNode = ({ text }: { text: string }) => { + return
{text}
+} + +export default () => { + const [data, setData] = useState(undefined); + + useEffect(() => { + fetch('https://assets.antv.antgroup.com/g6/flow-analysis.json') + .then((res) => res.json()) + .then(setData); + }, []); + + const options: FlowDirectionGraphOptions = { + containerStyle: { height: '360px' }, + autoFit: 'view', + padding: [20, 0, 0, 60], + data, + node: { + style: { + component: (d) => , + size: [120, 40], + }, + }, + edge: { + style: { stroke: '#873bf4' }, + }, + layout: { + type: 'dagre', + rankSep: 100, + nodeSep: 20 + }, + animation: false + }; + + return ; +}; diff --git a/site/docs/options/graphs/demos/flow-graph/default.tsx b/site/docs/options/graphs/demos/flow-graph/default.tsx new file mode 100644 index 000000000..dc3ef1873 --- /dev/null +++ b/site/docs/options/graphs/demos/flow-graph/default.tsx @@ -0,0 +1,22 @@ +import { FlowGraph, type FlowGraphOptions } from '@ant-design/graphs'; +import React, { useEffect, useState } from 'react'; + +export default () => { + const [data, setData] = useState(undefined); + + useEffect(() => { + fetch('https://assets.antv.antgroup.com/g6/flow-analysis.json') + .then((res) => res.json()) + .then(setData); + }, []); + + const options: FlowGraphOptions = { + containerStyle: { height: '400px' }, + autoFit: 'view', + padding: [20, 0, 0, 40], + data, + animation: false + }; + + return ; +}; diff --git a/site/docs/options/graphs/demos/flow-graph/hover-activate-chain.tsx b/site/docs/options/graphs/demos/flow-graph/hover-activate-chain.tsx new file mode 100644 index 000000000..3ceacd78b --- /dev/null +++ b/site/docs/options/graphs/demos/flow-graph/hover-activate-chain.tsx @@ -0,0 +1,54 @@ +import { type FlowDirectionGraphOptions, FlowGraph, RCNode } from '@ant-design/graphs'; +import React, { useEffect, useState } from 'react'; + +const { TextNode } = RCNode; + +export default () => { + const [data, setData] = useState(undefined); + + useEffect(() => { + fetch('https://assets.antv.antgroup.com/g6/flow-analysis.json') + .then((res) => res.json()) + .then(setData); + }, []); + + const options: FlowDirectionGraphOptions = { + containerStyle: { height: '400px' }, + autoFit: 'view', + padding: [20, 0, 0, 40], + data, + node: { + style: { + component: (d) => { + const isActive = d.states?.includes('active'); + return ; + }, + }, + }, + edge: { + state: { + active: { + stroke: '#D580FF', + halo: false + } + } + }, + behaviors: (prev) => [...prev, { + type: 'hover-activate-chain', + onHover: (e) => { + e.view.setCursor('pointer'); + }, + onHoverEnd: (e) => { + e.view.setCursor('default'); + } + }], + layout: { + type: 'dagre', + rankSep: 100, + nodeSep: 20 + }, + animation: false + }; + + return ; +}; diff --git a/site/docs/options/graphs/demos/indented-tree/collapse-expand.tsx b/site/docs/options/graphs/demos/indented-tree/collapse-expand.tsx new file mode 100644 index 000000000..3607e597f --- /dev/null +++ b/site/docs/options/graphs/demos/indented-tree/collapse-expand.tsx @@ -0,0 +1,54 @@ +import { IndentedTree, CollapseExpandIcon, type IndentedTreeOptions } from '@ant-design/graphs'; +import React from 'react'; + +const { PlusMinusIcon } = CollapseExpandIcon; + +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'], style: { collapsed: true } }, + { id: 'Models diversity', depth: 2 }, + { id: 'Methods', depth: 2 }, + { id: 'Common', depth: 2 }, + { id: 'Regression', depth: 1 }, + ], + 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' }, + ], +}; + +export default () => { + const options: IndentedTreeOptions = { + type: 'boxed', + containerStyle: { height: '240px' }, + autoFit: 'view', + data, + animation: false, + }; + + const updateCollapseExpandBehavior = (options) => { + return (transforms) => [ + ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'), + { + ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || {} as any), + ...options, + }, + ] + } + + return
+ + + , + iconOffsetY: 8, + })} /> +
; +}; diff --git a/site/docs/options/graphs/demos/indented-tree/color.tsx b/site/docs/options/graphs/demos/indented-tree/color.tsx new file mode 100644 index 000000000..6bc3ab16e --- /dev/null +++ b/site/docs/options/graphs/demos/indented-tree/color.tsx @@ -0,0 +1,43 @@ +import { IndentedTree, type IndentedTreeOptions, type G6 } 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 }, + ], + 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' }, + ], +}; + +export default () => { + const options: IndentedTreeOptions = { + containerStyle: { height: '320px' }, + type: 'boxed', + autoFit: 'view', + data, + transforms: (transforms) => [ + ...transforms.filter((transform) => (transform as any).key !== 'assign-color-by-branch'), + { + ...(transforms.find((transform) => (transform as any).key === 'assign-color-by-branch') || {} as any), + colors: ['rgb(78, 121, 167)', 'rgb(242, 142, 44)', 'rgb(225, 87, 89)'] + }, + ], + animation: false, + }; + + return <> + + ; +}; diff --git a/site/docs/options/graphs/demos/indented-tree/custom-node.tsx b/site/docs/options/graphs/demos/indented-tree/custom-node.tsx new file mode 100644 index 000000000..5140e9406 --- /dev/null +++ b/site/docs/options/graphs/demos/indented-tree/custom-node.tsx @@ -0,0 +1,56 @@ +import { IndentedTree, type IndentedTreeOptions, measureTextSize } 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 }, + ], + 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' }, + ], +}; + +const CustomNode = ({ text }: { text: string }) => { + return
{text}
+} + +export default () => { + const options: IndentedTreeOptions = { + containerStyle: { height: '320px' }, + autoFit: 'view', + padding: 20, + data, + node: { + style: { + component: (d) => , + size: (data) => measureTextSize(data.id, [24, 16]), + }, + }, + edge: { + style: { stroke: '#873bf4' }, + }, + animation: false, + }; + return ; +}; diff --git a/site/docs/options/graphs/demos/indented-tree/default.tsx b/site/docs/options/graphs/demos/indented-tree/default.tsx new file mode 100644 index 000000000..248409904 --- /dev/null +++ b/site/docs/options/graphs/demos/indented-tree/default.tsx @@ -0,0 +1,32 @@ +import { IndentedTree, type IndentedTreeOptions } 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 }, + ], + 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' }, + ], +}; + +export default () => { + const options: IndentedTreeOptions = { + containerStyle: { height: '320px' }, + autoFit: 'view', + data, + animation: false, + }; + return ; +}; diff --git a/site/docs/options/graphs/demos/indented-tree/direction.tsx b/site/docs/options/graphs/demos/indented-tree/direction.tsx new file mode 100644 index 000000000..a2e156d1a --- /dev/null +++ b/site/docs/options/graphs/demos/indented-tree/direction.tsx @@ -0,0 +1,47 @@ +import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs'; +import React, { useState } from 'react'; +import { Radio, Divider } from 'antd'; + +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 }, + ], + 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' }, + ], +}; + +export default () => { + const [direction, setDirection] = useState('right'); + + const options: IndentedTreeOptions = { + containerStyle: { height: '320px' }, + direction, + autoFit: 'view', + data, + animation: false, + }; + + return <> + setDirection(e.target.value)}> + Right + Left + Alternate + + + Preview + + + ; +}; diff --git a/site/docs/options/graphs/demos/indented-tree/type.tsx b/site/docs/options/graphs/demos/indented-tree/type.tsx new file mode 100644 index 000000000..d9926235d --- /dev/null +++ b/site/docs/options/graphs/demos/indented-tree/type.tsx @@ -0,0 +1,37 @@ +import { IndentedTree, type IndentedTreeOptions } from '@ant-design/graphs'; +import React from 'react'; +import { Flex } from 'antd'; + +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 }, + ], + 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' }, + ], +}; + +export default () => { + const options: IndentedTreeOptions = { + containerStyle: { height: '320px' }, + autoFit: 'view', + data, + animation: false, + }; + + return
+ + +
+}; diff --git a/site/docs/options/graphs/demos/mind-map/collapse-expand.tsx b/site/docs/options/graphs/demos/mind-map/collapse-expand.tsx new file mode 100644 index 000000000..2fc749f3e --- /dev/null +++ b/site/docs/options/graphs/demos/mind-map/collapse-expand.tsx @@ -0,0 +1,55 @@ +import { MindMap, CollapseExpandIcon, type MindMapOptions } from '@ant-design/graphs'; +import React from 'react'; + +const { PlusMinusIcon } = CollapseExpandIcon; + +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'], style: { collapsed: true } }, + { id: 'Models diversity', depth: 2 }, + { id: 'Methods', depth: 2 }, + { id: 'Common', depth: 2 }, + { id: 'Regression', depth: 1 }, + ], + 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' }, + ], +}; + +export default () => { + const options: MindMapOptions = { + type: 'boxed', + containerStyle: { height: '200px' }, + padding: [50, 100], + autoFit: 'view', + data, + animation: false, + }; + + const updateCollapseExpandBehavior = (options) => { + return (transforms) => [ + ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'), + { + ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || {} as any), + ...options, + }, + ] + } + + return <> + + + , + iconOffsetX: 8, + })} /> + ; +}; diff --git a/site/docs/options/graphs/demos/mind-map/color.tsx b/site/docs/options/graphs/demos/mind-map/color.tsx new file mode 100644 index 000000000..008204436 --- /dev/null +++ b/site/docs/options/graphs/demos/mind-map/color.tsx @@ -0,0 +1,43 @@ +import { MindMap, type MindMapOptions, type G6 } 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 }, + ], + 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' }, + ], +}; + +export default () => { + const options: MindMapOptions = { + containerStyle: { height: '200px' }, + type: 'boxed', + autoFit: 'view', + data, + transforms: (transforms) => [ + ...transforms.filter((transform) => (transform as any).key !== 'assign-color-by-branch'), + { + ...(transforms.find((transform) => (transform as any).key === 'assign-color-by-branch') || {} as any), + colors: ['rgb(78, 121, 167)', 'rgb(242, 142, 44)', 'rgb(225, 87, 89)'] + }, + ], + animation: false, + }; + + return <> + + ; +}; diff --git a/site/docs/options/graphs/demos/mind-map/custom-node.tsx b/site/docs/options/graphs/demos/mind-map/custom-node.tsx new file mode 100644 index 000000000..66259f33e --- /dev/null +++ b/site/docs/options/graphs/demos/mind-map/custom-node.tsx @@ -0,0 +1,56 @@ +import { MindMap, type MindMapOptions, measureTextSize } 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 }, + ], + 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' }, + ], +}; + +const CustomNode = ({ text }: { text: string }) => { + return
{text}
+} + +export default () => { + const options: MindMapOptions = { + containerStyle: { height: '200px' }, + autoFit: 'view', + padding: 20, + data, + node: { + style: { + component: (d) => , + size: (data) => measureTextSize(data.id, [24, 16]), + }, + }, + edge: { + style: { stroke: '#873bf4' }, + }, + animation: false, + }; + return ; +}; diff --git a/site/docs/options/graphs/demos/mind-map/default.tsx b/site/docs/options/graphs/demos/mind-map/default.tsx new file mode 100644 index 000000000..1a937cb43 --- /dev/null +++ b/site/docs/options/graphs/demos/mind-map/default.tsx @@ -0,0 +1,32 @@ +import { MindMap, type MindMapOptions } 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 }, + ], + 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' }, + ], +}; + +export default () => { + const options: MindMapOptions = { + containerStyle: { height: '200px' }, + autoFit: 'view', + data, + animation: false, + }; + return ; +}; diff --git a/site/docs/options/graphs/demos/mind-map/direction.tsx b/site/docs/options/graphs/demos/mind-map/direction.tsx new file mode 100644 index 000000000..c4dde9d44 --- /dev/null +++ b/site/docs/options/graphs/demos/mind-map/direction.tsx @@ -0,0 +1,46 @@ +import { MindMap, type MindMapOptions } from '@ant-design/graphs'; +import React, { useState } from 'react'; +import { Radio, Divider } from 'antd'; + +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 }, + ], + 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' }, + ], +}; + +export default () => { + const [direction, setDirection] = useState('right'); + + const options: MindMapOptions = { + containerStyle: { height: '200px' }, + direction, + autoFit: 'view', + data, + animation: false, + }; + return <> + setDirection(e.target.value)}> + Right + Left + Alternate + + + Preview + + + ; +}; diff --git a/site/docs/options/graphs/demos/mind-map/type.tsx b/site/docs/options/graphs/demos/mind-map/type.tsx new file mode 100644 index 000000000..df9adbd34 --- /dev/null +++ b/site/docs/options/graphs/demos/mind-map/type.tsx @@ -0,0 +1,36 @@ +import { MindMap, type MindMapOptions } 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 }, + ], + 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' }, + ], +}; + +export default () => { + const options: MindMapOptions = { + containerStyle: { height: '200px' }, + autoFit: 'view', + data, + animation: false, + }; + + return <> + + + ; +}; diff --git a/site/docs/options/graphs/demos/network-graph/default.tsx b/site/docs/options/graphs/demos/network-graph/default.tsx new file mode 100644 index 000000000..10ded7d9e --- /dev/null +++ b/site/docs/options/graphs/demos/network-graph/default.tsx @@ -0,0 +1,26 @@ +import { NetworkGraph, type NetworkGraphOptions } from '@ant-design/graphs'; +import React, { useEffect } from 'react'; + +export default () => { + const [data, setData] = React.useState(); + + useEffect(() => { + fetch('https://assets.antv.antgroup.com/g6/graph.json') + .then((res) => res.json()) + .then(setData); + }, []); + + const options: NetworkGraphOptions = { + containerStyle: { height: '400px' }, + autoFit: 'view', + data, + node: { + palette: { + field: 'group', + color: ['#D580FF', '#4292C6'], + }, + }, + animation: false, + }; + return ; +}; diff --git a/site/docs/options/graphs/demos/network-graph/label.tsx b/site/docs/options/graphs/demos/network-graph/label.tsx new file mode 100644 index 000000000..2cdb7fc5d --- /dev/null +++ b/site/docs/options/graphs/demos/network-graph/label.tsx @@ -0,0 +1,38 @@ +import { NetworkGraph, type NetworkGraphOptions } from '@ant-design/graphs'; +import React, { useEffect } from 'react'; + +export default () => { + const [data, setData] = React.useState(); + + useEffect(() => { + fetch('https://assets.antv.antgroup.com/g6/graph.json') + .then((res) => res.json()) + .then(setData); + }, []); + + const options: NetworkGraphOptions = { + containerStyle: { height: '400px' }, + autoFit: 'view', + data, + node: { + style: { + labelText: d => d.id, + labelMaxWidth: '300%', + labelWordWrap: true, + labelMaxLines: 3 + }, + state: { + active: { + labelMaxWidth: '1000%', + } + }, + palette: { + field: 'group', + color: ['#D580FF', '#4292C6'], + }, + }, + behaviors: (behaviors) => [...behaviors, 'hover-activate'], + animation: false, + }; + return ; +}; diff --git a/site/docs/options/graphs/demos/network-graph/node-importance.tsx b/site/docs/options/graphs/demos/network-graph/node-importance.tsx new file mode 100644 index 000000000..45c7dd7d3 --- /dev/null +++ b/site/docs/options/graphs/demos/network-graph/node-importance.tsx @@ -0,0 +1,33 @@ +import { NetworkGraph, type NetworkGraphOptions } from '@ant-design/graphs'; +import React, { useEffect } from 'react'; + +export default () => { + const [data, setData] = React.useState(); + + useEffect(() => { + fetch('https://assets.antv.antgroup.com/g6/graph.json') + .then((res) => res.json()) + .then(setData); + }, []); + + const options: NetworkGraphOptions = { + containerStyle: { height: '400px' }, + autoFit: 'view', + data, + node: { + palette: { + field: 'group', + color: ['#D580FF', '#4292C6'], + }, + }, + transforms: (transforms) => [...transforms, { + key: 'map-node-size', + type: 'map-node-size', + maxSize: 80, + minSize: 16, + scale: 'linear', + }], + animation: false, + }; + return ; +}; diff --git a/site/docs/options/graphs/demos/organization-chart/collapse-expand.tsx b/site/docs/options/graphs/demos/organization-chart/collapse-expand.tsx new file mode 100644 index 000000000..39616d9fc --- /dev/null +++ b/site/docs/options/graphs/demos/organization-chart/collapse-expand.tsx @@ -0,0 +1,39 @@ +import { OrganizationChart, CollapseExpandIcon } from "@ant-design/graphs"; +import type { OrganizationChartOptions } from "@ant-design/graphs"; +import React from "react"; + +const { ArrowCountIcon } = CollapseExpandIcon; + +const data = { + "nodes": [{ "id": "0", "data": { "email": "ejoplin@yoyodyne.com", "fax": "555-0101", "name": "Eric Joplin", "phone": "555-0100", "position": "Chief Executive Officer", "status": "online" } }, { "id": "1", "data": { "email": "groberts@yoyodyne.com", "fax": "555-0101", "name": "Gary Roberts", "phone": "555-0100", "position": "Chief Executive Assistant", "status": "busy" } }, { "id": "2", "data": { "email": "aburns@yoyodyne.com", "fax": "555-0103", "name": "Alex Burns", "phone": "555-0102", "position": "Senior Executive Assistant", "status": "offline" } }, { "id": "6", "data": { "email": "jjones@yoyodyne.com", "fax": "555-0119", "name": "John Jones", "phone": "555-0118", "position": "IT Manager", "status": "offline" } }, { "id": "11", "data": { "email": "wbrown@yoyodyne.com", "fax": "555-0129", "name": "Will Brown", "phone": "555-0128", "position": "Customer Support Manager", "status": "busy" } }, { "id": "16", "data": { "email": "ywang@yoyodyne.com", "fax": "555-0139", "name": "Yvonne Wang", "phone": "555-0138", "position": "Research and Development Manager", "status": "online" } }, { "id": "17", "data": { "email": "jsanchez@yoyodyne.com", "fax": "555-0141", "name": "Juan Sanchez", "phone": "555-0140", "position": "Chief Technology Officer", "status": "busy" } } + ], + "edges": [{ "source": "0", "target": "1" }, { "source": "1", "target": "2" }, { "source": "0", "target": "17" }, { "source": "17", "target": "6" }, { "source": "17", "target": "16" }, { "source": "6", "target": "11" } + ] +} + +export default () => { + const options: OrganizationChartOptions = { + autoFit: 'view', + data, + }; + + const updateCollapseExpandBehavior = (options) => { + return (transforms) => [ + ...transforms.filter((transform) => (transform as any).key !== 'collapse-expand-react-node'), + { + ...(transforms.find((transform) => (transform as any).key === 'collapse-expand-react-node') || {} as any), + ...options, + }, + ] + } + + return
+ + ; + }, + })} /> +
; +} diff --git a/site/docs/options/graphs/demos/organization-chart/custom-node.tsx b/site/docs/options/graphs/demos/organization-chart/custom-node.tsx new file mode 100644 index 000000000..e2ef020c4 --- /dev/null +++ b/site/docs/options/graphs/demos/organization-chart/custom-node.tsx @@ -0,0 +1,88 @@ +import { OrganizationChart, RCNode, type OrganizationChartOptions } from "@ant-design/graphs" +import React from "react"; + +const { OrganizationChartNode } = RCNode; + +const data = { + "nodes": [{ "id": "0", "data": { "email": "ejoplin@yoyodyne.com", "fax": "555-0101", "name": "Eric Joplin", "phone": "555-0100", "position": "Chief Executive Officer", "status": "online" } }, { "id": "1", "data": { "email": "groberts@yoyodyne.com", "fax": "555-0101", "name": "Gary Roberts", "phone": "555-0100", "position": "Chief Executive Assistant", "status": "busy" } }, { "id": "2", "data": { "email": "aburns@yoyodyne.com", "fax": "555-0103", "name": "Alex Burns", "phone": "555-0102", "position": "Senior Executive Assistant", "status": "offline" } }, { "id": "6", "data": { "email": "jjones@yoyodyne.com", "fax": "555-0119", "name": "John Jones", "phone": "555-0118", "position": "IT Manager", "status": "offline" } }, { "id": "11", "data": { "email": "wbrown@yoyodyne.com", "fax": "555-0129", "name": "Will Brown", "phone": "555-0128", "position": "Customer Support Manager", "status": "busy" } }, { "id": "16", "data": { "email": "ywang@yoyodyne.com", "fax": "555-0139", "name": "Yvonne Wang", "phone": "555-0138", "position": "Research and Development Manager", "status": "online" } }, { "id": "17", "data": { "email": "jsanchez@yoyodyne.com", "fax": "555-0141", "name": "Juan Sanchez", "phone": "555-0140", "position": "Chief Technology Officer", "status": "busy" } } + ], + "edges": [{ "source": "0", "target": "1" }, { "source": "1", "target": "2" }, { "source": "0", "target": "17" }, { "source": "17", "target": "6" }, { "source": "17", "target": "16" }, { "source": "6", "target": "11" } + ] +} + +const CustomNode = ({ text }: { text: string }) => { + return
{text}
+} + +export default () => { + const options: OrganizationChartOptions = { + containerStyle: { height: '360px' }, + direction: 'horizontal', + padding: [20, 0, 0, 80], + autoFit: 'view', + data, + node: { + style: { + component: (d) => { + const { name, position, status } = d.data || {}; + return ; + }, + size: [240, 80], + }, + }, + edge: { + style: { + radius: 16, + lineWidth: 2, + endArrow: true, + }, + }, + layout: { + type: 'antv-dagre', + nodesep: -10, + ranksep: 80, + }, + }; + + const options2: OrganizationChartOptions = { + containerStyle: { height: '300px' }, + direction: 'horizontal', + padding: [20, 0, 0, 60], + autoFit: 'view', + data, + node: { + style: { + component: (d) => , + size: [120, 40], + }, + }, + edge: { + style: { + stroke: '#873bf4', + radius: 4, + lineWidth: 2, + endArrow: true, + }, + }, + layout: { + type: 'antv-dagre', + nodesep: -10, + ranksep: 80, + }, + } + + return
+ + +
; +} diff --git a/site/docs/options/graphs/demos/organization-chart/default.tsx b/site/docs/options/graphs/demos/organization-chart/default.tsx new file mode 100644 index 000000000..942c8ba43 --- /dev/null +++ b/site/docs/options/graphs/demos/organization-chart/default.tsx @@ -0,0 +1,19 @@ +import { OrganizationChart, type OrganizationChartOptions } from "@ant-design/graphs" +import React from "react"; + +const data = { + "nodes": [{ "id": "0", "data": { "email": "ejoplin@yoyodyne.com", "fax": "555-0101", "name": "Eric Joplin", "phone": "555-0100", "position": "Chief Executive Officer", "status": "online" } }, { "id": "1", "data": { "email": "groberts@yoyodyne.com", "fax": "555-0101", "name": "Gary Roberts", "phone": "555-0100", "position": "Chief Executive Assistant", "status": "busy" } }, { "id": "2", "data": { "email": "aburns@yoyodyne.com", "fax": "555-0103", "name": "Alex Burns", "phone": "555-0102", "position": "Senior Executive Assistant", "status": "offline" } }, { "id": "6", "data": { "email": "jjones@yoyodyne.com", "fax": "555-0119", "name": "John Jones", "phone": "555-0118", "position": "IT Manager", "status": "offline" } }, { "id": "11", "data": { "email": "wbrown@yoyodyne.com", "fax": "555-0129", "name": "Will Brown", "phone": "555-0128", "position": "Customer Support Manager", "status": "busy" } }, { "id": "16", "data": { "email": "ywang@yoyodyne.com", "fax": "555-0139", "name": "Yvonne Wang", "phone": "555-0138", "position": "Research and Development Manager", "status": "online" } }, { "id": "17", "data": { "email": "jsanchez@yoyodyne.com", "fax": "555-0141", "name": "Juan Sanchez", "phone": "555-0140", "position": "Chief Technology Officer", "status": "busy" } } + ], + "edges": [{ "source": "0", "target": "1" }, { "source": "1", "target": "2" }, { "source": "0", "target": "17" }, { "source": "17", "target": "6" }, { "source": "17", "target": "16" }, { "source": "6", "target": "11" } + ] +} + +export default () => { + const options: OrganizationChartOptions = { + containerStyle: { height: '320px' }, + autoFit: 'view', + data + }; + + return ; +} diff --git a/site/docs/options/graphs/demos/organization-chart/direction.tsx b/site/docs/options/graphs/demos/organization-chart/direction.tsx new file mode 100644 index 000000000..4a4a4ced2 --- /dev/null +++ b/site/docs/options/graphs/demos/organization-chart/direction.tsx @@ -0,0 +1,32 @@ +import { OrganizationChart, type OrganizationChartOptions } from "@ant-design/graphs" +import { Divider, Radio } from "antd"; +import React, { useState } from "react"; + +const data = { + "nodes": [{ "id": "0", "data": { "email": "ejoplin@yoyodyne.com", "fax": "555-0101", "name": "Eric Joplin", "phone": "555-0100", "position": "Chief Executive Officer", "status": "online" } }, { "id": "1", "data": { "email": "groberts@yoyodyne.com", "fax": "555-0101", "name": "Gary Roberts", "phone": "555-0100", "position": "Chief Executive Assistant", "status": "busy" } }, { "id": "2", "data": { "email": "aburns@yoyodyne.com", "fax": "555-0103", "name": "Alex Burns", "phone": "555-0102", "position": "Senior Executive Assistant", "status": "offline" } }, { "id": "6", "data": { "email": "jjones@yoyodyne.com", "fax": "555-0119", "name": "John Jones", "phone": "555-0118", "position": "IT Manager", "status": "offline" } }, { "id": "11", "data": { "email": "wbrown@yoyodyne.com", "fax": "555-0129", "name": "Will Brown", "phone": "555-0128", "position": "Customer Support Manager", "status": "busy" } }, { "id": "16", "data": { "email": "ywang@yoyodyne.com", "fax": "555-0139", "name": "Yvonne Wang", "phone": "555-0138", "position": "Research and Development Manager", "status": "online" } }, { "id": "17", "data": { "email": "jsanchez@yoyodyne.com", "fax": "555-0141", "name": "Juan Sanchez", "phone": "555-0140", "position": "Chief Technology Officer", "status": "busy" } } + ], + "edges": [{ "source": "0", "target": "1" }, { "source": "1", "target": "2" }, { "source": "0", "target": "17" }, { "source": "17", "target": "6" }, { "source": "17", "target": "16" }, { "source": "6", "target": "11" } + ] +} + +export default () => { + const [direction, setDirection] = useState('vertical'); + + const options: OrganizationChartOptions = { + containerStyle: { height: '320px' }, + autoFit: 'view', + data, + direction + }; + + return <> + setDirection(e.target.value)}> + Vertical + Horizontal + + + Preview + + + ; +} diff --git a/site/docs/options/graphs/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md new file mode 100644 index 000000000..7518833f7 --- /dev/null +++ b/site/docs/options/graphs/dendrogram.zh.md @@ -0,0 +1,39 @@ +--- +title: 生态树图 +order: 3 +--- + +将事物或现象分解成树枝状结构，来系统地展示其构成关系或内在逻辑关系。 + +```js +import { Dendrogram } from '@ant-design/graphs'; +``` + +## 何时使用 + +适用于展示数据的层级关系、明确问题的重点、寻求达成目标的合理步骤。 + +## 代码演示 + +基本用法 + +排布方向 + +紧凑模式 + +展开/收起节点 + +## API + +通用配置参考：[图通用属性](./graphs/overview#图通用属性) + +### Dendrogram + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| direction | 语法糖，设置树图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'vertical'` \| `'horizontal'` \| `'radial'` | `'horizontal'` | +| compact | 是否为紧凑模式 | `boolean` | `false` | +| layout | 树图布局配置 | [DendrogramLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/flow-direction-graph.zh.md b/site/docs/options/graphs/flow-direction-graph.zh.md new file mode 100644 index 000000000..468accdbf --- /dev/null +++ b/site/docs/options/graphs/flow-direction-graph.zh.md @@ -0,0 +1,29 @@ +--- +title: 流向图 +order: 6 +--- + +用于直观展示流动路径和量值变化。 + +```js +import { FlowDirectionGraph } from '@ant-design/graphs'; +``` + +## 何时使用 + +适用于信息繁杂、需要明确逻辑关系或决策支持时，能直观、清晰地展示数据流向和关系，提升理解和决策效率。 + +## 代码演示 + +基本用法 + +## API + +通用配置参考：[图通用属性](./graphs/overview#图通用属性) + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/flow-graph.zh.md b/site/docs/options/graphs/flow-graph.zh.md new file mode 100644 index 000000000..21b840e83 --- /dev/null +++ b/site/docs/options/graphs/flow-graph.zh.md @@ -0,0 +1,37 @@ +--- +title: 流程图 +order: 5 +--- + +用于直观地表示过程或系统的步骤和决策点。 + +```js +import { FlowGraph } from '@ant-design/graphs'; +``` + +## 何时使用 + +展示了从开始到结束的整个流程。每个节点代表一个特定的步骤或决策点，边则表示步骤之间的顺序和关系。 + +- 适用于需要展示线性流程或步骤的场景 +- 规划和跟踪项目进度，明确任务的先后顺序和依赖关系 +- 构建决策树，展示不同决策点和路径的场景 + +## 代码演示 + +基本用法 + +高亮元素及其所在链路 + +自定义节点 + +## API + +通用配置参考：[图通用属性](./graphs/overview#图通用属性) + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/indented-tree.zh.md b/site/docs/options/graphs/indented-tree.zh.md new file mode 100644 index 000000000..4cbda24c3 --- /dev/null +++ b/site/docs/options/graphs/indented-tree.zh.md @@ -0,0 +1,50 @@ +--- +title: 缩进树图 +order: 2 +--- + +用于表示层次结构数据的图形结构，通过缩进来展示父子关系。 + +```js +import { IndentedTree } from '@ant-design/graphs'; +``` + +## 何时使用 + +- 文件目录结构：展示文件系统中的目录和文件层级关系。 +- 组织结构：展示公司或团队的层级结构和部门关系。 +- 导航菜单：展示网站或应用程序中的导航菜单层级。 +- 分类层次：展示分类系统中的层级关系，例如产品分类、文章分类等。 + +## 代码演示 + +基本用法 + +风格 + +子节点分布 + +自定义节点 + +展开/收起子节点 + +设置分支颜色 + +## API + +通用配置参考：[图通用属性](./graphs/overview#图通用属性) + +### IndentedTree + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| type | 语法糖，设置缩进树图的展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | +| direction | 语法糖，设置缩进树图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'right'` | +| nodeMinWidth | 缩进树图节点的最小宽度 | `number` | `0` | +| nodeMaxWidth | 缩进树图节点的最大宽度 | `number` | `300` | +| layout | 缩进树布局配置 | [IndentedLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/indented-layout) | `{ type: 'indented' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/mind-map.zh.md b/site/docs/options/graphs/mind-map.zh.md new file mode 100644 index 000000000..ad8c0d898 --- /dev/null +++ b/site/docs/options/graphs/mind-map.zh.md @@ -0,0 +1,47 @@ +--- +title: 思维导图 +order: 1 +--- + +辅助用户系统整理与表达思想的思维辅助工具。 + +```js +import { MindMap } from '@ant-design/graphs'; +``` + +## 何时使用 + +当信息繁杂或需明确逻辑关系时，将其梳理成一系列节点与分支，进而简化理解。 + +## 代码演示 + +基本用法 + +风格 + +子节点分布 + +自定义节点 + +展开/收起子节点 + +设置分支颜色 + +## API + +通用配置参考：[图通用属性](./graphs/overview#图通用属性) + +### MindMap + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| type | 语法糖，设置思维导图的展示风格。当设置 `node.component` 时以后者为准 | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | +| direction | 语法糖，设置思维导图节点的排布方向。当设置 `layout.direction` 时会以后者为准 | `'left'` \| `'right'` \| `'alternate'` | `'alternate'` | +| nodeMinWidth | 思维导图节点的最小宽度 | `number` | `0` (`default` 类型)
`120` (`boxed` 类型) | +| nodeMaxWidth | 思维导图节点的最大宽度 | `number` | `300` | +| layout | 思维导图布局配置 | [MindmapLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/network-graph.zh.md b/site/docs/options/graphs/network-graph.zh.md new file mode 100644 index 000000000..385b1aab3 --- /dev/null +++ b/site/docs/options/graphs/network-graph.zh.md @@ -0,0 +1,29 @@ +--- +title: 网络图 +order: 7 +--- + +展示一系列节点（如实体、对象或概念）以及它们之间的连接或关系。 + +## 何时使用 + +当需要展示复杂网络结构中的节点及其相互关系时，直观地揭示连接模式和数据流动。 + +## 代码演示 + +基本用法 + +节点标签 + +节点重要性 + +## API + +通用配置参考：[图通用属性](./graphs/overview#图通用属性) + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| layout | D3 Force 布局配置 | [D3ForceLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/organization-chart.zh.md b/site/docs/options/graphs/organization-chart.zh.md new file mode 100644 index 000000000..9d38b88a5 --- /dev/null +++ b/site/docs/options/graphs/organization-chart.zh.md @@ -0,0 +1,45 @@ +--- +title: 组织结构图 +order: 4 +demo: + cols: 3 +--- + +直观展示组织内部的层级结构和部门关系。 + +```js +import { OrganizationChart } from '@ant-design/graphs'; +``` + +## 何时使用 + +- 想要展示公司或团队的层级结构，明确各个职位和部门的上下级关系。 +- 展示员工的职位和部门分布。 +- 项目管理时，明确项目团队的成员和职责分工。 +- 用于股权穿透、投资上下游公司等依赖分析。 + +## 代码演示 + +基本用法 + +节点排布 + +自定义节点 + +展开/收起子节点 + +## API + +通用配置参考：[图通用属性](./graphs/overview#图通用属性) + +### OrganizationChart + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| direction | 语法糖，设置节点的排布方向。当设置 `layout.rankdir` 时会以后者为准 | `'vertical'` \| `'horizontal'` | `'vertical'` | +| layout | AntV Dagre 布局配置 | [AntVDagreLayoutOptions](https://g6-next.antv.antgroup.com/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | - | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | - | diff --git a/site/docs/options/graphs/overview.zh.md b/site/docs/options/graphs/overview.zh.md new file mode 100644 index 000000000..415970a21 --- /dev/null +++ b/site/docs/options/graphs/overview.zh.md @@ -0,0 +1,104 @@ +--- +title: 总览 +order: 0 +--- + +`@ant-design/graphs` 是基于 [G6](https://g6-next.antv.antgroup.com/manual/introduction) 精心打造的 React 组件库，旨在为开发者提供一套直接可用于业务的 “一图一做” 封装，同时保持 G6 能力同步，让关系图集成变得更加简单、高效。 + +> 该库提供的图组件会在内部维护一套默认配置，能够满足大多数常见场景的需求。用户可以通过自定义传参轻松修改这些配置，来优化渲染效果，贴合特定业务需求。然而，针对需深度定制的复杂场景，推荐使用 G6 直接开发，充分利用其底层强大的功能与灵活性。 + +## 图组件概览 + +| 应用场景 | 图组件 | 效果演示 | 示例 | +| --- | --- | --- | --- | +| 思维导图 | `MindMap` | ![mind-map](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*cce0Sa7DR3cAAAAAAAAAAAAADmJ7AQ/original) | [示例](https://ant-design-charts.antgroup.com/examples#relations-mind-map) | +| 生态树图 | `Dendrogram` | ![dendrogram](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*mvnUTaA91H0AAAAAAAAAAAAADmJ7AQ/original) | [示例](https://ant-design-charts.antgroup.com/examples#relations-dendrogram) | +| 缩进树图 | `IndentedTree` | ![indented-tree](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*JZZVT5PsWPQAAAAAAAAAAAAADmJ7AQ/original) | [示例](https://ant-design-charts.antgroup.com/examples#relations-indented-tree) | +| 组织架构图 | `OrganizationChart` | ![org-chart](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jgGCT7cMxg8AAAAAAAAAAAAADmJ7AQ/original) | [示例](https://ant-design-charts.antgroup.com/examples#relations-organization-chart) | +| 流程图 | `FlowGraph` | ![flow-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*n9JgQIGi9BQAAAAAAAAAAAAADmJ7AQ/original) | [示例](https://ant-design-charts.antgroup.com/examples#relations-flow-graph) | +| 流向图 | `FlowDirectionGraph` | ![flow-direction-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*jOEPRKWxPE0AAAAAAAAAAAAADmJ7AQ/original) | [示例](https://ant-design-charts.antgroup.com/examples#relations-flow-direction-graph) | +| 网络图 | `NetworkGraph` | ![network-graph](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*q9AkRIF8fF4AAAAAAAAAAAAADmJ7AQ/original) | [示例](https://ant-design-charts.antgroup.com/examples#relations-network-graph) | + +## 图通用属性 + +通用配置参考：[通用属性](./general-properties.zh.md) + +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| autoFit | 是否自动适应 | `{ type: 'view'; options?: `[`FitViewOptions`](https://g6-next.antv.antgroup.com/api/reference/g6/fitviewoptions)`; animation?:` [`ViewportAnimationEffectTiming`](https://g6-next.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming)`; }`
\| `{ type: 'center'; animation?: ViewportAnimationEffectTiming; }`
\| `'view'` \| `'center'` | - | +| animation | 启用或关闭全局动画，为动画配置项时，会启用动画，并将该动画配置作为全局动画的基础配置 | `boolean` \| [`AnimationEffectTiming`](https://g6-next.antv.antgroup.com/api/reference/g6/viewportanimationeffecttiming) | - | +| autoResize | 是否自动调整画布大小 | `boolean` | `false` | +| background | 画布背景色 | `string` | - | +| combo | Combo，支持 G6 内置 Combo，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/elements/combos/base-combo) | [`ComboOptions`](https://g6-next.antv.antgroup.com/api/reference/g6/combooptions) | - | +| container | 画布容器 | `string` \| `HTMLElement` \| `Canvas` | - | +| cursor | 指针样式 | `Cursor` | - | +| data | 数据 | [GraphData](https://g6-next.antv.antgroup.com/api/reference/g6/graphdata) | - | +| devicePixelRatio | 设备像素比 | `number` | - | +| edge | 边，支持 G6 内置边，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/elements/edges/base-edge) | [`EdgeOptions`](https://g6-next.antv.antgroup.com/api/reference/g6/edgeoptions) | - | +| height | 画布高度 | `number` | - | +| layout | 布局，支持 G6 内置布局，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/layouts/antv-dagre-layout) | `LayoutOptions` \| `LayoutOptions[]` | - | +| node | 节点，支持 G6 内置节点，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/elements/nodes/base-node)。 | [`NodeOptions`](https://g6-next.antv.antgroup.com/api/reference/g6/nodeoptions) | - | +| padding | 画布内边距，通常在自适应时，会根据内边距进行适配 | `number` \| `number[]` | - | +| renderer | 获取渲染器 | `(layer: 'background' \| 'main' \| 'label' \| 'transient') => IRenderer` | - | +| rotation | 旋转角度 | `number` | `0` | +| theme | 主题 | `'light'` \| `'dark'` \| `string` | - | +| width | 画布宽度 | `number` | - | +| x | 视口 x 坐标 | `number` | - | +| y | 视口 y 坐标 | `number` | - | +| zoom | 缩放比例 | `number` | `1` | +| zoomRange | 缩放范围 | `[number, number]` | `[0.01, 10]` | +| behaviors | 设置用户交互事件，同样支持 G6 内置交互，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/behaviors/brush-select) | `BehaviorOptions \| ((this: Graph, behaviors: BehaviorOptions) => BehaviorOptions)` | 组件中查看 | +| plugins | 设置画布插件，处理画布的渲染逻辑、额外组件渲染等，同样支持 G6 内置插件，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/plugins/background) | `PluginOptions \| ((this: Graph, plugins: PluginOptions) => PluginOptions)` | - | +| transforms | 设置数据转换，处理用户输入数据并转换为适合后续处理的内部流转数据，同样支持 G6 内置数据转换器，了解相关配置项请查阅[此处](https://g6-next.antv.antgroup.com/api/transforms/map-node-size) | `TransformOptions \| ((this: Graph, behaviors: TransformOptions) => TransformOptions)` | 组件中查看 | +| onDestroy | 当图销毁后（即 `graph.destroy()` 之后）执行回调 | `() => void` | - | +| onInit | 当图初始化完成后（即 `new Graph()` 之后）执行回调 | `(graph: Graph) => void` | - | +| onReady | 当图渲染完成后（即 `graph.render()` 之后）执行回调 | `(graph: Graph) => void` | - | + +## 自定义定制 + +为了满足多样化需求，用户可以在标准图组件基础上进行扩展，实现自定义关系图。 + +#### 更新基本配置 + +除了交互、插件、数据转换以外，其他图配置项都可以直接配置。 + +```js +import { MindMap } from '@ant-design/graphs'; + +export default () => { + const options = { + autoFit: 'view', + edge: { + style: { + lineWidth: 3, + }, + }, + }; + return ; +}; +``` + +#### 更新交互/插件/数据转换配置 + +> 详细讲解如何更新插件，该策略同样适用于交互与数据转换。 + +在进行插件配置时，需特别留意插件的添加方式。为了确保既能增添新的功能，又不影响原有预设插件的正常运行，我们引入了一种 🔔 特定的插件更新策略。 + +具体来说，就是通过一个高阶函来对现有插件列表进行扩展，而不是直接替换。该函数接受当前图表实例（`this: Graph`）及现有插件配置（`plugins: PluginOptions`）作为参数，并返回一个新的插件配置数组。 + +以下是一个具体的示例，展示了如何在思维导图中添加小地图插件： + +```js +import { MindMap } from '@ant-design/graphs'; + +export default () => { + const options = { + plugins: (existingPlugins) => [ + ...existingPlugins, // 保留原有的所有插件 + { type: 'minimap', key: 'minimap' }, // 添加小地图插件 + ], + }; + + return ; +}; +```