Commit 9fc16092 authored by nikogu's avatar nikogu

修正图表渲染时机的比对

parent 8768c69a
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import G2 from 'g2'; import G2 from 'g2';
import equal from '../equal';
import styles from '../index.less'; import styles from '../index.less';
class Bar extends PureComponent { class Bar extends PureComponent {
...@@ -8,7 +9,7 @@ class Bar extends PureComponent { ...@@ -8,7 +9,7 @@ class Bar extends PureComponent {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) { if (!equal(this.props, nextProps)) {
this.renderChart(nextProps.data); this.renderChart(nextProps.data);
} }
} }
......
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import G2 from 'g2'; import G2 from 'g2';
import equal from '../equal';
const Shape = G2.Shape; const Shape = G2.Shape;
...@@ -10,8 +11,10 @@ class Gauge extends PureComponent { ...@@ -10,8 +11,10 @@ class Gauge extends PureComponent {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (!equal(this.props, nextProps)) {
this.renderChart(nextProps); this.renderChart(nextProps);
} }
}
handleRef = (n) => { handleRef = (n) => {
this.node = n; this.node = n;
......
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import G2 from 'g2'; import G2 from 'g2';
import equal from '../equal';
import styles from '../index.less'; import styles from '../index.less';
class MiniArea extends PureComponent { class MiniArea extends PureComponent {
...@@ -8,7 +9,7 @@ class MiniArea extends PureComponent { ...@@ -8,7 +9,7 @@ class MiniArea extends PureComponent {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) { if (!equal(this.props, nextProps)) {
this.renderChart(nextProps.data); this.renderChart(nextProps.data);
} }
} }
......
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import G2 from 'g2'; import G2 from 'g2';
import equal from '../equal';
import styles from '../index.less'; import styles from '../index.less';
class MiniBar extends PureComponent { class MiniBar extends PureComponent {
...@@ -8,7 +9,7 @@ class MiniBar extends PureComponent { ...@@ -8,7 +9,7 @@ class MiniBar extends PureComponent {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) { if (!equal(this.props, nextProps)) {
this.renderChart(nextProps.data); this.renderChart(nextProps.data);
} }
} }
......
import React, { Component } from 'react'; import React, { Component } from 'react';
import G2 from 'g2'; import G2 from 'g2';
import equal from '../equal';
import styles from './index.less'; import styles from './index.less';
/* eslint react/no-danger:0 */ /* eslint react/no-danger:0 */
...@@ -14,7 +15,7 @@ class Pie extends Component { ...@@ -14,7 +15,7 @@ class Pie extends Component {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.data !== nextProps.data) { if (!equal(this.props, nextProps)) {
this.renderChart(nextProps.data); this.renderChart(nextProps.data);
} }
} }
......
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import G2 from 'g2'; import G2 from 'g2';
import { Row, Col } from 'antd'; import { Row, Col } from 'antd';
import equal from '../equal';
import styles from './index.less'; import styles from './index.less';
/* eslint react/no-danger:0 */ /* eslint react/no-danger:0 */
...@@ -14,7 +15,7 @@ class Radar extends PureComponent { ...@@ -14,7 +15,7 @@ class Radar extends PureComponent {
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.data !== this.props.data) { if (!equal(this.props, nextProps)) {
this.renderChart(nextProps.data); this.renderChart(nextProps.data);
} }
} }
......
/* 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;
...@@ -60,10 +60,6 @@ export default class Analysis extends Component { ...@@ -60,10 +60,6 @@ export default class Analysis extends Component {
this.setState({ this.setState({
rangePickerValue, rangePickerValue,
}); });
this.props.dispatch({
type: 'chart/fetchSalesData',
});
} }
selectDate = (type) => { selectDate = (type) => {
...@@ -144,6 +140,8 @@ export default class Analysis extends Component { ...@@ -144,6 +140,8 @@ export default class Analysis extends Component {
}, },
]; ];
const activeKey = currentTabKey || (offlineData[0] && offlineData[0].name);
const CustomTab = ({ data, currentTabKey: currentKey }) => ( const CustomTab = ({ data, currentTabKey: currentKey }) => (
<Row gutter={8} style={{ width: 138, margin: '8px 28px' }}> <Row gutter={8} style={{ width: 138, margin: '8px 28px' }}>
<Col span={12}> <Col span={12}>
...@@ -156,7 +154,7 @@ export default class Analysis extends Component { ...@@ -156,7 +154,7 @@ export default class Analysis extends Component {
</Col> </Col>
<Col span={12} style={{ paddingTop: 36 }}> <Col span={12} style={{ paddingTop: 36 }}>
<Pie <Pie
animate={(currentKey === data.name)} animate={false}
color={(currentKey !== data.name) && '#99d5fd'} color={(currentKey !== data.name) && '#99d5fd'}
inner={0.55} inner={0.55}
tooltip={false} tooltip={false}
...@@ -366,13 +364,13 @@ export default class Analysis extends Component { ...@@ -366,13 +364,13 @@ export default class Analysis extends Component {
style={{ marginTop: 24 }} style={{ marginTop: 24 }}
> >
<Tabs <Tabs
activeKey={currentTabKey || (offlineData[0] && offlineData[0].name)} activeKey={activeKey}
onChange={this.handleTabChange} onChange={this.handleTabChange}
> >
{ {
offlineData.map(shop => ( offlineData.map(shop => (
<TabPane <TabPane
tab={<CustomTab data={shop} currentTabKey={currentTabKey} />} tab={<CustomTab data={shop} currentTabKey={activeKey} />}
key={shop.name} key={shop.name}
> >
<div style={{ padding: '0 24px' }}> <div style={{ padding: '0 24px' }}>
......
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