mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
[filter_box] option to delay filtering with apply button (#2338)
* [filter_box] delayed filtering with apply button * Remove lingering console.log statement
This commit is contained in:
parent
b4a96bd840
commit
af3415b040
@ -101,10 +101,9 @@ class ChartContainer extends React.PureComponent {
|
||||
|
||||
height: getHeight,
|
||||
|
||||
setFilter: () => {
|
||||
// set filter according to data in store
|
||||
// used in FilterBox.onChange()
|
||||
},
|
||||
setFilter: () => {},
|
||||
|
||||
addFilter: () => {},
|
||||
|
||||
getFilters: () => (
|
||||
// return filter objects from viz.formData
|
||||
|
@ -840,6 +840,17 @@ export const controls = {
|
||||
description: 'Font size for the biggest value in the list',
|
||||
},
|
||||
|
||||
instant_filtering: {
|
||||
type: 'CheckboxControl',
|
||||
label: 'Instant Filtering',
|
||||
renderTrigger: true,
|
||||
default: true,
|
||||
description: (
|
||||
'Whether to apply filters as they change, or wait for' +
|
||||
'users to hit an [Apply] button'
|
||||
),
|
||||
},
|
||||
|
||||
show_brush: {
|
||||
type: 'CheckboxControl',
|
||||
label: 'Range Filter',
|
||||
|
@ -607,7 +607,7 @@ const visTypes = {
|
||||
{
|
||||
label: null,
|
||||
controlSetRows: [
|
||||
['date_filter'],
|
||||
['date_filter', 'instant_filtering'],
|
||||
['groupby'],
|
||||
['metric'],
|
||||
],
|
||||
|
@ -244,11 +244,11 @@ const px = function () {
|
||||
resize() {
|
||||
this.render();
|
||||
},
|
||||
addFilter(col, vals) {
|
||||
controller.addFilter(sliceId, col, vals);
|
||||
addFilter(col, vals, merge = true, refresh = true) {
|
||||
controller.addFilter(sliceId, col, vals, merge, refresh);
|
||||
},
|
||||
setFilter(col, vals) {
|
||||
controller.setFilter(sliceId, col, vals);
|
||||
setFilter(col, vals, refresh = true) {
|
||||
controller.setFilter(sliceId, col, vals, refresh);
|
||||
},
|
||||
getFilters() {
|
||||
return controller.filters[sliceId];
|
||||
|
@ -6,12 +6,14 @@ import ReactDOM from 'react-dom';
|
||||
|
||||
import Select from 'react-select';
|
||||
import '../stylesheets/react-select/select.less';
|
||||
import { Button } from 'react-bootstrap';
|
||||
|
||||
import './filter_box.css';
|
||||
import { TIME_CHOICES } from './constants.js';
|
||||
|
||||
const propTypes = {
|
||||
origSelectedValues: React.PropTypes.object,
|
||||
instantFiltering: React.PropTypes.bool,
|
||||
filtersChoices: React.PropTypes.object,
|
||||
onChange: React.PropTypes.func,
|
||||
showDateFilter: React.PropTypes.bool,
|
||||
@ -21,6 +23,7 @@ const defaultProps = {
|
||||
origSelectedValues: {},
|
||||
onChange: () => {},
|
||||
showDateFilter: false,
|
||||
instantFiltering: true,
|
||||
};
|
||||
|
||||
class FilterBox extends React.Component {
|
||||
@ -28,8 +31,13 @@ class FilterBox extends React.Component {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedValues: props.origSelectedValues,
|
||||
hasChanged: false,
|
||||
};
|
||||
}
|
||||
clickApply() {
|
||||
this.props.onChange(Object.keys(this.state.selectedValues)[0], [], true, true);
|
||||
this.setState({ hasChanged: false });
|
||||
}
|
||||
changeFilter(filter, options) {
|
||||
let vals = null;
|
||||
if (options) {
|
||||
@ -41,8 +49,8 @@ class FilterBox extends React.Component {
|
||||
}
|
||||
const selectedValues = Object.assign({}, this.state.selectedValues);
|
||||
selectedValues[filter] = vals;
|
||||
this.setState({ selectedValues });
|
||||
this.props.onChange(filter, vals);
|
||||
this.setState({ selectedValues, hasChanged: true });
|
||||
this.props.onChange(filter, vals, false, !this.props.instantFiltering);
|
||||
}
|
||||
render() {
|
||||
let dateFilter;
|
||||
@ -101,6 +109,16 @@ class FilterBox extends React.Component {
|
||||
<div>
|
||||
{dateFilter}
|
||||
{filters}
|
||||
{this.props.instantFiltering &&
|
||||
<Button
|
||||
bsSize="small"
|
||||
bsStyle="primary"
|
||||
onClick={this.clickApply.bind(this)}
|
||||
disabled={!this.state.hasChanged}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -124,9 +142,10 @@ function filterBox(slice, payload) {
|
||||
ReactDOM.render(
|
||||
<FilterBox
|
||||
filtersChoices={filtersChoices}
|
||||
onChange={slice.setFilter}
|
||||
onChange={slice.addFilter}
|
||||
showDateFilter={fd.date_filter}
|
||||
origSelectedValues={slice.getFilters() || {}}
|
||||
instantFiltering={fd.instant_filtering}
|
||||
/>,
|
||||
document.getElementById(slice.containerId)
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user