Merge pull request #266 from antvis/release/2.1.0

chore: release graphin 2.1.0

Author: pomelo-nwu

package.json

@@ -11,7 +11,8 @@
     "docs:build": "dumi build && node cname.js",
     "docs:deploy": "gh-pages -d dist",
     "docs:deploy-2": "gh-pages -d ./dist -r https://github.com/antvis/graphin-docs.git",
-    "bootstrap": "lerna bootstrap --ignore @antv/graphin-studio --ignore graphin-site --ignore dumi-theme-graphin",
+    "bootstrap": "lerna bootstrap --ignore @antv/graphin-studio --ignore graphin-site && npm run remove:deps",
+    "remove:deps": "rm -rf packages/graphin/node_modules/antd && rm -rf packages/graphin/node_modules/@ant-design/icons && rm -rf packages/graphin-components/node_modules/antd && rm -rf packages/graphin-components/node_modules/@ant-design/icons && rm -rf packages/graphin-icons/node_modules/@ant-design/icons  && rm -rf packages/graphin-icons/node_modules/antd && rm -rf packages/dumi-theme-graphin/node_modules/@ant-design/icons && rm -rf packages/dumi-theme-graphin/node_modules/antd",
     "bootstrap:ci": "lerna bootstrap --ignore @antv/graphin-studio --ignore graphin-site --ignore @antv/graphin-graphscope",
     "build": "lerna run build",
     "contributor": "git-contributor",
@@ -40,7 +41,7 @@
     "d3": "^6.3.1",
     "d3-selection": "^2.0.0",
     "dumi": "^1.1.0",
-    "dumi-theme-graphin": "0.1.3",
+    "dumi-theme-graphin": "file:packages/dumi-theme-graphin",
     "eslint": "^7.18.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^7.2.0",
@@ -56,7 +57,7 @@
     "lint-staged": "^10.2.2",
     "prettier": "^2.2.1",
     "react-color": "^2.19.3",
-    "react-pie-menu": "^0.2.5",
+    "react-pie-menu": "^0.3.0",
     "styled-components": "^5.2.1",
     "typescript": "^4.1.3"
   },
@@ -73,11 +74,14 @@
     ]
   },
   "dependencies": {
-    "@ant-design/icons": "^4.5.0",
-    "@antv/gatsby-theme-antv": "^1.0.8",
+    "@ant-design/create-react-context": "^0.2.5",
+    "@ant-design/icons": "^4.6.2",
+    "@ant-design/icons-react": "^2.0.1",
+    "@antv/gatsby-theme-antv": "latest",
     "antd": "^4.12.3",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0"
+    "rc-footer": "^0.6.6",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "repository": {
     "type": "git",

packages/dumi-theme-graphin/package.json

@@ -16,6 +16,7 @@
   "homepage": "http://github.com/antvis/graphin",
   "authors": [],
   "dependencies": {
+    "@ant-design/icons": "^4.6.2",
     "prism-react-renderer": "^1.1.1",
     "prismjs": "^1.21.0",
     "rc-tabs": "^11.7.1",
@@ -29,11 +30,12 @@
     "dumi": "1.1.5-0",
     "father": "^2.30.1",
     "global-dirs": "^2.1.0",
-    "react-test-renderer": "^16.13.1"
+    "react-test-renderer": "^17.0.1"
   },
   "peerDependencies": {
+    "@antv/gatsby-theme-antv": "latest",
     "@umijs/preset-dumi": "1.x",
-    "react": "^16.13.1"
+    "react": "^17.0.1"
   },
   "license": "MIT"
 }

packages/dumi-theme-graphin/src/components/Products/getProducts.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {
   AreaChartOutlined,
   DingdingOutlined,
@@ -8,8 +6,10 @@ import {
   HomeOutlined,
   PieChartOutlined,
   ReadOutlined,
-  YuqueOutlined,
+  YuqueOutlined
 } from '@ant-design/icons';
+import React from 'react';
+
 
 const tuple = <T extends string[]>(...args: T) => args;
 const Categories = tuple('basic', 'extension', 'ecology');
@@ -35,7 +35,7 @@ export type ValuesOf<T extends any[]> = T[number];
 
 export const getProducts = ({
   t,
-  language,
+  language = 'zh',
 }: {
   t: (key: string) => string;
   language: string;

packages/graphin-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/graphin-components",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "Components for graphin",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -52,9 +52,9 @@
     "@antv/util": "^2.0.10"
   },
   "peerDependencies": {
-    "react": "^16.x",
-    "react-dom": "^16.x",
-    "@antv/graphin": "^2.0.0"
+    "react": ">=16.9.0",
+    "react-dom": ">=16.9.0",
+    "@antv/graphin": "^2.*"
   },
   "publishConfig": {
     "access": "public"

packages/graphin-components/src/Hull/api-docs.ts

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { HullCfg as hullcfg, HullCfgStyle as hullcfgstyle, IHullProps as ihullprops } from './index';
+
+export const IHullProps = (props: ihullprops) => {};
+
+export const HullCfg = (props: hullcfg) => {};
+
+export const HullCfgStyle = (props: hullcfgstyle) => {};

packages/graphin-components/src/Hull/demos/Simple.tsx

@@ -1,15 +1,15 @@
-import React from 'react';
 import Graphin, { Utils } from '@antv/graphin';
+import React from 'react';
 import Hull, { HullCfg } from '../index';
 // Do not forget to import CSS
 
 const Demo = () => {
   const hullOptions: HullCfg[] = [
     {
-      members: ['node-1', 'node-2'], // 必须参数
+      members: ['node-1', 'node-2', 'node-9'], // 必须参数
     },
     {
-      members: ['node-node-3', 'node-4'],
+      members: ['node-3', 'node-4'],
       type: 'bubble',
       padding: 10,
       style: {

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

@@ -18,44 +18,7 @@ Hull 轮廓包裹，是常见的一种图分析组件，可以将所属在一组
 
 <code src='./demos/Simple.tsx'></code>
 
-<API src='./index.tsx'></API>
-
-## 用法
-
-```tsx | pure
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Graphin, { Utils } from '@antv/graphin';
-import { Hull } from '@antv/graphin-components';
-// Do not forget to import CSS
-
-const App = () => {
-  const hullOptions = [
-    {
-      members: ['node-1', 'node-2', 'node-7'], // 必须参数
-    },
-    {
-      members: ['node-4', 'node-5'],
-      type: 'bubble',
-      padding: 10,
-      style: {
-        fill: 'lightgreen',
-        stroke: 'green',
-      },
-    },
-  ];
-  return (
-    <div className="App">
-      <Graphin data={Utils.mock(10).graphin()}>
-        <Hull options={hullOptions} />
-      </Graphin>
-    </div>
-  );
-};
-
-const rootElement = document.getElementById('root');
-ReactDOM.render(<App />, rootElement);
-```
+<API src='./api-docs.ts'></API>
 
 ## 功能特性
 

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

@@ -1,10 +1,7 @@
+import { GraphinContext, GraphinContextType } from '@antv/graphin';
 import React from 'react';
 
-// @ts-ignore
-import { GraphinContext } from '@antv/graphin';
-
 const defaultHullCfg = {
-  id: `${Math.random()}`, // Utils.uuid(),
   members: [],
   type: 'round-convex',
   nonMembers: [],
@@ -34,30 +31,51 @@ const deepMergeCfg = (defaultCfg: typeof defaultHullCfg, cfg: HullCfg) => {
   };
 };
 
+export interface HullCfgStyle {
+  /**
+   * @description 填充颜色
+   * @default 'lightblue'
+   */
+  fill: string;
+  /**
+   * @description 描边颜色
+   * @default 'blue'
+   */
+  stroke: string;
+  /**
+   *
+   * @description 透明度
+   * @default 0.2
+   */
+  opacity: number;
+}
 export interface HullCfg {
-  /** 在包裹内部的节点实例或节点 Id 数组 */
+  /**
+   * @description 在包裹内部的节点实例或节点 Id 数组
+   * @default []
+   *
+   */
   members: string[];
-  /** 包裹的 id */
+  /**
+   * 包裹的 id
+   */
   id?: string;
   /**
-   * 包裹的类型：
+   * @description 包裹的类型
    * round-convex: 生成圆角凸包轮廓，
    * smooth-convex: 生成平滑凸包轮廓
    * bubble: 产生一种可以避开 nonMembers 的平滑凹包轮廓（算法）。
-   * 默认值是 round-convex。 */
+   * @default round-convex
+   */
   type?: 'round-convex' | 'smooth-convex' | 'bubble';
   /** 不在轮廓内部的节点数组，只在 bubble 类型的包裹中生效 */
   nonMembers?: string[];
   /** 轮廓的样式属性 */
-  style?: Partial<{
-    /** 填充颜色 */
-    fill: string;
-    /** 描边颜色 */
-    stroke: string;
-    /**  透明度 */
-    opacity: number;
-  }>;
-  /** 轮廓边缘和内部成员的间距 */
+  style?: Partial<HullCfgStyle>;
+  /**
+   * @description 轮廓边缘和内部成员的间距
+   * @default 10
+   */
   padding?: number;
 }
 
@@ -71,20 +89,25 @@ export interface IHullProps {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let hullInstances: any[];
 
-const Hull: React.FunctionComponent<IHullProps> = (props) => {
-  const graphin = React.useContext(GraphinContext);
+const Hull: React.FunctionComponent<IHullProps> = props => {
+  const graphin = React.useContext<GraphinContextType>(GraphinContext);
+  const { graph } = graphin;
 
   React.useEffect(() => {
-    // @ts-ignore
-    const { graph } = graphin;
     const { options } = props;
 
-    hullInstances = options.map((item) => {
-      return graph.createHull(deepMergeCfg(defaultHullCfg, item));
+    hullInstances = options.map(item => {
+      return graph.createHull(
+        // @ts-ignore
+        deepMergeCfg(defaultHullCfg, {
+          id: `${Math.random()}`, // Utils.uuid(),
+          ...item,
+        }),
+      );
     });
 
     const handleAfterUpdateItem = () => {
-      hullInstances.forEach((item) => {
+      hullInstances.forEach(item => {
         item.updateData(item.members);
       });
     };
@@ -93,7 +116,7 @@ const Hull: React.FunctionComponent<IHullProps> = (props) => {
     return () => {
       graph.on('afterupdateitem', handleAfterUpdateItem);
     };
-  }, []);
+  }, [graph]);
 
   return <div className="graphin-hull-container" />;
 };

packages/graphin-components/src/LayoutSelector/demos/LayoutSelectorDemo.tsx

@@ -118,11 +118,11 @@ const LayoutConfigPanel = ({ updateLayout, layoutConfig = graphLayoutConfig }) =
 
   // 更新布局参数
   const updateLayoutConfig = (changedField, allFields, layoutType) => {
-    const currentFileds = { ...allFields, ...changedField };
-    Object.keys(currentFileds).forEach(key => {
-      defaultValue[key] = currentFileds[key];
+    const currentFields = { ...allFields, ...changedField };
+    Object.keys(currentFields).forEach(key => {
+      defaultValue[key] = currentFields[key];
     });
-    const { x, y, ...others } = currentFileds;
+    const { x, y, ...others } = currentFields;
     const config = others;
     if (layoutType === 'grid') {
       config.begin = [x, y];
@@ -146,7 +146,7 @@ const LayoutConfigPanel = ({ updateLayout, layoutConfig = graphLayoutConfig }) =
 
   /**
    * 当字段值改变后，自动更新布局
-   * @param changedFiled 改变了的字段
+   * @param changedField 改变了的字段
    * @param allFields 所有字段
    */
   const handleFieldValueChange = (changedField, allFields) => {

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

@@ -1,13 +1,13 @@
-import React from 'react';
 import {
-  GraphinContext,
+  EdgeConfig,
   Graph,
   GraphData,
-  TreeGraphData,
-  NodeConfig,
-  EdgeConfig,
+  GraphinContext,
   GraphinContextType,
+  NodeConfig,
+  TreeGraphData,
 } from '@antv/graphin';
+import React from 'react';
 import Node from './Node';
 
 export interface LegendProps {
@@ -43,6 +43,9 @@ const getEnumValue = (keyString: string, data) => {
   const enumValue = keyArray.reduce((acc, curr) => {
     return acc[curr] || {};
   }, data) as string;
+  if (typeof enumValue === 'object') {
+    return 'others';
+  }
   return enumValue;
 };