Skip to content

GitLab

P
pro-blocks
Commit 402532cd authored by niko's avatar niko Committed by GitHub
Browse files
Options

Dashboard: design update (#18) 

* update analysis

* update monitor

* update workplace
parent 92898b29
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 41 deletions
mock/chart.js
View file @ 402532cd
......@@ -3,7 +3,7 @@ import moment from 'moment';
// mock data
const visitData = [];
const beginDay = new Date().getTime();
for (let i = 0; i < 20; i += 1) {
for (let i = 0; i < 7; i += 1) {
visitData.push({
x: moment(new Date(beginDay + (1000 * 60 * 60 * 24 * i))).format('YYYY-MM-DD'),
y: Math.floor(Math.random() * 100) + 10,
......
src/components/ActiveChart/index.js
View file @ 402532cd
......@@ -46,7 +46,9 @@ export default class ActiveChart extends PureComponent {
<MiniArea
animate={false}
line
color="#5DD1DD"
borderColor="#00a2fc"
borderWidth={2}
color="#c9eafe"
height={84}
yAxis={{
tickCount: 3,
......
src/components/Charts/MiniArea/index.js
View file @ 402532cd
......@@ -25,7 +25,8 @@ class MiniArea extends PureComponent {
}
renderChart(data) {
const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis, animate = true } = this.props;
const { height = 0, fit = true, color = '#33abfb', borderWidth = 1, line, xAxis, yAxis, animate = true } = this.props;
const borderColor = this.props.borderColor || color;
if (!data || (data && data.length < 1)) {
return;
......@@ -61,7 +62,7 @@ class MiniArea extends PureComponent {
chart.axis('y', false);
}
chart.source(data, {
const dataConfig = {
x: {
type: 'cat',
range: [0, 1],
......@@ -71,18 +72,35 @@ class MiniArea extends PureComponent {
min: 0,
...yAxis,
},
});
};
chart.tooltip({
const view = chart.createView();
view.tooltip({
title: null,
crosshairs: false,
map: {
name: 'x',
name: 'y',
},
});
chart.area().position('x*y').color(color).shape('smooth');
view.source(data, dataConfig);
view.area().position('x*y').color(color).shape('smooth');
chart.on('tooltipchange', (ev) => {
const item = ev.items[0];
const { title } = item;
item.title = '';
item.name = '';
item.value = `${title} : ${item.value}`;
});
if (line) {
chart.line().position('x*y').color(color).shape('smooth');
const view2 = chart.createView();
view2.source(data, dataConfig);
view2.line().position('x*y').color(borderColor).size(borderWidth)
.shape('smooth');
view2.tooltip(false);
}
chart.render();
......
src/components/Charts/NumberInfo/index.js
View file @ 402532cd
......@@ -4,7 +4,7 @@ import classNames from 'classnames';
import styles from './index.less';
export default ({ theme, title, subTitle, total, subTotal, status, ...rest }) => (
export default ({ theme, title, subTitle, total, subTotal, status, suffix, ...rest }) => (
<div
className={
classNames(styles.numberInfo, {
......@@ -18,7 +18,7 @@ export default ({ theme, title, subTitle, total, subTotal, status, ...rest }) =>
}
<h6>{subTitle}</h6>
<div>
<span>{total}</span>
<span>{total}{suffix && <em className={styles.suffix}>{suffix}</em>}</span>
{
(status || subTotal) && (
<span className={styles.subTotal}>
......
src/components/Charts/NumberInfo/index.less
View file @ 402532cd
......@@ -2,6 +2,12 @@
@import "../../../utils/utils.less";
.numberInfo {
.suffix {
color: @text-color;
font-size: 16px;
font-style: normal;
margin-left: 4px;
}
h4 {
color: @heading-color;
margin-bottom: 16px;
......
src/components/Charts/Radar/index.js
View file @ 402532cd
......@@ -55,6 +55,8 @@ class Radar extends PureComponent {
tickCount = 4,
margin = [16, 30, 16, 30] } = this.props;
const colors = ['#1890FF', '#FACC14', '#2FC25B'];
if (!data || (data && data.length < 1)) {
return;
}
......@@ -93,8 +95,8 @@ class Radar extends PureComponent {
},
});
chart.line().position('label*value').color('name');
chart.point().position('label*value').color('name').shape('circle');
chart.line().position('label*value').color('name', colors);
chart.point().position('label*value').color('name', colors).shape('circle');
chart.render();
......
src/routes/Dashboard/Analysis.js
View file @ 402532cd
......@@ -208,8 +208,7 @@ export default class Analysis extends Component {
contentHeight={46}
>
<MiniArea
line
color="#AF7CE9"
color="#9f5ae0"
height={46}
data={visitData}
/>
......@@ -335,7 +334,8 @@ export default class Analysis extends Component {
/>
<MiniArea
line
color="#cceafe"
borderColor="#00a2fc"
color="#c9eafe"
height={45}
data={visitData}
/>
......@@ -349,7 +349,8 @@ export default class Analysis extends Component {
/>
<MiniArea
line
color="#5dd1dd"
borderColor="#00a2fc"
color="#c9eafe"
height={45}
data={visitData}
/>
......@@ -371,17 +372,24 @@ export default class Analysis extends Component {
</Col>
<Col lg={12} sm={24} xs={24}>
<Card
className={styles.salesCard}
bordered={false}
title="销售额类别占比"
extra={iconGroup}
extra={(
<div className={styles.salesCardExtra}>
{iconGroup}
<div className={styles.salesTypeRadio}>
<Radio.Group value={salesType} onChange={this.handleChangeSalesType}>
<Radio.Button value="all">全部渠道</Radio.Button>
<Radio.Button value="online">线上</Radio.Button>
<Radio.Button value="offline">门店</Radio.Button>
</Radio.Group>
</div>
</div>
)}
style={{ marginTop: 24 }}
>
<Radio.Group value={salesType} onChange={this.handleChangeSalesType}>
<Radio.Button value="all">全部渠道</Radio.Button>
<Radio.Button value="online">线上</Radio.Button>
<Radio.Button value="offline">门店</Radio.Button>
</Radio.Group>
<div style={{ marginTop: 32, marginBottom: 67 }}>
<div style={{ marginTop: 32, marginBottom: 54 }}>
<Pie
hasLegend
title="销售额"
......@@ -397,6 +405,7 @@ export default class Analysis extends Component {
</Row>
<Card
className={styles.offlineCard}
bordered={false}
bodyStyle={{ padding: '0 0 24px 0' }}
style={{ marginTop: 24 }}
......
src/routes/Dashboard/Analysis.less
View file @ 402532cd
......@@ -35,7 +35,8 @@
text-align: center;
}
span.active {
background-color: @primary-color;
//background-color: @primary-color;
background-color: #314659;
color: #fff;
}
span:last-child {
......@@ -79,6 +80,33 @@
}
}
.salesCard {
:global {
.ant-card-head {
position: relative;
}
}
}
.salesCardExtra {
height: 88px;
}
.salesTypeRadio {
position: absolute;
left: 24px;
bottom: 15px;
}
.offlineCard {
:global {
.ant-tabs-bar {
border-bottom: none;
}
.ant-tabs-ink-bar {
top: 1px;
}
}
}
@media screen and (max-width: @screen-lg) {
.salesExtra {
display: none;
......
src/routes/Dashboard/Monitor.js
View file @ 402532cd
......@@ -36,12 +36,13 @@ export default class Monitor extends PureComponent {
return (
<div>
<Row gutter={24}>
<Col lg={16} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Col xl={18} lg={24} md={24} sm={24} xs={24} style={{ marginBottom: 24 }}>
<Card title="活动实时交易情况" bordered={false}>
<Row>
<Col sm={6} xs={12}>
<NumberInfo
subTitle="今日交易总额"
suffix="元"
total={numeral(124543233).format('0,0')}
/>
</Col>
......@@ -60,16 +61,17 @@ export default class Monitor extends PureComponent {
<Col sm={6} xs={12}>
<NumberInfo
subTitle="每秒交易总额"
suffix="元"
total={numeral(234).format('0,0')}
/>
</Col>
</Row>
<div className={styles.mapChart}>
<img src="https://gw.alipayobjects.com/zos/rmsportal/fBcAYoxWIjlUXwDjqvzg.png" alt="map" />
<img src="https://gw.alipayobjects.com/zos/rmsportal/LYbCPIWLeUrdWSpVvKIL.png" alt="map" />
</div>
</Card>
</Col>
<Col lg={8} md={24} sm={24} xs={24}>
<Col xl={6} lg={24} md={24} sm={24} xs={24}>
<Card title="活动情况预测" style={{ marginBottom: 24 }} bordered={false}>
<ActiveChart />
</Card>
......@@ -81,13 +83,13 @@ export default class Monitor extends PureComponent {
>
<Gauge
format={(val) => {
switch (val) {
switch (parseInt(val, 10)) {
case 20:
return '差';
case 40:
return '中';
case 60:
return '量';
return '良';
case 80:
return '优';
default:
......@@ -95,14 +97,14 @@ export default class Monitor extends PureComponent {
}
}}
title="核销率"
height={164}
height={180}
percent={87}
/>
</Card>
</Col>
</Row>
<Row gutter={24}>
<Col sm={8} xs={24}>
<Col lg={12} sm={24} xs={24}>
<Card
title="各品类占比"
style={{ marginBottom: 24 }}
......@@ -119,7 +121,7 @@ export default class Monitor extends PureComponent {
</Col>
<Col span={8}>
<Pie
color="#5DD1DD"
color="#5DDECF"
percent={22}
subTitle="西餐"
total="22%"
......@@ -128,7 +130,7 @@ export default class Monitor extends PureComponent {
</Col>
<Col span={8}>
<Pie
color="#B5EDC9"
color="#2FC25B"
percent={32}
subTitle="火锅"
total="32%"
......@@ -138,7 +140,7 @@ export default class Monitor extends PureComponent {
</Row>
</Card>
</Col>
<Col sm={8} xs={24} style={{ marginBottom: 24 }}>
<Col lg={6} sm={12} xs={24} style={{ marginBottom: 24 }}>
<Card title="热门搜索" bordered={false}>
<TagCloud
data={tags}
......@@ -146,7 +148,7 @@ export default class Monitor extends PureComponent {
/>
</Card>
</Col>
<Col sm={8} xs={24} style={{ marginBottom: 24 }}>
<Col lg={6} sm={12} xs={24} style={{ marginBottom: 24 }}>
<Card title="资源剩余" bodyStyle={{ textAlign: 'center' }} bordered={false}>
<WaterWave
height={161}
......
src/routes/Dashboard/Monitor.less
View file @ 402532cd
......@@ -2,8 +2,8 @@
@import "../../utils/utils.less";
.mapChart {
padding-top: 46px;
height: 436px;
padding-top: 24px;
height: 450px;
img {
width: 100%;
}
......
src/routes/Dashboard/Workplace.js
View file @ 402532cd
......@@ -155,8 +155,12 @@ export default class Workplace extends PureComponent {
<Card.Grid className={styles.projectGrid} key={item.id}>
<Card bodyStyle={{ padding: 0 }} bordered={false}>
<Card.Meta
avatar={<Avatar src={item.logo} />}
title={<Link to={item.href}>{item.title}</Link>}
title={(
<span className={styles.cardTitle}>
<Avatar size="small" src={item.logo} />
<Link to={item.href}>{item.title}</Link>
</span>
)}
description={item.description}
/>
<div className={styles.projectItemContent}>
......
src/routes/Dashboard/Workplace.less
View file @ 402532cd
......@@ -107,16 +107,31 @@
.projectList {
:global {
.ant-card-meta-description {
color: @text-color-secondary;
font-size: 12px;
min-height: 36px;
}
}
.cardTitle {
:global {
.ant-avatar {
position: relative;
top: 5px;
}
}
a {
color: @heading-color;
margin-left: 12px;
&:hover {
color: @primary-color;
}
}
}
.projectGrid {
width: 33.33%;
}
.projectItemContent {
display: flex;
padding-left: 48px;
margin-top: 12px;
overflow: hidden;
font-size: 12px;
......
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