List & Dashboard Design Review

src/components/Charts/MiniArea/index.js

@@ -18,7 +18,7 @@ class MiniArea extends PureComponent {
   }
 
   renderChart(data) {
-    const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis } = this.props;
+    const { height = 0, fit = true, color = '#33abfb', line, xAxis, yAxis, animate = true } = this.props;
 
     if (!data || (data && data.length < 1)) {
       return;
@@ -31,6 +31,7 @@ class MiniArea extends PureComponent {
       container: this.node,
       forceFit: fit,
       height: height + 54,
+      animate,
       plotCfg: {
         margin: [36, 0, 30, 0],
       },

src/components/Charts/MiniProgress/index.js

 import React from 'react';
+import { Popover } from 'antd';
 
 import styles from './index.less';
 
 const MiniProgress = ({ target, color, strokeWidth, percent }) => (
   <div className={styles.miniProgress}>
+    <Popover title={null} content={`目标值: ${target}%`}>
       <div
         className={styles.target}
         style={{ left: (target ? `${target}%` : null) }}
@@ -11,6 +13,7 @@ const MiniProgress = ({ target, color, strokeWidth, percent }) => (
         <span style={{ backgroundColor: (color || null) }} />
         <span style={{ backgroundColor: (color || null) }} />
       </div>
+    </Popover>
     <div className={styles.progressWrap}>
       <div
         className={styles.progress}

src/components/Charts/MiniProgress/index.less

@@ -17,6 +17,7 @@
     height: 100%;
   }
   .target {
+    cursor: pointer;
     position: absolute;
     top: 0;
     bottom: 0;

src/components/Charts/Pie/index.js

@@ -14,8 +14,10 @@ class Pie extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
+    if (this.props.data !== nextProps.data) {
       this.renderChart(nextProps.data);
     }
+  }
 
   handleRef = (n) => {
     this.node = n;

src/components/TagCloud/index.js

@@ -79,7 +79,7 @@ class TagCloud extends PureComponent {
       height,
 
       // 设定文字大小配置函数(默认为12-40px的随机大小)
-      size: words => (((words.value - min) / (max - min)) * 10) + 12,
+      size: words => (((words.value - min) / (max - min)) * 12) + 6,
 
       // 设定文字内容
       text: words => words.name,

src/layouts/PageHeaderLayout.js

 import React from 'react';
 import PageHeader from '../components/PageHeader';
 
-export default ({ children, wrapperClassName, ...restProps }) => (
+export default ({ children, wrapperClassName, top, ...restProps }) => (
   <div style={{ margin: '-24px -24px 0' }} className={wrapperClassName}>
+    {top}
     <PageHeader {...restProps} />
     {children ? <div style={{ margin: '24px 24px 0' }}>{children}</div> : null}
   </div>

src/routes/Dashboard/Analysis.js

@@ -60,6 +60,10 @@ export default class Analysis extends Component {
     this.setState({
       rangePickerValue,
     });
+
+    this.props.dispatch({
+      type: 'chart/fetchSalesData',
+    });
   }
 
   selectDate = (type) => {

src/routes/Dashboard/Analysis.less

@@ -3,8 +3,13 @@
 
 .iconGroup {
   i {
+    transition: color 0.32s;
+    color: @text-color-secondary;
     cursor: pointer;
     margin-left: 16px;
+    &:hover {
+      color: @text-color;
+    }
   }
 }
 .rankingList {

src/routes/Dashboard/Monitor.js

@@ -11,12 +11,15 @@ import { fixedZero } from '../../utils/utils';
 
 import styles from './Monitor.less';
 
-const activeData = [];
-for (let i = 0; i < 24; i += 1) {
+function getActiveData() {
+  const activeData = [];
+  for (let i = 0; i < 24; i += 1) {
     activeData.push({
       x: `${fixedZero(i)}:00`,
       y: (i * 50) + (Math.floor(Math.random() * 200)),
     });
+  }
+  return activeData;
 }
 
 const MapData = [];
@@ -33,13 +36,23 @@ const targetTime = new Date().getTime() + 3900000;
   monitor: state.monitor,
 }))
 export default class Monitor extends PureComponent {
+  state = {
+    activeData: getActiveData(),
+  }
+
   componentDidMount() {
     this.props.dispatch({
       type: 'monitor/fetchTags',
     });
-  }
 
+    setInterval(() => {
+      this.setState({
+        activeData: getActiveData(),
+      });
+    }, 1000);
+  }
   render() {
+    const { activeData = [] } = this.state;
     const { monitor } = this.props;
     const { tags } = monitor;
 
@@ -90,6 +103,7 @@ export default class Monitor extends PureComponent {
                 />
                 <div style={{ marginTop: 32 }}>
                   <MiniArea
+                    animate={false}
                     line
                     color="#5DD1DD"
                     height={84}
@@ -129,7 +143,7 @@ export default class Monitor extends PureComponent {
               bordered={false}
             >
               <Gauge
-                title="跳出率"
+                title="核销率"
                 height={164}
                 percent={87}
               />
@@ -143,7 +157,7 @@ export default class Monitor extends PureComponent {
               style={{ marginBottom: 24 }}
               bordered={false}
             >
-              <Row style={{ padding: '18px 0 19px 0' }}>
+              <Row gutter={4} style={{ padding: '18px 0 19px 0' }}>
                 <Col span={8}>
                   <Pie
                     percent={28}
@@ -174,7 +188,7 @@ export default class Monitor extends PureComponent {
             </Card>
           </Col>
           <Col sm={8} xs={24} style={{ marginBottom: 24 }}>
-            <Card title="热门搜索" bordered={false}>
+            <Card title="热门搜索" bordered={false} bodyStyle={{ height: 214 }}>
               <TagCloud
                 data={tags}
                 height={161}

src/routes/Dashboard/Workplace.js

@@ -144,9 +144,9 @@ export default class Workplace extends PureComponent {
 
     return (
       <PageHeaderLayout
+        top={pageHeaderContent}
         action={pageHeaderAction}
         title={pageHeaderTitle}
-        content={pageHeaderContent}
       >
         <Row gutter={24}>
           <Col lg={16} md={24} sm={24} xs={24}>