Browse Source

update charts demo

pull/457/head
nikogu 9 years ago
parent
commit
df6ecfb4cc
  1. 8
      src/components/AvatarList/demo/simple.md
  2. 6
      src/components/AvatarList/index.less
  3. 4
      src/components/AvatarList/index.md
  4. 3
      src/components/Charts/ChartCard/index.less
  5. 2
      src/components/Charts/MiniProgress/index.js
  6. 2
      src/components/Charts/demo/chart-card.md
  7. 2
      src/components/Charts/demo/mini-progress.md
  8. 7
      src/components/Charts/demo/mix.md
  9. 2
      src/components/Charts/demo/tag-cloud.md

8
src/components/AvatarList/demo/simple.md

@ -9,10 +9,10 @@ title: 基础样例
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 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);
````

6
src/components/AvatarList/index.less

@ -10,12 +10,16 @@
}
.avatarItem {
border: 1px solid #fff;
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 {

4
src/components/AvatarList/index.md

@ -5,7 +5,7 @@ order: 1
cols: 1
---
一组用户头像,常用在项目/团队成员列表。
一组用户头像,常用在项目/团队成员列表。可通过设置 `size` 属性来指定头像大小。
## API
@ -13,7 +13,7 @@ cols: 1
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| size | 头像大小 | `large`、`small` | - |
| size | 头像大小 | `large`、`small` 、`mini`, `default` | `default` |
### AvatarList.Item

3
src/components/Charts/ChartCard/index.less

@ -25,6 +25,7 @@
height: 38px;
}
.content {
margin-bottom: 12px;
position: relative;
width: 100%;
}
@ -37,7 +38,7 @@
.footer {
border-top: 1px solid @border-color-split;
padding-top: 9px;
margin-top: 20px;
margin-top: 8px;
& > * {
position: relative;
}

2
src/components/Charts/MiniProgress/index.js

@ -3,7 +3,7 @@ import { Tooltip } from 'antd';
import styles from './index.less';
const MiniProgress = ({ target, color, strokeWidth, percent }) => (
const MiniProgress = ({ target, color = 'rgb(19, 194, 194)', strokeWidth, percent }) => (
<div className={styles.miniProgress}>
<Tooltip title={`目标值: ${target}%`}>
<div

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

@ -14,7 +14,7 @@ import numeral from 'numeral';
ReactDOM.render(
<ChartCard
title="销售额"
action={<Tooltip title="我是一段说明"><Icon type="exclamation-circle-o" /></Tooltip>}
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={yuan(126560)}
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
contentHeight={46}

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

@ -7,6 +7,6 @@ title: 迷你进度条
import { MiniProgress } from 'ant-design-pro/lib/Charts';
ReactDOM.render(
<MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
<MiniProgress percent={78} strokeWidth={8} target={80} />
, mountNode);
````

7
src/components/Charts/demo/mix.md

@ -37,7 +37,6 @@ ReactDOM.render(
/>
<MiniArea
line
color="#cceafe"
height={45}
data={visitData}
/>
@ -46,7 +45,7 @@ ReactDOM.render(
<Col span={24} style={{ marginTop: 24 }}>
<ChartCard
title="访问量"
action={<Tooltip title="访问量是关键指标"><Icon type="exclamation-circle-o" /></Tooltip>}
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}
@ -60,7 +59,7 @@ ReactDOM.render(
<Col span={24} style={{ marginTop: 24 }}>
<ChartCard
title="线上购物转化率"
action={<Tooltip title="购买效率"><Icon type="exclamation-circle-o" /></Tooltip>}
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total="78%"
footer={
<div>
@ -76,7 +75,7 @@ ReactDOM.render(
}
contentHeight={46}
>
<MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
<MiniProgress percent={78} strokeWidth={8} target={80} />
</ChartCard>
</Col>
</Row>

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

@ -11,7 +11,7 @@ import { TagCloud } from 'ant-design-pro/lib/Charts';
const tags = [];
for (let i = 0; i < 50; i += 1) {
tags.push({
name: `test-${i}`,
name: `TagClout-Title-${i}`,
value: Math.floor((Math.random() * 50)) + 20,
});
}

Loading…
Cancel
Save