Browse Source

update charts demo

nikogu 8 năm trước cách đây
mục cha
commit
df6ecfb4cc

+ 4 - 4
src/components/AvatarList/demo/simple.md

@@ -9,10 +9,10 @@ title: 基础样例
 import AvatarList from 'ant-design-pro/lib/AvatarList';
 import AvatarList from 'ant-design-pro/lib/AvatarList';
 
 
 ReactDOM.render(
 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>
   </AvatarList>
 , mountNode);
 , mountNode);
 ````
 ````

+ 5 - 1
src/components/AvatarList/index.less

@@ -10,12 +10,16 @@
 }
 }
 
 
 .avatarItem {
 .avatarItem {
-  border: 1px solid #fff;
   display: inline-block;
   display: inline-block;
   font-size: @font-size-base;
   font-size: @font-size-base;
   margin-left: -8px;
   margin-left: -8px;
   width: @avatar-size-base;
   width: @avatar-size-base;
   height: @avatar-size-base;
   height: @avatar-size-base;
+  :global {
+    .ant-avatar {
+      border: 1px solid #fff;
+    }
+  }
 }
 }
 
 
 .avatarItemLarge {
 .avatarItemLarge {

+ 2 - 2
src/components/AvatarList/index.md

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

+ 2 - 1
src/components/Charts/ChartCard/index.less

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

+ 1 - 1
src/components/Charts/MiniProgress/index.js

@@ -3,7 +3,7 @@ import { Tooltip } from 'antd';
 
 
 import styles from './index.less';
 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}>
   <div className={styles.miniProgress}>
     <Tooltip title={`目标值: ${target}%`}>
     <Tooltip title={`目标值: ${target}%`}>
       <div
       <div

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

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

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

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

+ 3 - 4
src/components/Charts/demo/mix.md

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

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

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