update component docs

src/components/AvatarList/demo/simple.md

@@ -0,0 +1,18 @@
+---
+order: 0
+title: 基础使用 
+---
+
+简单的用户头像列表。
+
+````jsx
+import AvatarList from 'ant-design-pro/lib/AvatarList';
+
+ReactDOM.render(
+  <AvatarList size="small">
+    <AvatarList.Item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png" />
+    <AvatarList.Item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png" />
+    <AvatarList.Item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png" />
+  </AvatarList>
+, mountNode);
+````

src/components/AvatarList/index.md

@@ -0,0 +1,25 @@
+---
+category: Components
+type: General
+title: AvatarList 
+subtitle: 用户头像列表
+cols: 1
+---
+
+倒计时组件。
+
+## API
+
+### AvatarList
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| size | 头像大小 | `large`、`small` | - |
+
+### AvatarList.Item
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| tips | 头像展示文案 | ReactNode\/string | - |
+| src | 头像图片连接 | string | - |
+

src/components/Charts/demo/bar.md

@@ -3,6 +3,8 @@ order: 4
 title: 柱状图
 ---
 
+通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。
+
 ````jsx
 import { Bar } from 'ant-design-pro/lib/Charts';
 

src/components/Charts/demo/gauge.md

@@ -3,6 +3,8 @@ order: 7
 title: 仪表盘 
 ---
 
+仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。
+
 ````jsx
 import { Gauge } from 'ant-design-pro/lib/Charts';
 

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

@@ -1,5 +1,6 @@
 ---
 order: 2
+col: 2
 title: 迷你区域图
 ---
 

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

@@ -1,8 +1,11 @@
 ---
 order: 2
+col: 2
 title: 迷你柱状图
 ---
 
+迷你柱状图更适合展示简单的区间数据，简洁的表现方式可以很好的减少大数据量的视觉展现压力。
+
 ````jsx
 import { MiniBar } from 'ant-design-pro/lib/Charts';
 import moment from 'moment';

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

@@ -3,6 +3,8 @@ order: 6
 title: 迷你饼状图
 ---
 
+通过简化 `Pie` 属性的设置，可以快速的实现极简的饼状图，可配合 `ChartCard` 组合展现更多业务场景。
+
 ````jsx
 import { Pie } from 'ant-design-pro/lib/Charts';
 

src/components/Charts/demo/mix.md

@@ -21,8 +21,8 @@ for (let i = 0; i < 20; i += 1) {
 }
 
 ReactDOM.render(
-  <Row gutter={16}>
-    <Col span={8}>
+  <Row>
+    <Col span={24}>
       <ChartCard
         title="搜索用户数量"
         contentHeight={134}
@@ -41,7 +41,7 @@ ReactDOM.render(
         />
       </ChartCard>
     </Col>  
-    <Col span={8}>
+    <Col span={24} style={{ marginTop: 24 }}>
       <ChartCard
         title="访问量"
         action={<Tooltip title="访问量是关键指标"><Icon type="exclamation-circle-o" /></Tooltip>}
@@ -55,7 +55,7 @@ ReactDOM.render(
         />
       </ChartCard>
     </Col>  
-    <Col span={8}>
+    <Col span={24} style={{ marginTop: 24 }}>
       <ChartCard
         title="线上购物转化率"
         action={<Tooltip title="购买效率"><Icon type="exclamation-circle-o" /></Tooltip>}

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

@@ -0,0 +1,25 @@
+---
+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: `test-${i}`,
+    value: Math.floor((Math.random() * 50)) + 20,
+  });
+}
+
+ReactDOM.render(
+  <TagCloud
+    data={tags}
+    height={200}
+  />
+, mountNode);
+````

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

@@ -0,0 +1,27 @@
+---
+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) + 10,
+    y2: Math.floor(Math.random() * 100) + 10,
+  });
+}
+
+ReactDOM.render(
+  <TimelineChart
+    height={200}
+    data={chartData}
+    titleMap={{ y1: '客流量', y2: '支付笔数' }}
+  />
+, mountNode);
+````

src/components/Charts/demo/waterwave.md

@@ -3,6 +3,8 @@ order: 8
 title: 水波图 
 ---
 
+水波图是一种比例的展示方式，可以更直观的展示关键值的占比。
+
 ````jsx
 import { WaterWave } from 'ant-design-pro/lib/Charts';
 

src/components/Charts/index.md

@@ -3,12 +3,12 @@ category: Components
 type: General
 title: Charts
 subtitle: 图表
-cols: 1
+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) 封装图表组件使用。 
+因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 
 
 ## API
 
@@ -35,6 +35,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | 参数      | 说明                                      | 类型         | 默认值 |
 |----------|------------------------------------------|-------------|-------|
 | color | 图表颜色 | string | `#33abfb` |
+| borderColor | 图表边颜色 | string | `#33abfb` |
 | height | 图表高度 | number | - |
 | line | 是否显示描边 | boolean | false |
 | animate | 是否显示动画 | boolean | true |
@@ -104,6 +105,21 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | color | 图表颜色 | string | `#19AFFA` |
 | percent | 进度比例 | number | - |
 
+### TagCloud
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| tags | 标题 | Array<name, value\> | - |
+| height | 高度值 | number | - |
+
+### TimelineChart
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| data | 标题 | Array<x, y1, y2\> | - |
+| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
+| height | 高度值 | number | 400 |
+
 ### Trend
 
 | 参数      | 说明                                      | 类型         | 默认值 |
@@ -127,5 +143,3 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 |----------|------------------------------------------|-------------|-------|
 | label | 标题 | ReactNode\|string | - |
 | value | 值 | ReactNode\|string | - |
-
-

src/components/CountDown/demo/simple.md

@@ -1,9 +1,9 @@
 ---
 order: 0
-title: Simple
+title: 基础样例 
 ---
 
-简单的页头。
+简单的倒计时组件使用。
 
 ````jsx
 import CountDown from 'ant-design-pro/lib/CountDown';
@@ -11,6 +11,6 @@ import CountDown from 'ant-design-pro/lib/CountDown';
 const targetTime = new Date().getTime() + 3900000;
 
 ReactDOM.render(
-  <CountDown target={targetTime} />
+  <CountDown style={{ fontSize: 20 }} target={targetTime} />
 , mountNode);
 ````

src/components/CountDown/index.js

@@ -93,12 +93,12 @@ class CountDown extends Component {
   }
 
   render() {
-    const { format = this.defaultFormat } = this.props;
+    const { format = this.defaultFormat, ...rest } = this.props;
     const { lastTime } = this.state;
 
     const result = format(lastTime);
 
-    return result;
+    return (<span {...rest}>{result}</span>);
   }
 }