refactor: adjust default values for graph options

ant-design · Dec 10, 2024 · 8b8208d · 8b8208d
1 parent d8abaac
commit 8b8208d
Show file tree

Hide file tree

Showing 14 changed files with 49 additions and 52 deletions.
diff --git a/packages/graphs/src/components/flow-direction-graph/options.tsx b/packages/graphs/src/components/flow-direction-graph/options.tsx
@@ -5,7 +5,6 @@ import type { GraphOptions } from '../../types';
 const { TextNode } = RCNode;
 
 export const DEFAULT_OPTIONS: GraphOptions = {
-  padding: [20, 0, 0, 50],
   node: {
     type: 'react',
     style: {
@@ -34,8 +33,9 @@ export const DEFAULT_OPTIONS: GraphOptions = {
     },
   },
   layout: {
-    type: 'antv-dagre',
+    type: 'dagre',
     rankdir: 'LR',
+    animation: false,
   },
   transforms: ['translate-react-node-origin'],
 };
diff --git a/packages/graphs/src/components/flow-graph/options.tsx b/packages/graphs/src/components/flow-graph/options.tsx
@@ -5,7 +5,6 @@ import type { FlowGraphOptions } from './types';
 const { TextNode } = RCNode;
 
 export const DEFAULT_OPTIONS: FlowGraphOptions = {
-  padding: [20, 0, 0, 50],
   node: {
     type: 'react',
     style: {

diff --git a/packages/graphs/src/components/indented-tree/options.tsx b/packages/graphs/src/components/indented-tree/options.tsx
@@ -106,8 +106,7 @@ export const getIndentedTreeOptions = ({
             };
             return <TextNode {...props} />;
           },
-          size: (data: NodeData) =>
-            getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size,
+          size: (data: NodeData) => getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size,
         },
       },
       edge: {
@@ -129,8 +128,7 @@ export const getIndentedTreeOptions = ({
         type: 'indented',
         indent: (node) => getIndent(node, 20),
         getWidth: (data) => getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[0],
-        getHeight: (data) =>
-          getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[1],
+        getHeight: (data) => getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[1],
         getVGap: () => 14,
       },
     };
@@ -152,21 +150,20 @@ 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 <TextNode {...props} />;
           },
-          size: (data: NodeData) =>
-            getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size,
+          size: (data: NodeData) => getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size,
           ports: function (data: NodeData) {
             const side = getNodeSide(this as unknown as Graph, data);
             return side === 'left'
               ? [{ placement: 'bottom' }, { placement: 'bottom-right' }]
               : side === 'center'
-                ? [{ placement: 'bottom' }]
-                : [{ placement: 'bottom' }, { placement: 'bottom-left' }];
+              ? [{ placement: 'bottom' }]
+              : [{ placement: 'bottom' }, { placement: 'bottom-left' }];
           },
         },
       },
@@ -181,10 +178,8 @@ export const getIndentedTreeOptions = ({
       layout: {
         type: 'indented',
         indent: (node) => getIndent(node, 20),
-        getWidth: (data) =>
-          getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[0],
-        getHeight: (data) =>
-          getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[1],
+        getWidth: (data) => getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[0],
+        getHeight: (data) => getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[1],
         getVGap: () => 12,
       },
       transforms: (prev) => [

diff --git a/packages/graphs/src/components/mind-map/options.tsx b/packages/graphs/src/components/mind-map/options.tsx
@@ -103,13 +103,12 @@ export function getMindMapOptions({
               depth === 0
                 ? { type: 'filled', color: '#f1f4f5', style: { color: '#252525' } }
                 : depth === 1
-                  ? { type: 'filled' }
-                  : { type: 'outlined' },
+                ? { type: 'filled' }
+                : { type: 'outlined' },
             );
             return <TextNode {...props} />;
           },
-          size: (data: NodeData) =>
-            getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size,
+          size: (data: NodeData) => getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size,
           dx: function (data: NodeData) {
             const side = getNodeSide(this as unknown as Graph, data);
             const size = getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size;
@@ -134,8 +133,7 @@ export function getMindMapOptions({
       ],
       layout: {
         type: 'mindmap',
-        getHeight: (data) =>
-          getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[1],
+        getHeight: (data) => getBoxedTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[1],
         getVGap: () => 14,
       },
     };
@@ -157,19 +155,22 @@ 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 <TextNode {...props} />;
           },
-          size: (data: NodeData) =>
-            getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size,
+          size: (data: NodeData) => getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size,
           dx: function (data: NodeData) {
             const side = getNodeSide(this as unknown as Graph, data);
             const size = getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size;
             return side === 'left' ? -size[0] : side === 'center' ? -size[0] / 2 : 0;
           },
+          dy: function (data: NodeData) {
+            const size = getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size;
+            return size[1] / 2;
+          },
           ports: function (data: NodeData) {
             const side = getNodeSide(this as unknown as Graph, data);
             return side === 'center'
@@ -187,8 +188,7 @@ export function getMindMapOptions({
       },
       layout: {
         type: 'mindmap',
-        getHeight: (data) =>
-          getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[1],
+        getHeight: (data) => getLinearTextNodeStyle(idOf(data), minWidth, maxWidth, data.depth as number).size[1],
         getVGap: () => 12,
       },
       transforms: (prev) => [
@@ -211,7 +211,8 @@ export function getMindMapOptions({
 
   if (direction) {
     options.layout ||= {} as SingleLayoutOptions;
-    (options.layout as SingleLayoutOptions).direction = direction === 'alternate' ? 'H' : direction === 'left' ? 'RL' : 'LR';
+    (options.layout as SingleLayoutOptions).direction =
+      direction === 'alternate' ? 'H' : direction === 'left' ? 'RL' : 'LR';
   }
 
   return options;

diff --git a/packages/graphs/src/components/organization-chart/options.tsx b/packages/graphs/src/components/organization-chart/options.tsx
@@ -5,7 +5,6 @@ import { OrganizationChartOptions } from './types';
 const { TextNode } = RCNode;
 
 export const DEFAULT_OPTIONS: OrganizationChartOptions = {
-  padding: [20, 0, 0, 50],
   node: {
     type: 'react',
     style: {
@@ -27,14 +26,12 @@ export const DEFAULT_OPTIONS: OrganizationChartOptions = {
     type: 'polyline',
     style: {
       lineWidth: 2,
-      router: {
-        type: 'orth',
-      },
+      router: { type: 'orth' },
     },
     animation: false,
   },
   layout: {
-    type: 'antv-dagre',
+    type: 'dagre',
   },
   transforms: ['translate-react-node-origin'],
 };

diff --git a/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx b/packages/graphs/tests/demos/flow-graph-task-scheduling.tsx
@@ -116,7 +116,7 @@ const TaskNode: React.FC<{
 
 export const FlowGraphTaskScheduling = () => {
   const options: FlowGraphOptions = {
-    autoFit: 'center',
+    autoFit: 'view',
     data,
     node: {
       style: {

diff --git a/packages/graphs/tests/demos/flow-graph.tsx b/packages/graphs/tests/demos/flow-graph.tsx
@@ -7,7 +7,7 @@ const { TextNode } = RCNode;
 
 export const FlowGraph = () => {
   const options: FlowGraphOptions = {
-    autoFit: 'center',
+    autoFit: 'view',
     data,
     node: {
       style: {

diff --git a/packages/graphs/tests/demos/index.tsx b/packages/graphs/tests/demos/index.tsx
@@ -1,4 +1,5 @@
 export { Dendrogram } from './dendrogram';
+export { FishboneDefault } from './fishbone-default';
 export { FlowGraph } from './flow-graph';
 export { FlowGraphProductLaunch } from './flow-graph-product-launch';
 export { FlowGraphTaskScheduling } from './flow-graph-task-scheduling';
@@ -12,5 +13,5 @@ export { MindMapLinear } from './mind-map-linear';
 export { NetworkGraph } from './network-graph';
 export { OrganizationChart } from './organization-chart';
 export { OrganizationChart2 } from './organization-chart2';
+export { UserFlowDirectionDefault } from './user-flow-direction-default';
 export { UserFlowDirectionGraph } from './user-flow-direction-graph';
-export { FishboneDefault } from './fishbone-default';
diff --git a/packages/graphs/tests/demos/organization-chart.tsx b/packages/graphs/tests/demos/organization-chart.tsx
@@ -1,9 +1,7 @@
 import { OrganizationChart as OrganizationChartComponent, type OrganizationChartOptions } from '@ant-design/graphs';
-import { Graph } from '@antv/g6';
 import React, { useEffect, useState } from 'react';
 
 export const OrganizationChart = () => {
-  const [graph, setGraph] = useState<Graph | null>(null);
   const [data, setData] = useState(undefined);
 
   useEffect(() => {
@@ -17,11 +15,5 @@ export const OrganizationChart = () => {
     data,
   };
 
-  useEffect(() => {
-    if (graph) {
-      console.log(graph);
-    }
-  }, [graph]);
-
-  return <OrganizationChartComponent ref={setGraph} {...options} />;
+  return <OrganizationChartComponent {...options} />;
 };
diff --git a/packages/graphs/tests/demos/organization-chart2.tsx b/packages/graphs/tests/demos/organization-chart2.tsx
@@ -23,7 +23,6 @@ export const OrganizationChart2 = () => {
 
   const options: OrganizationChartOptions = {
     data,
-    padding: [40, 0, 0, 120],
     autoFit: 'view',
     node: {
       style: {

diff --git a/packages/graphs/tests/demos/user-flow-direction-default.tsx b/packages/graphs/tests/demos/user-flow-direction-default.tsx
@@ -0,0 +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';
+
+export const UserFlowDirectionDefault = () => {
+  const options: GraphOptions = {
+    autoFit: 'view',
+    data,
+  };
+
+  return <FlowDirectionGraph {...options} />;
+};
diff --git a/packages/graphs/tests/demos/user-flow-direction-graph.tsx b/packages/graphs/tests/demos/user-flow-direction-graph.tsx
@@ -23,7 +23,6 @@ const transformData = (data) => {
 export const UserFlowDirectionGraph = () => {
   const options: GraphOptions = {
     autoFit: 'view',
-    padding: 20,
     data: transformData(data),
     node: {
       style: {

diff --git a/packages/graphs/tests/index.html b/packages/graphs/tests/index.html
@@ -8,6 +8,7 @@
       body {
         margin: 0;
         padding: 0;
+        background-color: #F6F8FA;
       }
     </style>
   </head>

diff --git a/packages/graphs/tests/main.tsx b/packages/graphs/tests/main.tsx
@@ -9,7 +9,7 @@ const App = () => {
   const match = useMatch('/*');
 
   return (
-    <Flex vertical style={{ height: '100vh' }}>
+    <Flex vertical style={{ width: '500px', height: '500px', backgroundColor: '#fff' }}>
       <Select
         value={match?.params['*'] || Object.keys(demos)[0]}
         options={Object.keys(demos).map((label) => ({ label, value: label }))}