Skip to content

GitLab

P
pro-blocks
Commit 9d249064 authored by 偏右's avatar 偏右 Committed by GitHub
Browse files
Options

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
parent ec36e196
Show whitespace changes
Inline Side-by-side
Showing with 130 additions and 122 deletions
src/components/Charts/Icon/index.js deleted 100644 → 0
View file @ ec36e196
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 deleted 100644 → 0
View file @ ec36e196
@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 deleted 100644 → 0
View file @ ec36e196
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/demo/chart-card.md
View file @ 9d249064
...@@ -6,7 +6,8 @@ title: 图表卡片 ...@@ -6,7 +6,8 @@ title: 图表卡片
用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。 用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
````jsx ````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 { Tooltip, Icon } from 'antd';
import numeral from 'numeral'; import numeral from 'numeral';
...@@ -18,10 +19,14 @@ ReactDOM.render( ...@@ -18,10 +19,14 @@ ReactDOM.render(
footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />} footer={<Field label="日均销售额" value={numeral(12423).format('0,0')} />}
contentHeight={46} contentHeight={46}
> >
<Trend colorType="gray"> <span>
<Trend.Item title="周同比" flag="up">12.3%</Trend.Item> 周同比
<Trend.Item title="日环比" flag="down">11%</Trend.Item> <Trend flag="up" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>12%</Trend>
</Trend> </span>
<span style={{ marginLeft: 16 }}>
日环比
<Trend flag="down" style={{ marginLeft: 8, color: 'rgba(0,0,0,.85)' }}>11%</Trend>
</span>
</ChartCard> </ChartCard>
, mountNode); , mountNode);
```` ````
src/components/Charts/demo/mix.md
View file @ 9d249064
...@@ -6,7 +6,8 @@ title: 图表套件组合展示 ...@@ -6,7 +6,8 @@ title: 图表套件组合展示
利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。 利用 Ant Design Pro 提供的图表套件，可以灵活组合符合设计规范的图表来满足复杂的业务需求。
````jsx ````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 { Row, Col, Icon, Tooltip } from 'antd';
import numeral from 'numeral'; import numeral from 'numeral';
import moment from 'moment'; import moment from 'moment';
...@@ -60,10 +61,18 @@ ReactDOM.render( ...@@ -60,10 +61,18 @@ ReactDOM.render(
title="线上购物转化率" title="线上购物转化率"
action={<Tooltip title="购买效率"><Icon type="exclamation-circle-o" /></Tooltip>} action={<Tooltip title="购买效率"><Icon type="exclamation-circle-o" /></Tooltip>}
total="78%" total="78%"
footer={<Trend> footer={
<Trend.Item title="周同比" flag="up">12.3%</Trend.Item> <div>
<Trend.Item title="日环比" flag="down">11%</Trend.Item> <span>
</Trend>} 周同比
<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} contentHeight={46}
> >
<MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" /> <MiniProgress percent={78} strokeWidth={8} target={80} color="#5DD1DD" />
......
src/components/Charts/index.js
View file @ 9d249064
...@@ -7,19 +7,15 @@ import Gauge from './Gauge'; ...@@ -7,19 +7,15 @@ import Gauge from './Gauge';
import MiniArea from './MiniArea'; import MiniArea from './MiniArea';
import MiniBar from './MiniBar'; import MiniBar from './MiniBar';
import MiniProgress from './MiniProgress'; import MiniProgress from './MiniProgress';
import Trend from './Trend';
import Field from './Field'; import Field from './Field';
import NumberInfo from './NumberInfo'; import NumberInfo from './NumberInfo';
import WaterWave from './WaterWave'; import WaterWave from './WaterWave';
import TagCloud from './TagCloud'; import TagCloud from './TagCloud';
import TimelineChart from './TimelineChart'; import TimelineChart from './TimelineChart';
import { IconUp, IconDown } from './Icon';
const yuan = val => `&yen; ${numeral(val).format('0,0')}`; const yuan = val => `&yen; ${numeral(val).format('0,0')}`;
export default { export default {
IconUp,
IconDown,
yuan, yuan,
Bar, Bar,
Pie, Pie,
...@@ -29,7 +25,6 @@ export default { ...@@ -29,7 +25,6 @@ export default {
MiniArea, MiniArea,
MiniProgress, MiniProgress,
ChartCard, ChartCard,
Trend,
Field, Field,
NumberInfo, NumberInfo,
WaterWave, WaterWave,
......
src/components/Charts/index.md
View file @ 9d249064
...@@ -119,13 +119,6 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https ...@@ -119,13 +119,6 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
| titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - | | titleMap | 指标别名 | Object{y1: '客流量', y2: '支付笔数'} | - |
| height | 高度值 | number | 400 | | height | 高度值 | number | 400 |
### Trend
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| title | 标题 | ReactNode\|string | - |
| flag | 上升下降标识 | boolean | - |
### NumberInfo ### NumberInfo
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
......
src/components/Trend/index.js 0 → 100644
View file @ 9d249064
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/Charts/Trend/index.less → src/components/Trend/index.less
View file @ 9d249064
@import "~antd/lib/style/themes/default.less"; @import "~antd/lib/style/themes/default.less";
@import "../../../utils/utils.less"; @import "../../utils/utils.less";
.trend {
font-size: 0;
height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.trendItem { .trendItem {
display: inline-block; display: inline-block;
color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: 22px; line-height: 22px;
height: 22px;
& + & { & + & {
margin-left: 16px; margin-left: 16px;
} }
.content { .up,
display: block; .down {
}
.miniContent {
display: none;
}
.title {
margin-right: 8px;
}
.value {
color: @heading-color;
}
.up, .down {
color: @green-6; color: @green-6;
margin-left: 4px; margin-left: 4px;
position: relative; position: relative;
...@@ -44,15 +24,9 @@ ...@@ -44,15 +24,9 @@
color: @red-6; color: @red-6;
top: -1px; top: -1px;
} }
}
.trendItem:last-child {
margin-right: 0;
}
.trendgray { &.trendItemGrey .up,
.trend(); &.trendItemGrey .down {
.trendItem {
color: @text-color; color: @text-color;
} }
} }
src/components/Trend/index.md 0 → 100644
View file @ 9d249064
---
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
View file @ 9d249064
...@@ -2,9 +2,10 @@ import React, { Component } from 'react'; ...@@ -2,9 +2,10 @@ import React, { Component } from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Row, Col, Icon, Card, Tabs, Table, Radio, DatePicker, Tooltip } from 'antd'; import { Row, Col, Icon, Card, Tabs, Table, Radio, DatePicker, Tooltip } from 'antd';
import numeral from 'numeral'; import numeral from 'numeral';
import {
import { ChartCard, Trend, yuan, MiniArea, MiniBar, MiniProgress, Field, Bar, Pie, NumberInfo, IconUp, IconDown, TimelineChart } from '../../components/Charts'; ChartCard, yuan, MiniArea, MiniBar, MiniProgress, Field, Bar, Pie, NumberInfo, TimelineChart,
} from '../../components/Charts';
import Trend from '../../components/Trend';
import { getTimeDistance } from '../../utils/utils'; import { getTimeDistance } from '../../utils/utils';
import styles from './Analysis.less'; import styles from './Analysis.less';
...@@ -161,14 +162,9 @@ export default class Analysis extends Component { ...@@ -161,14 +162,9 @@ export default class Analysis extends Component {
key: 'range', key: 'range',
sorter: (a, b) => a.range - b.range, sorter: (a, b) => a.range - b.range,
render: (text, record) => ( render: (text, record) => (
<span> <Trend flag={record.status === 1 ? 'down' : 'up'}>
{text}% <span style={{ marginRight: 4 }}>{text}%</span>
{ </Trend>
record.status === 1
? <IconDown style={{ marginLeft: 8 }} />
: <IconUp style={{ marginLeft: 8 }} />
}
</span>
), ),
className: styles.alignRight, className: styles.alignRight,
}, },
...@@ -221,10 +217,14 @@ export default class Analysis extends Component { ...@@ -221,10 +217,14 @@ export default class Analysis extends Component {
footer={<Field label="日均销售额" value={`￥${numeral(12423).format('0,0')}`} />} footer={<Field label="日均销售额" value={`￥${numeral(12423).format('0,0')}`} />}
contentHeight={46} contentHeight={46}
> >
<Trend colorType="gray"> <span>
<Trend.Item title="周同比" flag="up">12%</Trend.Item> 周同比
<Trend.Item title="日环比" flag="down">11%</Trend.Item> <Trend flag="up" className={styles.trend}>12%</Trend>
</Trend> </span>
<span style={{ marginLeft: 16 }}>
日环比
<Trend flag="down" className={styles.trend}>11%</Trend>
</span>
</ChartCard> </ChartCard>
</Col> </Col>
<Col {...topColResponsiveProps}> <Col {...topColResponsiveProps}>
...@@ -265,10 +265,16 @@ export default class Analysis extends Component { ...@@ -265,10 +265,16 @@ export default class Analysis extends Component {
action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>} action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total="78%" total="78%"
footer={ footer={
<Trend> <div>
<Trend.Item title="周同比" flag="up">12.3%</Trend.Item> <span>
<Trend.Item title="日环比" flag="down">11%</Trend.Item> 周同比
</Trend> <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} contentHeight={46}
> >
......
src/routes/Dashboard/Analysis.less
View file @ 9d249064
...@@ -134,6 +134,11 @@ th.alignRight { ...@@ -134,6 +134,11 @@ th.alignRight {
text-align: right!important; text-align: right!important;
} }
.trend {
margin-left: 8px;
color: @heading-color;
}
@media screen and (max-width: @screen-lg) { @media screen and (max-width: @screen-lg) {
.salesExtra { .salesExtra {
display: none; display: none;
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment