Dashboard: design update (#18)

* update analysis

* update monitor

* update workplace

mock/chart.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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;