tsai
/
ant-design-pro
mirror of https://github.com/ant-design/ant-design-pro
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix dashboard style

pull/26/head
afc163 9 years ago
parent
577564cf7e
commit
3e042cbcfa
12 changed files with 59 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      mock/chart.js
  2. 1
      package.json
  3. 2
      src/components/Charts/Bar/index.js
  4. 3
      src/components/Charts/ChartCard/index.less
  5. 3
      src/components/Charts/Field/index.less
  6. 9
      src/components/Charts/MiniArea/index.js
  7. 6
      src/components/Charts/TimelineChart/index.js
  8. 7
      src/components/Charts/Trend/index.js
  9. 13
      src/components/Charts/Trend/index.less
  10. 12
      src/components/Charts/index.md
  11. 2
      src/models/chart.js
  12. 23
      src/routes/Dashboard/Analysis.js

17
mock/chart.js
View File

@ -3,12 +3,24 @@ import moment from 'moment';
// mock data // mock data
const visitData = []; const visitData = [];
const beginDay = new Date().getTime(); const beginDay = new Date().getTime();
for (let i = 0; i < 30; i += 1) {
const fakeY = [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5];
for (let i = 0; i < fakeY.length; i += 1) {
visitData.push({ visitData.push({
x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'), x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
y: Math.floor(Math.random() * 100) + 10, y: fakeY[i],
});
}
const visitData2 = [];
const fakeY2 = [1, 6, 4, 8, 3, 7, 2];
for (let i = 0; i < fakeY2.length; i += 1) {
visitData2.push({
x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
y: fakeY2[i],
}); });
} }
const salesData = []; const salesData = [];
for (let i = 0; i < 12; i += 1) { for (let i = 0; i < 12; i += 1) {
salesData.push({ salesData.push({
@ -169,6 +181,7 @@ radarOriginData.forEach((item) => {
export const getFakeChartData = { export const getFakeChartData = {
visitData, visitData,
visitData2,
salesData, salesData,
searchData, searchData,
offlineData, offlineData,

1
package.json
View File

@ -1,5 +1,6 @@
{ {
"name": "ant-design-pro", "name": "ant-design-pro",
"version": "0.9.0",
"private": true, "private": true,
"scripts": { "scripts": {
"precommit": "npm run lint-staged", "precommit": "npm run lint-staged",

2
src/components/Charts/Bar/index.js
View File

@ -25,7 +25,7 @@ class Bar extends PureComponent {
} }
renderChart(data) { renderChart(data) {
const { height = 0, fit = true, color = '#33abfb', margin = [32, 0, 32, 40] } = this.props; const { height = 0, fit = true, color = 'rgba(24, 144, 255, 0.85)', margin = [32, 0, 32, 40] } = this.props;
if (!data || (data && data.length < 1)) { if (!data || (data && data.length < 1)) {
return; return;

3
src/components/Charts/ChartCard/index.less
View File

@ -36,9 +36,8 @@
} }
.footer { .footer {
border-top: 1px solid @border-color-split; border-top: 1px solid @border-color-split;
padding-top: 8px; padding-top: 9px;
margin-top: 20px; margin-top: 20px;
margin-bottom: 10px;
& > * { & > * {
position: relative; position: relative;
} }

3
src/components/Charts/Field/index.less
View File

@ -10,8 +10,7 @@
line-height: 22px; line-height: 22px;
} }
span:last-child { span:last-child {
font-weight: 600;
margin-left: 8px; margin-left: 8px;
color: @heading-color;
} }
} }

9
src/components/Charts/MiniArea/index.js
View File

@ -4,6 +4,11 @@ import equal from '../equal';
import styles from '../index.less'; import styles from '../index.less';
class MiniArea extends PureComponent { class MiniArea extends PureComponent {
static defaultProps = {
borderColor: '#1890FF',
color: 'rgba(24, 144, 255, 0.2)',
};
componentDidMount() { componentDidMount() {
this.renderChart(this.props.data); this.renderChart(this.props.data);
} }
@ -25,7 +30,9 @@ class MiniArea extends PureComponent {
} }
renderChart(data) { renderChart(data) {
const { height = 0, fit = true, color = '#33abfb', borderWidth = 1, line, xAxis, yAxis, animate = true } = this.props; const {
height = 0, fit = true, color, borderWidth = 2, line, xAxis, yAxis, animate = true,
} = this.props;
const borderColor = this.props.borderColor || color; const borderColor = this.props.borderColor || color;
if (!data || (data && data.length < 1)) { if (!data || (data && data.length < 1)) {

6
src/components/Charts/TimelineChart/index.js
View File

@ -30,7 +30,7 @@ class TimelineChart extends Component {
} }
renderChart(data) { renderChart(data) {
const { height = 400, margin = [60, 20, 40, 40], titleMap } = this.props; const { height = 400, margin = [60, 20, 40, 40], titleMap, borderWidth = 2 } = this.props;
if (!data || (data && data.length < 1)) { if (!data || (data && data.length < 1)) {
return; return;
@ -81,8 +81,8 @@ class TimelineChart extends Component {
}, },
}); });
chart.line().position('x*y1').color('#1890FF'); chart.line().position('x*y1').color('#1890FF').size(borderWidth);
chart.line().position('x*y2').color('#2FC25B'); chart.line().position('x*y2').color('#2FC25B').size(borderWidth);
this.chart = chart; this.chart = chart;

7
src/components/Charts/Trend/index.js
View File

@ -43,8 +43,8 @@ const Item = ({ title, flag, children, ...rest }, { mini }) => {
<div {...rest} className={clsString}> <div {...rest} className={clsString}>
<div className={styles.content}> <div className={styles.content}>
<span className={styles.title}>{title}</span> <span className={styles.title}>{title}</span>
{ flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
<span className={styles.value}>{children}</span> <span className={styles.value}>{children}</span>
{flag && <span className={styles[flag]}><Icon type={`caret-${flag}`} /></span>}
</div> </div>
<div className={styles.miniContent}> <div className={styles.miniContent}>
{miniContent} {miniContent}
@ -70,7 +70,10 @@ class Trend extends React.Component {
render() { render() {
const { colorType, children, mini, ...rest } = this.props; const { colorType, children, mini, ...rest } = this.props;
return ( return (
<div className={colorType ? (styles[`trend${colorType}`] || styles.trend) : styles.trend} {...rest}> <div
className={colorType ? (styles[`trend${colorType}`] || styles.trend) : styles.trend}
{...rest}
>
{children} {children}
</div> </div>
); );

13
src/components/Charts/Trend/index.less
View File

@ -11,7 +11,7 @@
.trendItem { .trendItem {
display: inline-block; display: inline-block;
margin-right: 16px; margin-right: 24px;
color: @text-color; color: @text-color;
font-size: @font-size-base; font-size: @font-size-base;
line-height: 22px; line-height: 22px;
@ -26,12 +26,11 @@
margin-right: 8px; margin-right: 8px;
} }
.value { .value {
color: @text-color; color: @heading-color;
font-weight: 600;
} }
.up, .down { .up, .down {
color: #00a854; color: @green-6;
margin-right: 4px; margin-left: 4px;
position: relative; position: relative;
top: 1px; top: 1px;
i { i {
@ -40,7 +39,7 @@
} }
} }
.down { .down {
color: #f04134; color: @red-6;
top: -1px; top: -1px;
} }
} }
@ -52,7 +51,7 @@
.trendgray { .trendgray {
.trend(); .trend();
.trendItem { .trendItem {
color: @text-color-secondary; color: @text-color;
} }
} }

12
src/components/Charts/index.md
View File

@ -7,7 +7,7 @@ cols: 2
Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。 Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https://antv.alipay.com/g2/doc/index.html) 按照 Ant Design 图表规范封装，需要注意的是 Ant Design Pro 的图表组件以套件形式提供，可以任意组合实现复杂的业务需求。
因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。 因为结合了 Ant Design 的标准设计，本着极简的设计思想以及开箱即用的理念，简化了大量 API 配置，所以如果需要灵活定制图表，可以参考 Ant Design Pro 图表实现，自行基于 [G2](https://antv.alipay.com/g2/doc/index.html) 封装图表组件使用。
## API ## API
@ -25,7 +25,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------| |----------|------------------------------------------|-------------|-------|
| color | 图表颜色 | string | `#33abfb` | | color | 图表颜色 | string | `#1890FF` |
| height | 图表高度 | number | - | | height | 图表高度 | number | - |
| data | 数据 | array<{x, y}> | - | | data | 数据 | array<{x, y}> | - |
@ -33,8 +33,8 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------| |----------|------------------------------------------|-------------|-------|
| color | 图表颜色 | string | `#33abfb` | | color | 图表颜色 | string | `#rgba(24, 144, 255, 0.2)` |
| borderColor | 图表边颜色 | string | `#33abfb` | | borderColor | 图表边颜色 | string | `#1890FF` |
| height | 图表高度 | number | - | | height | 图表高度 | number | - |
| line | 是否显示描边 | boolean | false | | line | 是否显示描边 | boolean | false |
| animate | 是否显示动画 | boolean | true | | animate | 是否显示动画 | boolean | true |
@ -56,7 +56,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------| |----------|------------------------------------------|-------------|-------|
| title | 图表标题 | ReactNode\|string | - | | title | 图表标题 | ReactNode\|string | - |
| color | 图表颜色 | string | `#33abfb` | | color | 图表颜色 | string | `#rgba(24, 144, 255, 0.85)` |
| margin | 图表内部间距 | array | \[32, 0, 32, 40\] | | margin | 图表内部间距 | array | \[32, 0, 32, 40\] |
| height | 图表高度 | number | - | | height | 图表高度 | number | - |
| data | 数据 | array<{x, y}> | - | | data | 数据 | array<{x, y}> | - |
@ -126,7 +126,7 @@ Ant Design Pro 提供的业务中常用的图表类型，都是基于 [G2](https
| title | 标题 | ReactNode\|string | - | | title | 标题 | ReactNode\|string | - |
| flag | 上升下降标识 | boolean | - | | flag | 上升下降标识 | boolean | - |
### NumberInfo ### NumberInfo
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------| |----------|------------------------------------------|-------------|-------|

2
src/models/chart.js
View File

@ -5,6 +5,7 @@ export default {
state: { state: {
visitData: [], visitData: [],
visitData2: [],
salesData: [], salesData: [],
searchData: [], searchData: [],
offlineData: [], offlineData: [],
@ -50,6 +51,7 @@ export default {
clear() { clear() {
return { return {
visitData: [], visitData: [],
visitData2: [],
salesData: [], salesData: [],
searchData: [], searchData: [],
offlineData: [], offlineData: [],

23
src/routes/Dashboard/Analysis.js
View File

@ -80,6 +80,7 @@ export default class Analysis extends Component {
const { chart } = this.props; const { chart } = this.props;
const { const {
visitData, visitData,
visitData2,
salesData, salesData,
searchData, searchData,
offlineData, offlineData,
@ -187,13 +188,13 @@ export default class Analysis extends Component {
<ChartCard <ChartCard
bordered={false} bordered={false}
title="总销售额" title="总销售额"
action={<Tooltip title="指标说明"><Icon type="exclamation-circle-o" /></Tooltip>} action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={yuan(126560)} total={yuan(126560)}
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" mini={['xlg', 'md']}> <Trend colorType="gray" mini={['xlg', 'md']}>
<Trend.Item title="周同比" flag="up">12.3%</Trend.Item> <Trend.Item title="周同比" flag="up">12%</Trend.Item>
<Trend.Item title="日环比" flag="down">11%</Trend.Item> <Trend.Item title="日环比" flag="down">11%</Trend.Item>
</Trend> </Trend>
</ChartCard> </ChartCard>
@ -202,7 +203,7 @@ export default class Analysis extends Component {
<ChartCard <ChartCard
bordered={false} bordered={false}
title="访问量" title="访问量"
action={<Tooltip title="指标说明"><Icon type="exclamation-circle-o" /></Tooltip>} action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={numeral(8846).format('0,0')} total={numeral(8846).format('0,0')}
footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />} footer={<Field label="日访问量" value={numeral(1234).format('0,0')} />}
contentHeight={46} contentHeight={46}
@ -218,7 +219,7 @@ export default class Analysis extends Component {
<ChartCard <ChartCard
bordered={false} bordered={false}
title="支付笔数" title="支付笔数"
action={<Tooltip title="指标说明"><Icon type="exclamation-circle-o" /></Tooltip>} action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total={numeral(6560).format('0,0')} total={numeral(6560).format('0,0')}
footer={<Field label="转化率" value="60%" />} footer={<Field label="转化率" value="60%" />}
contentHeight={46} contentHeight={46}
@ -233,7 +234,7 @@ export default class Analysis extends Component {
<ChartCard <ChartCard
bordered={false} bordered={false}
title="运营活动效果" title="运营活动效果"
action={<Tooltip title="指标说明"><Icon type="exclamation-circle-o" /></Tooltip>} action={<Tooltip title="指标说明"><Icon type="info-circle-o" /></Tooltip>}
total="78%" total="78%"
footer={ footer={
<Trend mini={['xlg', 'md']}> <Trend mini={['xlg', 'md']}>
@ -253,7 +254,7 @@ export default class Analysis extends Component {
bodyStyle={{ padding: 0 }} bodyStyle={{ padding: 0 }}
> >
<div className={styles.salesCard}> <div className={styles.salesCard}>
<Tabs tabBarExtraContent={salesExtra}> <Tabs tabBarExtraContent={salesExtra} size="large" tabBarStyle={{ marginBottom: 24 }}>
<TabPane tab="销售额" key="sales"> <TabPane tab="销售额" key="sales">
<Row> <Row>
<Col xl={16} lg={12} md={12} sm={24} xs={24}> <Col xl={16} lg={12} md={12} sm={24} xs={24}>
@ -334,10 +335,8 @@ export default class Analysis extends Component {
/> />
<MiniArea <MiniArea
line line
borderColor="#00a2fc"
color="#c9eafe"
height={45} height={45}
data={visitData} data={visitData2}
/> />
</Col> </Col>
<Col sm={12} xs={24} style={{ marginBottom: 24 }}> <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
@ -349,10 +348,8 @@ export default class Analysis extends Component {
/> />
<MiniArea <MiniArea
line line
borderColor="#00a2fc"
color="#c9eafe"
height={45} height={45}
data={visitData} data={visitData2}
/> />
</Col> </Col>
</Row> </Row>

Write Preview
Loading…
Cancel
Save