From 9d249064ba4fdbf43430ad5a424bc6fe47d72b98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=81=8F=E5=8F=B3?= Date: Wed, 25 Oct 2017 08:02:29 -0500 Subject: [PATCH] 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 | 29 ------------ src/components/Charts/Icon/index.less | 15 ------ src/components/Charts/Trend/index.js | 34 -------------- src/components/Charts/Trend/index.less | 58 ------------------------ src/components/Charts/demo/chart-card.md | 15 ++++-- src/components/Charts/demo/mix.md | 25 ++++++---- src/components/Charts/index.js | 5 -- src/components/Charts/index.md | 7 --- src/components/Trend/index.js | 22 +++++++++ src/components/Trend/index.less | 32 +++++++++++++ src/components/Trend/index.md | 19 ++++++++ src/routes/Dashboard/Analysis.js | 44 ++++++++++-------- src/routes/Dashboard/Analysis.less | 5 ++ 13 files changed, 130 insertions(+), 180 deletions(-) delete mode 100644 src/components/Charts/Icon/index.js delete mode 100644 src/components/Charts/Icon/index.less delete mode 100644 src/components/Charts/Trend/index.js delete mode 100644 src/components/Charts/Trend/index.less create mode 100644 src/components/Trend/index.js create mode 100644 src/components/Trend/index.less create mode 100644 src/components/Trend/index.md diff --git a/src/components/Charts/Icon/index.js b/src/components/Charts/Icon/index.js deleted file mode 100644 index 668b8828..00000000 --- a/src/components/Charts/Icon/index.js +++ /dev/null @@ -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 }) => ( - -); - -const IconDown = ({ color, className, ...rest }) => ( - -); - -export default { - IconUp, - IconDown, -}; diff --git a/src/components/Charts/Icon/index.less b/src/components/Charts/Icon/index.less deleted file mode 100644 index 4009f239..00000000 --- a/src/components/Charts/Icon/index.less +++ /dev/null @@ -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; -} diff --git a/src/components/Charts/Trend/index.js b/src/components/Charts/Trend/index.js deleted file mode 100644 index 09be71e4..00000000 --- a/src/components/Charts/Trend/index.js +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { Icon } from 'antd'; - -import styles from './index.less'; - -const Item = ({ title, flag, children, ...rest }) => { - return ( -
-
- {title} - {children} - {flag && } -
-
- ); -}; - -class Trend extends React.Component { - render() { - const { colorType, children, ...rest } = this.props; - return ( -
- {children} -
- ); - } -} - -Trend.Item = Item; - -export default Trend; diff --git a/src/components/Charts/Trend/index.less b/src/components/Charts/Trend/index.less deleted file mode 100644 index 7bfe6086..00000000 --- a/src/components/Charts/Trend/index.less +++ /dev/null @@ -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; - } -} diff --git a/src/components/Charts/demo/chart-card.md b/src/components/Charts/demo/chart-card.md index 519426f7..7e14a56c 100644 --- a/src/components/Charts/demo/chart-card.md +++ b/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={} contentHeight={46} > - - 12.3% - 11% - + + 周同比 + 12% + + + 日环比 + 11% + , mountNode); ```` diff --git a/src/components/Charts/demo/mix.md b/src/components/Charts/demo/mix.md index 7bb384fa..679966c5 100644 --- a/src/components/Charts/demo/mix.md +++ b/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} /> - + - + } total="78%" - footer={ - 12.3% - 11% - } + footer={ +
+ + 周同比 + 12% + + + 日环比 + 11% + +
+ } contentHeight={46} > - + , mountNode); ```` diff --git a/src/components/Charts/index.js b/src/components/Charts/index.js index 1059fbc6..a1a3b7ab 100644 --- a/src/components/Charts/index.js +++ b/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, diff --git a/src/components/Charts/index.md b/src/components/Charts/index.md index d9efad4a..21d3c06f 100644 --- a/src/components/Charts/index.md +++ b/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 | 参数 | 说明 | 类型 | 默认值 | diff --git a/src/components/Trend/index.js b/src/components/Trend/index.js new file mode 100644 index 00000000..2cbaad4e --- /dev/null +++ b/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 ( +
+ {children} + {flag && } +
+ ); +}; + +export default Trend; diff --git a/src/components/Trend/index.less b/src/components/Trend/index.less new file mode 100644 index 00000000..0e7d6207 --- /dev/null +++ b/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; + } +} diff --git a/src/components/Trend/index.md b/src/components/Trend/index.md new file mode 100644 index 00000000..d6ec34f9 --- /dev/null +++ b/src/components/Trend/index.md @@ -0,0 +1,19 @@ +--- +type: General +title: Trend +subtitle: 趋势标记 +cols: 1 +--- + +趋势符号，标记上升和下降状态。 + +## API + +```html +50% +``` + +| 参数 | 说明 | 类型 | 默认值 | +|----------|------------------------------------------|-------------|-------| +| colorful | 是否彩色标记 | Boolean | true | +| flag | 上升下降标识：`up\|down` | string | - | diff --git a/src/routes/Dashboard/Analysis.js b/src/routes/Dashboard/Analysis.js index 68c391d0..8640e232 100644 --- a/src/routes/Dashboard/Analysis.js +++ b/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) => ( - - {text}% - { - record.status === 1 - ? - : - } - + + {text}% + ), className: styles.alignRight, }, @@ -221,10 +217,14 @@ export default class Analysis extends Component { footer={} contentHeight={46} > - - 12% - 11% - + + 周同比 + 12% + + + 日环比 + 11% + @@ -265,10 +265,16 @@ export default class Analysis extends Component { action={} total="78%" footer={ - - 12.3% - 11% - +
+ + 周同比 + 12% + + + 日环比 + 11% + +
} contentHeight={46} > diff --git a/src/routes/Dashboard/Analysis.less b/src/routes/Dashboard/Analysis.less index d5e662e6..19897eaf 100644 --- a/src/routes/Dashboard/Analysis.less +++ b/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; -- GitLab