QT/superset2
1
0
Fork 0
mirror of https://github.com/apache/superset.git synced 2026-04-13 13:18:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Stop ChartContainer from rendering twice on chartStatus change (#1828)

Browse Source 
* Stop ChartContainer from rendering twice on chartStatus change

* Make spinner overlay and dim chart while laoding

* Added timeout to make render more stable on resize

* Put viz in state and call resize at browser size change

* add render after height change since resize depends on render called on the same object

* Change name of renderVis to renderVisOnChange

* Only call resize at height change, persist viz in state

* Call resize wihout render at window size change
This commit is contained in:
vera-liu
2016-12-15 14:06:54 -08:00
committed by GitHub
parent e06a0cd89b
commit 7a5bb94754
3 changed files with 38 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
superset/assets/javascripts/explorev2/components/ChartContainer.jsx
View File

@@ -43,31 +43,39 @@ class ChartContainer extends React.Component {
this.state = {
selector: `#${props.containerId}`,
mockSlice: {},
viz: {},
};
}
componentWillMount() {
this.setState({ mockSlice: this.getMockedSliceObject(this.props) });
const mockSlice = this.getMockedSliceObject(this.props);
this.setState({
mockSlice,
viz: visMap[this.props.viz_type](mockSlice),
});
}
componentDidMount() {
this.renderVis();
this.state.viz.render();
}
componentWillReceiveProps(nextProps) {
if (nextProps.chartStatus !== this.props.chartStatus
|| nextProps.height !== this.props.height) {
this.setState({ mockSlice: this.getMockedSliceObject(nextProps) });
if (nextProps.chartStatus === 'loading') {
const mockSlice = this.getMockedSliceObject(nextProps);
this.setState({
mockSlice,
viz: visMap[nextProps.viz_type](mockSlice),
});
}
}
shouldComponentUpdate(nextProps) {
return (nextProps.chartStatus !== this.props.chartStatus
|| nextProps.height !== this.props.height);
}
componentDidUpdate() {
this.renderVis();
componentDidUpdate(prevProps) {
if (this.props.chartStatus === 'loading') {
this.state.viz.render();
}
if (prevProps.height !== this.props.height) {
this.state.viz.resize();
}
}
getMockedSliceObject(props) {
@@ -96,7 +104,7 @@ class ChartContainer extends React.Component {
// should call callback to adjust height of chart
$(this.state.selector).css(dim, size);
},
height: () => parseInt(props.height, 10) - 100,
height: () => parseInt(this.props.height, 10) - 100,
show: () => { this.render(); },
@@ -108,7 +116,7 @@ class ChartContainer extends React.Component {
width: () => this.chartContainerRef.getBoundingClientRect().width,
height: () => parseInt(props.height, 10) - 100,
height: () => parseInt(this.props.height, 10) - 100,
selector: this.state.selector,
@@ -149,10 +157,6 @@ class ChartContainer extends React.Component {
this.props.actions.removeChartAlert();
}
renderVis() {
visMap[this.props.viz_type](this.state.mockSlice).render();
}
renderChartTitle() {
let title;
if (this.props.slice_name) {
@@ -180,13 +184,21 @@ class ChartContainer extends React.Component {
return (
<div>
{loading &&
<img alt="loading" width="25" src="/static/assets/images/loading.gif" />
<img
alt="loading"
width="25"
src="/static/assets/images/loading.gif"
style={{ position: 'absolute' }}
/>
}
<div
id={this.props.containerId}
ref={(ref) => { this.chartContainerRef = ref; }}
className={this.props.viz_type}
style={{ overflowX: 'auto' }}
style={{
overflowX: 'auto',
opacity: loading ? '0.25' : '1',
}}
/>
</div>
);