betodealmeida commented on a change in pull request #4981: Make time filter
more usable
URL:
https://github.com/apache/incubator-superset/pull/4981#discussion_r189733719
##########
File path:
superset/assets/src/explore/components/controls/DateFilterControl.jsx
##########
@@ -28,172 +51,265 @@ const propTypes = {
const defaultProps = {
animation: true,
onChange: () => {},
- value: '',
+ value: 'Last week',
};
+
export default class DateFilterControl extends React.Component {
constructor(props) {
super(props);
- const value = props.value || '';
+ const value = props.value || defaultProps.value;
this.state = {
+ type: TYPES[0],
+
+ // for range
num: '7',
- grain: 'days',
- rel: 'ago',
- dttm: '',
- type: 'free',
- free: '',
+ grain: TIME_GRAIN_OPTIONS[3],
+ rel: RELATIVE_TIME_OPTIONS[0],
+ common: COMMON_TIME_FRAMES[0],
+
+ // for start:end(includes freeform)
+ since: DEFAULT_SINCE,
+ until: DEFAULT_UNTIL,
+ isFreeform: {},
};
- const words = value.split(' ');
- if (words.length >= 3 && RELATIVE_TIME_OPTIONS.indexOf(words[2]) >= 0) {
- this.state.num = words[0];
- this.state.grain = words[1];
- this.state.rel = words[2];
- this.state.type = 'rel';
- } else if (moment(value).isValid()) {
- this.state.dttm = value;
- this.state.type = 'fix';
+ if (value.indexOf(SEPARATOR) >= 0) {
+ this.state.type = 'startend';
+ [this.state.since, this.state.until] = value.split(SEPARATOR, 2);
} else {
- this.state.free = value;
- this.state.type = 'free';
+ this.state.type = 'range';
+ if (COMMON_TIME_FRAMES.indexOf(value) >= 0) {
+ this.state.common = value;
+ } else {
+ this.state.common = null;
+ [this.state.rel, this.state.num, this.state.grain] = value.split(' ',
3);
+ }
}
+ this.state.isFreeform.since = !moment(this.state.since,
MOMENT_FORMAT).isValid();
+ this.state.isFreeform.until = !moment(this.state.until,
MOMENT_FORMAT).isValid();
+
+ // We need direct access to the state of the `DateTimeField` component
+ this.dateTimeFieldRefs = {};
}
- onControlChange(target, opt) {
- this.setState({ [target]: opt.value });
- }
- onNumberChange(event) {
- this.setState({ num: event.target.value });
+ onEnter(event) {
+ if (event.key === 'Enter') {
+ this.close();
+ }
}
- onFreeChange(event) {
- this.setState({ free: event.target.value });
+ setStartEnd(key, value) {
+ const nextState = {
+ type: 'startend',
+ isFreeform: { ...this.state.isFreeform },
+ };
+ if (value === INVALID_DATE_MESSAGE) {
+ // the DateTimeField component will return `Invalid date` for freeform
+ // text, so we need to cheat and steal the value from the state
+ const freeformValue = this.dateTimeFieldRefs[key].state.inputValue;
+ nextState.isFreeform[key] = true;
+ nextState[key] = freeformValue;
+ } else {
+ nextState.isFreeform[key] = false;
+ nextState[key] = value;
+ }
+ this.setState(nextState, this.updateRefs);
}
- setType(type) {
- this.setState({ type });
+ setCommonRange(timeFrame) {
+ const nextState = {
+ type: 'range',
+ common: timeFrame,
+ until: moment().startOf('day').format(MOMENT_FORMAT),
+ };
+ let units;
+ if (timeFrame === 'Yesterday') {
+ units = 'days';
+ } else {
+ units = timeFrame.split(' ')[1] + 's';
+ }
+ nextState.since = moment().startOf('day').subtract(1,
units).format(MOMENT_FORMAT);
+ this.setState(nextState, this.updateRefs);
}
- setValueAndClose(val) {
- this.setState({ type: 'free', free: val }, this.close);
+ setCustomRange(key, value) {
+ const nextState = { ...this.state, type: 'range', common: null };
+ if (key !== undefined && value !== undefined) {
+ nextState[key] = value;
+ }
+ if (nextState.rel === 'Last') {
+ nextState.until = moment().startOf('day').format(MOMENT_FORMAT);
+ nextState.since = moment()
+ .startOf('day')
+ .subtract(nextState.num, nextState.grain)
+ .format(MOMENT_FORMAT);
+ } else {
+ nextState.until = moment()
+ .startOf('day')
+ .add(nextState.num, nextState.grain)
+ .format(MOMENT_FORMAT);
+ nextState.since = moment().startOf('day').format(MOMENT_FORMAT);
+ }
+ this.setState(nextState, this.updateRefs);
}
- setDatetime(dttm) {
- this.setState({ dttm: dttm.format().substring(0, 19) });
+ updateRefs() {
+ this.dateTimeFieldRefs.since.setState({ inputValue: this.state.since });
+ this.dateTimeFieldRefs.until.setState({ inputValue: this.state.until });
}
close() {
let val;
- if (this.state.type === 'rel') {
- val = `${this.state.num} ${this.state.grain} ${this.state.rel}`;
- } else if (this.state.type === 'fix') {
- val = this.state.dttm;
- } else if (this.state.type === 'free') {
- val = this.state.free;
+ if (this.state.type === 'range') {
+ val = this.state.common
+ ? this.state.common
+ : `${this.state.rel} ${this.state.num} ${this.state.grain}`;
+ } else if (this.state.type === 'startend') {
+ val = [this.state.since, this.state.until].join(SEPARATOR);
}
this.props.onChange(val);
this.refs.trigger.hide();
}
renderPopover() {
+ const grainOptions = TIME_GRAIN_OPTIONS.map((grain, index) => (
+ <MenuItem
+ onSelect={this.setCustomRange.bind(this, 'grain')}
+ key={'grain-' + index}
+ eventKey={grain}
+ active={grain === this.state.grain}
+ >{grain}
+ </MenuItem>
+ ));
+ const timeFrames = COMMON_TIME_FRAMES.map((timeFrame, index) => (
+ <Radio
+ key={'timeFrame-' + (index + 1)}
+ checked={this.state.common === timeFrame}
+ onChange={this.setCommonRange.bind(this, timeFrame)}
+ >{timeFrame}
+ </Radio>
+ ));
return (
- <Popover id="filter-popover">
+ <Popover id="filter-popover" placement="top" positionTop={0}>
<div style={{ width: '250px' }}>
- <PopoverSection
- title="Fixed"
- isSelected={this.state.type === 'fix'}
- onSelect={this.setType.bind(this, 'fix')}
- >
- <InputGroup bsSize="small">
- <InputGroup.Addon>
- <Glyphicon glyph="calendar" />
- </InputGroup.Addon>
- <Datetime
- inputProps={{ className: 'form-control input-sm' }}
- dateFormat="YYYY-MM-DD"
- defaultValue={this.state.dttm}
- onFocus={this.setType.bind(this, 'fix')}
- onChange={this.setDatetime.bind(this)}
- timeFormat="h:mm:ss"
- />
- </InputGroup>
- </PopoverSection>
- <PopoverSection
- title="Relative"
- isSelected={this.state.type === 'rel'}
- onSelect={this.setType.bind(this, 'rel')}
- >
- <div className="clearfix">
- <div style={{ width: '50px' }} className="input-inline">
- <FormControl
- onFocus={this.setType.bind(this, 'rel')}
- value={this.state.num}
- onChange={this.onNumberChange.bind(this)}
- bsSize="small"
- />
- </div>
- <div style={{ width: '95px' }} className="input-inline">
- <Select
- onFocus={this.setType.bind(this, 'rel')}
- value={this.state.grain}
- clearable={false}
- options={TIME_GRAIN_OPTIONS.map(s => ({ label: s, value: s
}))}
- onChange={this.onControlChange.bind(this, 'grain')}
- />
- </div>
- <div style={{ width: '95px' }} className="input-inline">
- <Select
- value={this.state.rel}
- onFocus={this.setType.bind(this, 'rel')}
- clearable={false}
- options={RELATIVE_TIME_OPTIONS.map(s => ({ label: s, value:
s }))}
- onChange={this.onControlChange.bind(this, 'rel')}
- />
- </div>
- </div>
- </PopoverSection>
- <PopoverSection
- title="Free form"
- isSelected={this.state.type === 'free'}
- onSelect={this.setType.bind(this, 'free')}
- info={
- 'Superset supports smart date parsing. Strings like `last
sunday` or ' +
- '`last october` can be used.'
- }
+ <Tabs
+ defaultActiveKey={TYPES.indexOf(this.state.type) + 1}
+ id="type"
+ bsStyle="pills"
+ onSelect={type => this.setState({ type: TYPES[type - 1] })}
>
- <FormControl
- onFocus={this.setType.bind(this, 'free')}
- value={this.state.free}
- onChange={this.onFreeChange.bind(this)}
- bsSize="small"
- />
- </PopoverSection>
+ <Tab eventKey={1} title="Range">
+ <FormGroup>
+ {timeFrames}
Review comment:
@vylc, any thoughts here? Personally I like this design, since the common
ranges and the dropdown serve the same purpose, and allow for a lot of control
in a single place.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
With regards,
Apache Git Services
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
