use ant-design-pro components replace @/components

src/components/ActiveChart/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { MiniArea } from '../Charts';
-import NumberInfo from '../NumberInfo';
+import { MiniArea } from 'ant-design-pro/lib/Charts';
+import NumberInfo from 'ant-design-pro/lib/NumberInfo';
 
 import styles from './index.less';
 

src/components/Authorized/Authorized.js

@@ -1,8 +0,0 @@
-import CheckPermissions from './CheckPermissions';
-
-const Authorized = ({ children, authority, noMatch = null }) => {
-  const childrenRender = typeof children === 'undefined' ? null : children;
-  return CheckPermissions(authority, childrenRender, noMatch);
-};
-
-export default Authorized;

src/components/Authorized/AuthorizedRoute.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { RouteProps } from 'react-router';
-
-type authorityFN = (currentAuthority?: string) => boolean;
-
-type authority = string | string[] | authorityFN | Promise<any>;
-
-export interface IAuthorizedRouteProps extends RouteProps {
-  authority: authority;
-}
-export { authority };
-
-export class AuthorizedRoute extends React.Component<IAuthorizedRouteProps, any> {}

src/components/Authorized/AuthorizedRoute.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router-dom';
-import Authorized from './Authorized';
-
-// TODO: umi只会返回render和rest
-const AuthorizedRoute = ({ component: Component, render, authority, redirectPath, ...rest }) => (
-  <Authorized
-    authority={authority}
-    noMatch={<Route {...rest} render={() => <Redirect to={{ pathname: redirectPath }} />} />}
-  >
-    <Route {...rest} render={props => (Component ? <Component {...props} /> : render(props))} />
-  </Authorized>
-);
-
-export default AuthorizedRoute;

src/components/Authorized/CheckPermissions.js

@@ -1,88 +0,0 @@
-import React from 'react';
-import PromiseRender from './PromiseRender';
-import { CURRENT } from './renderAuthorize';
-
-function isPromise(obj) {
-  return (
-    !!obj &&
-    (typeof obj === 'object' || typeof obj === 'function') &&
-    typeof obj.then === 'function'
-  );
-}
-
-/**
- * 通用权限检查方法
- * Common check permissions method
- * @param { 权限判定 Permission judgment type string |array | Promise | Function } authority
- * @param { 你的权限 Your permission description  type:string} currentAuthority
- * @param { 通过的组件 Passing components } target
- * @param { 未通过的组件 no pass components } Exception
- */
-const checkPermissions = (authority, currentAuthority, target, Exception) => {
-  // 没有判定权限.默认查看所有
-  // Retirement authority, return target;
-  if (!authority) {
-    return target;
-  }
-  // 数组处理
-  if (Array.isArray(authority)) {
-    if (authority.indexOf(currentAuthority) >= 0) {
-      return target;
-    }
-    if (Array.isArray(currentAuthority)) {
-      for (let i = 0; i < currentAuthority.length; i += 1) {
-        const element = currentAuthority[i];
-        if (authority.indexOf(element) >= 0) {
-          return target;
-        }
-      }
-    }
-    return Exception;
-  }
-
-  // string 处理
-  if (typeof authority === 'string') {
-    if (authority === currentAuthority) {
-      return target;
-    }
-    if (Array.isArray(currentAuthority)) {
-      for (let i = 0; i < currentAuthority.length; i += 1) {
-        const element = currentAuthority[i];
-        if (authority === element) {
-          return target;
-        }
-      }
-    }
-    return Exception;
-  }
-
-  // Promise 处理
-  if (isPromise(authority)) {
-    return <PromiseRender ok={target} error={Exception} promise={authority} />;
-  }
-
-  // Function 处理
-  if (typeof authority === 'function') {
-    try {
-      const bool = authority(currentAuthority);
-      // 函数执行后返回值是 Promise
-      if (isPromise(bool)) {
-        return <PromiseRender ok={target} error={Exception} promise={bool} />;
-      }
-      if (bool) {
-        return target;
-      }
-      return Exception;
-    } catch (error) {
-      throw error;
-    }
-  }
-  throw new Error('unsupported parameters');
-};
-
-export { checkPermissions };
-
-const check = (authority, target, Exception) =>
-  checkPermissions(authority, CURRENT, target, Exception);
-
-export default check;

src/components/Authorized/CheckPermissions.test.js

@@ -1,55 +0,0 @@
-import { checkPermissions } from './CheckPermissions';
-
-const target = 'ok';
-const error = 'error';
-
-describe('test CheckPermissions', () => {
-  it('Correct string permission authentication', () => {
-    expect(checkPermissions('user', 'user', target, error)).toEqual('ok');
-  });
-  it('Correct string permission authentication', () => {
-    expect(checkPermissions('user', 'NULL', target, error)).toEqual('error');
-  });
-  it('authority is undefined , return ok', () => {
-    expect(checkPermissions(null, 'NULL', target, error)).toEqual('ok');
-  });
-  it('currentAuthority is undefined , return error', () => {
-    expect(checkPermissions('admin', null, target, error)).toEqual('error');
-  });
-  it('Wrong string permission authentication', () => {
-    expect(checkPermissions('admin', 'user', target, error)).toEqual('error');
-  });
-  it('Correct Array permission authentication', () => {
-    expect(checkPermissions(['user', 'admin'], 'user', target, error)).toEqual('ok');
-  });
-  it('Wrong Array permission authentication,currentAuthority error', () => {
-    expect(checkPermissions(['user', 'admin'], 'user,admin', target, error)).toEqual('error');
-  });
-  it('Wrong Array permission authentication', () => {
-    expect(checkPermissions(['user', 'admin'], 'guest', target, error)).toEqual('error');
-  });
-  it('Wrong Function permission authentication', () => {
-    expect(checkPermissions(() => false, 'guest', target, error)).toEqual('error');
-  });
-  it('Correct Function permission authentication', () => {
-    expect(checkPermissions(() => true, 'guest', target, error)).toEqual('ok');
-  });
-  it('authority is string, currentAuthority is array, return ok', () => {
-    expect(checkPermissions('user', ['user'], target, error)).toEqual('ok');
-  });
-  it('authority is string, currentAuthority is array, return ok', () => {
-    expect(checkPermissions('user', ['user', 'admin'], target, error)).toEqual('ok');
-  });
-  it('authority is array, currentAuthority is array, return ok', () => {
-    expect(checkPermissions(['user', 'admin'], ['user', 'admin'], target, error)).toEqual('ok');
-  });
-  it('Wrong Function permission authentication', () => {
-    expect(checkPermissions(() => false, ['user'], target, error)).toEqual('error');
-  });
-  it('Correct Function permission authentication', () => {
-    expect(checkPermissions(() => true, ['user'], target, error)).toEqual('ok');
-  });
-  it('authority is undefined , return ok', () => {
-    expect(checkPermissions(null, ['user'], target, error)).toEqual('ok');
-  });
-});

src/components/Authorized/PromiseRender.js

@@ -1,65 +0,0 @@
-import React from 'react';
-import { Spin } from 'antd';
-
-export default class PromiseRender extends React.PureComponent {
-  state = {
-    component: null,
-  };
-
-  componentDidMount() {
-    this.setRenderComponent(this.props);
-  }
-
-  componentDidUpdate(nextProps) {
-    // new Props enter
-    this.setRenderComponent(nextProps);
-  }
-
-  // set render Component : ok or error
-  setRenderComponent(props) {
-    const ok = this.checkIsInstantiation(props.ok);
-    const error = this.checkIsInstantiation(props.error);
-    props.promise
-      .then(() => {
-        this.setState({
-          component: ok,
-        });
-      })
-      .catch(() => {
-        this.setState({
-          component: error,
-        });
-      });
-  }
-
-  // Determine whether the incoming component has been instantiated
-  // AuthorizedRoute is already instantiated
-  // Authorized  render is already instantiated, children is no instantiated
-  // Secured is not instantiated
-  checkIsInstantiation = target => {
-    if (!React.isValidElement(target)) {
-      return target;
-    }
-    return () => target;
-  };
-
-  render() {
-    const { component: Component } = this.state;
-    const { ok, error, promise, ...rest } = this.props;
-    return Component ? (
-      <Component {...rest} />
-    ) : (
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          margin: 'auto',
-          paddingTop: 50,
-          textAlign: 'center',
-        }}
-      >
-        <Spin size="large" />
-      </div>
-    );
-  }
-}

src/components/Authorized/Secured.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import Exception from '../Exception';
-import CheckPermissions from './CheckPermissions';
-/**
- * 默认不能访问任何页面
- * default is "NULL"
- */
-const Exception403 = () => <Exception type="403" />;
-
-// Determine whether the incoming component has been instantiated
-// AuthorizedRoute is already instantiated
-// Authorized  render is already instantiated, children is no instantiated
-// Secured is not instantiated
-const checkIsInstantiation = target => {
-  if (!React.isValidElement(target)) {
-    return target;
-  }
-  return () => target;
-};
-
-/**
- * 用于判断是否拥有权限访问此view权限
- * authority 支持传入 string, function:()=>boolean|Promise
- * e.g. 'user' 只有user用户能访问
- * e.g. 'user,admin' user和 admin 都能访问
- * e.g. ()=>boolean 返回true能访问,返回false不能访问
- * e.g. Promise  then 能访问   catch不能访问
- * e.g. authority support incoming string, function: () => boolean | Promise
- * e.g. 'user' only user user can access
- * e.g. 'user, admin' user and admin can access
- * e.g. () => boolean true to be able to visit, return false can not be accessed
- * e.g. Promise then can not access the visit to catch
- * @param {string | function | Promise} authority
- * @param {ReactNode} error 非必需参数
- */
-const authorize = (authority, error) => {
-  /**
-   * conversion into a class
-   * 防止传入字符串时找不到staticContext造成报错
-   * String parameters can cause staticContext not found error
-   */
-  let classError = false;
-  if (error) {
-    classError = () => error;
-  }
-  if (!authority) {
-    throw new Error('authority is required');
-  }
-  return function decideAuthority(target) {
-    const component = CheckPermissions(authority, target, classError || Exception403);
-    return checkIsInstantiation(component);
-  };
-};
-
-export default authorize;

src/components/Authorized/demo/AuthorizedArray.md

@@ -1,23 +0,0 @@
----
-order: 1
-title: 
-  zh-CN: 使用数组作为参数
-  en-US: Use Array as a parameter
----
-
-Use Array as a parameter
-
-```jsx
-import RenderAuthorized from 'ant-design-pro/lib/Authorized';
-import { Alert } from 'antd';
-
-const Authorized = RenderAuthorized('user');
-const noMatch = <Alert message="No permission." type="error" showIcon />;
-
-ReactDOM.render(
-  <Authorized authority={['user', 'admin']} noMatch={noMatch}>
-    <Alert message="Use Array as a parameter passed!" type="success" showIcon />
-  </Authorized>,
-  mountNode,
-);
-```

src/components/Authorized/demo/AuthorizedFunction.md

@@ -1,31 +0,0 @@
----
-order: 2
-title: 
-  zh-CN: 使用方法作为参数
-  en-US: Use function as a parameter
----
-
-Use Function as a parameter
-
-```jsx
-import RenderAuthorized from 'ant-design-pro/lib/Authorized';
-import { Alert } from 'antd';
-
-const Authorized = RenderAuthorized('user');
-const noMatch = <Alert message="No permission." type="error" showIcon />;
-
-const havePermission = () => {
-  return false;
-};
-
-ReactDOM.render(
-  <Authorized authority={havePermission} noMatch={noMatch}>
-    <Alert
-      message="Use Function as a parameter passed!"
-      type="success"
-      showIcon
-    />
-  </Authorized>,
-  mountNode,
-);
-```

src/components/Authorized/demo/basic.md

@@ -1,25 +0,0 @@
----
-order: 0
-title: 
-  zh-CN: 基本使用
-  en-US: Basic use
----
-
-Basic use
-
-```jsx
-import RenderAuthorized from 'ant-design-pro/lib/Authorized';
-import { Alert } from 'antd';
-
-const Authorized = RenderAuthorized('user');
-const noMatch = <Alert message="No permission." type="error" showIcon />;
-
-ReactDOM.render(
-  <div>
-    <Authorized authority="admin" noMatch={noMatch}>
-      <Alert message="user Passed!" type="success" showIcon />
-    </Authorized>
-  </div>,
-  mountNode,
-);
-```

src/components/Authorized/demo/secured.md

@@ -1,28 +0,0 @@
----
-order: 3
-title: 
-  zh-CN: 注解基本使用
-  en-US: Basic use secured
----
-
-secured demo used
-
-```jsx
-import RenderAuthorized from 'ant-design-pro/lib/Authorized';
-import { Alert } from 'antd';
-
-const { Secured } = RenderAuthorized('user');
-
-@Secured('admin')
-class TestSecuredString extends React.Component {
-  render() {
-    <Alert message="user Passed!" type="success" showIcon />;
-  }
-}
-ReactDOM.render(
-  <div>
-    <TestSecuredString />
-  </div>,
-  mountNode,
-);
-```

src/components/Authorized/index.d.ts

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import AuthorizedRoute, { authority } from './AuthorizedRoute';
-export type IReactComponent<P = any> =
-  | React.StatelessComponent<P>
-  | React.ComponentClass<P>
-  | React.ClassicComponentClass<P>;
-
-type Secured = (
-  authority: authority,
-  error?: React.ReactNode
-) => <T extends IReactComponent>(target: T) => T;
-
-type check = <T extends IReactComponent, S extends IReactComponent>(
-  authority: authority,
-  target: T,
-  Exception: S
-) => T | S;
-
-export interface IAuthorizedProps {
-  authority: authority;
-  noMatch?: React.ReactNode;
-}
-
-export class Authorized extends React.Component<IAuthorizedProps, any> {
-  public static Secured: Secured;
-  public static AuthorizedRoute: typeof AuthorizedRoute;
-  public static check: check;
-}
-
-declare function renderAuthorize(currentAuthority: string): typeof Authorized;
-
-export default renderAuthorize;

src/components/Authorized/index.js

@@ -1,11 +0,0 @@
-import Authorized from './Authorized';
-import AuthorizedRoute from './AuthorizedRoute';
-import Secured from './Secured';
-import check from './CheckPermissions';
-import renderAuthorize from './renderAuthorize';
-
-Authorized.Secured = Secured;
-Authorized.AuthorizedRoute = AuthorizedRoute;
-Authorized.check = check;
-
-export default renderAuthorize(Authorized);

src/components/Authorized/index.md

@@ -1,58 +0,0 @@
----
-title:
-  en-US: Authorized
-  zh-CN: Authorized
-subtitle: 权限
-cols: 1
-order: 15
----
-
-权限组件，通过比对现有权限与准入权限，决定相关元素的展示。
-
-## API
-
-### RenderAuthorized
-
-`RenderAuthorized: (currentAuthority: string | () => string) => Authorized`
-
-权限组件默认 export RenderAuthorized 函数，它接收当前权限作为参数，返回一个权限对象，该对象提供以下几种使用方式。
-
-
-### Authorized
-
-最基础的权限控制。
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| children    | 正常渲染的元素，权限判断通过时展示           | ReactNode  | - |
-| authority   | 准入权限/权限判断         | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
-| noMatch     | 权限异常渲染元素，权限判断不通过时展示        | ReactNode  | - |
-
-### Authorized.AuthorizedRoute
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| authority     | 准入权限/权限判断         | `string | array | Promise | (currentAuthority) => boolean | Promise` | - |
-| redirectPath  | 权限异常时重定向的页面路由                | string  | - |
-
-其余参数与 `Route` 相同。
-
-### Authorized.Secured
-
-注解方式，`@Authorized.Secured(authority, error)`
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| authority     | 准入权限/权限判断         | `string | Promise | (currentAuthority) => boolean | Promise` | - |
-| error  | 权限异常时渲染元素                |  ReactNode | <Exception type="403" /> |
-
-### Authorized.check
-
-函数形式的 Authorized，用于某些不能被 HOC 包裹的组件。 `Authorized.check(authority, target, Exception)`
-注意：传入一个 Promise 时，无论正确还是错误返回的都是一个 ReactClass。
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| authority     | 准入权限/权限判断         | `string | Promise | (currentAuthority) => boolean | Promise` | - |
-| target     | 权限判断通过时渲染的元素         | ReactNode | - |
-| Exception  | 权限异常时渲染元素                |  ReactNode | - |

src/components/Authorized/renderAuthorize.js

@@ -1,25 +0,0 @@
-/* eslint-disable import/no-mutable-exports */
-let CURRENT = 'NULL';
-/**
- * use  authority or getAuthority
- * @param {string|()=>String} currentAuthority
- */
-const renderAuthorize = Authorized => currentAuthority => {
-  if (currentAuthority) {
-    if (typeof currentAuthority === 'function') {
-      CURRENT = currentAuthority();
-    }
-    if (
-      Object.prototype.toString.call(currentAuthority) === '[object String]' ||
-      Array.isArray(currentAuthority)
-    ) {
-      CURRENT = currentAuthority;
-    }
-  } else {
-    CURRENT = 'NULL';
-  }
-  return Authorized;
-};
-
-export { CURRENT };
-export default Authorized => renderAuthorize(Authorized);

src/components/AvatarList/AvatarItem.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export interface IAvatarItemProps {
-  tips: React.ReactNode;
-  src: string;
-  style?: React.CSSProperties;
-}
-
-export default class AvatarItem extends React.Component<IAvatarItemProps, any> {
-  constructor(props: IAvatarItemProps);
-}

src/components/AvatarList/demo/maxLength.md

@@ -1,24 +0,0 @@
----
-order: 0
-title: 
-  zh-CN: 要显示的最大项目 
-  en-US: Max Items to Show
----
-
-`maxLength` attribute specifies the maximum number of items to show while `excessItemsStyle` style the excess
-item component.
-
-````jsx
-import AvatarList from 'ant-design-pro/lib/AvatarList';
-
-ReactDOM.render(
-  <AvatarList size="mini" maxLength={3} excessItemsStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
-    <AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
-    <AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-  </AvatarList>
-, mountNode);
-````

src/components/AvatarList/demo/simple.md

@@ -1,20 +0,0 @@
----
-order: 0
-title: 
-  zh-CN: 基础样例 
-  en-US: Basic Usage
----
-
-Simplest of usage.
-
-````jsx
-import AvatarList from 'ant-design-pro/lib/AvatarList';
-
-ReactDOM.render(
-  <AvatarList size="mini">
-    <AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
-    <AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
-    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-  </AvatarList>
-, mountNode);
-````

src/components/AvatarList/index.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import AvatarItem from './AvatarItem';
-
-export interface IAvatarListProps {
-  size?: 'large' | 'small' | 'mini' | 'default';
-  maxLength?: number;
-  excessItemsStyle?: React.CSSProperties;
-  style?: React.CSSProperties;
-  children: React.ReactElement<AvatarItem> | Array<React.ReactElement<AvatarItem>>;
-}
-
-export default class AvatarList extends React.Component<IAvatarListProps, any> {
-  public static Item: typeof AvatarItem;
-}

src/components/AvatarList/index.en-US.md

@@ -1,24 +0,0 @@
----
-title: AvatarList
-order: 1
-cols: 1
----
-
-A list of user's avatar for project or group member list frequently. If a large or small AvatarList is desired, set the `size` property to either `large` or `small` and `mini` respectively. Omit the `size` property for a AvatarList with the default size.
-
-## API
-
-### AvatarList
-
-| Property         | Description           | Type                               | Default   |
-| ---------------- | --------------------- | ---------------------------------- | --------- |
-| size             | size of list          | `large`、`small` 、`mini`, `default` | `default` |
-| maxLength        | max items to show     | number                             | -         |
-| excessItemsStyle | the excess item style | CSSProperties                      | -         |
-
-### AvatarList.Item
-
-| Property | Description                                  | Type      | Default |
-| -------- | -------------------------------------------- | --------- | ------- |
-| tips     | title tips for avatar item                   | ReactNode | -       |
-| src      | the address of the image for an image avatar | string    | -       |

src/components/AvatarList/index.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import { Tooltip, Avatar } from 'antd';
-import classNames from 'classnames';
-
-import styles from './index.less';
-
-const avatarSizeToClassName = size =>
-  classNames(styles.avatarItem, {
-    [styles.avatarItemLarge]: size === 'large',
-    [styles.avatarItemSmall]: size === 'small',
-    [styles.avatarItemMini]: size === 'mini',
-  });
-
-const AvatarList = ({ children, size, maxLength, excessItemsStyle, ...other }) => {
-  const numOfChildren = React.Children.count(children);
-  const numToShow = maxLength >= numOfChildren ? numOfChildren : maxLength;
-
-  const childrenWithProps = React.Children.toArray(children)
-    .slice(0, numToShow)
-    .map(child =>
-      React.cloneElement(child, {
-        size,
-      })
-    );
-
-  if (numToShow < numOfChildren) {
-    const cls = avatarSizeToClassName(size);
-
-    childrenWithProps.push(
-      <li key="exceed" className={cls}>
-        <Avatar size={size} style={excessItemsStyle}>{`+${numOfChildren - maxLength}`}</Avatar>
-      </li>
-    );
-  }
-
-  return (
-    <div {...other} className={styles.avatarList}>
-      <ul> {childrenWithProps} </ul>
-    </div>
-  );
-};
-
-const Item = ({ src, size, tips, onClick = () => {} }) => {
-  const cls = avatarSizeToClassName(size);
-
-  return (
-    <li className={cls} onClick={onClick}>
-      {tips ? (
-        <Tooltip title={tips}>
-          <Avatar src={src} size={size} style={{ cursor: 'pointer' }} />
-        </Tooltip>
-      ) : (
-        <Avatar src={src} size={size} />
-      )}
-    </li>
-  );
-};
-
-AvatarList.Item = Item;
-
-export default AvatarList;

src/components/AvatarList/index.less

@@ -1,50 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.avatarList {
-  display: inline-block;
-  ul {
-    display: inline-block;
-    margin-left: 8px;
-    font-size: 0;
-  }
-}
-
-.avatarItem {
-  display: inline-block;
-  font-size: @font-size-base;
-  margin-left: -8px;
-  width: @avatar-size-base;
-  height: @avatar-size-base;
-  :global {
-    .ant-avatar {
-      border: 1px solid #fff;
-    }
-  }
-}
-
-.avatarItemLarge {
-  width: @avatar-size-lg;
-  height: @avatar-size-lg;
-}
-
-.avatarItemSmall {
-  width: @avatar-size-sm;
-  height: @avatar-size-sm;
-}
-
-.avatarItemMini {
-  width: 20px;
-  height: 20px;
-  :global {
-    .ant-avatar {
-      width: 20px;
-      height: 20px;
-      line-height: 20px;
-
-      .ant-avatar-string {
-        font-size: 12px;
-        line-height: 18px;
-      }
-    }
-  }
-}

src/components/AvatarList/index.test.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import range from 'lodash/range';
-import { mount } from 'enzyme';
-import AvatarList from './index';
-
-const renderItems = numItems =>
-  range(numItems).map(i => (
-    <AvatarList.Item
-      key={i}
-      tips="Jake"
-      src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png"
-    />
-  ));
-
-describe('AvatarList', () => {
-  it('renders all items', () => {
-    const wrapper = mount(<AvatarList>{renderItems(4)}</AvatarList>);
-    expect(wrapper.find('AvatarList').length).toBe(1);
-    expect(wrapper.find('Item').length).toBe(4);
-    expect(wrapper.findWhere(node => node.key() === 'exceed').length).toBe(0);
-  });
-
-  it('renders max of 3 items', () => {
-    const wrapper = mount(<AvatarList maxLength={3}>{renderItems(4)}</AvatarList>);
-    expect(wrapper.find('AvatarList').length).toBe(1);
-    expect(wrapper.find('Item').length).toBe(3);
-    expect(wrapper.findWhere(node => node.key() === 'exceed').length).toBe(1);
-  });
-});

src/components/AvatarList/index.zh-CN.md

@@ -1,25 +0,0 @@
----
-title: AvatarList
-subtitle: 用户头像列表
-order: 1
-cols: 1
----
-
-一组用户头像，常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
-
-## API
-
-### AvatarList
-
-| 参数               | 说明       | 类型                                 | 默认值       |
-| ---------------- | -------- | ---------------------------------- | --------- |
-| size             | 头像大小     | `large`、`small` 、`mini`, `default` | `default` |
-| maxLength        | 要显示的最大项目 | number                             | -         |
-| excessItemsStyle | 多余的项目风格  | CSSProperties                      | -         |
-
-### AvatarList.Item
-
-| 参数   | 说明     | 类型        | 默认值 |
-| ---- | ------ | --------- | --- |
-| tips | 头像展示文案 | ReactNode | -   |
-| src  | 头像图片连接 | string    | -   |

src/components/Charts/Bar/index.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-export interface IBarProps {
-  title: React.ReactNode;
-  color?: string;
-  padding?: [number, number, number, number];
-  height: number;
-  data: Array<{
-    x: string;
-    y: number;
-  }>;
-  autoLabel?: boolean;
-  style?: React.CSSProperties;
-}
-
-export default class Bar extends React.Component<IBarProps, any> {}

src/components/Charts/Bar/index.js

@@ -1,113 +0,0 @@
-import React, { Component } from 'react';
-import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
-import autoHeight from '../autoHeight';
-import styles from '../index.less';
-
-@autoHeight()
-class Bar extends Component {
-  state = {
-    autoHideXLabels: false,
-  };
-
-  componentDidMount() {
-    window.addEventListener('resize', this.resize, { passive: true });
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener('resize', this.resize);
-  }
-
-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleRef = n => {
-    this.node = n;
-  };
-
-  @Bind()
-  @Debounce(400)
-  resize() {
-    if (!this.node) {
-      return;
-    }
-    const canvasWidth = this.node.parentNode.clientWidth;
-    const { data = [], autoLabel = true } = this.props;
-    if (!autoLabel) {
-      return;
-    }
-    const minWidth = data.length * 30;
-    const { autoHideXLabels } = this.state;
-
-    if (canvasWidth <= minWidth) {
-      if (!autoHideXLabels) {
-        this.setState({
-          autoHideXLabels: true,
-        });
-      }
-    } else if (autoHideXLabels) {
-      this.setState({
-        autoHideXLabels: false,
-      });
-    }
-  }
-
-  render() {
-    const {
-      height,
-      title,
-      forceFit = true,
-      data,
-      color = 'rgba(24, 144, 255, 0.85)',
-      padding,
-    } = this.props;
-
-    const { autoHideXLabels } = this.state;
-
-    const scale = {
-      x: {
-        type: 'cat',
-      },
-      y: {
-        min: 0,
-      },
-    };
-
-    const tooltip = [
-      'x*y',
-      (x, y) => ({
-        name: x,
-        value: y,
-      }),
-    ];
-
-    return (
-      <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
-        <div ref={this.handleRef}>
-          {title && <h4 style={{ marginBottom: 20 }}>{title}</h4>}
-          <Chart
-            scale={scale}
-            height={title ? height - 41 : height}
-            forceFit={forceFit}
-            data={data}
-            padding={padding || 'auto'}
-          >
-            <Axis
-              name="x"
-              title={false}
-              label={autoHideXLabels ? false : {}}
-              tickLine={autoHideXLabels ? false : {}}
-            />
-            <Axis name="y" min={0} />
-            <Tooltip showTitle={false} crosshairs={false} />
-            <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
-          </Chart>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default Bar;

src/components/Charts/ChartCard/index.d.ts

@@ -1,14 +0,0 @@
-import { CardProps } from 'antd/lib/card';
-import * as React from 'react';
-
-export interface IChartCardProps extends CardProps {
-  title: React.ReactNode;
-  action?: React.ReactNode;
-  total?: React.ReactNode | number | (() => React.ReactNode | number);
-  footer?: React.ReactNode;
-  contentHeight?: number;
-  avatar?: React.ReactNode;
-  style?: React.CSSProperties;
-}
-
-export default class ChartCard extends React.Component<IChartCardProps, any> {}

src/components/Charts/ChartCard/index.js

@@ -1,82 +0,0 @@
-import React from 'react';
-import { Card } from 'antd';
-import classNames from 'classnames';
-
-import styles from './index.less';
-
-const renderTotal = total => {
-  let totalDom;
-  switch (typeof total) {
-    case 'undefined':
-      totalDom = null;
-      break;
-    case 'function':
-      totalDom = <div className={styles.total}>{total()}</div>;
-      break;
-    default:
-      totalDom = <div className={styles.total}>{total}</div>;
-  }
-  return totalDom;
-};
-
-class ChartCard extends React.PureComponent {
-  renderConnet = () => {
-    const { contentHeight, title, avatar, action, total, footer, children, loading } = this.props;
-    if (loading) {
-      return false;
-    }
-    return (
-      <div className={styles.chartCard}>
-        <div
-          className={classNames(styles.chartTop, {
-            [styles.chartTopMargin]: !children && !footer,
-          })}
-        >
-          <div className={styles.avatar}>{avatar}</div>
-          <div className={styles.metaWrap}>
-            <div className={styles.meta}>
-              <span className={styles.title}>{title}</span>
-              <span className={styles.action}>{action}</span>
-            </div>
-            {renderTotal(total)}
-          </div>
-        </div>
-        {children && (
-          <div className={styles.content} style={{ height: contentHeight || 'auto' }}>
-            <div className={contentHeight && styles.contentFixed}>{children}</div>
-          </div>
-        )}
-        {footer && (
-          <div
-            className={classNames(styles.footer, {
-              [styles.footerMargin]: !children,
-            })}
-          >
-            {footer}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  render() {
-    const {
-      loading = false,
-      contentHeight,
-      title,
-      avatar,
-      action,
-      total,
-      footer,
-      children,
-      ...rest
-    } = this.props;
-    return (
-      <Card loading={loading} bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
-        {this.renderConnet()}
-      </Card>
-    );
-  }
-}
-
-export default ChartCard;

src/components/Charts/ChartCard/index.less

@@ -1,75 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.chartCard {
-  position: relative;
-  .chartTop {
-    position: relative;
-    overflow: hidden;
-    width: 100%;
-  }
-  .chartTopMargin {
-    margin-bottom: 12px;
-  }
-  .chartTopHasMargin {
-    margin-bottom: 20px;
-  }
-  .metaWrap {
-    float: left;
-  }
-  .avatar {
-    position: relative;
-    top: 4px;
-    float: left;
-    margin-right: 20px;
-    img {
-      border-radius: 100%;
-    }
-  }
-  .meta {
-    color: @text-color-secondary;
-    font-size: @font-size-base;
-    line-height: 22px;
-    height: 22px;
-  }
-  .action {
-    cursor: pointer;
-    position: absolute;
-    top: 4px;
-    right: 0;
-    line-height: 1;
-  }
-  .total {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-    white-space: nowrap;
-    color: @heading-color;
-    margin-top: 4px;
-    margin-bottom: 0;
-    font-size: 30px;
-    line-height: 38px;
-    height: 38px;
-  }
-  .content {
-    margin-bottom: 12px;
-    position: relative;
-    width: 100%;
-  }
-  .contentFixed {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-  }
-  .footer {
-    border-top: 1px solid @border-color-split;
-    padding-top: 9px;
-    margin-top: 8px;
-    & > * {
-      position: relative;
-    }
-  }
-  .footerMargin {
-    margin-top: 20px;
-  }
-}

src/components/Charts/Field/index.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export interface IFieldProps {
-  label: React.ReactNode;
-  value: React.ReactNode;
-  style?: React.CSSProperties;
-}
-
-export default class Field extends React.Component<IFieldProps, any> {}

src/components/Charts/Field/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-
-import styles from './index.less';
-
-const Field = ({ label, value, ...rest }) => (
-  <div className={styles.field} {...rest}>
-    <span className={styles.label}>{label}</span>
-    <span className={styles.number}>{value}</span>
-  </div>
-);
-
-export default Field;

src/components/Charts/Field/index.less

@@ -1,17 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.field {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  margin: 0;
-  .label,
-  .number {
-    font-size: @font-size-base;
-    line-height: 22px;
-  }
-  .number {
-    color: @heading-color;
-    margin-left: 8px;
-  }
-}

src/components/Charts/Gauge/index.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface IGaugeProps {
-  title: React.ReactNode;
-  color?: string;
-  height: number;
-  bgColor?: number;
-  percent: number;
-  style?: React.CSSProperties;
-}
-
-export default class Gauge extends React.Component<IGaugeProps, any> {}

src/components/Charts/Gauge/index.js

@@ -1,167 +0,0 @@
-import React from 'react';
-import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
-import autoHeight from '../autoHeight';
-
-const { Arc, Html, Line } = Guide;
-
-const defaultFormatter = val => {
-  switch (val) {
-    case '2':
-      return '差';
-    case '4':
-      return '中';
-    case '6':
-      return '良';
-    case '8':
-      return '优';
-    default:
-      return '';
-  }
-};
-
-Shape.registerShape('point', 'pointer', {
-  drawShape(cfg, group) {
-    let point = cfg.points[0];
-    point = this.parsePoint(point);
-    const center = this.parsePoint({
-      x: 0,
-      y: 0,
-    });
-    group.addShape('line', {
-      attrs: {
-        x1: center.x,
-        y1: center.y,
-        x2: point.x,
-        y2: point.y,
-        stroke: cfg.color,
-        lineWidth: 2,
-        lineCap: 'round',
-      },
-    });
-    return group.addShape('circle', {
-      attrs: {
-        x: center.x,
-        y: center.y,
-        r: 6,
-        stroke: cfg.color,
-        lineWidth: 3,
-        fill: '#fff',
-      },
-    });
-  },
-});
-
-@autoHeight()
-class Gauge extends React.Component {
-  render() {
-    const {
-      title,
-      height,
-      percent,
-      forceFit = true,
-      formatter = defaultFormatter,
-      color = '#2F9CFF',
-      bgColor = '#F0F2F5',
-    } = this.props;
-    const cols = {
-      value: {
-        type: 'linear',
-        min: 0,
-        max: 10,
-        tickCount: 6,
-        nice: true,
-      },
-    };
-    const data = [{ value: percent / 10 }];
-    return (
-      <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
-        <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
-        <Axis name="1" line={null} />
-        <Axis
-          line={null}
-          tickLine={null}
-          subTickLine={null}
-          name="value"
-          zIndex={2}
-          gird={null}
-          label={{
-            offset: -12,
-            formatter,
-            textStyle: {
-              fontSize: 12,
-              fill: 'rgba(0, 0, 0, 0.65)',
-              textAlign: 'center',
-            },
-          }}
-        />
-        <Guide>
-          <Line
-            start={[3, 0.905]}
-            end={[3, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: null,
-              lineWidth: 2,
-            }}
-          />
-          <Line
-            start={[5, 0.905]}
-            end={[5, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: null,
-              lineWidth: 3,
-            }}
-          />
-          <Line
-            start={[7, 0.905]}
-            end={[7, 0.85]}
-            lineStyle={{
-              stroke: color,
-              lineDash: null,
-              lineWidth: 3,
-            }}
-          />
-          <Arc
-            zIndex={0}
-            start={[0, 0.965]}
-            end={[10, 0.965]}
-            style={{
-              stroke: bgColor,
-              lineWidth: 10,
-            }}
-          />
-          <Arc
-            zIndex={1}
-            start={[0, 0.965]}
-            end={[data[0].value, 0.965]}
-            style={{
-              stroke: color,
-              lineWidth: 10,
-            }}
-          />
-          <Html
-            position={['50%', '95%']}
-            html={() => `
-                <div style="width: 300px;text-align: center;font-size: 12px!important;">
-                  <p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
-                  <p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
-                    ${data[0].value * 10}%
-                  </p>
-                </div>`}
-          />
-        </Guide>
-        <Geom
-          line={false}
-          type="point"
-          position="value*1"
-          shape="pointer"
-          color={color}
-          active={false}
-        />
-      </Chart>
-    );
-  }
-}
-
-export default Gauge;

src/components/Charts/MiniArea/index.d.ts

@@ -1,29 +0,0 @@
-import * as React from 'react';
-
-// g2已经更新到3.0
-// 不带的写了
-
-export interface IAxis {
-  title: any;
-  line: any;
-  gridAlign: any;
-  labels: any;
-  tickLine: any;
-  grid: any;
-}
-
-export interface IMiniAreaProps {
-  color?: string;
-  height: number;
-  borderColor?: string;
-  line?: boolean;
-  animate?: boolean;
-  xAxis?: IAxis;
-  yAxis?: IAxis;
-  data: Array<{
-    x: number | string;
-    y: number;
-  }>;
-}
-
-export default class MiniArea extends React.Component<IMiniAreaProps, any> {}

src/components/Charts/MiniArea/index.js

@@ -1,108 +0,0 @@
-import React from 'react';
-import { Chart, Axis, Tooltip, Geom } from 'bizcharts';
-import autoHeight from '../autoHeight';
-import styles from '../index.less';
-
-@autoHeight()
-class MiniArea extends React.PureComponent {
-  render() {
-    const {
-      height,
-      data = [],
-      forceFit = true,
-      color = 'rgba(24, 144, 255, 0.2)',
-      borderColor = '#1089ff',
-      scale = {},
-      borderWidth = 2,
-      line,
-      xAxis,
-      yAxis,
-      animate = true,
-    } = this.props;
-
-    const padding = [36, 5, 30, 5];
-
-    const scaleProps = {
-      x: {
-        type: 'cat',
-        range: [0, 1],
-        ...scale.x,
-      },
-      y: {
-        min: 0,
-        ...scale.y,
-      },
-    };
-
-    const tooltip = [
-      'x*y',
-      (x, y) => ({
-        name: x,
-        value: y,
-      }),
-    ];
-
-    const chartHeight = height + 54;
-
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          {height > 0 && (
-            <Chart
-              animate={animate}
-              scale={scaleProps}
-              height={chartHeight}
-              forceFit={forceFit}
-              data={data}
-              padding={padding}
-            >
-              <Axis
-                key="axis-x"
-                name="x"
-                label={false}
-                line={false}
-                tickLine={false}
-                grid={false}
-                {...xAxis}
-              />
-              <Axis
-                key="axis-y"
-                name="y"
-                label={false}
-                line={false}
-                tickLine={false}
-                grid={false}
-                {...yAxis}
-              />
-              <Tooltip showTitle={false} crosshairs={false} />
-              <Geom
-                type="area"
-                position="x*y"
-                color={color}
-                tooltip={tooltip}
-                shape="smooth"
-                style={{
-                  fillOpacity: 1,
-                }}
-              />
-              {line ? (
-                <Geom
-                  type="line"
-                  position="x*y"
-                  shape="smooth"
-                  color={borderColor}
-                  size={borderWidth}
-                  tooltip={false}
-                />
-              ) : (
-                <span style={{ display: 'none' }} />
-              )}
-            </Chart>
-          )}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default MiniArea;

src/components/Charts/MiniBar/index.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-export interface IMiniBarProps {
-  color?: string;
-  height: number;
-  data: Array<{
-    x: number | string;
-    y: number;
-  }>;
-  style?: React.CSSProperties;
-}
-
-export default class MiniBar extends React.Component<IMiniBarProps, any> {}

src/components/Charts/MiniBar/index.js

@@ -1,51 +0,0 @@
-import React from 'react';
-import { Chart, Tooltip, Geom } from 'bizcharts';
-import autoHeight from '../autoHeight';
-import styles from '../index.less';
-
-@autoHeight()
-class MiniBar extends React.Component {
-  render() {
-    const { height, forceFit = true, color = '#1890FF', data = [] } = this.props;
-
-    const scale = {
-      x: {
-        type: 'cat',
-      },
-      y: {
-        min: 0,
-      },
-    };
-
-    const padding = [36, 5, 30, 5];
-
-    const tooltip = [
-      'x*y',
-      (x, y) => ({
-        name: x,
-        value: y,
-      }),
-    ];
-
-    // for tooltip not to be hide
-    const chartHeight = height + 54;
-
-    return (
-      <div className={styles.miniChart} style={{ height }}>
-        <div className={styles.chartContent}>
-          <Chart
-            scale={scale}
-            height={chartHeight}
-            forceFit={forceFit}
-            data={data}
-            padding={padding}
-          >
-            <Tooltip showTitle={false} crosshairs={false} />
-            <Geom type="interval" position="x*y" color={color} tooltip={tooltip} />
-          </Chart>
-        </div>
-      </div>
-    );
-  }
-}
-export default MiniBar;

src/components/Charts/MiniProgress/index.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export interface IMiniProgressProps {
-  target: number;
-  color?: string;
-  strokeWidth?: number;
-  percent?: number;
-  style?: React.CSSProperties;
-}
-
-export default class MiniProgress extends React.Component<IMiniProgressProps, any> {}

src/components/Charts/MiniProgress/index.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Tooltip } from 'antd';
-
-import styles from './index.less';
-
-const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => (
-  <div className={styles.miniProgress}>
-    <Tooltip title={`目标值: ${target}%`}>
-      <div className={styles.target} style={{ left: target ? `${target}%` : null }}>
-        <span style={{ backgroundColor: color || null }} />
-        <span style={{ backgroundColor: color || null }} />
-      </div>
-    </Tooltip>
-    <div className={styles.progressWrap}>
-      <div
-        className={styles.progress}
-        style={{
-          backgroundColor: color || null,
-          width: percent ? `${percent}%` : null,
-          height: strokeWidth || null,
-        }}
-      />
-    </div>
-  </div>
-);
-
-export default MiniProgress;

src/components/Charts/MiniProgress/index.less

@@ -1,35 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.miniProgress {
-  padding: 5px 0;
-  position: relative;
-  width: 100%;
-  .progressWrap {
-    background-color: @background-color-base;
-    position: relative;
-  }
-  .progress {
-    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
-    border-radius: 1px 0 0 1px;
-    background-color: @primary-color;
-    width: 0;
-    height: 100%;
-  }
-  .target {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    span {
-      border-radius: 100px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 4px;
-      width: 2px;
-    }
-    span:last-child {
-      top: auto;
-      bottom: 0;
-    }
-  }
-}

src/components/Charts/Pie/index.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-export interface IPieProps {
-  animate?: boolean;
-  color?: string;
-  colors?: string[];
-  height: number;
-  hasLegend?: boolean;
-  padding?: [number, number, number, number];
-  percent?: number;
-  data?: Array<{
-    x: string | string;
-    y: number;
-  }>;
-  total?: React.ReactNode | number | (() => React.ReactNode | number);
-  title?: React.ReactNode;
-  tooltip?: boolean;
-  valueFormat?: (value: string) => string | React.ReactNode;
-  subTitle?: React.ReactNode;
-}
-
-export default class Pie extends React.Component<IPieProps, any> {}

src/components/Charts/Pie/index.js

@@ -1,271 +0,0 @@
-import React, { Component } from 'react';
-import { Chart, Tooltip, Geom, Coord } from 'bizcharts';
-import { DataView } from '@antv/data-set';
-import { Divider } from 'antd';
-import classNames from 'classnames';
-import ReactFitText from 'react-fittext';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
-import autoHeight from '../autoHeight';
-
-import styles from './index.less';
-
-/* eslint react/no-danger:0 */
-@autoHeight()
-class Pie extends Component {
-  state = {
-    legendData: [],
-    legendBlock: false,
-  };
-
-  componentDidMount() {
-    window.addEventListener(
-      'resize',
-      () => {
-        this.requestRef = requestAnimationFrame(() => this.resize());
-      },
-      { passive: true }
-    );
-  }
-
-  componentDidUpdate(preProps) {
-    const { data } = this.props;
-    if (data !== preProps.data) {
-      // because of charts data create when rendered
-      // so there is a trick for get rendered time
-      this.getLegendData();
-    }
-  }
-
-  componentWillUnmount() {
-    window.cancelAnimationFrame(this.requestRef);
-    window.removeEventListener('resize', this.resize);
-    this.resize.cancel();
-  }
-
-  getG2Instance = chart => {
-    this.chart = chart;
-    requestAnimationFrame(() => {
-      this.getLegendData();
-      this.resize();
-    });
-  };
-
-  // for custom lengend view
-  getLegendData = () => {
-    if (!this.chart) return;
-    const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
-    if (!geom) return;
-    const items = geom.get('dataArray') || []; // 获取图形对应的
-
-    const legendData = items.map(item => {
-      /* eslint no-underscore-dangle:0 */
-      const origin = item[0]._origin;
-      origin.color = item[0].color;
-      origin.checked = true;
-      return origin;
-    });
-
-    this.setState({
-      legendData,
-    });
-  };
-
-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleLegendClick = (item, i) => {
-    const newItem = item;
-    newItem.checked = !newItem.checked;
-
-    const { legendData } = this.state;
-    legendData[i] = newItem;
-
-    const filteredLegendData = legendData.filter(l => l.checked).map(l => l.x);
-
-    if (this.chart) {
-      this.chart.filter('x', val => filteredLegendData.indexOf(val) > -1);
-    }
-
-    this.setState({
-      legendData,
-    });
-  };
-
-  // for window resize auto responsive legend
-  @Bind()
-  @Debounce(300)
-  resize() {
-    const { hasLegend } = this.props;
-    const { legendBlock } = this.state;
-    if (!hasLegend || !this.root) {
-      window.removeEventListener('resize', this.resize);
-      return;
-    }
-    if (this.root.parentNode.clientWidth <= 380) {
-      if (!legendBlock) {
-        this.setState({
-          legendBlock: true,
-        });
-      }
-    } else if (legendBlock) {
-      this.setState({
-        legendBlock: false,
-      });
-    }
-  }
-
-  render() {
-    const {
-      valueFormat,
-      subTitle,
-      total,
-      hasLegend = false,
-      className,
-      style,
-      height,
-      forceFit = true,
-      percent,
-      color,
-      inner = 0.75,
-      animate = true,
-      colors,
-      lineWidth = 1,
-    } = this.props;
-
-    const { legendData, legendBlock } = this.state;
-    const pieClassName = classNames(styles.pie, className, {
-      [styles.hasLegend]: !!hasLegend,
-      [styles.legendBlock]: legendBlock,
-    });
-
-    const {
-      data: propsData,
-      selected: propsSelected = true,
-      tooltip: propsTooltip = true,
-    } = this.props;
-
-    let data = propsData || [];
-    let selected = propsSelected;
-    let tooltip = propsTooltip;
-
-    const defaultColors = colors;
-    data = data || [];
-    selected = selected || true;
-    tooltip = tooltip || true;
-    let formatColor;
-
-    const scale = {
-      x: {
-        type: 'cat',
-        range: [0, 1],
-      },
-      y: {
-        min: 0,
-      },
-    };
-
-    if (percent || percent === 0) {
-      selected = false;
-      tooltip = false;
-      formatColor = value => {
-        if (value === '占比') {
-          return color || 'rgba(24, 144, 255, 0.85)';
-        }
-        return '#F0F2F5';
-      };
-
-      data = [
-        {
-          x: '占比',
-          y: parseFloat(percent),
-        },
-        {
-          x: '反比',
-          y: 100 - parseFloat(percent),
-        },
-      ];
-    }
-
-    const tooltipFormat = [
-      'x*percent',
-      (x, p) => ({
-        name: x,
-        value: `${(p * 100).toFixed(2)}%`,
-      }),
-    ];
-
-    const padding = [12, 0, 12, 0];
-
-    const dv = new DataView();
-    dv.source(data).transform({
-      type: 'percent',
-      field: 'y',
-      dimension: 'x',
-      as: 'percent',
-    });
-
-    return (
-      <div ref={this.handleRoot} className={pieClassName} style={style}>
-        <ReactFitText maxFontSize={25}>
-          <div className={styles.chart}>
-            <Chart
-              scale={scale}
-              height={height}
-              forceFit={forceFit}
-              data={dv}
-              padding={padding}
-              animate={animate}
-              onGetG2Instance={this.getG2Instance}
-            >
-              {!!tooltip && <Tooltip showTitle={false} />}
-              <Coord type="theta" innerRadius={inner} />
-              <Geom
-                style={{ lineWidth, stroke: '#fff' }}
-                tooltip={tooltip && tooltipFormat}
-                type="intervalStack"
-                position="percent"
-                color={['x', percent || percent === 0 ? formatColor : defaultColors]}
-                selected={selected}
-              />
-            </Chart>
-
-            {(subTitle || total) && (
-              <div className={styles.total}>
-                {subTitle && <h4 className="pie-sub-title">{subTitle}</h4>}
-                {/* eslint-disable-next-line */}
-                {total && (
-                  <div className="pie-stat">{typeof total === 'function' ? total() : total}</div>
-                )}
-              </div>
-            )}
-          </div>
-        </ReactFitText>
-
-        {hasLegend && (
-          <ul className={styles.legend}>
-            {legendData.map((item, i) => (
-              <li key={item.x} onClick={() => this.handleLegendClick(item, i)}>
-                <span
-                  className={styles.dot}
-                  style={{
-                    backgroundColor: !item.checked ? '#aaa' : item.color,
-                  }}
-                />
-                <span className={styles.legendTitle}>{item.x}</span>
-                <Divider type="vertical" />
-                <span className={styles.percent}>
-                  {`${(Number.isNaN(item.percent) ? 0 : item.percent * 100).toFixed(2)}%`}
-                </span>
-                <span className={styles.value}>{valueFormat ? valueFormat(item.y) : item.y}</span>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    );
-  }
-}
-
-export default Pie;

src/components/Charts/Pie/index.less

@@ -1,94 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.pie {
-  position: relative;
-  .chart {
-    position: relative;
-  }
-  &.hasLegend .chart {
-    width: ~'calc(100% - 240px)';
-  }
-  .legend {
-    position: absolute;
-    right: 0;
-    min-width: 200px;
-    top: 50%;
-    transform: translateY(-50%);
-    margin: 0 20px;
-    list-style: none;
-    padding: 0;
-    li {
-      cursor: pointer;
-      margin-bottom: 16px;
-      height: 22px;
-      line-height: 22px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  .dot {
-    border-radius: 8px;
-    display: inline-block;
-    margin-right: 8px;
-    position: relative;
-    top: -1px;
-    height: 8px;
-    width: 8px;
-  }
-  .line {
-    background-color: @border-color-split;
-    display: inline-block;
-    margin-right: 8px;
-    width: 1px;
-    height: 16px;
-  }
-  .legendTitle {
-    color: @text-color;
-  }
-  .percent {
-    color: @text-color-secondary;
-  }
-  .value {
-    position: absolute;
-    right: 0;
-  }
-  .title {
-    margin-bottom: 8px;
-  }
-  .total {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    text-align: center;
-    max-height: 62px;
-    transform: translate(-50%, -50%);
-    & > h4 {
-      color: @text-color-secondary;
-      font-size: 14px;
-      line-height: 22px;
-      height: 22px;
-      margin-bottom: 8px;
-      font-weight: normal;
-    }
-    & > p {
-      color: @heading-color;
-      display: block;
-      font-size: 1.2em;
-      height: 32px;
-      line-height: 32px;
-      white-space: nowrap;
-    }
-  }
-}
-
-.legendBlock {
-  &.hasLegend .chart {
-    width: 100%;
-    margin: 0 0 32px 0;
-  }
-  .legend {
-    position: relative;
-    transform: none;
-  }
-}

src/components/Charts/Radar/index.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-export interface IRadarProps {
-  title?: React.ReactNode;
-  height: number;
-  padding?: [number, number, number, number];
-  hasLegend?: boolean;
-  data: Array<{
-    name: string;
-    label: string;
-    value: string;
-  }>;
-  style?: React.CSSProperties;
-}
-
-export default class Radar extends React.Component<IRadarProps, any> {}

src/components/Charts/Radar/index.js

@@ -1,184 +0,0 @@
-import React, { Component } from 'react';
-import { Chart, Tooltip, Geom, Coord, Axis } from 'bizcharts';
-import { Row, Col } from 'antd';
-import autoHeight from '../autoHeight';
-import styles from './index.less';
-
-/* eslint react/no-danger:0 */
-@autoHeight()
-class Radar extends Component {
-  state = {
-    legendData: [],
-  };
-
-  componentDidMount() {
-    this.getLegendData();
-  }
-
-  componentDidUpdate(preProps) {
-    const { data } = this.props;
-    if (data !== preProps.data) {
-      this.getLegendData();
-    }
-  }
-
-  getG2Instance = chart => {
-    this.chart = chart;
-  };
-
-  // for custom lengend view
-  getLegendData = () => {
-    if (!this.chart) return;
-    const geom = this.chart.getAllGeoms()[0]; // 获取所有的图形
-    if (!geom) return;
-    const items = geom.get('dataArray') || []; // 获取图形对应的
-
-    const legendData = items.map(item => {
-      // eslint-disable-next-line
-      const origins = item.map(t => t._origin);
-      const result = {
-        name: origins[0].name,
-        color: item[0].color,
-        checked: true,
-        value: origins.reduce((p, n) => p + n.value, 0),
-      };
-
-      return result;
-    });
-
-    this.setState({
-      legendData,
-    });
-  };
-
-  handleRef = n => {
-    this.node = n;
-  };
-
-  handleLegendClick = (item, i) => {
-    const newItem = item;
-    newItem.checked = !newItem.checked;
-
-    const { legendData } = this.state;
-    legendData[i] = newItem;
-
-    const filteredLegendData = legendData.filter(l => l.checked).map(l => l.name);
-
-    if (this.chart) {
-      this.chart.filter('name', val => filteredLegendData.indexOf(val) > -1);
-      this.chart.repaint();
-    }
-
-    this.setState({
-      legendData,
-    });
-  };
-
-  render() {
-    const defaultColors = [
-      '#1890FF',
-      '#FACC14',
-      '#2FC25B',
-      '#8543E0',
-      '#F04864',
-      '#13C2C2',
-      '#fa8c16',
-      '#a0d911',
-    ];
-
-    const {
-      data = [],
-      height = 0,
-      title,
-      hasLegend = false,
-      forceFit = true,
-      tickCount = 5,
-      padding = [35, 30, 16, 30],
-      animate = true,
-      colors = defaultColors,
-    } = this.props;
-
-    const { legendData } = this.state;
-
-    const scale = {
-      value: {
-        min: 0,
-        tickCount,
-      },
-    };
-
-    const chartHeight = height - (hasLegend ? 80 : 22);
-
-    return (
-      <div className={styles.radar} style={{ height }}>
-        {title && <h4>{title}</h4>}
-        <Chart
-          scale={scale}
-          height={chartHeight}
-          forceFit={forceFit}
-          data={data}
-          padding={padding}
-          animate={animate}
-          onGetG2Instance={this.getG2Instance}
-        >
-          <Tooltip />
-          <Coord type="polar" />
-          <Axis
-            name="label"
-            line={null}
-            tickLine={null}
-            grid={{
-              lineStyle: {
-                lineDash: null,
-              },
-              hideFirstLine: false,
-            }}
-          />
-          <Axis
-            name="value"
-            grid={{
-              type: 'polygon',
-              lineStyle: {
-                lineDash: null,
-              },
-            }}
-          />
-          <Geom type="line" position="label*value" color={['name', colors]} size={1} />
-          <Geom
-            type="point"
-            position="label*value"
-            color={['name', colors]}
-            shape="circle"
-            size={3}
-          />
-        </Chart>
-        {hasLegend && (
-          <Row className={styles.legend}>
-            {legendData.map((item, i) => (
-              <Col
-                span={24 / legendData.length}
-                key={item.name}
-                onClick={() => this.handleLegendClick(item, i)}
-              >
-                <div className={styles.legendItem}>
-                  <p>
-                    <span
-                      className={styles.dot}
-                      style={{
-                        backgroundColor: !item.checked ? '#aaa' : item.color,
-                      }}
-                    />
-                    <span>{item.name}</span>
-                  </p>
-                  <h6>{item.value}</h6>
-                </div>
-              </Col>
-            ))}
-          </Row>
-        )}
-      </div>
-    );
-  }
-}
-
-export default Radar;

src/components/Charts/Radar/index.less

@@ -1,46 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.radar {
-  .legend {
-    margin-top: 16px;
-    .legendItem {
-      position: relative;
-      text-align: center;
-      cursor: pointer;
-      color: @text-color-secondary;
-      line-height: 22px;
-      p {
-        margin: 0;
-      }
-      h6 {
-        color: @heading-color;
-        padding-left: 16px;
-        font-size: 24px;
-        line-height: 32px;
-        margin-top: 4px;
-        margin-bottom: 0;
-      }
-      &:after {
-        background-color: @border-color-split;
-        position: absolute;
-        top: 8px;
-        right: 0;
-        height: 40px;
-        width: 1px;
-        content: '';
-      }
-    }
-    > :last-child .legendItem:after {
-      display: none;
-    }
-    .dot {
-      border-radius: 6px;
-      display: inline-block;
-      margin-right: 6px;
-      position: relative;
-      top: -1px;
-      height: 6px;
-      width: 6px;
-    }
-  }
-}

src/components/Charts/TagCloud/index.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface ITagCloudProps {
-  data: Array<{
-    name: string;
-    value: number;
-  }>;
-  height: number;
-  style?: React.CSSProperties;
-}
-
-export default class TagCloud extends React.Component<ITagCloudProps, any> {}

src/components/Charts/TagCloud/index.js

@@ -1,182 +0,0 @@
-import React, { Component } from 'react';
-import { Chart, Geom, Coord, Shape, Tooltip } from 'bizcharts';
-import DataSet from '@antv/data-set';
-import Debounce from 'lodash-decorators/debounce';
-import Bind from 'lodash-decorators/bind';
-import classNames from 'classnames';
-import autoHeight from '../autoHeight';
-import styles from './index.less';
-
-/* eslint no-underscore-dangle: 0 */
-/* eslint no-param-reassign: 0 */
-
-const imgUrl = 'https://gw.alipayobjects.com/zos/rmsportal/gWyeGLCdFFRavBGIDzWk.png';
-
-@autoHeight()
-class TagCloud extends Component {
-  state = {
-    dv: null,
-  };
-
-  componentDidMount() {
-    requestAnimationFrame(() => {
-      this.initTagCloud();
-      this.renderChart();
-    });
-    window.addEventListener('resize', this.resize, { passive: true });
-  }
-
-  componentDidUpdate(preProps) {
-    const { data } = this.props;
-    if (JSON.stringify(preProps.data) !== JSON.stringify(data)) {
-      this.renderChart(this.props);
-    }
-  }
-
-  componentWillUnmount() {
-    this.isUnmount = true;
-    window.cancelAnimationFrame(this.requestRef);
-    window.removeEventListener('resize', this.resize);
-  }
-
-  resize = () => {
-    this.requestRef = requestAnimationFrame(() => {
-      this.renderChart();
-    });
-  };
-
-  saveRootRef = node => {
-    this.root = node;
-  };
-
-  initTagCloud = () => {
-    function getTextAttrs(cfg) {
-      return Object.assign(
-        {},
-        {
-          fillOpacity: cfg.opacity,
-          fontSize: cfg.origin._origin.size,
-          rotate: cfg.origin._origin.rotate,
-          text: cfg.origin._origin.text,
-          textAlign: 'center',
-          fontFamily: cfg.origin._origin.font,
-          fill: cfg.color,
-          textBaseline: 'Alphabetic',
-        },
-        cfg.style
-      );
-    }
-
-    // 给point注册一个词云的shape
-    Shape.registerShape('point', 'cloud', {
-      drawShape(cfg, container) {
-        const attrs = getTextAttrs(cfg);
-        return container.addShape('text', {
-          attrs: Object.assign(attrs, {
-            x: cfg.x,
-            y: cfg.y,
-          }),
-        });
-      },
-    });
-  };
-
-  @Bind()
-  @Debounce(500)
-  renderChart(nextProps) {
-    // const colors = ['#1890FF', '#41D9C7', '#2FC25B', '#FACC14', '#9AE65C'];
-    const { data, height } = nextProps || this.props;
-
-    if (data.length < 1 || !this.root) {
-      return;
-    }
-
-    const h = height;
-    const w = this.root.offsetWidth;
-
-    const onload = () => {
-      const dv = new DataSet.View().source(data);
-      const range = dv.range('value');
-      const [min, max] = range;
-      dv.transform({
-        type: 'tag-cloud',
-        fields: ['name', 'value'],
-        imageMask: this.imageMask,
-        font: 'Verdana',
-        size: [w, h], // 宽高设置最好根据 imageMask 做调整
-        padding: 0,
-        timeInterval: 5000, // max execute time
-        rotate() {
-          return 0;
-        },
-        fontSize(d) {
-          // eslint-disable-next-line
-          return Math.pow((d.value - min) / (max - min), 2) * (17.5 - 5) + 5;
-        },
-      });
-
-      if (this.isUnmount) {
-        return;
-      }
-
-      this.setState({
-        dv,
-        w,
-        h,
-      });
-    };
-
-    if (!this.imageMask) {
-      this.imageMask = new Image();
-      this.imageMask.crossOrigin = '';
-      this.imageMask.src = imgUrl;
-
-      this.imageMask.onload = onload;
-    } else {
-      onload();
-    }
-  }
-
-  render() {
-    const { className, height } = this.props;
-    const { dv, w, h } = this.state;
-
-    return (
-      <div
-        className={classNames(styles.tagCloud, className)}
-        style={{ width: '100%', height }}
-        ref={this.saveRootRef}
-      >
-        {dv && (
-          <Chart
-            width={w}
-            height={h}
-            data={dv}
-            padding={0}
-            scale={{
-              x: { nice: false },
-              y: { nice: false },
-            }}
-          >
-            <Tooltip showTitle={false} />
-            <Coord reflect="y" />
-            <Geom
-              type="point"
-              position="x*y"
-              color="text"
-              shape="cloud"
-              tooltip={[
-                'text*value',
-                function trans(text, value) {
-                  return { name: text, value };
-                },
-              ]}
-            />
-          </Chart>
-        )}
-      </div>
-    );
-  }
-}
-
-export default TagCloud;

src/components/Charts/TagCloud/index.less

@@ -1,6 +0,0 @@
-.tagCloud {
-  overflow: hidden;
-  canvas {
-    transform-origin: 0 0;
-  }
-}

src/components/Charts/TimelineChart/index.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-export interface ITimelineChartProps {
-  data: Array<{
-    x: number;
-    y1: number;
-    y2?: number;
-  }>;
-  titleMap: { y1: string; y2?: string };
-  padding?: [number, number, number, number];
-  height?: number;
-  style?: React.CSSProperties;
-}
-
-export default class TimelineChart extends React.Component<ITimelineChartProps, any> {}

src/components/Charts/TimelineChart/index.js

@@ -1,120 +0,0 @@
-import React from 'react';
-import { Chart, Tooltip, Geom, Legend, Axis } from 'bizcharts';
-import DataSet from '@antv/data-set';
-import Slider from 'bizcharts-plugin-slider';
-import autoHeight from '../autoHeight';
-import styles from './index.less';
-
-@autoHeight()
-class TimelineChart extends React.Component {
-  render() {
-    const {
-      title,
-      height = 400,
-      padding = [60, 20, 40, 40],
-      titleMap = {
-        y1: 'y1',
-        y2: 'y2',
-      },
-      borderWidth = 2,
-      data: sourceData,
-    } = this.props;
-
-    const data = Array.isArray(sourceData) ? sourceData : [{ x: 0, y1: 0, y2: 0 }];
-
-    data.sort((a, b) => a.x - b.x);
-
-    let max;
-    if (data[0] && data[0].y1 && data[0].y2) {
-      max = Math.max(
-        [...data].sort((a, b) => b.y1 - a.y1)[0].y1,
-        [...data].sort((a, b) => b.y2 - a.y2)[0].y2
-      );
-    }
-
-    const ds = new DataSet({
-      state: {
-        start: data[0].x,
-        end: data[data.length - 1].x,
-      },
-    });
-
-    const dv = ds.createView();
-    dv.source(data)
-      .transform({
-        type: 'filter',
-        callback: obj => {
-          const date = obj.x;
-          return date <= ds.state.end && date >= ds.state.start;
-        },
-      })
-      .transform({
-        type: 'map',
-        callback(row) {
-          const newRow = { ...row };
-          newRow[titleMap.y1] = row.y1;
-          newRow[titleMap.y2] = row.y2;
-          return newRow;
-        },
-      })
-      .transform({
-        type: 'fold',
-        fields: [titleMap.y1, titleMap.y2], // 展开字段集
-        key: 'key', // key字段
-        value: 'value', // value字段
-      });
-
-    const timeScale = {
-      type: 'time',
-      tickInterval: 60 * 60 * 1000,
-      mask: 'HH:mm',
-      range: [0, 1],
-    };
-
-    const cols = {
-      x: timeScale,
-      value: {
-        max,
-        min: 0,
-      },
-    };
-
-    const SliderGen = () => (
-      <Slider
-        padding={[0, padding[1] + 20, 0, padding[3]]}
-        width="auto"
-        height={26}
-        xAxis="x"
-        yAxis="y1"
-        scales={{ x: timeScale }}
-        data={data}
-        start={ds.state.start}
-        end={ds.state.end}
-        backgroundChart={{ type: 'line' }}
-        onChange={({ startValue, endValue }) => {
-          ds.setState('start', startValue);
-          ds.setState('end', endValue);
-        }}
-      />
-    );
-
-    return (
-      <div className={styles.timelineChart} style={{ height: height + 30 }}>
-        <div>
-          {title && <h4>{title}</h4>}
-          <Chart height={height} padding={padding} data={dv} scale={cols} forceFit>
-            <Axis name="x" />
-            <Tooltip />
-            <Legend name="key" position="top" />
-            <Geom type="line" position="x*value" size={borderWidth} color="key" />
-          </Chart>
-          <div style={{ marginRight: -20 }}>
-            <SliderGen />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default TimelineChart;

src/components/Charts/TimelineChart/index.less

@@ -1,3 +0,0 @@
-.timelineChart {
-  background: #fff;
-}

src/components/Charts/WaterWave/index.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export interface IWaterWaveProps {
-  title: React.ReactNode;
-  color?: string;
-  height: number;
-  percent: number;
-  style?: React.CSSProperties;
-}
-
-export default class WaterWave extends React.Component<IWaterWaveProps, any> {}

src/components/Charts/WaterWave/index.js

@@ -1,213 +0,0 @@
-import React, { PureComponent } from 'react';
-import autoHeight from '../autoHeight';
-import styles from './index.less';
-
-/* eslint no-return-assign: 0 */
-/* eslint no-mixed-operators: 0 */
-// riddle: https://riddle.alibaba-inc.com/riddles/2d9a4b90
-
-@autoHeight()
-class WaterWave extends PureComponent {
-  state = {
-    radio: 1,
-  };
-
-  componentDidMount() {
-    this.renderChart();
-    this.resize();
-    window.addEventListener(
-      'resize',
-      () => {
-        requestAnimationFrame(() => this.resize());
-      },
-      { passive: true }
-    );
-  }
-
-  componentDidUpdate(props) {
-    const { percent } = this.props;
-    if (props.percent !== percent) {
-      // 不加这个会造成绘制缓慢
-      this.renderChart('update');
-    }
-  }
-
-  componentWillUnmount() {
-    cancelAnimationFrame(this.timer);
-    if (this.node) {
-      this.node.innerHTML = '';
-    }
-    window.removeEventListener('resize', this.resize);
-  }
-
-  resize = () => {
-    if (this.root) {
-      const { height } = this.props;
-      const { offsetWidth } = this.root.parentNode;
-      this.setState({
-        radio: offsetWidth < height ? offsetWidth / height : 1,
-      });
-    }
-  };
-
-  renderChart(type) {
-    const { percent, color = '#1890FF' } = this.props;
-    const data = percent / 100;
-    const self = this;
-    cancelAnimationFrame(this.timer);
-
-    if (!this.node || (data !== 0 && !data)) {
-      return;
-    }
-
-    const canvas = this.node;
-    const ctx = canvas.getContext('2d');
-    const canvasWidth = canvas.width;
-    const canvasHeight = canvas.height;
-    const radius = canvasWidth / 2;
-    const lineWidth = 2;
-    const cR = radius - lineWidth;
-
-    ctx.beginPath();
-    ctx.lineWidth = lineWidth * 2;
-
-    const axisLength = canvasWidth - lineWidth;
-    const unit = axisLength / 8;
-    const range = 0.2; // 振幅
-    let currRange = range;
-    const xOffset = lineWidth;
-    let sp = 0; // 周期偏移量
-    let currData = 0;
-    const waveupsp = 0.005; // 水波上涨速度
-
-    let arcStack = [];
-    const bR = radius - lineWidth;
-    const circleOffset = -(Math.PI / 2);
-    let circleLock = true;
-
-    for (let i = circleOffset; i < circleOffset + 2 * Math.PI; i += 1 / (8 * Math.PI)) {
-      arcStack.push([radius + bR * Math.cos(i), radius + bR * Math.sin(i)]);
-    }
-
-    const cStartPoint = arcStack.shift();
-    ctx.strokeStyle = color;
-    ctx.moveTo(cStartPoint[0], cStartPoint[1]);
-
-    function drawSin() {
-      ctx.beginPath();
-      ctx.save();
-
-      const sinStack = [];
-      for (let i = xOffset; i <= xOffset + axisLength; i += 20 / axisLength) {
-        const x = sp + (xOffset + i) / unit;
-        const y = Math.sin(x) * currRange;
-        const dx = i;
-        const dy = 2 * cR * (1 - currData) + (radius - cR) - unit * y;
-
-        ctx.lineTo(dx, dy);
-        sinStack.push([dx, dy]);
-      }
-
-      const startPoint = sinStack.shift();
-
-      ctx.lineTo(xOffset + axisLength, canvasHeight);
-      ctx.lineTo(xOffset, canvasHeight);
-      ctx.lineTo(startPoint[0], startPoint[1]);
-
-      const gradient = ctx.createLinearGradient(0, 0, 0, canvasHeight);
-      gradient.addColorStop(0, '#ffffff');
-      gradient.addColorStop(1, color);
-      ctx.fillStyle = gradient;
-      ctx.fill();
-      ctx.restore();
-    }
-
-    function render() {
-      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
-      if (circleLock && type !== 'update') {
-        if (arcStack.length) {
-          const temp = arcStack.shift();
-          ctx.lineTo(temp[0], temp[1]);
-          ctx.stroke();
-        } else {
-          circleLock = false;
-          ctx.lineTo(cStartPoint[0], cStartPoint[1]);
-          ctx.stroke();
-          arcStack = null;
-
-          ctx.globalCompositeOperation = 'destination-over';
-          ctx.beginPath();
-          ctx.lineWidth = lineWidth;
-          ctx.arc(radius, radius, bR, 0, 2 * Math.PI, 1);
-
-          ctx.beginPath();
-          ctx.save();
-          ctx.arc(radius, radius, radius - 3 * lineWidth, 0, 2 * Math.PI, 1);
-
-          ctx.restore();
-          ctx.clip();
-          ctx.fillStyle = color;
-        }
-      } else {
-        if (data >= 0.85) {
-          if (currRange > range / 4) {
-            const t = range * 0.01;
-            currRange -= t;
-          }
-        } else if (data <= 0.1) {
-          if (currRange < range * 1.5) {
-            const t = range * 0.01;
-            currRange += t;
-          }
-        } else {
-          if (currRange <= range) {
-            const t = range * 0.01;
-            currRange += t;
-          }
-          if (currRange >= range) {
-            const t = range * 0.01;
-            currRange -= t;
-          }
-        }
-        if (data - currData > 0) {
-          currData += waveupsp;
-        }
-        if (data - currData < 0) {
-          currData -= waveupsp;
-        }
-
-        sp += 0.07;
-        drawSin();
-      }
-      self.timer = requestAnimationFrame(render);
-    }
-    render();
-  }
-
-  render() {
-    const { radio } = this.state;
-    const { percent, title, height } = this.props;
-    return (
-      <div
-        className={styles.waterWave}
-        ref={n => (this.root = n)}
-        style={{ transform: `scale(${radio})` }}
-      >
-        <div style={{ width: height, height, overflow: 'hidden' }}>
-          <canvas
-            className={styles.waterWaveCanvasWrapper}
-            ref={n => (this.node = n)}
-            width={height * 2}
-            height={height * 2}
-          />
-        </div>
-        <div className={styles.text} style={{ width: height }}>
-          {title && <span>{title}</span>}
-          <h4>{percent}%</h4>
-        </div>
-      </div>
-    );
-  }
-}
-
-export default WaterWave;

src/components/Charts/WaterWave/index.less

@@ -1,28 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.waterWave {
-  display: inline-block;
-  position: relative;
-  transform-origin: left;
-  .text {
-    position: absolute;
-    left: 0;
-    top: 32px;
-    text-align: center;
-    width: 100%;
-    span {
-      color: @text-color-secondary;
-      font-size: 14px;
-      line-height: 22px;
-    }
-    h4 {
-      color: @heading-color;
-      line-height: 32px;
-      font-size: 24px;
-    }
-  }
-  .waterWaveCanvasWrapper {
-    transform: scale(0.5);
-    transform-origin: 0 0;
-  }
-}

src/components/Charts/autoHeight.js

@@ -1,62 +0,0 @@
-/* eslint eqeqeq: 0 */
-import React from 'react';
-
-function computeHeight(node) {
-  const totalHeight = parseInt(getComputedStyle(node).height, 10);
-  const padding =
-    parseInt(getComputedStyle(node).paddingTop, 10) +
-    parseInt(getComputedStyle(node).paddingBottom, 10);
-  return totalHeight - padding;
-}
-
-function getAutoHeight(n) {
-  if (!n) {
-    return 0;
-  }
-
-  let node = n;
-
-  let height = computeHeight(node);
-
-  while (!height) {
-    node = node.parentNode;
-    if (node) {
-      height = computeHeight(node);
-    } else {
-      break;
-    }
-  }
-
-  return height;
-}
-
-const autoHeight = () => WrappedComponent =>
-  class extends React.Component {
-    state = {
-      computedHeight: 0,
-    };
-
-    componentDidMount() {
-      const { height } = this.props;
-      if (!height) {
-        const h = getAutoHeight(this.root);
-        // eslint-disable-next-line
-        this.setState({ computedHeight: h });
-      }
-    }
-
-    handleRoot = node => {
-      this.root = node;
-    };
-
-    render() {
-      const { height } = this.props;
-      const { computedHeight } = this.state;
-      const h = height || computedHeight;
-      return (
-        <div ref={this.handleRoot}>{h > 0 && <WrappedComponent {...this.props} height={h} />}</div>
-      );
-    }
-  };
-
-export default autoHeight;

src/components/Charts/bizcharts.d.ts

@@ -1,3 +0,0 @@
-import * as BizChart from 'bizcharts';
-
-export = BizChart;

src/components/Charts/bizcharts.js

@@ -1,3 +0,0 @@
-import * as BizChart from 'bizcharts';
-
-export default BizChart;

src/components/Charts/demo/bar.md

@@ -1,26 +0,0 @@
----
-order: 4
-title: 柱状图
----
-
-通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。
-
-````jsx
-import { Bar } from 'ant-design-pro/lib/Charts';
-
-const salesData = [];
-for (let i = 0; i < 12; i += 1) {
-  salesData.push({
-    x: `${i + 1}月`,
-    y: Math.floor(Math.random() * 1000) + 200,
-  });
-}
-
-ReactDOM.render(
-  <Bar
-    height={200}
-    title="销售额趋势"
-    data={salesData}
-  />
-, mountNode);
-````

src/components/Charts/demo/chart-card.md

@@ -1,95 +0,0 @@
----
-order: 1
-title: 图表卡片
----
-
-用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
-
-```jsx
-import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
-import Trend from 'ant-design-pro/lib/Trend';
-import { Row, Col, Icon, Tooltip } from 'antd';
-import numeral from 'numeral';
-
-ReactDOM.render(
-  <Row>
-    <Col span={24}>
-      <ChartCard
-        title="销售额"
-        action={
-          <Tooltip title="指标说明">
-            <Icon type="info-circle-o" />
-          </Tooltip>
-        }
-        total={() => (
-          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
-        )}
-        footer={
-          <Field label="日均销售额" value={numeral(12423).format("0,0")} />
-        }
-        contentHeight={46}
-      >
-        <span>
-          周同比
-          <Trend flag="up" style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}>
-            12%
-          </Trend>
-        </span>
-        <span style={{ marginLeft: 16 }}>
-          日环比
-          <Trend
-            flag="down"
-            style={{ marginLeft: 8, color: "rgba(0,0,0,.85)" }}
-          >
-            11%
-          </Trend>
-        </span>
-      </ChartCard>
-    </Col>
-    <Col span={24} style={{ marginTop: 24 }}>
-      <ChartCard
-        title="移动指标"
-        avatar={
-          <img
-            style={{ width: 56, height: 56 }}
-            src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png"
-            alt="indicator"
-          />
-        }
-        action={
-          <Tooltip title="指标说明">
-            <Icon type="info-circle-o" />
-          </Tooltip>
-        }
-        total={() => (
-          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
-        )}
-        footer={
-          <Field label="日均销售额" value={numeral(12423).format("0,0")} />
-        }
-      />
-    </Col>
-    <Col span={24} style={{ marginTop: 24 }}>
-      <ChartCard
-        title="移动指标"
-        avatar={
-          <img
-            alt="indicator"
-            style={{ width: 56, height: 56 }}
-            src="https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png"
-          />
-        }
-        action={
-          <Tooltip title="指标说明">
-            <Icon type="info-circle-o" />
-          </Tooltip>
-        }
-        total={() => (
-          <span dangerouslySetInnerHTML={{ __html: yuan(126560) }} />
-        )}
-      />
-    </Col>
-  </Row>,
-  mountNode,
-);
-```

src/components/Charts/demo/gauge.md

@@ -1,18 +0,0 @@
----
-order: 7
-title: 仪表盘 
----
-
-仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。
-
-````jsx
-import { Gauge } from 'ant-design-pro/lib/Charts';
-
-ReactDOM.render(
-  <Gauge
-    title="核销率"
-    height={164}
-    percent={87}
-  />
-, mountNode);
-````

src/components/Charts/demo/mini-area.md

@@ -1,28 +0,0 @@
----
-order: 2
-col: 2
-title: 迷你区域图
----
-
-````jsx
-import { MiniArea } from 'ant-design-pro/lib/Charts';
-import moment from 'moment';
-
-const visitData = [];
-const beginDay = new Date().getTime();
-for (let i = 0; i < 20; i += 1) {
-  visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
-    y: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-ReactDOM.render(
-  <MiniArea
-    line
-    color="#cceafe"
-    height={45}
-    data={visitData}
-  />
-, mountNode);
-````

src/components/Charts/demo/mini-bar.md

@@ -1,28 +0,0 @@
----
-order: 2
-col: 2
-title: 迷你柱状图
----
-
-迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。
-
-````jsx
-import { MiniBar } from 'ant-design-pro/lib/Charts';
-import moment from 'moment';
-
-const visitData = [];
-const beginDay = new Date().getTime();
-for (let i = 0; i < 20; i += 1) {
-  visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
-    y: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-ReactDOM.render(
-  <MiniBar
-    height={45}
-    data={visitData}
-  />
-, mountNode);
-````

src/components/Charts/demo/mini-pie.md

@@ -1,16 +0,0 @@
----
-order: 6
-title: 迷你饼状图
----
-
-通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展
-现更多业务场景。
-
-```jsx
-import { Pie } from 'ant-design-pro/lib/Charts';
-
-ReactDOM.render(
-  <Pie percent={28} subTitle="中式快餐" total="28%" height={140} />,
-  mountNode
-);
-```

src/components/Charts/demo/mini-progress.md

@@ -1,12 +0,0 @@
----
-order: 3
-title: 迷你进度条
----
-
-````jsx
-import { MiniProgress } from 'ant-design-pro/lib/Charts';
-
-ReactDOM.render(
-  <MiniProgress percent={78} strokeWidth={8} target={80} />
-, mountNode);
-````

src/components/Charts/demo/mix.md

@@ -1,84 +0,0 @@
----
-order: 0
-title: 图表套件组合展示
----
-
-利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
-
-````jsx
-import { ChartCard, Field, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
-import Trend from 'ant-design-pro/lib/Trend';
-import NumberInfo from 'ant-design-pro/lib/NumberInfo';
-import { Row, Col, Icon, Tooltip } from 'antd';
-import numeral from 'numeral';
-import moment from 'moment';
-
-const visitData = [];
-const beginDay = new Date().getTime();
-for (let i = 0; i < 20; i += 1) {
-  visitData.push({
-    x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
-    y: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-ReactDOM.render(
-  <Row>
-    <Col span={24}>
-      <ChartCard
-        title="搜索用户数量"
-        total={numeral(8846).format('0,0')}
-        contentHeight={134}
-      >
-        <NumberInfo
-          subTitle={<span>本周访问</span>}
-          total={numeral(12321).format('0,0')}
-          status="up"
-          subTotal={17.1}
-        />
-        <MiniArea
-          line
-          height={45}
-          data={visitData}
-        />
-      </ChartCard>
-    </Col>
-    <Col span={24} style={{ marginTop: 24 }}>
-      <ChartCard
-        title="访问量"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total={numeral(8846).format('0,0')}
-        footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
-        contentHeight={46}
-      >
-        <MiniBar
-          height={46}
-          data={visitData}
-        />
-      </ChartCard>
-    </Col>
-    <Col span={24} style={{ marginTop: 24 }}>
-      <ChartCard
-        title="线上购物转化率"
-        action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
-        total="78%"
-        footer={
-          <div>
-            <span>
-              周同比
-              <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
-            </span>
-            <span style={{ marginLeft: 16 }}>
-              日环比
-              <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
-            </span>
-          </div>
-        }
-        contentHeight={46}
-      >
-        <MiniProgress percent={78} strokeWidth={8} target={80} />
-      </ChartCard>
-    </Col>
-  </Row>
-, mountNode);
-````

src/components/Charts/demo/pie.md

@@ -1,54 +0,0 @@
----
-order: 5
-title: 饼状图
----
-
-```jsx
-import { Pie, yuan } from 'ant-design-pro/lib/Charts';
-
-const salesPieData = [
-  {
-    x: '家用电器',
-    y: 4544,
-  },
-  {
-    x: '食用酒水',
-    y: 3321,
-  },
-  {
-    x: '个护健康',
-    y: 3113,
-  },
-  {
-    x: '服饰箱包',
-    y: 2341,
-  },
-  {
-    x: '母婴产品',
-    y: 1231,
-  },
-  {
-    x: '其他',
-    y: 1231,
-  },
-];
-
-ReactDOM.render(
-  <Pie
-    hasLegend
-    title="销售额"
-    subTitle="销售额"
-    total={() => (
-      <span
-        dangerouslySetInnerHTML={{
-          __html: yuan(salesPieData.reduce((pre, now) => now.y + pre, 0))
-        }}
-      />
-    )}
-    data={salesPieData}
-    valueFormat={val => <span dangerouslySetInnerHTML={{ __html: yuan(val) }} />}
-    height={294}
-  />,
-  mountNode,
-);
-```

src/components/Charts/demo/radar.md

@@ -1,64 +0,0 @@
----
-order: 7
-title: 雷达图
----
-
-````jsx
-import { Radar, ChartCard } from 'ant-design-pro/lib/Charts';
-
-const radarOriginData = [
-  {
-    name: '个人',
-    ref: 10,
-    koubei: 8,
-    output: 4,
-    contribute: 5,
-    hot: 7,
-  },
-  {
-    name: '团队',
-    ref: 3,
-    koubei: 9,
-    output: 6,
-    contribute: 3,
-    hot: 1,
-  },
-  {
-    name: '部门',
-    ref: 4,
-    koubei: 1,
-    output: 6,
-    contribute: 5,
-    hot: 7,
-  },
-];
-const radarData = [];
-const radarTitleMap = {
-  ref: '引用',
-  koubei: '口碑',
-  output: '产量',
-  contribute: '贡献',
-  hot: '热度',
-};
-radarOriginData.forEach((item) => {
-  Object.keys(item).forEach((key) => {
-    if (key !== 'name') {
-      radarData.push({
-        name: item.name,
-        label: radarTitleMap[key],
-        value: item[key],
-      });
-    }
-  });
-});
-
-ReactDOM.render(
-  <ChartCard title="数据比例">
-    <Radar
-      hasLegend
-      height={286}
-      data={radarData}
-    />
-  </ChartCard>
-, mountNode);
-````

src/components/Charts/demo/tag-cloud.md

@@ -1,25 +0,0 @@
----
-order: 9
-title: 标签云
----
-
-标签云是一套相关的标签以及与此相应的权重展示方式，一般典型的标签云有 30 至 150 个标签，而权重影响使用的字体大小或其他视觉效果。
-
-````jsx
-import { TagCloud } from 'ant-design-pro/lib/Charts';
-
-const tags = [];
-for (let i = 0; i < 50; i += 1) {
-  tags.push({
-    name: `TagClout-Title-${i}`,
-    value: Math.floor((Math.random() * 50)) + 20,
-  });
-}
-
-ReactDOM.render(
-  <TagCloud
-    data={tags}
-    height={200}
-  />
-, mountNode);
-````

src/components/Charts/demo/timeline-chart.md

@@ -1,27 +0,0 @@
----
-order: 9
-title: 带有时间轴的图表
----
-
-使用 `TimelineChart` 组件可以实现带有时间轴的柱状图展现，而其中的 `x` 属性，则是时间值的指向，默认最多支持同时展现两个指标，分别是 `y1` 和 `y2`。
-
-````jsx
-import { TimelineChart } from 'ant-design-pro/lib/Charts';
-
-const chartData = [];
-for (let i = 0; i < 20; i += 1) {
-  chartData.push({
-    x: (new Date().getTime()) + (1000 * 60 * 30 * i),
-    y1: Math.floor(Math.random() * 100) + 1000,
-    y2: Math.floor(Math.random() * 100) + 10,
-  });
-}
-
-ReactDOM.render(
-  <TimelineChart
-    height={200}
-    data={chartData}
-    titleMap={{ y1: '客流量', y2: '支付笔数' }}
-  />
-, mountNode);
-````

src/components/Charts/demo/waterwave.md

@@ -1,20 +0,0 @@
----
-order: 8
-title: 水波图 
----
-
-水波图是一种比例的展示方式，可以更直观的展示关键值的占比。
-
-````jsx
-import { WaterWave } from 'ant-design-pro/lib/Charts';
-
-ReactDOM.render(
-  <div style={{ textAlign: 'center' }}>
-    <WaterWave
-      height={161}
-      title="补贴资金剩余"
-      percent={34}
-    />
-  </div>
-, mountNode);
-````

src/components/Charts/g2.js

@@ -1,15 +0,0 @@
-// 全局 G2 设置
-import { track, setTheme } from 'bizcharts';
-
-track(false);
-
-const config = {
-  defaultColor: '#1089ff',
-  shape: {
-    interval: {
-      fillOpacity: 1,
-    },
-  },
-};
-
-setTheme(config);

src/components/Charts/index.d.ts

@@ -1,17 +0,0 @@
-import * as numeral from 'numeral';
-export { default as ChartCard } from './ChartCard';
-export { default as Bar } from './Bar';
-export { default as Pie } from './Pie';
-export { default as Radar } from './Radar';
-export { default as Gauge } from './Gauge';
-export { default as MiniArea } from './MiniArea';
-export { default as MiniBar } from './MiniBar';
-export { default as MiniProgress } from './MiniProgress';
-export { default as Field } from './Field';
-export { default as WaterWave } from './WaterWave';
-export { default as TagCloud } from './TagCloud';
-export { default as TimelineChart } from './TimelineChart';
-
-declare const yuan: (value: number | string) => string;
-
-export { yuan };

src/components/Charts/index.js

@@ -1,49 +0,0 @@
-import numeral from 'numeral';
-import './g2';
-import ChartCard from './ChartCard';
-import Bar from './Bar';
-import Pie from './Pie';
-import Radar from './Radar';
-import Gauge from './Gauge';
-import MiniArea from './MiniArea';
-import MiniBar from './MiniBar';
-import MiniProgress from './MiniProgress';
-import Field from './Field';
-import WaterWave from './WaterWave';
-import TagCloud from './TagCloud';
-import TimelineChart from './TimelineChart';
-
-const yuan = val => `¥ ${numeral(val).format('0,0')}`;
-
-const Charts = {
-  yuan,
-  Bar,
-  Pie,
-  Gauge,
-  Radar,
-  MiniBar,
-  MiniArea,
-  MiniProgress,
-  ChartCard,
-  Field,
-  WaterWave,
-  TagCloud,
-  TimelineChart,
-};
-
-export {
-  Charts as default,
-  yuan,
-  Bar,
-  Pie,
-  Gauge,
-  Radar,
-  MiniBar,
-  MiniArea,
-  MiniProgress,
-  ChartCard,
-  Field,
-  WaterWave,
-  TagCloud,
-  TimelineChart,
-};

src/components/Charts/index.less

@@ -1,19 +0,0 @@
-.miniChart {
-  position: relative;
-  width: 100%;
-  .chartContent {
-    position: absolute;
-    bottom: -28px;
-    width: 100%;
-    > div {
-      margin: 0 -5px;
-      overflow: hidden;
-    }
-  }
-  .chartLoading {
-    position: absolute;
-    top: 16px;
-    left: 50%;
-    margin-left: -7px;
-  }
-}

src/components/Charts/index.md

@@ -1,132 +0,0 @@
----
-title:
-  en-US: Charts
-  zh-CN: Charts
-subtitle: 图表
-order: 2
-cols: 2
----
-
-Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。
-
-因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。
-
-## API
-
-### ChartCard
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 卡片标题 | ReactNode\|string | - |
-| action | 卡片操作 | ReactNode | - |
-| total | 数据总量 | ReactNode \| number \| function | - |
-| footer | 卡片底部 | ReactNode | - |
-| contentHeight | 内容区域高度 | number | - |
-| avatar | 右侧图标 | React.ReactNode | - |
-### MiniBar
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| color | 图表颜色 | string | `#1890FF` |
-| height | 图表高度 | number | - |
-| data | 数据 | array<{x, y}> | - |
-
-### MiniArea
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| color | 图表颜色 | string | `rgba(24, 144, 255, 0.2)` |
-| borderColor | 图表边颜色 | string | `#1890FF` |
-| height | 图表高度 | number | - |
-| line | 是否显示描边 | boolean | false |
-| animate | 是否显示动画 | boolean | true |
-| xAxis | [x 轴配置](http://antvis.github.io/g2/doc/tutorial/start/axis.html) | object | - |
-| yAxis | [y 轴配置](http://antvis.github.io/g2/doc/tutorial/start/axis.html) | object | - |
-| data | 数据 | array<{x, y}> | - |
-
-### MiniProgress
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| target | 目标比例 | number | - |
-| color | 进度条颜色 | string | - |
-| strokeWidth | 进度条高度 | number | - |
-| percent | 进度比例 | number | - |
-
-### Bar
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
-| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` |
-| height | 图表高度 | number | - |
-| data | 数据 | array<{x, y}> | - |
-| autoLabel | 在宽度不足时，自动隐藏 x 轴的 label | boolean | `true` |
-
-### Pie
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| animate | 是否显示动画 | boolean | true |
-| color | 图表颜色 | string | `rgba(24, 144, 255, 0.85)` |
-| height | 图表高度 | number | - |
-| hasLegend | 是否显示 legend | boolean | `false` |
-| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` |
-| percent | 占比 | number | - |
-| tooltip | 是否显示 tooltip | boolean | true |
-| valueFormat | 显示值的格式化函数 | function | - |
-| title | 图表标题 | ReactNode\|string | - |
-| subTitle | 图表子标题 | ReactNode\|string | - |
-| total | 图标中央的总数 | string | function | - |
-
-### Radar
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| height | 图表高度 | number | - |
-| hasLegend | 是否显示 legend | boolean | `false` |
-| padding | 图表内部间距 | [array](https://github.com/alibaba/BizCharts/blob/master/doc/api/chart.md#7padding-object--number--array-) | `'auto'` |
-| data | 图标数据 | array<{name,label,value}> | - |
-
-### Gauge
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| height | 图表高度 | number | - |
-| color | 图表颜色 | string | `#2F9CFF` |
-| bgColor | 图表背景颜色 | string | `#F0F2F5` |
-| percent | 进度比例 | number | - |
-
-### WaterWave
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 图表标题 | ReactNode\|string | - |
-| height | 图表高度 | number | - |
-| color | 图表颜色 | string | `#1890FF` |
-| percent | 进度比例 | number | - |
-
-### TagCloud
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| data | 标题 | Array<name, value\> | - |
-| height | 高度值 | number | - |
-
-### TimelineChart
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| data | 标题 | Array<x, y1, y2\> | - |
-| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
-| height | 高度值 | number | 400 |
-
-### Field
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| label | 标题 | ReactNode\|string | - |
-| value | 值 | ReactNode\|string | - |

src/components/CountDown/demo/simple.md

@@ -1,24 +0,0 @@
----
-order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
----
-
-## zh-CN
-
-简单的倒计时组件使用。
-
-## en-US
-
-The simplest usage.
-
-````jsx
-import CountDown from 'ant-design-pro/lib/CountDown';
-
-const targetTime = new Date().getTime() + 3900000;
-
-ReactDOM.render(
-  <CountDown style={{ fontSize: 20 }} target={targetTime} />
-, mountNode);
-````

src/components/CountDown/index.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-export interface ICountDownProps {
-  format?: (time: number) => void;
-  target: Date | number;
-  onEnd?: () => void;
-  style?: React.CSSProperties;
-}
-
-export default class CountDown extends React.Component<ICountDownProps, any> {}

src/components/CountDown/index.en-US.md

@@ -1,15 +0,0 @@
----
-title: CountDown
-cols: 1
-order: 3
----
-
-Simple CountDown Component.
-
-## API
-
-| Property | Description | Type | Default |
-|----------|------------------------------------------|-------------|-------|
-| format | Formatter of time | Function(time) |  |
-| target | Target time | Date | - |
-| onEnd |  Countdown to the end callback | funtion | -|

src/components/CountDown/index.js

@@ -1,121 +0,0 @@
-import React, { Component } from 'react';
-
-function fixedZero(val) {
-  return val * 1 < 10 ? `0${val}` : val;
-}
-const initTime = props => {
-  let lastTime = 0;
-  let targetTime = 0;
-  try {
-    if (Object.prototype.toString.call(props.target) === '[object Date]') {
-      targetTime = props.target.getTime();
-    } else {
-      targetTime = new Date(props.target).getTime();
-    }
-  } catch (e) {
-    throw new Error('invalid target prop', e);
-  }
-
-  lastTime = targetTime - new Date().getTime();
-  return {
-    lastTime: lastTime < 0 ? 0 : lastTime,
-  };
-};
-
-class CountDown extends Component {
-  timer = 0;
-
-  interval = 1000;
-
-  constructor(props) {
-    super(props);
-    const { lastTime } = initTime(props);
-    this.state = {
-      lastTime,
-    };
-  }
-
-  static getDerivedStateFromProps(nextProps, preState) {
-    const { lastTime } = initTime(nextProps);
-    if (preState.lastTime !== lastTime) {
-      return {
-        lastTime,
-      };
-    }
-    return null;
-  }
-
-  componentDidMount() {
-    this.tick();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { target } = this.props;
-    if (target !== prevProps.target) {
-      clearTimeout(this.timer);
-      this.tick();
-    }
-  }
-
-  componentWillUnmount() {
-    clearTimeout(this.timer);
-  }
-
-  // defaultFormat = time => (
-  //  <span>{moment(time).format('hh:mm:ss')}</span>
-  // );
-  defaultFormat = time => {
-    const hours = 60 * 60 * 1000;
-    const minutes = 60 * 1000;
-
-    const h = Math.floor(time / hours);
-    const m = Math.floor((time - h * hours) / minutes);
-    const s = Math.floor((time - h * hours - m * minutes) / 1000);
-    return (
-      <span>
-        {fixedZero(h)}:{fixedZero(m)}:{fixedZero(s)}
-      </span>
-    );
-  };
-
-  tick = () => {
-    const { onEnd } = this.props;
-    let { lastTime } = this.state;
-
-    this.timer = setTimeout(() => {
-      if (lastTime < this.interval) {
-        clearTimeout(this.timer);
-        this.setState(
-          {
-            lastTime: 0,
-          },
-          () => {
-            if (onEnd) {
-              onEnd();
-            }
-          }
-        );
-      } else {
-        lastTime -= this.interval;
-        this.setState(
-          {
-            lastTime,
-          },
-          () => {
-            this.tick();
-          }
-        );
-      }
-    }, this.interval);
-  };
-
-  render() {
-    const { format = this.defaultFormat, onEnd, ...rest } = this.props;
-    const { lastTime } = this.state;
-    const result = format(lastTime);
-
-    return <span {...rest}>{result}</span>;
-  }
-}
-
-export default CountDown;

src/components/CountDown/index.zh-CN.md

@@ -1,16 +0,0 @@
----
-title: CountDown 
-subtitle: 倒计时
-cols: 1
-order: 3
----
-
-倒计时组件。
-
-## API
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| format | 时间格式化显示 | Function(time) |  |
-| target | 目标时间 | Date | - |
-| onEnd |  倒计时结束回调 | funtion | -|

src/components/DescriptionList/Description.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-
-export default class Description extends React.Component<
-  {
-    term: React.ReactNode;
-    style?: React.CSSProperties;
-  },
-  any
-> {}

src/components/DescriptionList/Description.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Col } from 'antd';
-import styles from './index.less';
-import responsive from './responsive';
-
-const Description = ({ term, column, children, ...restProps }) => (
-  <Col {...responsive[column]} {...restProps}>
-    {term && <div className={styles.term}>{term}</div>}
-    {children !== null && children !== undefined && <div className={styles.detail}>{children}</div>}
-  </Col>
-);
-
-Description.defaultProps = {
-  term: '',
-};
-
-Description.propTypes = {
-  term: PropTypes.node,
-};
-
-export default Description;

src/components/DescriptionList/DescriptionList.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import { Row } from 'antd';
-import styles from './index.less';
-
-const DescriptionList = ({
-  className,
-  title,
-  col = 3,
-  layout = 'horizontal',
-  gutter = 32,
-  children,
-  size,
-  ...restProps
-}) => {
-  const clsString = classNames(styles.descriptionList, styles[layout], className, {
-    [styles.small]: size === 'small',
-    [styles.large]: size === 'large',
-  });
-  const column = col > 4 ? 4 : col;
-  return (
-    <div className={clsString} {...restProps}>
-      {title ? <div className={styles.title}>{title}</div> : null}
-      <Row gutter={gutter}>
-        {React.Children.map(children, child =>
-          child ? React.cloneElement(child, { column }) : child
-        )}
-      </Row>
-    </div>
-  );
-};
-
-export default DescriptionList;

src/components/DescriptionList/demo/basic.md

@@ -1,43 +0,0 @@
----
-order: 0
-title:
-  zh-CN: 基本
-  en-US: Basic
----
-
-## zh-CN
-
-基本描述列表。
-
-## en-US
-
-Basic DescriptionList.
-
-````jsx
-import DescriptionList from 'ant-design-pro/lib/DescriptionList';
-
-const { Description } = DescriptionList;
-
-ReactDOM.render(
-  <DescriptionList size="large" title="title">
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-  </DescriptionList>
-, mountNode);
-````

src/components/DescriptionList/demo/vertical.md

@@ -1,43 +0,0 @@
----
-order: 1
-title:
-  zh-CN: 垂直型
-  en-US: Vertical
----
-
-## zh-CN
-
-垂直布局。
-
-## en-US
-
-Vertical layout.
-
-````jsx
-import DescriptionList from 'ant-design-pro/lib/DescriptionList';
-
-const { Description } = DescriptionList;
-
-ReactDOM.render(
-  <DescriptionList size="large" title="title" layout="vertical">
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-    <Description term="Firefox">
-      A free, open source, cross-platform,
-      graphical web browser developed by the
-      Mozilla Corporation and hundreds of
-      volunteers.
-    </Description>
-  </DescriptionList>
-, mountNode);
-````

src/components/DescriptionList/index.d.ts

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import Description from './Description';
-
-export interface IDescriptionListProps {
-  layout?: 'horizontal' | 'vertical';
-  col?: number;
-  title: React.ReactNode;
-  gutter?: number;
-  size?: 'large' | 'small';
-  style?: React.CSSProperties;
-}
-
-export default class DescriptionList extends React.Component<IDescriptionListProps, any> {
-  public static Description: typeof Description;
-}

src/components/DescriptionList/index.en-US.md

@@ -1,33 +0,0 @@
----
-title: DescriptionList
-cols: 1
-order: 4
----
-
-Groups display multiple read-only fields, which are common to informational displays on detail pages.
-
-## API
-
-### DescriptionList
-
-| Property      | Description                         | Type        | Default |
-|----------|------------------------------------------|-------------|---------|
-| layout    | type of layout                          | Enum{'horizontal', 'vertical'}  | 'horizontal' |
-| col       | specify the maximum number of columns to display, the final columns number is determined by col setting combined with [Responsive Rules](/components/DescriptionList#Responsive-Rules)             | number(0 < col <= 4)  | 3 |
-| title     | title                                 | ReactNode  | - |
-| gutter    | specify the distance between two items, unit is `px`  | number  | 32 |
-| size     | size of list       | Enum{'large', 'small'}  | - |
-
-#### Responsive Rules
-
-| Window Width        | Columns Number                             | 
-|---------------------|---------------------------------------------|
-| `≥768px`           |  `col`                                       |
-| `≥576px`           |  `col < 2 ? col : 2`                         |
-| `<576px`           |  `1`                                         |
-
-### DescriptionList.Description
-
-| Property | Description                                      | Type         | Default |
-|----------|------------------------------------------|-------------|-------|
-| term     | item title                                 | ReactNode  | - |

src/components/DescriptionList/index.js

@@ -1,5 +0,0 @@
-import DescriptionList from './DescriptionList';
-import Description from './Description';
-
-DescriptionList.Description = Description;
-export default DescriptionList;

src/components/DescriptionList/index.less

@@ -1,77 +0,0 @@
-@import '~antd/lib/style/themes/default.less';
-
-.descriptionList {
-  // offset the padding-bottom of last row
-  :global {
-    .ant-row {
-      margin-bottom: -16px;
-      overflow: hidden;
-    }
-  }
-
-  .title {
-    font-size: 14px;
-    color: @heading-color;
-    font-weight: 500;
-    margin-bottom: 16px;
-  }
-
-  .term {
-    // Line-height is 22px IE dom height will calculate error
-    line-height: 20px;
-    padding-bottom: 16px;
-    margin-right: 8px;
-    color: @heading-color;
-    white-space: nowrap;
-    display: table-cell;
-
-    &:after {
-      content: ':';
-      margin: 0 8px 0 2px;
-      position: relative;
-      top: -0.5px;
-    }
-  }
-
-  .detail {
-    line-height: 20px;
-    width: 100%;
-    padding-bottom: 16px;
-    color: @text-color;
-    display: table-cell;
-  }
-
-  &.small {
-    // offset the padding-bottom of last row
-    :global {
-      .ant-row {
-        margin-bottom: -8px;
-      }
-    }
-    .title {
-      margin-bottom: 12px;
-      color: @text-color;
-    }
-    .term,
-    .detail {
-      padding-bottom: 8px;
-    }
-  }
-
-  &.large {
-    .title {
-      font-size: 16px;
-    }
-  }
-
-  &.vertical {
-    .term {
-      padding-bottom: 8px;
-      display: block;
-    }
-
-    .detail {
-      display: block;
-    }
-  }
-}

src/components/DescriptionList/index.zh-CN.md

@@ -1,37 +0,0 @@
----
-title: DescriptionList
-subtitle: 描述列表
-cols: 1
-order: 4
----
-
-成组展示多个只读字段，常见于详情页的信息展示。
-
-## API
-
-### DescriptionList
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| layout    | 布局方式                                 | Enum{'horizontal', 'vertical'}  | 'horizontal' |
-| col       | 指定信息最多分几列展示，最终一行几列由 col 配置结合[响应式规则](/components/DescriptionList#响应式规则)决定          | number(0 < col <= 4)  | 3 |
-| title     | 列表标题                                 | ReactNode  | - |
-| gutter    | 列表项间距，单位为 `px`                    | number  | 32 |
-| size     | 列表型号        | Enum{'large', 'small'}  | - |
-
-#### 响应式规则
-
-| 窗口宽度             | 展示列数                                      | 
-|---------------------|---------------------------------------------|
-| `≥768px`           |  `col`                                       |
-| `≥576px`           |  `col < 2 ? col : 2`                         |
-| `<576px`           |  `1`                                         |
-
-### DescriptionList.Description
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| term     | 列表项标题                                 | ReactNode  | - |
-
-
-

src/components/DescriptionList/responsive.js

@@ -1,6 +0,0 @@
-export default {
-  1: { xs: 24 },
-  2: { xs: 24, sm: 12 },
-  3: { xs: 24, sm: 12, md: 8 },
-  4: { xs: 24, sm: 12, md: 6 },
-};

src/components/Ellipsis/demo/line.md

@@ -1,31 +0,0 @@
----
-order: 1
-title: 
-  zh-CN: 按照行数省略
-  en-US: Truncate according to the number of rows
----
-
-## zh-CN
-
-通过设置 `lines` 属性指定最大行数，如果超过这个行数的文本会自动截取。但是在这种模式下所有 `children` 将会被转换成纯文本。
-
-并且注意在这种模式下，外容器需要有指定的宽度（或设置自身宽度）。
-
-## en-US
-
-`lines` attribute specifies the maximum number of rows where the text will automatically be truncated when exceeded. In this mode, all children will be converted to plain text.
-
-Also note that, in this mode, the outer container needs to have a specified width (or set its own width).
-
-
-````jsx
-import Ellipsis from 'ant-design-pro/lib/Ellipsis';
-
-const article = <p>There were injuries alleged in three <a href="#cover">cases in 2015</a>, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.</p>;
-
-ReactDOM.render(
-  <div style={{ width: 200 }}>
-    <Ellipsis tooltip lines={3}>{article}</Ellipsis>
-  </div>
-, mountNode);
-````

src/components/Ellipsis/demo/number.md

@@ -1,28 +0,0 @@
----
-order: 0
-title: 
-  zh-CN: 按照字符数省略
-  en-US: Truncate according to the number of character
----
-
-## zh-CN
-
-通过设置 `length` 属性指定文本最长长度，如果超过这个长度会自动截取。
-
-## en-US
-
-`length` attribute specifies the maximum length where the text will automatically be truncated when exceeded.
-
-````jsx
-import Ellipsis from 'ant-design-pro/lib/Ellipsis';
-
-const article = 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
-
-ReactDOM.render(
-  <div>
-    <Ellipsis length={100}>{article}</Ellipsis>
-    <h4 style={{ marginTop: 24 }}>Show Tooltip</h4>
-    <Ellipsis length={100} tooltip>{article}</Ellipsis>
-  </div>
-, mountNode);
-````

src/components/Ellipsis/index.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { TooltipProps } from 'antd/lib/tooltip';
-
-export interface IEllipsisTooltipProps extends TooltipProps {
-  title?: undefined;
-  overlayStyle?: undefined;
-}
-
-export interface IEllipsisProps {
-  tooltip?: boolean | IEllipsisTooltipProps;
-  length?: number;
-  lines?: number;
-  style?: React.CSSProperties;
-  className?: string;
-  fullWidthRecognition?: boolean;
-}
-
-export function getStrFullLength(str: string): number;
-export function cutStrByFullLength(str: string, maxLength: number): string;
-
-export default class Ellipsis extends React.Component<IEllipsisProps, any> {}

src/components/Ellipsis/index.en-US.md

@@ -1,16 +0,0 @@
----
-title: Ellipsis 
-cols: 1
-order: 10
----
-
-When the text is too long, the Ellipsis automatically shortens it according to its length or the maximum number of lines.
-
-## API
-
-Property | Description | Type | Default
-----|------|-----|------
-tooltip | tooltip for showing the full text content when hovering over | boolean | -
-length | 	maximum number of characters in the text before being truncated | number | -
-lines | maximum number of rows in the text before being truncated | number | `1`
-fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | -

src/components/Ellipsis/index.js

@@ -1,270 +0,0 @@
-import React, { Component } from 'react';
-import { Tooltip } from 'antd';
-import classNames from 'classnames';
-import styles from './index.less';
-
-/* eslint react/no-did-mount-set-state: 0 */
-/* eslint no-param-reassign: 0 */
-
-const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
-
-const TooltipOverlayStyle = {
-  overflowWrap: 'break-word',
-  wordWrap: 'break-word',
-};
-
-export const getStrFullLength = (str = '') =>
-  str.split('').reduce((pre, cur) => {
-    const charCode = cur.charCodeAt(0);
-    if (charCode >= 0 && charCode <= 128) {
-      return pre + 1;
-    }
-    return pre + 2;
-  }, 0);
-
-export const cutStrByFullLength = (str = '', maxLength) => {
-  let showLength = 0;
-  return str.split('').reduce((pre, cur) => {
-    const charCode = cur.charCodeAt(0);
-    if (charCode >= 0 && charCode <= 128) {
-      showLength += 1;
-    } else {
-      showLength += 2;
-    }
-    if (showLength <= maxLength) {
-      return pre + cur;
-    }
-    return pre;
-  }, '');
-};
-
-const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
-  if (tooltip) {
-    const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
-    return <Tooltip {...props}>{children}</Tooltip>;
-  }
-  return children;
-};
-
-const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => {
-  if (typeof text !== 'string') {
-    throw new Error('Ellipsis children must be string.');
-  }
-  const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length;
-  if (textLength <= length || length < 0) {
-    return <span {...other}>{text}</span>;
-  }
-  const tail = '...';
-  let displayText;
-  if (length - tail.length <= 0) {
-    displayText = '';
-  } else {
-    displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length);
-  }
-
-  const spanAttrs = tooltip ? {} : { ...other };
-  return getTooltip({
-    tooltip,
-    overlayStyle: TooltipOverlayStyle,
-    title: text,
-    children: (
-      <span {...spanAttrs}>
-        {displayText}
-        {tail}
-      </span>
-    ),
-  });
-};
-
-export default class Ellipsis extends Component {
-  state = {
-    text: '',
-    targetCount: 0,
-  };
-
-  componentDidMount() {
-    if (this.node) {
-      this.computeLine();
-    }
-  }
-
-  componentDidUpdate(perProps) {
-    const { lines } = this.props;
-    if (lines !== perProps.lines) {
-      this.computeLine();
-    }
-  }
-
-  computeLine = () => {
-    const { lines } = this.props;
-    if (lines && !isSupportLineClamp) {
-      const text = this.shadowChildren.innerText || this.shadowChildren.textContent;
-      const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10);
-      const targetHeight = lines * lineHeight;
-      this.content.style.height = `${targetHeight}px`;
-      const totalHeight = this.shadowChildren.offsetHeight;
-      const shadowNode = this.shadow.firstChild;
-
-      if (totalHeight <= targetHeight) {
-        this.setState({
-          text,
-          targetCount: text.length,
-        });
-        return;
-      }
-
-      // bisection
-      const len = text.length;
-      const mid = Math.ceil(len / 2);
-
-      const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode);
-
-      this.setState({
-        text,
-        targetCount: count,
-      });
-    }
-  };
-
-  bisection = (th, m, b, e, text, shadowNode) => {
-    const suffix = '...';
-    let mid = m;
-    let end = e;
-    let begin = b;
-    shadowNode.innerHTML = text.substring(0, mid) + suffix;
-    let sh = shadowNode.offsetHeight;
-
-    if (sh <= th) {
-      shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
-      sh = shadowNode.offsetHeight;
-      if (sh > th || mid === begin) {
-        return mid;
-      }
-      begin = mid;
-      if (end - begin === 1) {
-        mid = 1 + begin;
-      } else {
-        mid = Math.floor((end - begin) / 2) + begin;
-      }
-      return this.bisection(th, mid, begin, end, text, shadowNode);
-    }
-    if (mid - 1 < 0) {
-      return mid;
-    }
-    shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
-    sh = shadowNode.offsetHeight;
-    if (sh <= th) {
-      return mid - 1;
-    }
-    end = mid;
-    mid = Math.floor((end - begin) / 2) + begin;
-    return this.bisection(th, mid, begin, end, text, shadowNode);
-  };
-
-  handleRoot = n => {
-    this.root = n;
-  };
-
-  handleContent = n => {
-    this.content = n;
-  };
-
-  handleNode = n => {
-    this.node = n;
-  };
-
-  handleShadow = n => {
-    this.shadow = n;
-  };
-
-  handleShadowChildren = n => {
-    this.shadowChildren = n;
-  };
-
-  render() {
-    const { text, targetCount } = this.state;
-    const {
-      children,
-      lines,
-      length,
-      className,
-      tooltip,
-      fullWidthRecognition,
-      ...restProps
-    } = this.props;
-
-    const cls = classNames(styles.ellipsis, className, {
-      [styles.lines]: lines && !isSupportLineClamp,
-      [styles.lineClamp]: lines && isSupportLineClamp,
-    });
-
-    if (!lines && !length) {
-      return (
-        <span className={cls} {...restProps}>
-          {children}
-        </span>
-      );
-    }
-
-    // length
-    if (!lines) {
-      return (
-        <EllipsisText
-          className={cls}
-          length={length}
-          text={children || ''}
-          tooltip={tooltip}
-          fullWidthRecognition={fullWidthRecognition}
-          {...restProps}
-        />
-      );
-    }
-
-    const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`;
-
-    // support document.body.style.webkitLineClamp
-    if (isSupportLineClamp) {
-      const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`;
-
-      const node = (
-        <div id={id} className={cls} {...restProps}>
-          <style>{style}</style>
-          {children}
-        </div>
-      );
-
-      return getTooltip({
-        tooltip,
-        overlayStyle: TooltipOverlayStyle,
-        title: children,
-        children: node,
-      });
-    }
-
-    const childNode = (
-      <span ref={this.handleNode}>
-        {targetCount > 0 && text.substring(0, targetCount)}
-        {targetCount > 0 && targetCount < text.length && '...'}
-      </span>
-    );
-
-    return (
-      <div {...restProps} ref={this.handleRoot} className={cls}>
-        <div ref={this.handleContent}>
-          {getTooltip({
-            tooltip,
-            overlayStyle: TooltipOverlayStyle,
-            title: text,
-            children: childNode,
-          })}
-          <div className={styles.shadow} ref={this.handleShadowChildren}>
-            {children}
-          </div>
-          <div className={styles.shadow} ref={this.handleShadow}>
-            <span>{text}</span>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}