feat(components):add EdgeBundling demos

packages/graphin-components/src/EdgeBundling/demos/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import Graphin, { Utils, GraphinContext } from '@antv/graphin';
+import { ContextMenu, EdgeBundling } from '@antv/graphin-components';
+import G6 from '@antv/g6';
+
+// Do not forget to import CSS
+import '@antv/graphin/dist/index.css';
+
+const data = Utils.mock(5).graphin();
+const { edges } = data;
+data.edges = [
+  ...edges.map((edge) => {
+    return {
+      ...edge,
+      // label: Math.random(),
+    };
+  }),
+  ...edges.map((edge) => {
+    return {
+      ...edge,
+      // label: Math.random() * 2,
+    };
+  }),
+  ...edges.map((edge) => {
+    return {
+      ...edge,
+      // label: Math.random() * 5,
+    };
+  }),
+  ...edges.map((edge) => {
+    return {
+      ...edge,
+      // label: Math.random() * 10,
+    };
+  }),
+];
+
+G6.Util.processParallelEdges(data.edges);
+
+console.log('edge', data.edges);
+const App = () => {
+  return (
+    <div className="App">
+      <Graphin
+        data={data}
+        layout={{ type: 'circle' }}
+        defaultEdge={{
+          type: 'quadratic',
+          labelCfg: {
+            autoRotate: true,
+          },
+        }}
+      >
+        <EdgeBundling />
+      </Graphin>
+    </div>
+  );
+};
+export default App;

packages/graphin-components/src/EdgeBundling/index.md

@@ -0,0 +1,40 @@
+---
+title: EdgeBundling 边绑定
+group:
+  path: /analysis
+  title: 分析组件
+nav:
+  title: Components
+  path: /components
+  order: 1
+---
+
+# EdgeBundling
+
+<code src='./demos/index.tsx'>
+
+## 用法
+
+```tsx | pure
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Graphin, { Utils } from '@antv/graphin';
+import { EdgeBundling } from '@antv/graphin-components';
+import '@antv/graphin/dist/index.css';
+import '@antv/graphin-components/dist/index.css';
+
+const App = () => {
+  const handleCloseCallback = () => {};
+
+  return (
+    <div className="App">
+      <Graphin data={Utils.mock(10).graphin()}>
+        <EdgeBundling />
+      </Graphin>
+    </div>
+  );
+};
+
+const rootElement = document.getElementById('root');
+ReactDOM.render(<App />, rootElement);
+```

packages/graphin-components/src/EdgeBundling/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { GraphinContext, G6 } from '@antv/graphin';
+
+interface IEdgeBundlingProps {}
+let edgeBundling;
+const EdgeBundling: React.FunctionComponent<IEdgeBundlingProps> = (props) => {
+  const { graph } = React.useContext(GraphinContext);
+
+  React.useEffect(() => {
+    edgeBundling = new G6.Bundling({
+      bundleThreshold: 0.6,
+      K: 100,
+    });
+    const data = graph.save();
+    graph.addPlugin(edgeBundling);
+    edgeBundling.bundling(data);
+    graph.data(data);
+    graph.render();
+  }, []);
+
+  return null;
+};
+
+export default EdgeBundling;

packages/graphin-components/src/index.ts

@@ -5,4 +5,6 @@
 
 export { default as Hull, HullCfg } from './Hull';
 export { default as ContextMenu } from './ContextMenu';
+export { default as EdgeBundling } from './EdgeBundling';
 export { default as VisSettingPanel } from './VisSettingPanel';
+export { default as Tooltip } from './Tooltip';