修正图表渲染时机的比对

package.json

@@ -35,6 +35,7 @@
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^5.0.1",
+    "eslint-plugin-markdown": "^1.0.0-beta.6",
     "eslint-plugin-react": "^7.0.1",
     "gh-pages": "^1.0.0",
     "husky": "^0.13.4",

src/components/Charts/Bar/index.js

 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class Bar extends PureComponent {
@@ -8,7 +9,7 @@ class Bar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }

src/components/Charts/Gauge/index.js

 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 
 const Shape = G2.Shape;
 
@@ -10,7 +11,9 @@ class Gauge extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    this.renderChart(nextProps);
+    if (!equal(this.props, nextProps)) {
+      this.renderChart(nextProps);
+    }
   }
 
   handleRef = (n) => {

src/components/Charts/MiniArea/index.js

 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class MiniArea extends PureComponent {
@@ -8,7 +9,7 @@ class MiniArea extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }

src/components/Charts/MiniBar/index.js

 import React, { PureComponent } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from '../index.less';
 
 class MiniBar extends PureComponent {
@@ -8,7 +9,7 @@ class MiniBar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }

src/components/Charts/Pie/index.js

 import React, { Component } from 'react';
 import G2 from 'g2';
+import equal from '../equal';
 import styles from './index.less';
 
 /* eslint react/no-danger:0 */
@@ -14,7 +15,7 @@ class Pie extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.data !== nextProps.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }

src/components/Charts/Radar/index.js

 import React, { PureComponent } from 'react';
 import G2 from 'g2';
 import { Row, Col } from 'antd';
+import equal from '../equal';
 import styles from './index.less';
 
 /* eslint react/no-danger:0 */
@@ -14,7 +15,7 @@ class Radar extends PureComponent {
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
+    if (!equal(this.props, nextProps)) {
       this.renderChart(nextProps.data);
     }
   }

src/components/Charts/equal.js

+/* eslint eqeqeq: 0 */
+
+function equal(old, target) {
+  let r = true;
+  for (const prop in old) {
+    if (typeof old[prop] === 'function' && typeof target[prop] === 'function') {
+      if (old[prop].toString() != target[prop].toString()) {
+        r = false;
+      }
+    } else if (old[prop] != target[prop]) {
+      r = false;
+    }
+  }
+  return r;
+}
+
+export default equal;

src/routes/Dashboard/Analysis.js

@@ -60,10 +60,6 @@ export default class Analysis extends Component {
     this.setState({
       rangePickerValue,
     });
-
-    this.props.dispatch({
-      type: 'chart/fetchSalesData',
-    });
   }
 
   selectDate = (type) => {
@@ -88,7 +84,7 @@ export default class Analysis extends Component {
       salesTypeData,
       salesTypeDataOnline,
       salesTypeDataOffline,
-    } = chart;
+      } = chart;
 
     const salesPieData = salesType === 'all' ?
       salesTypeData
@@ -144,6 +140,8 @@ export default class Analysis extends Component {
       },
     ];
 
+    const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
+
     const CustomTab = ({ data, currentTabKey: currentKey }) => (
       <Row gutter={8} style={{ width: 138, margin: '8px 28px' }}>
         <Col span={12}>
@@ -156,7 +154,7 @@ export default class Analysis extends Component {
         </Col>
         <Col span={12} style={{ paddingTop: 36 }}>
           <Pie
-            animate={(currentKey === data.name)}
+            animate={false}
             color={(currentKey !== data.name) && '#99d5fd'}
             inner={0.55}
             tooltip={false}
@@ -365,13 +363,13 @@ export default class Analysis extends Component {
           style={{ marginTop: 24 }}
         >
           <Tabs
-            activeKey={currentTabKey || (offlineData[0] && offlineData[0].name)}
+            activeKey={activeKey}
             onChange={this.handleTabChange}
           >
             {
               offlineData.map(shop => (
                 <TabPane
-                  tab={<CustomTab data={shop} currentTabKey={currentTabKey} />}
+                  tab={<CustomTab data={shop} currentTabKey={activeKey} />}
                   key={shop.name}
                 >
                   <div style={{ padding: '0 24px' }}>