diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 8291f0972..35df7d3ff 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -30,6 +30,16 @@ jobs: run: pnpm install - name: test run: pnpm test + - name: Run Playwright tests + run: | + pnpm exec playwright install chromium + pnpm exec playwright test --workers=10 + - uses: actions/upload-artifact@v4 + if: ${{ !cancelled() }} + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 # - name: Coveralls # uses: coverallsapp/github-action@master # with: diff --git a/.gitignore b/.gitignore index 887c70de0..602f421bd 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,8 @@ logs # temp temp-gallery.md + +# Tools +/test-results/ +/playwright-report/ +/playwright/.cache/ diff --git a/package.json b/package.json index 68321f4e0..0cdf26542 100644 --- a/package.json +++ b/package.json @@ -4,10 +4,12 @@ "scripts": { "start": "pnpm run build:lib && pnpm -r --stream --filter=./site run start", "test": "pnpm -r --stream --filter=./packages/* run test", + "test:e2e": "pnpm exec playwright test", "lint": "pnpm -r --stream --filter=./packages/* run lint", "build": "pnpm -r --stream --filter=!./site run build", "build:site": "pnpm -r --stream --filter=./site run build", "build:lib": "pnpm -r --stream --filter=!./site run build:lib", + "dev:graphs": "cd packages/graphs && pnpm run dev", "profile": "webpack --config webpack.config.js --mode production --profile --json > stats.json", "prettier": "prettier --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"", "ci:version": "pnpm changeset version", @@ -23,6 +25,7 @@ "@babel/preset-env": "^7.26.0", "@babel/preset-typescript": "^7.26.0", "@changesets/cli": "^2.27.9", + "@playwright/test": "^1.49.1", "@swc/jest": "^0.2.37", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react-hooks": "^7.0.2", diff --git a/packages/graphs/package.json b/packages/graphs/package.json index 9f4aea716..0a0d815d8 100644 --- a/packages/graphs/package.json +++ b/packages/graphs/package.json @@ -48,7 +48,7 @@ "test": "jest" }, "dependencies": { - "@ant-design/charts-util": "workspace:*", + "@ant-design/charts-util": "0.0.1-alpha.7", "@antv/g6": "^5.0.30", "@antv/g6-extension-react": "^0.1.7", "@antv/graphin": "^3.0.4", diff --git a/packages/graphs/src/core/base/collapse-expand-icon/arrow-count-icon.tsx b/packages/graphs/src/core/base/collapse-expand-icon/arrow-count-icon.tsx index 61081c95a..fe155cf9f 100644 --- a/packages/graphs/src/core/base/collapse-expand-icon/arrow-count-icon.tsx +++ b/packages/graphs/src/core/base/collapse-expand-icon/arrow-count-icon.tsx @@ -43,7 +43,7 @@ const StyledWrapper = styled.div<{ } }} - .indented-icon-bar { + .arrow-count-icon-bar { ${({ $placement }) => { const isVertical = $placement === 'top' || $placement === 'bottom'; return isVertical ? 'width: 3px; height: 8px; margin: 0 7px;' : 'width: 8px; height: 3px; margin: 7px 0;'; @@ -51,7 +51,7 @@ const StyledWrapper = styled.div<{ background-color: ${({ $color }) => $color}; } - .indented-icon-circle { + .arrow-count-icon-circle { width: 16px; height: 16px; color: #fff; @@ -63,7 +63,7 @@ const StyledWrapper = styled.div<{ border-radius: 50%; } - .indented-icon-circle-arrow { + .arrow-count-icon-circle-arrow { width: 16px; height: 16px; transform: ${({ $isCollapsed, $placement }) => { @@ -95,13 +95,19 @@ export const ArrowCountIcon: FC = (props) => { .length; return ( - -
-
+ +
+
{isCollapsed ? ( count ) : ( -
+
{ - const nodeId = idOf(datum); + const { + add: { nodes: nodesToAdd }, + update: { nodes: nodesToUpdate }, + } = input; - const node = element!.getElement(nodeId); - if (!node) return; - - const style = graph.getElementRenderStyle(nodeId); - const { size } = style; - - model.updateNodeData([ - { - id: nodeId, - // HTML 元素的默认原点位置在左上角，而 G6 的默认原点位置在中心，所以需要调整 dx 和 dy - style: { - dx: -size[0] / 2, - dy: -size[1] / 2, - }, - }, - ]); + [...nodesToAdd.values(), ...nodesToUpdate.values()].forEach((datum) => { + // @ts-expect-error private method invoke + element!.computeElementDefaultStyle('node', { graph, datum }); + const style = element!.getDefaultStyle(datum.id); + const [width, height] = parseSize(style.size as Size); + if (!datum.style) datum.style = {}; + datum.style.dx = -width / 2; + datum.style.dy = -height / 2; }); - graph.draw(); + return input; } } diff --git a/packages/graphs/src/index.ts b/packages/graphs/src/index.ts index 7d4ad0453..2779370a8 100644 --- a/packages/graphs/src/index.ts +++ b/packages/graphs/src/index.ts @@ -25,5 +25,6 @@ export { CollapseExpandIcon, RCNode } from './core/base'; export type { OrganizationChartNodeProps, TextNodeProps } from './core/base/node'; export { measureTextSize } from './core/utils/measure-text'; export { getNodeSide } from './core/utils/node'; +export { mergeOptions } from './core/utils/options'; export type { GraphOptions } from './types'; export { G6 }; diff --git a/packages/graphs/tests/datasets/algorithm-category.json b/packages/graphs/tests/datasets/algorithm-category.json index eba800d84..a98d0fbab 100644 --- a/packages/graphs/tests/datasets/algorithm-category.json +++ b/packages/graphs/tests/datasets/algorithm-category.json @@ -43,7 +43,7 @@ "children": [ { "id": "Multiple linear regression" }, { "id": "Partial least squares" }, - { "id": "Multi-layer feed forward neural network" }, + { "id": "Multi-layer feedforward neural network" }, { "id": "General regression neural network" }, { "id": "Support vector regression" } ] diff --git a/packages/graphs/tests/demos/dendrogram.tsx b/packages/graphs/tests/demos/dendrogram.tsx index ea2eaa0ec..baf953f4d 100644 --- a/packages/graphs/tests/demos/dendrogram.tsx +++ b/packages/graphs/tests/demos/dendrogram.tsx @@ -1,25 +1,13 @@ import { Dendrogram as DendrogramComponent, DendrogramOptions } from '@ant-design/graphs'; -import { treeToGraphData } from '@antv/g6'; import React from 'react'; import data from '../datasets/algorithm-category.json'; +import { useGraphOptions } from './hooks/useQueryOptions'; export const Dendrogram = () => { - const options: DendrogramOptions = { + const options = useGraphOptions({ autoFit: 'view', - data: treeToGraphData(data), - direction: 'vertical', - compact: true, - behaviors: (prev) => [ - ...prev, - { - key: 'hover-activate', - type: 'hover-activate', - degree: Infinity, - direction: 'in', - inactiveState: 'inactive', - }, - ], - }; + data, + }); return ; }; diff --git a/packages/graphs/tests/demos/fishbone-default.tsx b/packages/graphs/tests/demos/fishbone.tsx similarity index 82% rename from packages/graphs/tests/demos/fishbone-default.tsx rename to packages/graphs/tests/demos/fishbone.tsx index d160be489..e0eea9cfc 100644 --- a/packages/graphs/tests/demos/fishbone-default.tsx +++ b/packages/graphs/tests/demos/fishbone.tsx @@ -1,6 +1,6 @@ -import { Fishbone, FishboneOptions } from '@ant-design/graphs'; -import { treeToGraphData } from '@antv/g6'; +import { Fishbone as ADCFishbone } from '@ant-design/graphs'; import React from 'react'; +import { useGraphOptions } from './hooks/useQueryOptions'; const data = { id: 'Product Profitability Below Expectations', @@ -52,11 +52,11 @@ const data = { ], }; -export const FishboneDefault = () => { - const options: FishboneOptions = { +export const Fishbone = () => { + const options = useGraphOptions({ autoFit: 'view', - data: treeToGraphData(data), - type: 'decision', - }; - return ; + data + }); + + return ; }; diff --git a/packages/graphs/tests/demos/flow-graph-product-launch.tsx b/packages/graphs/tests/demos/flow-graph-product-launch.tsx index 95c483e87..0c100a41e 100644 --- a/packages/graphs/tests/demos/flow-graph-product-launch.tsx +++ b/packages/graphs/tests/demos/flow-graph-product-launch.tsx @@ -3,6 +3,7 @@ import { isBoolean } from 'lodash'; import React, { FC } from 'react'; import styled from 'styled-components'; import data from '../datasets/product-launch.json'; +import { useGraphOptions } from './hooks/useQueryOptions'; interface StepData { name: string; @@ -152,7 +153,7 @@ function isSingleStep(data: NodeData) { } export const FlowGraphProductLaunch = () => { - const options: FlowGraphOptions = { + const options = useGraphOptions({ autoFit: 'view', data, node: { @@ -192,7 +193,7 @@ export const FlowGraphProductLaunch = () => { nodeSize: (data: NodeData) => (isSingleStep(data) ? 160 : 400), animation: false, }, - }; + }); return ; }; diff --git a/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx b/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx index ba863eeed..9f1125a87 100644 --- a/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx +++ b/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx @@ -4,6 +4,7 @@ import React from 'react'; import styled from 'styled-components'; import { hexToRgba } from '../../src/core/utils/color'; import data from '../datasets/task-scheduling.json'; +import { useGraphOptions } from './hooks/useQueryOptions'; const { Text } = Typography; @@ -115,7 +116,7 @@ const TaskNode: React.FC<{ }; export const FlowGraphTaskScheduling = () => { - const options: FlowGraphOptions = { + const options = useGraphOptions({ autoFit: 'view', data, node: { @@ -143,7 +144,7 @@ export const FlowGraphTaskScheduling = () => { }, }, behaviors: (prev) => [...prev, 'hover-activate-chain'], - }; + }); return ; }; diff --git a/packages/graphs/tests/demos/flow-graph.tsx b/packages/graphs/tests/demos/flow-graph.tsx index 3c53d7275..8b92edb2f 100644 --- a/packages/graphs/tests/demos/flow-graph.tsx +++ b/packages/graphs/tests/demos/flow-graph.tsx @@ -2,11 +2,12 @@ import { FlowGraph as FlowGraphComponent, RCNode, type FlowGraphOptions } from ' import type { NodeData } from '@antv/g6'; import React from 'react'; import data from '../datasets/task-scheduling.json'; +import { useGraphOptions } from './hooks/useQueryOptions'; const { TextNode } = RCNode; export const FlowGraph = () => { - const options: FlowGraphOptions = { + const options = useGraphOptions({ autoFit: 'view', data, node: { @@ -18,7 +19,7 @@ export const FlowGraph = () => { }, }, behaviors: (prev) => [...prev, 'hover-activate-chain'], - }; + }); return ; }; diff --git a/packages/graphs/tests/demos/hooks/useQueryOptions.ts b/packages/graphs/tests/demos/hooks/useQueryOptions.ts new file mode 100644 index 000000000..b95424dd3 --- /dev/null +++ b/packages/graphs/tests/demos/hooks/useQueryOptions.ts @@ -0,0 +1,33 @@ +import { GraphOptions, mergeOptions } from '@ant-design/graphs'; +import { useSearchParams } from 'react-router-dom'; + +export const useGraphOptions = >(options: T): T => { + const [params] = useSearchParams(); + const queryParams = Object.fromEntries(params) as any; + + Object.keys(queryParams).forEach((key) => { + if (queryParams[key] === 'true') { + queryParams[key] = true; + } + if (queryParams[key] === 'false') { + queryParams[key] = false; + } + }); + + queryParams.devicePixelRatio = 4; + + queryParams.transforms = () => { + return (transforms) => { + return [ + ...transforms.filter((transform: any) => transform.key !== 'collapse-expand-react-node'), + { + ...transforms.find((transform: any) => transform.key === 'collapse-expand-react-node'), + enable: queryParams.collapseExpand, + ...(queryParams.collapseExpandTrigger && { trigger: queryParams.collapseExpandTrigger }), + }, + ]; + }; + }; + + return mergeOptions(options, queryParams) as any; +}; diff --git a/packages/graphs/tests/demos/indented-tree-boxed.tsx b/packages/graphs/tests/demos/indented-tree-boxed.tsx deleted file mode 100644 index 9b322cfd3..000000000 --- a/packages/graphs/tests/demos/indented-tree-boxed.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { IndentedTreeOptions } from '@ant-design/graphs'; -import { G6, IndentedTree as IndentedTreeComponent } from '@ant-design/graphs'; -import React from 'react'; -import data from '../datasets/algorithm-category.json'; - -const { treeToGraphData } = G6; - -export const IndentedTreeBoxed = () => { - const options: IndentedTreeOptions = { - autoFit: 'view', - type: 'boxed', - data: treeToGraphData(data), - }; - - return ; -}; diff --git a/packages/graphs/tests/demos/indented-tree-linear.tsx b/packages/graphs/tests/demos/indented-tree-linear.tsx deleted file mode 100644 index a375db90f..000000000 --- a/packages/graphs/tests/demos/indented-tree-linear.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { IndentedTreeOptions } from '@ant-design/graphs'; -import { G6, IndentedTree as IndentedTreeComponent } from '@ant-design/graphs'; -import React from 'react'; -import data from '../datasets/algorithm-category.json'; - -const { treeToGraphData } = G6; - -export const IndentedTreeLinear = () => { - const options: IndentedTreeOptions = { - autoFit: 'view', - type: 'linear', - data: treeToGraphData(data), - }; - - return ; -}; diff --git a/packages/graphs/tests/demos/indented-tree-default.tsx b/packages/graphs/tests/demos/indented-tree.tsx similarity index 52% rename from packages/graphs/tests/demos/indented-tree-default.tsx rename to packages/graphs/tests/demos/indented-tree.tsx index 378d93f26..60cc6f72c 100644 --- a/packages/graphs/tests/demos/indented-tree-default.tsx +++ b/packages/graphs/tests/demos/indented-tree.tsx @@ -1,16 +1,15 @@ import type { IndentedTreeOptions } from '@ant-design/graphs'; -import { G6, IndentedTree as IndentedTreeComponent } from '@ant-design/graphs'; +import { IndentedTree as IndentedTreeComponent } from '@ant-design/graphs'; import React from 'react'; import data from '../datasets/algorithm-category.json'; - -const { treeToGraphData } = G6; +import { useGraphOptions } from './hooks/useQueryOptions'; export const IndentedTree = () => { - const options: IndentedTreeOptions = { + const options = useGraphOptions({ autoFit: 'view', - type: 'default', - data: treeToGraphData(data), - }; + data, + animation: false, + }); return ; }; diff --git a/packages/graphs/tests/demos/index.tsx b/packages/graphs/tests/demos/index.tsx index 87285d1e0..9b549a879 100644 --- a/packages/graphs/tests/demos/index.tsx +++ b/packages/graphs/tests/demos/index.tsx @@ -1,15 +1,11 @@ export { Dendrogram } from './dendrogram'; -export { FishboneDefault } from './fishbone-default'; +export { Fishbone } from './fishbone'; export { FlowGraph } from './flow-graph'; export { FlowGraphProductLaunch } from './flow-graph-product-launch'; export { FlowGraphTaskScheduling } from './flow-graph-task-scheduling'; -export { IndentedTreeBoxed } from './indented-tree-boxed'; -export { IndentedTree } from './indented-tree-default'; -export { IndentedTreeLinear } from './indented-tree-linear'; -export { MindMapBoxed } from './mind-map-boxed'; +export { IndentedTree } from './indented-tree'; +export { MindMap } from './mind-map'; export { MindMapCustom } from './mind-map-custom'; -export { MindMap } from './mind-map-default'; -export { MindMapLinear } from './mind-map-linear'; export { NetworkGraph } from './network-graph'; export { OrganizationChart } from './organization-chart'; export { OrganizationChart2 } from './organization-chart2'; diff --git a/packages/graphs/tests/demos/mind-map-boxed.tsx b/packages/graphs/tests/demos/mind-map-boxed.tsx deleted file mode 100644 index cabc9a395..000000000 --- a/packages/graphs/tests/demos/mind-map-boxed.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import type { MindMapOptions } from '@ant-design/graphs'; -import { G6, MindMap as MindMapComponent } from '@ant-design/graphs'; -import React from 'react'; -import data from '../datasets/algorithm-category.json'; - -const { treeToGraphData } = G6; - -export const MindMapBoxed = () => { - const options: MindMapOptions = { - autoFit: 'view', - type: 'boxed', - data: treeToGraphData(data), - }; - - return ; -}; diff --git a/packages/graphs/tests/demos/mind-map-custom.tsx b/packages/graphs/tests/demos/mind-map-custom.tsx index 9d5826db8..e176021ff 100644 --- a/packages/graphs/tests/demos/mind-map-custom.tsx +++ b/packages/graphs/tests/demos/mind-map-custom.tsx @@ -1,28 +1,29 @@ import type { MindMapOptions } from '@ant-design/graphs'; -import { G6, getNodeSide, measureTextSize, MindMap as MindMapComponent, RCNode } from '@ant-design/graphs'; +import { getNodeSide, measureTextSize, MindMap as MindMapComponent, RCNode } from '@ant-design/graphs'; import { Graph, type NodeData } from '@antv/g6'; import React from 'react'; import data from '../datasets/algorithm-category.json'; -const { treeToGraphData, idOf } = G6; const { TextNode } = RCNode; export const MindMapCustom = () => { const options: MindMapOptions = { - data: treeToGraphData(data), + autoFit: 'view', + data, node: { style: { component: (data) => { return ; }, - size: (data) => measureTextSize(idOf(data), [24, 16]), + size: (data) => measureTextSize(data.id, [24, 16]), dx: function (data: NodeData) { const side = getNodeSide(this as unknown as Graph, data); - const size = measureTextSize(idOf(data), [24, 16]); + const size = measureTextSize(data.id, [24, 16]); return side === 'left' ? -size[0] : side === 'center' ? -size[0] / 2 : 0; }, }, }, + animation: false, }; return ; diff --git a/packages/graphs/tests/demos/mind-map-default.tsx b/packages/graphs/tests/demos/mind-map-default.tsx deleted file mode 100644 index 304126930..000000000 --- a/packages/graphs/tests/demos/mind-map-default.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import type { MindMapOptions } from '@ant-design/graphs'; -import { G6, MindMap as MindMapComponent } from '@ant-design/graphs'; -import React from 'react'; -import data from '../datasets/algorithm-category.json'; - -const { treeToGraphData } = G6; - -export const MindMap = () => { - const options: MindMapOptions = { - autoFit: 'view', - data: treeToGraphData(data), - transforms: (prev) => [ - ...prev.filter((transform) => (transform as any).type !== 'collapse-expand-react-node'), - { - ...(prev.find((transform) => (transform as any).type === 'collapse-expand-react-node') as any), - enable: true, - }, - ], - }; - - return ; -}; diff --git a/packages/graphs/tests/demos/mind-map-linear.tsx b/packages/graphs/tests/demos/mind-map-linear.tsx deleted file mode 100644 index 8afd0f38b..000000000 --- a/packages/graphs/tests/demos/mind-map-linear.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import type { MindMapOptions } from '@ant-design/graphs'; -import { G6, MindMap as MindMapComponent } from '@ant-design/graphs'; -import React from 'react'; -import data from '../datasets/algorithm-category.json'; - -const { treeToGraphData } = G6; - -export const MindMapLinear = () => { - const options: MindMapOptions = { - autoFit: 'view', - type: 'linear', - data: treeToGraphData(data), - transforms: (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)), - enable: true, - }, - ], - }; - - return ; -}; diff --git a/packages/graphs/tests/demos/mind-map.tsx b/packages/graphs/tests/demos/mind-map.tsx new file mode 100644 index 000000000..ba976da73 --- /dev/null +++ b/packages/graphs/tests/demos/mind-map.tsx @@ -0,0 +1,15 @@ +import type { MindMapOptions } from '@ant-design/graphs'; +import { MindMap as MindMapComponent } from '@ant-design/graphs'; +import React from 'react'; +import data from '../datasets/algorithm-category.json'; +import { useGraphOptions } from './hooks/useQueryOptions'; + +export const MindMap = () => { + const options = useGraphOptions({ + autoFit: 'view', + data, + animation: false, + }); + + return ; +}; diff --git a/packages/graphs/tests/demos/network-graph.tsx b/packages/graphs/tests/demos/network-graph.tsx index 1dd5f07f7..aad6e2b85 100644 --- a/packages/graphs/tests/demos/network-graph.tsx +++ b/packages/graphs/tests/demos/network-graph.tsx @@ -1,11 +1,11 @@ -import type { GraphOptions } from '@ant-design/graphs'; import { NetworkGraph as NetworkGraphComponent } from '@ant-design/graphs'; import { labelPropagation } from '@antv/algorithm'; import React from 'react'; import data from '../datasets/language-tree.json'; +import { useGraphOptions } from './hooks/useQueryOptions'; export const NetworkGraph = () => { - const options: GraphOptions = { + const options = useGraphOptions({ autoFit: 'view', data: { ...data, @@ -42,7 +42,8 @@ export const NetworkGraph = () => { inactiveState: 'inactive', }, ], - }; + animation: false, + }); return ; }; diff --git a/packages/graphs/tests/demos/organization-chart.tsx b/packages/graphs/tests/demos/organization-chart.tsx index 2cc9d4e19..a5f0ea804 100644 --- a/packages/graphs/tests/demos/organization-chart.tsx +++ b/packages/graphs/tests/demos/organization-chart.tsx @@ -1,5 +1,6 @@ import { OrganizationChart as OrganizationChartComponent, type OrganizationChartOptions } from '@ant-design/graphs'; import React, { useEffect, useState } from 'react'; +import { useGraphOptions } from './hooks/useQueryOptions'; export const OrganizationChart = () => { const [data, setData] = useState(undefined); @@ -10,10 +11,11 @@ export const OrganizationChart = () => { .then(setData); }, []); - const options: OrganizationChartOptions = { + const options = useGraphOptions({ autoFit: 'view', data, - }; + transforms: [], + }); return ; }; diff --git a/packages/graphs/tests/demos/organization-chart2.tsx b/packages/graphs/tests/demos/organization-chart2.tsx index 4c7a4c8fb..f11aeeeb6 100644 --- a/packages/graphs/tests/demos/organization-chart2.tsx +++ b/packages/graphs/tests/demos/organization-chart2.tsx @@ -4,6 +4,7 @@ import { type OrganizationChartOptions, } from '@ant-design/graphs'; import React, { useEffect, useState } from 'react'; +import { useGraphOptions } from './hooks/useQueryOptions'; const { OrganizationChartNode } = RCNode; @@ -21,7 +22,7 @@ export const OrganizationChart2 = () => { }); }, []); - const options: OrganizationChartOptions = { + const options = useGraphOptions({ data, autoFit: 'view', node: { @@ -49,7 +50,7 @@ export const OrganizationChart2 = () => { enable: true, }, ], - }; + }); return ; }; diff --git a/packages/graphs/tests/demos/user-flow-direction-default.tsx b/packages/graphs/tests/demos/user-flow-direction-default.tsx index c4629c28d..fb5bc05dc 100644 --- a/packages/graphs/tests/demos/user-flow-direction-default.tsx +++ b/packages/graphs/tests/demos/user-flow-direction-default.tsx @@ -1,13 +1,13 @@ -import type { GraphOptions } from '@ant-design/graphs'; import { FlowDirectionGraph } from '@ant-design/graphs'; import React from 'react'; import data from '../datasets/user-flow.json'; +import { useGraphOptions } from './hooks/useQueryOptions'; export const UserFlowDirectionDefault = () => { - const options: GraphOptions = { + const options = useGraphOptions({ autoFit: 'view', data, - }; + }); return ; }; diff --git a/packages/graphs/tests/demos/user-flow-direction-graph.tsx b/packages/graphs/tests/demos/user-flow-direction-graph.tsx index 8ba158dde..94decd3a9 100644 --- a/packages/graphs/tests/demos/user-flow-direction-graph.tsx +++ b/packages/graphs/tests/demos/user-flow-direction-graph.tsx @@ -1,9 +1,9 @@ -import type { GraphOptions } from '@ant-design/graphs'; import { FlowDirectionGraph } from '@ant-design/graphs'; import { Flex } from 'antd'; import React from 'react'; import styled from 'styled-components'; import data from '../datasets/user-flow.json'; +import { useGraphOptions } from './hooks/useQueryOptions'; const transformData = (data) => { const REF_NODE_IDS = ['node-5', 'node-6']; @@ -21,7 +21,7 @@ const transformData = (data) => { * 用户路径分析图，展示了用户从不同来源页面进入活动页面后的转化路径 */ export const UserFlowDirectionGraph = () => { - const options: GraphOptions = { + const options = useGraphOptions({ autoFit: 'view', data: transformData(data), node: { @@ -59,7 +59,7 @@ export const UserFlowDirectionGraph = () => { nodesep: 16, ranksep: 100, }, - }; + }); return ; }; diff --git a/packages/graphs/tests/main.tsx b/packages/graphs/tests/main.tsx index 6f054450e..108e3b42c 100644 --- a/packages/graphs/tests/main.tsx +++ b/packages/graphs/tests/main.tsx @@ -7,13 +7,12 @@ import * as demos from './demos'; const App = () => { const navigate = useNavigate(); const match = useMatch('/*'); - return ( - +