[explorev2] Make chart container more responsive (#1724)
* Make chart container more responsive
**Leave chart empty when theres error
**Make all boolean fields auto-query chart when changed
* Replace forEach with some
* Added fields to autoQueryFields
diff --git a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
index 0917d57..904b16f 100644
--- a/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
+++ b/superset/assets/javascripts/explorev2/components/ChartContainer.jsx
@@ -144,6 +144,32 @@
return title;
}
+ renderChart() {
+ if (this.props.alert) {
+ return (
+ <Alert bsStyle="warning">
+ {this.props.alert}
+ <i
+ className="fa fa-close pull-right"
+ onClick={this.removeAlert.bind(this)}
+ style={{ cursor: 'pointer' }}
+ />
+ </Alert>
+ );
+ }
+ if (this.props.isChartLoading) {
+ return (<img alt="loading" width="25" src="/static/assets/images/loading.gif" />);
+ }
+ return (
+ <div
+ id={this.props.containerId}
+ ref={(ref) => { this.chartContainerRef = ref; }}
+ className={this.props.viz_type}
+ style={{ 'overflow-x': 'scroll' }}
+ />
+ );
+ }
+
render() {
return (
<div className="chart-container">
@@ -187,26 +213,7 @@
</div>
}
>
- {this.props.alert &&
- <Alert bsStyle="warning">
- {this.props.alert}
- <i
- className="fa fa-close pull-right"
- onClick={this.removeAlert.bind(this)}
- style={{ cursor: 'pointer' }}
- />
- </Alert>
- }
- {this.props.isChartLoading ?
- (<img alt="loading" width="25" src="/static/assets/images/loading.gif" />)
- :
- (<div
- id={this.props.containerId}
- ref={(ref) => { this.chartContainerRef = ref; }}
- className={this.props.viz_type}
- style={{ 'overflow-x': 'scroll' }}
- />)
- }
+ {this.renderChart()}
</Panel>
</div>
);
diff --git a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
index 6d79f8a..ce44b11 100644
--- a/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
+++ b/superset/assets/javascripts/explorev2/components/ExploreViewContainer.jsx
@@ -33,12 +33,10 @@
}
componentWillReceiveProps(nextProps) {
- let refreshChart = false;
- autoQueryFields.forEach((field) => {
- if (nextProps.form_data[field] !== this.props.form_data[field]) {
- refreshChart = true;
- }
- });
+ const refreshChart = Object.keys(nextProps.form_data).some((field) => (
+ nextProps.form_data[field] !== this.props.form_data[field]
+ && autoQueryFields.indexOf(field) !== -1)
+ );
if (refreshChart) {
this.onQuery(nextProps.form_data);
}
diff --git a/superset/assets/javascripts/explorev2/stores/store.js b/superset/assets/javascripts/explorev2/stores/store.js
index 0c02435..817602d 100644
--- a/superset/assets/javascripts/explorev2/stores/store.js
+++ b/superset/assets/javascripts/explorev2/stores/store.js
@@ -1748,4 +1748,27 @@
export const autoQueryFields = [
'datasource',
'viz_type',
+ 'bar_stacked',
+ 'show_markers',
+ 'show_bar_value',
+ 'order_bars',
+ 'show_controls',
+ 'reduce_x_ticks',
+ 'include_series',
+ 'pie_label_type',
+ 'show_brush',
+ 'include_search',
+ 'show_bubbles',
+ 'show_legend',
+ 'x_axis_showminmax',
+ 'rich_tooltip',
+ 'y_axis_zero',
+ 'y_log_scale',
+ 'x_log_scale',
+ 'donut',
+ 'labels_outside',
+ 'contribution',
+ 'size',
+ 'row_limit',
+ 'max_bubble_size',
];
