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
Hide 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: 图表卡片
用于展示图表的卡片容器，可以方便的配合其它图表套件展示丰富信息。
````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
View file @ 9d249064
......@@ -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
View file @ 9d249064
......@@ -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 => `&yen; ${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
View file @ 9d249064
......@@ -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 → 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 "../../../utils/utils.less";
.trend {
font-size: 0;
height: 22px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@import "../../utils/utils.less";
.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 {
.up,
.down {
color: @green-6;
margin-left: 4px;
position: relative;
......@@ -44,15 +24,9 @@
color: @red-6;
top: -1px;
}
}
.trendItem:last-child {
margin-right: 0;
}
.trendgray {
.trend();
.trendItem {
&.trendItemGrey .up,
&.trendItemGrey .down {
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';
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
View file @ 9d249064
......@@ -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;
......
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