From 5a88e5e4ef2929049ec526fe1bf6b135169b72f4 Mon Sep 17 00:00:00 2001 From: Yuxin <55794321+yvonneyx@users.noreply.github.com> Date: Thu, 14 Nov 2024 15:02:47 +0800 Subject: [PATCH] feat: add fishbone diagram (#2773) * chore: update deps * chore: merge * chore: merge * refactor: update graph style * feat: fishbone diagram * docs: add fishbone site --- .gitignore | 2 +- package.json | 16 +- packages/charts/package.json | 8 +- packages/graphs/package.json | 16 +- .../graphs/src/components/fishbone/index.tsx | 28 + .../src/components/fishbone/options.tsx | 89 + .../graphs/src/components/fishbone/types.ts | 12 + .../src/components/indented-tree/index.tsx | 18 +- .../src/components/indented-tree/options.tsx | 14 +- packages/graphs/src/components/index.ts | 1 + .../src/components/mind-map/options.tsx | 12 +- .../graphs/src/core/base/node/text-node.tsx | 2 +- packages/graphs/src/core/constants/options.ts | 1 + packages/graphs/src/core/utils/tree.ts | 14 +- packages/graphs/src/index.ts | 2 + .../graphs/tests/demos/fishbone-default.tsx | 63 + .../demos/flow-graph-task-scheduling.tsx | 6 - .../tests/demos/indented-tree-boxed.tsx | 1 + .../tests/demos/indented-tree-default.tsx | 8 +- .../tests/demos/indented-tree-linear.tsx | 1 + packages/graphs/tests/demos/index.tsx | 1 + .../graphs/tests/demos/mind-map-boxed.tsx | 1 + .../graphs/tests/demos/mind-map-default.tsx | 1 + .../graphs/tests/demos/mind-map-linear.tsx | 1 + .../tests/demos/user-flow-direction-graph.tsx | 2 +- packages/graphs/tests/main.tsx | 2 +- packages/graphs/vite.config.ts | 4 +- packages/plots/package.json | 18 +- packages/util/package.json | 10 +- pnpm-lock.yaml | 30119 +++++++--------- .../graphs/demos/fishbone/decision.tsx | 58 + .../options/graphs/demos/fishbone/default.tsx | 64 + .../options/graphs/demos/fishbone/layout.tsx | 70 + site/docs/options/graphs/fishbone.en.md | 39 + site/docs/options/graphs/fishbone.zh.md | 39 + site/package.json | 20 +- 36 files changed, 13878 insertions(+), 16885 deletions(-) create mode 100644 packages/graphs/src/components/fishbone/index.tsx create mode 100644 packages/graphs/src/components/fishbone/options.tsx create mode 100644 packages/graphs/src/components/fishbone/types.ts create mode 100644 packages/graphs/tests/demos/fishbone-default.tsx create mode 100644 site/docs/options/graphs/demos/fishbone/decision.tsx create mode 100644 site/docs/options/graphs/demos/fishbone/default.tsx create mode 100644 site/docs/options/graphs/demos/fishbone/layout.tsx create mode 100644 site/docs/options/graphs/fishbone.en.md create mode 100644 site/docs/options/graphs/fishbone.zh.md diff --git a/.gitignore b/.gitignore index 944d38d6a..b06fb9636 100644 --- a/.gitignore +++ b/.gitignore @@ -5,7 +5,7 @@ node_modules /npm-debug.log* /yarn-error.log /yarn.lock -# /pnpm-lock.yaml +/pnpm-lock.yaml /package-lock.json /pnpm-debug.log /**/pnpm-debug.log diff --git a/package.json b/package.json index ca0a3a479..68321f4e0 100644 --- a/package.json +++ b/package.json @@ -18,12 +18,12 @@ "release:beta": "pnpm run before:release && pnpm publish --tag beta --no-git-checks -r --filter @ant-design/*" }, "devDependencies": { - "@babel/core": "^7.25.2", + "@babel/core": "^7.26.0", "@babel/polyfill": "^7.12.1", - "@babel/preset-env": "^7.25.4", - "@babel/preset-typescript": "^7.24.7", - "@changesets/cli": "^2.27.8", - "@swc/jest": "^0.2.36", + "@babel/preset-env": "^7.26.0", + "@babel/preset-typescript": "^7.26.0", + "@changesets/cli": "^2.27.9", + "@swc/jest": "^0.2.37", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react-hooks": "^7.0.2", "@types/enzyme": "^3.10.18", @@ -54,15 +54,15 @@ "npm-run-all": "^4.1.5", "prettier": "^2.8.8", "prettier-plugin-organize-imports": "^4.1.0", - "prettier-plugin-packagejson": "^2.5.2", + "prettier-plugin-packagejson": "^2.5.3", "pretty-quick": "^3.3.1", "react-dev-utils": "^12.0.1", "rimraf": "^3.0.2", "style-loader": "^3.3.4", "ts-loader": "^9.5.1", - "typescript": "^5.6.2", + "typescript": "^5.6.3", "vfile-reporter": "^7.0.5", - "webpack": "^5.94.0", + "webpack": "^5.96.1", "webpack-bundle-analyzer": "^4.10.2", "webpack-cli": "^5.1.4", "webpack-dev-server": "^5.1.0", diff --git a/packages/charts/package.json b/packages/charts/package.json index 1eadbb4a3..0b9470daa 100644 --- a/packages/charts/package.json +++ b/packages/charts/package.json @@ -31,9 +31,11 @@ "prepublishOnly": "pnpm run build" }, "dependencies": { - "@ant-design/graphs": "^2.0.0", - "@ant-design/plots": "^2.1.3", - "lodash": "^4.17.21" + "@ant-design/graphs": "workspace:^", + "@ant-design/plots": "workspace:^", + "lodash": "^4.17.21", + "react": "^18.3.1", + "react-dom": "^18.3.1" }, "peerDependencies": { "react": ">=16.8.4", diff --git a/packages/graphs/package.json b/packages/graphs/package.json index c7e61edb3..e13c63775 100644 --- a/packages/graphs/package.json +++ b/packages/graphs/package.json @@ -49,20 +49,22 @@ }, "dependencies": { "@ant-design/charts-util": "workspace:*", - "@antv/g6": "^5.0.24", + "@antv/g6": "^5.0.30", "@antv/g6-extension-react": "^0.1.7", - "@antv/graphin": "^3.0.2", + "@antv/graphin": "^3.0.4", "lodash": "^4.17.21", + "react": "^18.3.1", + "react-dom": "^18.3.1", "styled-components": "^6.1.13" }, "devDependencies": { "@antv/algorithm": "^0.1.26", - "@types/jest": "^26.0.0", - "@types/lodash": "^4.17.7", - "antd": "^5.20.5", - "react-router-dom": "^6.26.1", + "@types/jest": "^26.0.24", + "@types/lodash": "^4.17.13", + "antd": "^5.22.0", + "react-router-dom": "^6.28.0", "tsconfig-paths-webpack-plugin": "^4.1.0", - "vite": "^5.4.3" + "vite": "^5.4.11" }, "peerDependencies": { "react": ">=16.8.4", diff --git a/packages/graphs/src/components/fishbone/index.tsx b/packages/graphs/src/components/fishbone/index.tsx new file mode 100644 index 000000000..69ba8b716 --- /dev/null +++ b/packages/graphs/src/components/fishbone/index.tsx @@ -0,0 +1,28 @@ +import type { Graph } from '@antv/g6'; +import React, { + ForwardRefExoticComponent, + PropsWithChildren, + PropsWithoutRef, + RefAttributes, + forwardRef, + useMemo, +} from 'react'; +import { BaseGraph } from '../../core/base-graph'; +import { COMMON_OPTIONS } from '../../core/constants'; +import { mergeOptions } from '../../core/utils/options'; +import { DEFAULT_OPTIONS, getFishboneOptions } from './options'; +import type { FishboneOptions } from './types'; + +export const Fishbone: ForwardRefExoticComponent> & RefAttributes> = forwardRef>(({ children, ...props }, ref) => { + const { type = 'cause', ...restProps } = props; + + const options = useMemo(() => mergeOptions(COMMON_OPTIONS, DEFAULT_OPTIONS, getFishboneOptions({ type }), restProps), [props]); + + return ( + + {children} + + ); +}) + +export type { FishboneOptions }; diff --git a/packages/graphs/src/components/fishbone/options.tsx b/packages/graphs/src/components/fishbone/options.tsx new file mode 100644 index 000000000..b40bdd28e --- /dev/null +++ b/packages/graphs/src/components/fishbone/options.tsx @@ -0,0 +1,89 @@ +import type { ID, NodeData, SingleLayoutOptions, Size } from '@antv/g6'; +import type { FishboneOptions } from "./types"; +import { measureTextSize } from '../../core/utils/measure-text'; + +export const DEFAULT_OPTIONS: FishboneOptions = { + node: { + style: { + size: 10, + labelText: d => d.id, + labelPlacement: 'center', + } + }, + edge: { + type: 'polyline', + }, + layout: { + type: 'fishbone', + hGap: 40, + vGap: 60, + }, + animation: false, +}; + +const FONT_FAMILY = 'system-ui, sans-serif'; + +const getNodeSize = (id: ID, depth: number): Size => { + if (depth === 0) return measureTextSize(id, [80, 48], { fontSize: 24, fontWeight: 600, fontFamily: FONT_FAMILY }); + if (depth === 1) return measureTextSize(id, [80, 30], { fontSize: 18, fontFamily: FONT_FAMILY }); + return [2, 30]; +}; + +const getNodeFill = (node: NodeData): string => { + const depth = node.depth as number; + if (depth === 0) return '#EFF0F0'; + if (depth === 1) return (node.style?.color as string) || '#EFF0F0'; + return 'transparent'; +} + +export function getFishboneOptions({ type }: Pick): FishboneOptions { + const options: FishboneOptions = { + node: { + type: 'rect', + style: { + fill: d => getNodeFill(d), + labelFill: d => d.depth === 1 ? '#fff' : '#262626', + labelFillOpacity: 1, + labelFontSize: d => d.depth === 0 ? 24 : d.depth === 1 ? 18 : 16, + labelFontWeight: d => d.depth === 0 ? 600 : 400, + labelLineHeight: d => d.depth === 0 ? 26 : d.depth === 1 ? 20 : 18, + labelText: d => d.id, + radius: 8, + size: d => getNodeSize(d.id, d.depth!), + } + }, + edge: { + type: 'polyline', + style: { + lineWidth: 3, + stroke: function (data) { + return (this.getNodeData(data.target).style!.color as string) || '#99ADD1'; + }, + }, + }, + transforms: (prev) => [ + ...prev, + { + type: 'assign-color-by-branch', + key: 'assign-color-by-branch', + }, + { + type: 'arrange-edge-z-index', + key: 'arrange-edge-z-index', + }, + ] + }; + + options.layout ||= {} as SingleLayoutOptions; + if (type === 'decision') { + // @ts-ignore + options.node.style.labelPlacement = d => d.depth === 0 || d.depth === 1 ? 'center' : 'right'; + Object.assign(options.layout!, { direction: 'LR' }) + } else if (type === 'cause') { + // @ts-ignore + options.node.style.labelPlacement = d => d.depth === 0 || d.depth === 1 ? 'center' : 'left'; + Object.assign(options.layout!, { direction: 'RL' }) + } + + return options; +} diff --git a/packages/graphs/src/components/fishbone/types.ts b/packages/graphs/src/components/fishbone/types.ts new file mode 100644 index 000000000..7670f4840 --- /dev/null +++ b/packages/graphs/src/components/fishbone/types.ts @@ -0,0 +1,12 @@ +import { GraphOptions } from "../../types"; +import type { NodeData } from '@antv/g6'; + +export interface FishboneOptions extends GraphOptions { + /** + * The type of the fishbone diagram. + * - `'decision'`: direction from left to right. + * - `'cause'`: direction from right to left. + * @default 'cause' + */ + type?: 'decision' | 'cause'; +} diff --git a/packages/graphs/src/components/indented-tree/index.tsx b/packages/graphs/src/components/indented-tree/index.tsx index d9e6ad937..e0cf2a827 100644 --- a/packages/graphs/src/components/indented-tree/index.tsx +++ b/packages/graphs/src/components/indented-tree/index.tsx @@ -16,16 +16,14 @@ import type { IndentedTreeOptions } from './types'; export const IndentedTree: ForwardRefExoticComponent< PropsWithoutRef> & RefAttributes > = forwardRef>(({ children, ...props }, ref) => { - const options = useMemo(() => { - const { type = 'default', nodeMinWidth, nodeMaxWidth, direction = 'right', ...restProps } = props; - const options = mergeOptions( - COMMON_OPTIONS, - DEFAULT_OPTIONS, - getIndentedTreeOptions({ type, nodeMinWidth, nodeMaxWidth, direction }), - restProps, - ); - return options; - }, [props]); + const { type = 'default', nodeMinWidth, nodeMaxWidth, direction = 'right', ...restProps } = props; + + const options = useMemo(() => mergeOptions( + COMMON_OPTIONS, + DEFAULT_OPTIONS, + getIndentedTreeOptions({ type, nodeMinWidth, nodeMaxWidth, direction }), + restProps, + ), [props]); return ( diff --git a/packages/graphs/src/components/indented-tree/options.tsx b/packages/graphs/src/components/indented-tree/options.tsx index da2ad5d65..6bc4fc423 100644 --- a/packages/graphs/src/components/indented-tree/options.tsx +++ b/packages/graphs/src/components/indented-tree/options.tsx @@ -29,7 +29,7 @@ export const DEFAULT_OPTIONS: IndentedTreeOptions = { edge: { type: 'indented', style: { - lineWidth: 2, + lineWidth: 3, }, }, transforms: (prev) => [ @@ -152,9 +152,9 @@ export const getIndentedTreeOptions = ({ depth === 0 ? { type: 'filled', color: '#f1f4f5', style: { color: '#252525' } } : { - type: 'underlined', - style: { textAlign: getNodeTextAlign(this as unknown as Graph, data) }, - }, + type: 'underlined', + style: { textAlign: getNodeTextAlign(this as unknown as Graph, data) }, + }, ); return ; }, @@ -165,8 +165,8 @@ export const getIndentedTreeOptions = ({ return side === 'left' ? [{ placement: 'bottom' }, { placement: 'bottom-right' }] : side === 'center' - ? [{ placement: 'bottom' }] - : [{ placement: 'bottom' }, { placement: 'bottom-left' }]; + ? [{ placement: 'bottom' }] + : [{ placement: 'bottom' }, { placement: 'bottom-left' }]; }, }, }, @@ -175,7 +175,7 @@ export const getIndentedTreeOptions = ({ stroke: function (data) { return (this.getNodeData(data.target).style!.color as string) || '#99ADD1'; }, - radius: 16, + radius: 24, }, }, layout: { diff --git a/packages/graphs/src/components/index.ts b/packages/graphs/src/components/index.ts index 113476172..389a08416 100644 --- a/packages/graphs/src/components/index.ts +++ b/packages/graphs/src/components/index.ts @@ -5,3 +5,4 @@ export { IndentedTree, type IndentedTreeOptions } from './indented-tree'; export { MindMap, type MindMapOptions } from './mind-map'; export { NetworkGraph, type NetworkGraphOptions } from './network-graph'; export { OrganizationChart, type OrganizationChartOptions } from './organization-chart'; +export { Fishbone, type FishboneOptions } from './fishbone'; diff --git a/packages/graphs/src/components/mind-map/options.tsx b/packages/graphs/src/components/mind-map/options.tsx index 01c5a49af..6959e11fb 100644 --- a/packages/graphs/src/components/mind-map/options.tsx +++ b/packages/graphs/src/components/mind-map/options.tsx @@ -36,7 +36,7 @@ export const DEFAULT_OPTIONS: MindMapOptions = { edge: { type: 'cubic-horizontal', style: { - lineWidth: 2, + lineWidth: 3, }, }, transforms: (prev) => [ @@ -103,8 +103,8 @@ export function getMindMapOptions({ depth === 0 ? { type: 'filled', color: '#f1f4f5', style: { color: '#252525' } } : depth === 1 - ? { type: 'filled' } - : { type: 'outlined' }, + ? { type: 'filled' } + : { type: 'outlined' }, ); return ; }, @@ -157,9 +157,9 @@ export function getMindMapOptions({ depth === 0 ? { type: 'filled', color: '#f1f4f5', style: { color: '#252525' } } : { - type: 'underlined', - style: side === 'left' ? { textAlign: 'right' } : side === 'center' ? { textAlign: 'center' } : {}, - }, + type: 'underlined', + style: side === 'left' ? { textAlign: 'right' } : side === 'center' ? { textAlign: 'center' } : {}, + }, ); return ; }, diff --git a/packages/graphs/src/core/base/node/text-node.tsx b/packages/graphs/src/core/base/node/text-node.tsx index bee6ad85e..3f7be30a7 100644 --- a/packages/graphs/src/core/base/node/text-node.tsx +++ b/packages/graphs/src/core/base/node/text-node.tsx @@ -119,7 +119,7 @@ export const TextNode: FC = (props) => { text = '', font, color = '#1783ff', - borderWidth = 2, + borderWidth = 3, maxWidth = Infinity, isActive = false, isSelected = false, diff --git a/packages/graphs/src/core/constants/options.ts b/packages/graphs/src/core/constants/options.ts index 930bfb596..fc8fd2239 100644 --- a/packages/graphs/src/core/constants/options.ts +++ b/packages/graphs/src/core/constants/options.ts @@ -1,6 +1,7 @@ import type { GraphOptions } from '../../types'; export const COMMON_OPTIONS: GraphOptions = { + autoResize: true, behaviors: [ { key: 'zoom-canvas', diff --git a/packages/graphs/src/core/utils/tree.ts b/packages/graphs/src/core/utils/tree.ts index ae21e9e08..00975769c 100644 --- a/packages/graphs/src/core/utils/tree.ts +++ b/packages/graphs/src/core/utils/tree.ts @@ -4,11 +4,10 @@ import { measureTextSize } from './measure-text'; export const getLinearTextNodeStyle = memoize( (text: string, minWidth: number, maxWidth: number, depth: number = 0) => { const font = { - fontWeight: 'bold', - fontSize: depth === 0 ? 20 : 16, - fontFamily: 'PingFang SC', + fontWeight: depth === 0 ? 600 : 400, + fontSize: depth === 0 ? 24 : 16, }; - const offset = depth === 0 ? [24, 36] : [12, 12]; + const offset = depth === 0 ? [64, 30] : [12, 12]; const size = measureTextSize(text, offset, font, minWidth, maxWidth); return { font, size }; }, @@ -17,11 +16,10 @@ export const getLinearTextNodeStyle = memoize( export const getBoxedTextNodeStyle = memoize( (text: string, minWidth: number, maxWidth: number, depth: number = 0) => { const font = { - fontWeight: 'bold', - fontSize: depth === 0 ? 20 : depth === 1 ? 18 : 16, - fontFamily: 'PingFang SC', + fontWeight: depth === 0 || depth === 1 ? 600 : 400, + fontSize: depth === 0 ? 24 : 16, }; - const offset = depth === 0 ? [24, 36] : [12, 24]; + const offset = depth === 0 ? [64, 30] : [36, 24]; const size = measureTextSize(text, offset, font, minWidth, maxWidth); return { font, size }; }, diff --git a/packages/graphs/src/index.ts b/packages/graphs/src/index.ts index 4b9e203c8..3ee89f462 100644 --- a/packages/graphs/src/index.ts +++ b/packages/graphs/src/index.ts @@ -9,6 +9,7 @@ export { MindMap, NetworkGraph, OrganizationChart, + Fishbone, } from './components'; export type { DendrogramOptions, @@ -18,6 +19,7 @@ export type { MindMapOptions, NetworkGraphOptions, OrganizationChartOptions, + FishboneOptions } from './components'; export { CollapseExpandIcon, RCNode } from './core/base'; export type { OrganizationChartNodeProps, TextNodeProps } from './core/base/node'; diff --git a/packages/graphs/tests/demos/fishbone-default.tsx b/packages/graphs/tests/demos/fishbone-default.tsx new file mode 100644 index 000000000..f5eaa834e --- /dev/null +++ b/packages/graphs/tests/demos/fishbone-default.tsx @@ -0,0 +1,63 @@ +import { Fishbone, FishboneOptions } from "@ant-design/graphs"; +import { treeToGraphData } from "@antv/g6"; +import React from "react"; + + +const data = { + id: 'Product Profitability Below Expectations', + children: [ + { + id: 'Problem Description', + children: [ + { id: 'Brand Sales Volume' }, + { id: 'Market Capacity' }, + { id: 'Brand Market Share' }, + { id: 'Total Contribution Margin' }, + ], + }, + { + id: 'Brand Positioning', + children: [{ id: 'Packaging' }, { id: 'Brand Name' }, { id: 'Selling Price' }, { id: 'Product Specifications' }], + }, + { + id: 'Distribution Channels', + children: [{ id: 'Region' }, { id: 'Channel' }, { id: 'Customer Type' }, { id: 'Sales Personnel Coverage' }], + }, + { + id: 'Market Awareness', + children: [ + { id: 'Regional Weighting' }, + { id: 'Media Mix' }, + { id: 'Advertising Investment' }, + { id: 'Quality Perception' }, + ], + }, + { + id: 'Trial Purchase', + children: [ + { id: 'In-store Display' }, + { id: 'Promotion Type' }, + { id: 'Timing of Promotion' }, + { id: 'Supply Assurance' }, + ], + }, + { + id: 'Repeat Purchase', + children: [ + { id: 'Consumer Profile' }, + { id: 'Usage Occasion' }, + { id: 'Frequency of Use' }, + { id: 'Returns Due to Product Issues' }, + ], + }, + ], +}; + +export const FishboneDefault = () => { + const options: FishboneOptions = { + autoFit: 'view', + data: treeToGraphData(data), + type: 'decision' + } + return +} diff --git a/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx b/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx index 3b79afb00..b83f3f9ef 100644 --- a/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx +++ b/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx @@ -142,12 +142,6 @@ export const FlowGraphTaskScheduling = () => { }, }, }, - layout: { - type: 'dagre', - nodeSize: [194, 58], - nodesep: 40, - ranksep: 80, - }, behaviors: (prev) => [...prev, 'hover-activate-chain'], }; diff --git a/packages/graphs/tests/demos/indented-tree-boxed.tsx b/packages/graphs/tests/demos/indented-tree-boxed.tsx index a10226007..9b322cfd3 100644 --- a/packages/graphs/tests/demos/indented-tree-boxed.tsx +++ b/packages/graphs/tests/demos/indented-tree-boxed.tsx @@ -7,6 +7,7 @@ const { treeToGraphData } = G6; export const IndentedTreeBoxed = () => { const options: IndentedTreeOptions = { + autoFit: 'view', type: 'boxed', data: treeToGraphData(data), }; diff --git a/packages/graphs/tests/demos/indented-tree-default.tsx b/packages/graphs/tests/demos/indented-tree-default.tsx index 3ca568508..378d93f26 100644 --- a/packages/graphs/tests/demos/indented-tree-default.tsx +++ b/packages/graphs/tests/demos/indented-tree-default.tsx @@ -7,15 +7,9 @@ const { treeToGraphData } = G6; export const IndentedTree = () => { const options: IndentedTreeOptions = { + autoFit: 'view', type: 'default', 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/indented-tree-linear.tsx b/packages/graphs/tests/demos/indented-tree-linear.tsx index 866268c03..a375db90f 100644 --- a/packages/graphs/tests/demos/indented-tree-linear.tsx +++ b/packages/graphs/tests/demos/indented-tree-linear.tsx @@ -7,6 +7,7 @@ const { treeToGraphData } = G6; export const IndentedTreeLinear = () => { const options: IndentedTreeOptions = { + autoFit: 'view', type: 'linear', data: treeToGraphData(data), }; diff --git a/packages/graphs/tests/demos/index.tsx b/packages/graphs/tests/demos/index.tsx index 5c5a41769..ea1dae603 100644 --- a/packages/graphs/tests/demos/index.tsx +++ b/packages/graphs/tests/demos/index.tsx @@ -13,3 +13,4 @@ export { NetworkGraph } from './network-graph'; export { OrganizationChart } from './organization-chart'; export { OrganizationChart2 } from './organization-chart2'; export { UserFlowDirectionGraph } from './user-flow-direction-graph'; +export { FishboneDefault } from './fishbone-default'; diff --git a/packages/graphs/tests/demos/mind-map-boxed.tsx b/packages/graphs/tests/demos/mind-map-boxed.tsx index 38fe39b1a..cabc9a395 100644 --- a/packages/graphs/tests/demos/mind-map-boxed.tsx +++ b/packages/graphs/tests/demos/mind-map-boxed.tsx @@ -7,6 +7,7 @@ const { treeToGraphData } = G6; export const MindMapBoxed = () => { const options: MindMapOptions = { + autoFit: 'view', type: 'boxed', data: treeToGraphData(data), }; diff --git a/packages/graphs/tests/demos/mind-map-default.tsx b/packages/graphs/tests/demos/mind-map-default.tsx index b059e9dae..304126930 100644 --- a/packages/graphs/tests/demos/mind-map-default.tsx +++ b/packages/graphs/tests/demos/mind-map-default.tsx @@ -7,6 +7,7 @@ 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'), diff --git a/packages/graphs/tests/demos/mind-map-linear.tsx b/packages/graphs/tests/demos/mind-map-linear.tsx index a5b95270b..4206b87bf 100644 --- a/packages/graphs/tests/demos/mind-map-linear.tsx +++ b/packages/graphs/tests/demos/mind-map-linear.tsx @@ -7,6 +7,7 @@ const { treeToGraphData } = G6; export const MindMapLinear = () => { const options: MindMapOptions = { + autoFit: 'view', type: 'linear', data: treeToGraphData(data), }; diff --git a/packages/graphs/tests/demos/user-flow-direction-graph.tsx b/packages/graphs/tests/demos/user-flow-direction-graph.tsx index 346ce0854..6019335d8 100644 --- a/packages/graphs/tests/demos/user-flow-direction-graph.tsx +++ b/packages/graphs/tests/demos/user-flow-direction-graph.tsx @@ -57,7 +57,7 @@ export const UserFlowDirectionGraph = () => { ], layout: { type: 'antv-dagre', - nodesep: -10, + nodesep: 16, ranksep: 100, }, }; diff --git a/packages/graphs/tests/main.tsx b/packages/graphs/tests/main.tsx index a38d120be..551f16ba2 100644 --- a/packages/graphs/tests/main.tsx +++ b/packages/graphs/tests/main.tsx @@ -9,7 +9,7 @@ const App = () => { const match = useMatch('/*'); return ( - +