Merge branch 'ant-design:master' into master

config/jest.js

@@ -11,7 +11,7 @@ const BaseJestConfig = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
   collectCoverage: false,
   collectCoverageFrom: ['packages/**/*.ts', '!**/node_modules/**'],
-  testRegex: '/tests/.*-spec\\.tsx|\\.(t|j)s?$',
+  testMatch: ['**/?(*[.-])+(spec|test).[jt]s?(x)'],
 };
 
 module.exports = { BaseJestConfig };

packages/graphs/CHANGELOG.md

@@ -1,3 +1,19 @@
+
+## 1.2.5
+
+`2022-08-22`
+
+- 🔥 `RadialGraph` 升级，可以动态拓展
+- 🔥 新增 `fetchLoading` 配置，可配合 `asyncData` `getChildren` 等配置做自定义loading
+- 🐞 完善 `layout` 定义
+
+## 1.2.4
+
+`2022-08-19`
+
+- 🔥 新增 `menuCfg` 配置
+- 🐞 [关系图透传节点配置，支持 image 等节点](https://github.com/ant-design/ant-design-charts/issues/1489)
+
 ## 1.2.3
 
 `2022-07-22`

packages/graphs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/graphs",
-  "version": "1.2.3",
+  "version": "1.2.5",
   "description": "Relation graph",
   "bugs": {
     "url": "https://github.com/ant-design/ant-design-charts/issues"
@@ -33,7 +33,7 @@
     "lint:prettier": "npm run prettier && git diff && prettier --version && prettier --check \"src/**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
     "prettier": "prettier --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
     "test": "jest",
-    "test:live": "cross-env DEBUG_MODE=1 jest --watch ./tests/issues/1441-spec.tsx --no-cache"
+    "test:live": "cross-env DEBUG_MODE=1 jest --watch ./tests/graphs/node-explore-spec.tsx --no-cache"
   },
   "dependencies": {
     "@antv/g6": "^4.2.4",

packages/graphs/src/components/decomposition-tree-graph/index.tsx

@@ -3,17 +3,30 @@ import { defaultFlowGraphAnchorPoints, defaultNodeSize, defaultNodeStyle, defaul
 import ErrorBoundary from '../../errorBoundary';
 import useGraph from '../../hooks/useGraphs';
 import useProps from '../../hooks/useProps';
-import { CommonConfig, IGraph, IGroup, NodeConfig, Shape, ShapeCfg, TreeGraphData } from '../../interface';
+import { CompactBoxLayout } from '../../layout';
+import {
+  CommonConfig,
+  IGraph,
+  IGroup,
+  NodeCfg,
+  NodeConfig,
+  Shape,
+  ShapeCfg,
+  G6TreeGraphData,
+  FetchLoading,
+} from '../../interface';
 import ChartLoading from '../../utils/createLoading';
 import { registerIndicatorGeometries } from '../flow-analysis-graph/customItem';
 
-export interface DecompositionTreeGraphConfig extends Omit<CommonConfig, 'data' | 'nodeCfg'> {
-  data: TreeGraphData;
+export interface DecompositionTreeGraphConfig
+  extends Omit<CommonConfig<CompactBoxLayout>, 'data' | 'nodeCfg'>,
+    FetchLoading {
+  data: G6TreeGraphData;
   /** 展开层级，默认 100 */
   level?: number;
-  nodeCfg?: CommonConfig['nodeCfg'] & {
+  nodeCfg?: NodeCfg & {
     /** 点击展开时异步获取数据 */
-    getChildren?: (nodeCfg: NodeConfig) => TreeGraphData['children'];
+    getChildren?: (nodeCfg: NodeConfig) => G6TreeGraphData['children'];
   };
 }
 

packages/graphs/src/components/flow-analysis-graph/index.tsx

@@ -1,24 +1,33 @@
 import React from 'react';
+import { DagreLayout } from '@antv/layout';
 import { defaultFlowGraphAnchorPoints, defaultNodeSize, defaultNodeStyle, defaultStateStyles } from '../../constants';
 import ErrorBoundary from '../../errorBoundary';
 import useGraph from '../../hooks/useGraphs';
 import useProps from '../../hooks/useProps';
 import ChartLoading from '../../utils/createLoading';
 
-import { CardItems, CommonConfig, FlowGraphEdgeData, NodeData, NodeConfig } from '../../interface';
+import {
+  CardItems,
+  CommonConfig,
+  FlowGraphEdgeData,
+  NodeCfg,
+  NodeData,
+  NodeConfig,
+  FetchLoading,
+} from '../../interface';
 import { registerIndicatorGeometries } from './customItem';
 
 export type FlowAnalysisNodeData = NodeData<{
   title?: string;
   items?: CardItems[];
 }>;
 
-export interface FlowAnalysisGraphConfig extends Omit<CommonConfig, 'data' | 'nodeCfg'> {
+export interface FlowAnalysisGraphConfig extends Omit<CommonConfig<DagreLayout>, 'data' | 'nodeCfg'>, FetchLoading {
   data: {
     nodes: FlowAnalysisNodeData[];
     edges: FlowGraphEdgeData[];
   };
-  nodeCfg?: CommonConfig['nodeCfg'] & {
+  nodeCfg?: NodeCfg & {
     /** 点击展开时异步获取数据 */
     asyncData?: (nodeCfg: NodeConfig) => {
       nodes: FlowAnalysisNodeData[];

packages/graphs/src/components/fund-flow-graph/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { DagreLayout } from '@antv/layout';
 import ErrorBoundary from '../../errorBoundary';
 import useGraph from '../../hooks/useGraphs';
 import useProps from '../../hooks/useProps';
@@ -20,7 +21,7 @@ export type FundFlowNodeData = NodeData<{
   text?: string;
   icon?: string;
 }>;
-export interface FundFlowGraphConfig extends Omit<CommonConfig, 'data'> {
+export interface FundFlowGraphConfig extends Omit<CommonConfig<DagreLayout>, 'data'> {
   data: {
     nodes: FundFlowNodeData[];
     edges: FundFlowEdgeData[];

packages/graphs/src/components/radial-graph/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { RadialLayout } from '@antv/layout';
+import ErrorBoundary from '../../errorBoundary';
+import useGraph from '../../hooks/useGraphs';
+import useProps from '../../hooks/useProps';
+import ChartLoading from '../../utils/createLoading';
+import { CommonConfig, GraphData, NodeCfg, NodeConfig, FetchLoading } from '../../interface';
+import { defaultFlowGraphAnchorPoints, defaultStateStyles, defaultNodeStyle } from '../../constants';
+
+export interface RadialGraphConfig extends Omit<CommonConfig<RadialLayout>, 'data'>, FetchLoading {
+  data: GraphData;
+  nodeCfg?: NodeCfg & {
+    /** 点击展开时异步获取数据 */
+    asyncData?: (nodeCfg: NodeConfig) => GraphData;
+  };
+}
+
+const defaultLayout = {
+  type: 'radial',
+  unitRadius: 50,
+  preventOverlap: true,
+  maxPreventOverlapIteration: 100,
+};
+
+const defaultProps = {
+  nodeCfg: {
+    type: 'circle',
+    size: 10,
+    anchorPoints: defaultFlowGraphAnchorPoints,
+    linkCenter: true,
+    nodeStateStyles: defaultStateStyles,
+    style: defaultNodeStyle,
+  },
+  edgeCfg: {
+    type: 'line',
+    edgeStateStyles: defaultStateStyles,
+  },
+  behaviors: ['zoom-canvas', 'drag-canvas'],
+  layout: defaultLayout,
+  animate: true,
+  markerPosition: 'right' as 'right',
+  autoFit: true,
+  fitCenter: true,
+  style: {
+    position: 'relative' as React.CSSProperties['position'],
+    height: 'inherit',
+    backgroundColor: '#fff',
+  },
+};
+
+const RadialGraph: React.FC<RadialGraphConfig> = (props) => {
+  const { uProps } = useProps(props, defaultProps);
+  const { className, style, loading, loadingTemplate, errorTemplate, ...rest } = uProps;
+  const { container } = useGraph('Graph', rest, { name: 'RadialGraph' });
+
+  return (
+    <ErrorBoundary errorTemplate={errorTemplate}>
+      {loading && <ChartLoading loadingTemplate={loadingTemplate} />}
+      <div className={className} style={style} ref={container} />
+    </ErrorBoundary>
+  );
+};
+
+export default RadialGraph;

packages/graphs/src/components/radial-tree-graph/index.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+import { DendrogramLayout } from '../../layout';
 import ErrorBoundary from '../../errorBoundary';
 import useGraph from '../../hooks/useGraphs';
 import useProps from '../../hooks/useProps';
 import ChartLoading from '../../utils/createLoading';
 
-import { CommonConfig, FlowGraphDatum } from '../../interface';
+import { CommonConfig, TreeGraphData } from '../../interface';
 import { defaultFlowGraphAnchorPoints, defaultStateStyles, defaultNodeStyle } from '../../constants';
 
-export interface RadialTreeGraphConfig extends Omit<CommonConfig, 'data'> {
-  data: FlowGraphDatum;
+export interface RadialTreeGraphConfig extends Omit<CommonConfig<DendrogramLayout>, 'data'> {
+  data: TreeGraphData;
 }
 
 const defaultLayout = {

packages/graphs/src/errorBoundary/index.tsx

@@ -27,12 +27,10 @@ class ErrorBoundary extends React.Component<any> {
     const { errorTemplate } = this.props;
     switch (e) {
       default:
-        // fallback
-        return errorTemplate && typeof errorTemplate === 'function' ? (
-          errorTemplate(e)
-        ) : (
-          <h5>组件出错了，请核查后重试： {e.message}</h5>
-        );
+        if (typeof errorTemplate === 'function') {
+          return errorTemplate(e);
+        }
+        return errorTemplate ? errorTemplate : <h5>组件出错了，请核查后重试： {e.message}</h5>;
     }
   };
 

packages/graphs/src/hooks/useGraphs.ts

@@ -1,8 +1,8 @@
 import G6, { IEdge, INode, ModeType } from '@antv/g6';
 import { isEqual, isFunction, isObject, isString } from '@antv/util';
 import { useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import { createToolbar } from '../components/toolbar';
+import { createNode } from '../utils/create-node';
+import { createToolbar, Menu } from '../plugins';
 import { ArrowConfig, CardNodeCfg, CommonConfig, EdgeConfig, NodeConfig, StateStyles } from '../interface';
 import {
   bindDefaultEvents,
@@ -19,6 +19,8 @@ import {
   processMinimap,
   renderGraph,
   setTag,
+  bindRadialExplore,
+  getCenterNode,
 } from '../utils';
 import { setGlobalInstance } from '../utils/global';
 
@@ -27,7 +29,7 @@ export default function useGraph(graphClass: string, config: any, extra: { name?
   const graphRef = useRef<any>();
   const graphOptions = useRef<CommonConfig>();
   // data 单独处理，会被 G6 修改
-  const graphData = useRef();
+  const graphData = useRef<any>();
 
   const {
     data,
@@ -187,8 +189,17 @@ export default function useGraph(graphClass: string, config: any, extra: { name?
       if (isEqual(data, graphData.current)) {
         return;
       }
+      if (extra.name === 'RadialGraph' && !graphData.current.nodes?.length) {
+        const centerNode = getCenterNode(data);
+        graph.set('centerNode', centerNode);
+        graph.updateLayout({
+          ...layout,
+          focusNode: centerNode,
+        });
+      } else {
+        changeData();
+      }
       graphData.current = deepClone(data);
-      changeData();
     }
   }, [data]);
 
@@ -244,12 +255,23 @@ export default function useGraph(graphClass: string, config: any, extra: { name?
       const { name = '' } = extra;
       const graphSize = getGraphSize(width, height, container);
       const plugins = [];
-      const { nodeCfg, edgeCfg, behaviors, layout, animate, autoFit, fitCenter, onReady, tooltipCfg, customLayout } =
-        config;
+      const {
+        nodeCfg,
+        edgeCfg,
+        behaviors,
+        layout,
+        animate,
+        autoFit,
+        fitCenter,
+        onReady,
+        tooltipCfg,
+        customLayout,
+        menuCfg,
+        fetchLoading,
+      } = config;
 
       const {
         type: nodeType,
-        size: nodeSize,
         anchorPoints: nodeAnchorPoints,
         nodeStateStyles,
         style: nodeStyle,
@@ -268,25 +290,30 @@ export default function useGraph(graphClass: string, config: any, extra: { name?
         edgeStateStyles,
       } = edgeCfg ?? {};
 
+      // tooltip
       if (tooltipCfg && isFunction(tooltipCfg.customContent)) {
         const { customContent, ...rest } = tooltipCfg;
-        const createNode = (children: React.ReactNode) => {
-          const mountPoint = document.createElement('div');
-          mountPoint.className = 'g6-tooltip';
-          ReactDOM.render(children as React.ReactElement, mountPoint);
-          return mountPoint;
-        };
         const tooltipPlugin = new G6.Tooltip({
           offsetX: 10,
           offsetY: 20,
           itemTypes: ['node'],
           ...rest,
           getContent(e) {
-            return createNode(customContent(e.item.getModel()));
+            return createNode(customContent(e.item.getModel()), 'g6-tooltip');
           },
         });
         plugins.push(tooltipPlugin);
       }
+      // menu
+      if (menuCfg && isFunction(menuCfg.customContent)) {
+        const menuPlugin = new Menu({
+          offsetX: 16 + 10,
+          offsetY: 0,
+          itemTypes: ['node'],
+          ...menuCfg,
+        });
+        plugins.push(menuPlugin);
+      }
       graphRef.current = new G6[graphClass]({
         container: container.current as any,
         width: graphSize[0],
@@ -297,13 +324,11 @@ export default function useGraph(graphClass: string, config: any, extra: { name?
           default: behaviors,
         },
         defaultNode: {
-          type: nodeType,
-          size: nodeSize,
-          anchorPoints: nodeAnchorPoints,
+          ...nodeCfg,
           nodeCfg,
         },
         defaultEdge: {
-          type: edgeType,
+          ...edgeCfg,
           edgeCfg,
           labelCfg: labelCfg?.style,
         },
@@ -391,8 +416,13 @@ export default function useGraph(graphClass: string, config: any, extra: { name?
       if (markerCfg) {
         const sourceGraph = ['FlowAnalysisGraph', 'FundFlowGraph'];
         sourceGraph.includes(name)
-          ? bindSourceMapCollapseEvents(graph, asyncData)
-          : bindDefaultEvents(graph, level, getChildren);
+          ? bindSourceMapCollapseEvents(graph, asyncData, fetchLoading)
+          : bindDefaultEvents(graph, level, getChildren, fetchLoading);
+      }
+      if (name === 'RadialGraph') {
+        const centerNode = getCenterNode(data);
+        graph.set('centerNode', centerNode);
+        bindRadialExplore(graph, asyncData, layout, fetchLoading);
       }
       renderGraph(graph, data, level);
       if (fitCenter) {
@@ -401,6 +431,7 @@ export default function useGraph(graphClass: string, config: any, extra: { name?
       if (onReady) {
         onReady(graph);
       }
+      graphData.current = deepClone(data);
     }
   }, []);