diff --git a/src/components/Charts/Icon/index.js b/src/components/Charts/Icon/index.js deleted file mode 100644 index 668b88280f44e322f7c8bf2bc44babc257159db0..0000000000000000000000000000000000000000 --- 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 4009f23941b86e592070221fe935cc26746bd8f2..0000000000000000000000000000000000000000 --- 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 09be71e4b0cdbab14090a61a3ef074ddb46de27f..0000000000000000000000000000000000000000 --- 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 7bfe608672905d828da3e9c3be90b091eeb228af..0000000000000000000000000000000000000000 --- 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 519426f725ff8fcf4d158eb40d48ed0a64232c62..7e14a56c0be3f614f70d40ae96fed4c55efb0df1 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 7bb384fadf8f75aaf92dde5e15bc54eccd268685..679966c54528a1d13b72f8a75266cd59d1f928b1 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 1059fbc60ebb5f836d5a9bcf07f42b1137b8a106..a1a3b7ab1bd574d42c3688e1f52c00cebec83a69 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 d9efad4a7e46495790412639c39d3476c2571975..21d3c06fed2801549d9b4bf519c419c90d4f64c3 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 0000000000000000000000000000000000000000..2cbaad4e237a74dc98c51a3a9880afeb798216f3 --- /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 0000000000000000000000000000000000000000..0e7d62074e49bb45305ea6d2975e44e68cf42492 --- /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 0000000000000000000000000000000000000000..d6ec34f984d5ce7882439480f1c2664e31c3827e --- /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 68c391d0a689eb477a8fea6be1b3755237674316..8640e23247ff3e135b21b62725de1cee7b316b61 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 d5e662e6420e08e23d3d52b3c018422390a9b874..19897eafb258962fd2d413fc5afb7d7e05131348 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;