diff --git a/src/components/AvatarList/demo/simple.md b/src/components/AvatarList/demo/simple.md new file mode 100644 index 0000000000000000000000000000000000000000..ecc9c81caf81546114aff77972477d87e1e72a14 --- /dev/null +++ b/src/components/AvatarList/demo/simple.md @@ -0,0 +1,18 @@ +--- +order: 0 +title: 基础使用 +--- + +简单的用户头像列表。 + +````jsx +import AvatarList from 'ant-design-pro/lib/AvatarList'; + +ReactDOM.render( + + + + + +, mountNode); +```` diff --git a/src/components/AvatarList/index.md b/src/components/AvatarList/index.md new file mode 100644 index 0000000000000000000000000000000000000000..f9149ad98871584f2b4af8315902d064564de055 --- /dev/null +++ b/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 | - | + diff --git a/src/components/Charts/demo/bar.md b/src/components/Charts/demo/bar.md index ea86007696c955ced417dea16a20be8d7cb6c8ed..955f44e076192f6b4536fbb79cfd5a7660354f66 100644 --- a/src/components/Charts/demo/bar.md +++ b/src/components/Charts/demo/bar.md @@ -3,6 +3,8 @@ order: 4 title: 柱状图 --- +通过设置 `x`，`y` 属性，可以快速的构建出一个漂亮的柱状图，各种纬度的关系则是通过自定义的数据展现。 + ````jsx import { Bar } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/demo/gauge.md b/src/components/Charts/demo/gauge.md index 9b82298d6f551ebd2d8237b6bf96fb566b0b8a66..f53465d88175446a9479e0b415f1cb816a1a00b1 100644 --- a/src/components/Charts/demo/gauge.md +++ b/src/components/Charts/demo/gauge.md @@ -3,6 +3,8 @@ order: 7 title: 仪表盘 --- +仪表盘是一种进度展示方式，可以更直观的展示当前的进展情况，通常也可表示占比。 + ````jsx import { Gauge } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/demo/mini-area.md b/src/components/Charts/demo/mini-area.md index d1de460b59c5f82cacc3d32be49707ca667f0f6d..2b9bfb4778fdc71f0efa25d89d64ac142a0aa079 100644 --- a/src/components/Charts/demo/mini-area.md +++ b/src/components/Charts/demo/mini-area.md @@ -1,5 +1,6 @@ --- order: 2 +col: 2 title: 迷你区域图 --- diff --git a/src/components/Charts/demo/mini-bar.md b/src/components/Charts/demo/mini-bar.md index 9a384fc6c23a237d669915fa3194cdf11baa2a31..fef301bcaa537d74506b87ad6d8b75eb06d391ff 100644 --- a/src/components/Charts/demo/mini-bar.md +++ b/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'; diff --git a/src/components/Charts/demo/mini-pie.md b/src/components/Charts/demo/mini-pie.md index 0a76e3c467a12b5a4af085b7c5659ca8a0d8a6eb..40c63b0d2ffa3ee88e97a9fa9ec17b87432ad440 100644 --- a/src/components/Charts/demo/mini-pie.md +++ b/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'; diff --git a/src/components/Charts/demo/mix.md b/src/components/Charts/demo/mix.md index 5ec7e9a283070059e10db74ff9ad7718e716a078..7bb384fadf8f75aaf92dde5e15bc54eccd268685 100644 --- a/src/components/Charts/demo/mix.md +++ b/src/components/Charts/demo/mix.md @@ -21,8 +21,8 @@ for (let i = 0; i < 20; i += 1) { } ReactDOM.render( - - + + - + } @@ -55,7 +55,7 @@ ReactDOM.render( /> - + } diff --git a/src/components/Charts/demo/tag-cloud.md b/src/components/Charts/demo/tag-cloud.md new file mode 100644 index 0000000000000000000000000000000000000000..c86bdd84d9dc3ae0fdbf02db36daaa42f7d0c926 --- /dev/null +++ b/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( + +, mountNode); +```` diff --git a/src/components/Charts/demo/timeline-chart.md b/src/components/Charts/demo/timeline-chart.md new file mode 100644 index 0000000000000000000000000000000000000000..d22c2fd96eb3253cce26194090137e5576f0a1bf --- /dev/null +++ b/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( + +, mountNode); +```` diff --git a/src/components/Charts/demo/waterwave.md b/src/components/Charts/demo/waterwave.md index 742a6c7d267f316bae368ce1b6537f5d189d4a0d..8b00e5a71c7cfaeb7252c797b103d28f9f66ac73 100644 --- a/src/components/Charts/demo/waterwave.md +++ b/src/components/Charts/demo/waterwave.md @@ -3,6 +3,8 @@ order: 8 title: 水波图 --- +水波图是一种比例的展示方式，可以更直观的展示关键值的占比。 + ````jsx import { WaterWave } from 'ant-design-pro/lib/Charts'; diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md index 47a13d5aca326c4bd1e9227ed06485c536d7ab04..5beabe56a3a9f64bfec0727a46071fd7fa803994 100644 --- a/src/components/Charts/index.md +++ b/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 | - | +| height | 高度值 | number | - | + +### TimelineChart + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| data | 标题 | Array | - | +| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - | +| height | 高度值 | number | 400 | + ### Trend | 参数 | 说明 | 类型 | 默认值 | @@ -127,5 +143,3 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https |----------|------------------------------------------|-------------|-------| | label | 标题 | ReactNode\|string | - | | value | 值 | ReactNode\|string | - | - - diff --git a/src/components/CountDown/demo/simple.md b/src/components/CountDown/demo/simple.md index 5a3d8d55ba36b95202dc763bd6f9396c4c207f95..62e9c909c57abe0fd28db77ceba0ec419ff9de95 100644 --- a/src/components/CountDown/demo/simple.md +++ b/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( - + , mountNode); ```` diff --git a/src/components/CountDown/index.js b/src/components/CountDown/index.js index 19c1cf48e371d432dedbde5098d4166e433c5083..f7caec22dc6d30a7d5372263d87bcbdf73f7ab77 100644 --- a/src/components/CountDown/index.js +++ b/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 ({result}); } }