Refactor Trend (#27)

* remove cursor pointer

* tweak pie position

* Refactor Trend

* Use Trend replace IconUp IconDown

* update demo and api doc

* Move Trend outside Charts

src/components/Charts/Icon/index.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Icon } from 'antd';
-import classNames from 'classnames';
-import styles from './index.less';
-
-const IconUp = ({ color, className, ...rest }) => (
-  <Icon
-    {...rest}
-    className={classNames(styles.normal, className, {
-      [styles.up]: color !== false,
-    })}
-    type="caret-up"
-  />
-);
-
-const IconDown = ({ color, className, ...rest }) => (
-  <Icon
-    {...rest}
-    className={classNames(styles.normal, className, {
-      [styles.down]: color !== false,
-    })}
-    type="caret-down"
-  />
-);
-
-export default {
-  IconUp,
-  IconDown,
-};

src/components/Charts/Icon/index.less

@@ -1,15 +0,0 @@
-@import "~antd/lib/style/themes/default.less";
-
-.normal {
-  color: @text-color-secondary;
-  font-size: 12px;
-  transform: scale(83%);
-}
-
-.up {
-  color: @green-6;
-}
-
-.down {
-  color: @red-6;
-}

src/components/Charts/Trend/index.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Icon } from 'antd';
-
-import styles from './index.less';
-
-const Item = ({ title, flag, children, ...rest }) => {
-  return (
-    <div {...rest} className={styles.trendItem}>
-      <div className={styles.content}>
-        <span className={styles.title}>{title}</span>
-        <span className={styles.value}>{children}</span>
-        {flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
-      </div>
-    </div>
-  );
-};
-
-class Trend extends React.Component {
-  render() {
-    const { colorType, children, ...rest } = this.props;
-    return (
-      <div
-        className={colorType ? (styles[`trend${colorType}`] || styles.trend) : styles.trend}
-        {...rest}
-      >
-        {children}
-      </div>
-    );
-  }
-}
-
-Trend.Item = Item;
-
-export default Trend;

src/components/Charts/Trend/index.less

@@ -1,58 +0,0 @@
-@import "~antd/lib/style/themes/default.less";
-@import "../../../utils/utils.less";
-
-.trend {
-  font-size: 0;
-  height: 22px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.trendItem {
-  display: inline-block;
-  color: @text-color;
-  font-size: @font-size-base;
-  line-height: 22px;
-  height: 22px;
-  & + & {
-    margin-left: 16px;
-  }
-  .content {
-    display: block;
-  }
-  .miniContent {
-    display: none;
-  }
-  .title {
-    margin-right: 8px;
-  }
-  .value {
-    color: @heading-color;
-  }
-  .up, .down {
-    color: @green-6;
-    margin-left: 4px;
-    position: relative;
-    top: 1px;
-    i {
-      font-size: 12px;
-      transform: scale(0.83);
-    }
-  }
-  .down {
-    color: @red-6;
-    top: -1px;
-  }
-}
-
-.trendItem:last-child {
-  margin-right: 0;
-}
-
-.trendgray {
-  .trend();
-  .trendItem {
-    color: @text-color;
-  }
-}

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

@@ -6,7 +6,8 @@ title: 图表卡片
 用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
 
 ````jsx
-import { ChartCard, yuan, Field, Trend } from 'ant-design-pro/lib/Charts';
+import { ChartCard, yuan, Field } from 'ant-design-pro/lib/Charts';
+import Trend from 'ant-design-pro/lib/Trend';
 import { Tooltip, Icon } from 'antd';
 import numeral from 'numeral';
 
@@ -18,10 +19,14 @@ ReactDOM.render(
     footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
     contentHeight={46}
   >
-    <Trend colorType="gray">
-      <Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
-      <Trend.Item title="日环比" flag="down">11%</Trend.Item>
-    </Trend>
+    <span>
+      周同比
+      <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
+    </span>
+    <span style={{ marginLeft: 16 }}>
+      日环比
+      <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
+    </span>
   </ChartCard>
 , mountNode);
 ````

src/components/Charts/demo/mix.md

@@ -6,7 +6,8 @@ title: 图表套件组合展示
 利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
 
 ````jsx
-import { ChartCard, yuan, Field, Trend, NumberInfo, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
+import { ChartCard, yuan, Field, NumberInfo, MiniArea, MiniBar, MiniProgress } from 'ant-design-pro/lib/Charts';
+import Trend from 'ant-design-pro/lib/Trend';
 import { Row, Col, Icon, Tooltip } from 'antd';
 import numeral from 'numeral';
 import moment from 'moment';
@@ -40,7 +41,7 @@ ReactDOM.render(
           data={visitData}
         />
       </ChartCard>
-    </Col>  
+    </Col>
     <Col span={24} style={{ marginTop: 24 }}>
       <ChartCard
         title="访问量"
@@ -54,21 +55,29 @@ ReactDOM.render(
           data={visitData}
         />
       </ChartCard>
-    </Col>  
+    </Col>
     <Col span={24} style={{ marginTop: 24 }}>
       <ChartCard
         title="线上购物转化率"
         action={<Tooltip title="购买效率"><Icon type="exclamation-circle-o" /></Tooltip>}
         total="78%"
-        footer={<Trend>
-          <Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
-          <Trend.Item title="日环比" flag="down">11%</Trend.Item>
-        </Trend>}
+        footer={
+          <div>
+            <span>
+              周同比
+              <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
+            </span>
+            <span style={{ marginLeft: 16 }}>
+              日环比
+              <Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
+            </span>
+          </div>
+        }
         contentHeight={46}
       >
         <MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
       </ChartCard>
-    </Col>  
+    </Col>
   </Row>
 , mountNode);
 ````

src/components/Charts/index.js

@@ -7,19 +7,15 @@ import Gauge from './Gauge';
 import MiniArea from './MiniArea';
 import MiniBar from './MiniBar';
 import MiniProgress from './MiniProgress';
-import Trend from './Trend';
 import Field from './Field';
 import NumberInfo from './NumberInfo';
 import WaterWave from './WaterWave';
 import TagCloud from './TagCloud';
 import TimelineChart from './TimelineChart';
-import { IconUp, IconDown } from './Icon';
 
 const yuan = val => `¥ ${numeral(val).format('0,0')}`;
 
 export default {
-  IconUp,
-  IconDown,
   yuan,
   Bar,
   Pie,
@@ -29,7 +25,6 @@ export default {
   MiniArea,
   MiniProgress,
   ChartCard,
-  Trend,
   Field,
   NumberInfo,
   WaterWave,

src/components/Charts/index.md

@@ -119,13 +119,6 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
 | titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
 | height | 高度值 | number | 400 |
 
-### Trend
-
-| 参数      | 说明                                      | 类型         | 默认值 |
-|----------|------------------------------------------|-------------|-------|
-| title | 标题 | ReactNode\|string | - |
-| flag | 上升下降标识 | boolean | - |
-
 ### NumberInfo
 
 | 参数      | 说明                                      | 类型         | 默认值 |

src/components/Trend/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Icon } from 'antd';
+import classNames from 'classnames';
+import styles from './index.less';
+
+const Trend = ({ colorful = true, flag, children, className, ...rest }) => {
+  const classString = classNames(styles.trendItem, {
+    [styles.trendItemGrey]: !colorful,
+  }, className);
+  return (
+    <div
+      {...rest}
+      className={classString}
+      title={typeof children === 'string' ? children : ''}
+    >
+      <span className={styles.value}>{children}</span>
+      {flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
+    </div>
+  );
+};
+
+export default Trend;

src/components/Trend/index.less

@@ -0,0 +1,32 @@
+@import "~antd/lib/style/themes/default.less";
+@import "../../utils/utils.less";
+
+.trendItem {
+  display: inline-block;
+  font-size: @font-size-base;
+  line-height: 22px;
+
+  & + & {
+    margin-left: 16px;
+  }
+  .up,
+  .down {
+    color: @green-6;
+    margin-left: 4px;
+    position: relative;
+    top: 1px;
+    i {
+      font-size: 12px;
+      transform: scale(0.83);
+    }
+  }
+  .down {
+    color: @red-6;
+    top: -1px;
+  }
+
+  &.trendItemGrey .up,
+  &.trendItemGrey .down {
+    color: @text-color;
+  }
+}

src/components/Trend/index.md

@@ -0,0 +1,19 @@
+---
+type: General
+title: Trend
+subtitle: 趋势标记
+cols: 1
+---
+
+趋势符号，标记上升和下降状态。
+
+## API
+
+```html
+<Trend flag="up">50%</Trend>
+```
+
+| 参数      | 说明                                      | 类型         | 默认值 |
+|----------|------------------------------------------|-------------|-------|
+| colorful | 是否彩色标记 | Boolean | true |
+| flag | 上升下降标识：`up\|down` | string | - |

src/routes/Dashboard/Analysis.js

@@ -2,9 +2,10 @@ import React, { Component } from 'react';
 import { connect } from 'dva';
 import { Row, Col, Icon, Card, Tabs, Table, Radio, DatePicker, Tooltip } from 'antd';
 import numeral from 'numeral';
-
-import { ChartCard, Trend, yuan, MiniArea, MiniBar, MiniProgress, Field, Bar, Pie, NumberInfo, IconUp, IconDown, TimelineChart } from '../../components/Charts';
-
+import {
+  ChartCard, yuan, MiniArea, MiniBar, MiniProgress, Field, Bar, Pie, NumberInfo, TimelineChart,
+} from '../../components/Charts';
+import Trend from '../../components/Trend';
 import { getTimeDistance } from '../../utils/utils';
 
 import styles from './Analysis.less';
@@ -161,14 +162,9 @@ export default class Analysis extends Component {
         key: 'range',
         sorter: (a, b) => a.range - b.range,
         render: (text, record) => (
-          <span>
-            {text}%
-            {
-              record.status === 1
-                ? <IconDown style={{ marginLeft: 8 }} />
-                : <IconUp style={{ marginLeft: 8 }} />
-            }
-          </span>
+          <Trend flag={record.status === 1 ? 'down' : 'up'}>
+            <span style={{ marginRight: 4 }}>{text}%</span>
+          </Trend>
         ),
         className: styles.alignRight,
       },
@@ -221,10 +217,14 @@ export default class Analysis extends Component {
               footer={<Field label="日均销售额" value={`￥${numeral(12423).format('0,0')}`} />}
               contentHeight={46}
             >
-              <Trend colorType="gray">
-                <Trend.Item title="周同比" flag="up">12%</Trend.Item>
-                <Trend.Item title="日环比" flag="down">11%</Trend.Item>
-              </Trend>
+              <span>
+                周同比
+                <Trend flag="up" className={styles.trend}>12%</Trend>
+              </span>
+              <span style={{ marginLeft: 16 }}>
+                日环比
+                <Trend flag="down" className={styles.trend}>11%</Trend>
+              </span>
             </ChartCard>
           </Col>
           <Col {...topColResponsiveProps}>
@@ -265,10 +265,16 @@ export default class Analysis extends Component {
               action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
               total="78%"
               footer={
-                <Trend>
-                  <Trend.Item title="周同比" flag="up">12.3%</Trend.Item>
-                  <Trend.Item title="日环比" flag="down">11%</Trend.Item>
-                </Trend>
+                <div>
+                  <span>
+                    周同比
+                    <Trend flag="up" className={styles.trend}>12%</Trend>
+                  </span>
+                  <span style={{ marginLeft: 16 }}>
+                    日环比
+                    <Trend flag="down" className={styles.trend}>11%</Trend>
+                  </span>
+                </div>
               }
               contentHeight={46}
             >

src/routes/Dashboard/Analysis.less

@@ -134,6 +134,11 @@ th.alignRight {
   text-align: right!important;
 }
 
+.trend {
+  margin-left: 8px;
+  color: @heading-color;
+}
+
 @media screen and (max-width: @screen-lg) {
   .salesExtra {
     display: none;