Refactor number info (#28)

* Add NumberInfo[gap]

* Move NumberInfo outside Charts

src/components/ActiveChart/index.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 
-import { NumberInfo, MiniArea } from '../Charts';
+import { MiniArea } from '../Charts';
+import NumberInfo from '../NumberInfo';
 import { fixedZero } from '../../utils/utils';
 
 import styles from './index.less';
@@ -46,9 +47,7 @@ export default class ActiveChart extends PureComponent {
           <MiniArea
             animate={false}
             line
-            borderColor="#00a2fc"
             borderWidth={2}
-            color="#c9eafe"
             height={84}
             yAxis={{
               tickCount: 3,

src/components/Charts/demo/mix.md

@@ -6,8 +6,9 @@ title: 图表套件组合展示
 利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
 
 ````jsx
-import { ChartCard, yuan, Field, NumberInfo, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
+import { ChartCard, yuan, 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';

src/components/Charts/index.js

@@ -8,7 +8,6 @@ import MiniArea from './MiniArea';
 import MiniBar from './MiniBar';
 import MiniProgress from './MiniProgress';
 import Field from './Field';
-import NumberInfo from './NumberInfo';
 import WaterWave from './WaterWave';
 import TagCloud from './TagCloud';
 import TimelineChart from './TimelineChart';
@@ -26,7 +25,6 @@ export default {
   MiniProgress,
   ChartCard,
   Field,
-  NumberInfo,
   WaterWave,
   TagCloud,
   TimelineChart,

src/components/Charts/index.md

@@ -119,16 +119,6 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
 | height | 高度值 | number | 400 |
 
-### NumberInfo
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 标题 | ReactNode\|string | - |
-| subTitle | 子标题 | ReactNode\|string | - |
-| total | 总量 | ReactNode\|string | - |
-| status | 增加状态 | 'up'\/'down' | - |
-| theme | 状态样式 | string | 'light' |
-
 ### Field
 
 | 参数      | 说明                                      | 类型         | 默认值 |

src/components/NumberInfo/demo/basic.md

@@ -0,0 +1,29 @@
+---
+order: 0
+title: 演示
+---
+
+各种数据文案的展现方式。
+
+````jsx
+import NumberInfo from 'ant-design-pro/lib/NumberInfo';
+import numeral from 'numeral';
+
+ReactDOM.render(
+  <div>
+    <NumberInfo
+      subTitle={<span>本周访问</span>}
+      total={numeral(12321).format('0,0')}
+      status="up"
+      subTotal={17.1}
+    />
+    <NumberInfo
+      subTitle={<span>本周访问</span>}
+      total={numeral(12321).format('0,0')}
+      status="up"
+      subTotal={17.1}
+      style={{ marginTop: 16 }}
+    />
+  </div>
+, mountNode);
+````

src/components/Charts/NumberInfo/index.js → src/components/NumberInfo/index.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Icon } from 'antd';
 import classNames from 'classnames';
-
 import styles from './index.less';
 
-export default ({ theme, title, subTitle, total, subTotal, status, suffix, ...rest }) => (
+export default ({
+  theme, title, subTitle, total, subTotal, status, suffix, gap, ...rest
+}) => (
   <div
     className={
       classNames(styles.numberInfo, {
@@ -13,9 +14,9 @@ export default ({ theme, title, subTitle, total, subTotal, status, suffix, ...re
     }
     {...rest}
   >
-    {title && <h4>{title}</h4>}
-    {subTitle && <h6>{subTitle}</h6>}
-    <div>
+    {title && <div className={styles.numberInfoTitle}>{title}</div>}
+    {subTitle && <div className={styles.numberInfoSubTitle}>{subTitle}</div>}
+    <div className={styles.numberInfoValue} style={gap ? { marginTop: gap } : null}>
       <span>
         {total}
         {suffix && <em className={styles.suffix}>{suffix}</em>}

src/components/Charts/NumberInfo/index.less → src/components/NumberInfo/index.less

@@ -1,5 +1,5 @@
 @import "~antd/lib/style/themes/default.less";
-@import "../../../utils/utils.less";
+@import "../../utils/utils.less";
 
 .numberInfo {
   .suffix {
@@ -8,22 +8,21 @@
     font-style: normal;
     margin-left: 4px;
   }
-  h4 {
+  .numberInfoTitle {
     color: @text-color;
     font-size: @font-size-lg;
     margin-bottom: 16px;
     transition: all .3s;
   }
-  h6 {
+  .numberInfoSubTitle {
     color: @text-color-secondary;
     font-size: @font-size-base;
-    font-weight: normal;
     height: 22px;
     line-height: 22px;
     .textOverflow();
   }
-  & > div {
-    margin-top: 8px;
+  .numberInfoValue {
+    margin-top: 4px;
     font-size: 0;
     .textOverflow();
     & > span {
@@ -48,7 +47,7 @@
   }
 }
 .numberInfolight {
-  & > div {
+  .numberInfoValue {
     & > span {
       color: @text-color;
     }

src/components/NumberInfo/index.md

@@ -0,0 +1,19 @@
+---
+type: General
+title: NumberInfo
+subtitle: 数据文本
+cols: 1
+---
+
+常用在数据卡片中，用于突出展示某个业务数据。
+
+## API
+
+参数 | 说明 | 类型 | 默认值
+----|------|-----|------
+title | 标题 | ReactNode\|string | -
+subTitle | 子标题 | ReactNode\|string | -
+total | 总量 | ReactNode\|string | -
+status | 增加状态 | 'up'\/'down' | -
+theme | 状态样式 | string | 'light'
+gap | 设置数字和描述直接的间距（像素） | number | 8

src/routes/Dashboard/Analysis.js

@@ -3,9 +3,10 @@ import { connect } from 'dva';
 import { Row, Col, Icon, Card, Tabs, Table, Radio, DatePicker, Tooltip } from 'antd';
 import numeral from 'numeral';
 import {
-  ChartCard, yuan, MiniArea, MiniBar, MiniProgress, Field, Bar, Pie, NumberInfo, TimelineChart,
+  ChartCard, yuan, MiniArea, MiniBar, MiniProgress, Field, Bar, Pie, TimelineChart,
 } from '../../components/Charts';
 import Trend from '../../components/Trend';
+import NumberInfo from '../../components/NumberInfo';
 import { getTimeDistance } from '../../utils/utils';
 
 import styles from './Analysis.less';
@@ -178,7 +179,8 @@ export default class Analysis extends Component {
           <NumberInfo
             title={data.name}
             subTitle="转化率"
-            total={<span style={{ top: '-6px', position: 'relative' }}>{data.cvr * 100}%</span>}
+            gap={2}
+            total={`${data.cvr * 100}%`}
             theme={(currentKey !== data.name) && 'light'}
           />
         </Col>
@@ -370,6 +372,7 @@ export default class Analysis extends Component {
                         </Tooltip>
                       </span>
                     }
+                    gap={8}
                     total={numeral(12321).format('0,0')}
                     status="up"
                     subTotal={17.1}
@@ -386,6 +389,7 @@ export default class Analysis extends Component {
                     total={2.7}
                     status="down"
                     subTotal={26.2}
+                    gap={8}
                   />
                   <MiniArea
                     line

src/routes/Dashboard/Monitor.js

@@ -3,7 +3,8 @@ import { connect } from 'dva';
 import { Row, Col, Card } from 'antd';
 import numeral from 'numeral';
 
-import { NumberInfo, Pie, WaterWave, Gauge, TagCloud } from '../../components/Charts';
+import { Pie, WaterWave, Gauge, TagCloud } from '../../components/Charts';
+import NumberInfo from '../../components/NumberInfo';
 import CountDown from '../../components/CountDown';
 import ActiveChart from '../../components/ActiveChart';