mirror of
https://github.com/apache/superset.git
synced 2024-09-12 08:39:45 -04:00
[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
This commit is contained in:
parent
1a16491971
commit
2d0ebeae1b
@ -144,6 +144,32 @@ class ChartContainer extends React.Component {
|
||||
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 @@ class ChartContainer extends React.Component {
|
||||
</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>
|
||||
);
|
||||
|
@ -33,12 +33,10 @@ class ExploreViewContainer extends React.Component {
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
@ -1748,4 +1748,27 @@ export function initialState(vizType = 'table', datasourceType = 'table') {
|
||||
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',
|
||||
];
|
||||
|
Loading…
Reference in New Issue
Block a user