You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ma...@apache.org on 2018/08/22 04:01:47 UTC
[incubator-superset] branch master updated: Fixes to the play
slider (#5675)
This is an automated email from the ASF dual-hosted git repository.
maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git
The following commit(s) were added to refs/heads/master by this push:
new bcc0954 Fixes to the play slider (#5675)
bcc0954 is described below
commit bcc0954bb9d23f40abcf3a04fd28cf5eb18e4ffd
Author: Beto Dealmeida <ro...@dealmeida.net>
AuthorDate: Tue Aug 21 21:01:44 2018 -0700
Fixes to the play slider (#5675)
* Fixes to the play slider
* Address comments
* Make CSS rules more strict
* Fix CSS and improve code
---
superset/assets/src/visualizations/PlaySlider.css | 8 +++--
superset/assets/src/visualizations/PlaySlider.jsx | 34 +++++++++++++---------
.../deckgl/AnimatableDeckGLContainer.jsx | 31 ++++++++++++++------
.../visualizations/deckgl/layers/screengrid.jsx | 1 +
4 files changed, 49 insertions(+), 25 deletions(-)
diff --git a/superset/assets/src/visualizations/PlaySlider.css b/superset/assets/src/visualizations/PlaySlider.css
index 7de07de..df0fe77 100644
--- a/superset/assets/src/visualizations/PlaySlider.css
+++ b/superset/assets/src/visualizations/PlaySlider.css
@@ -1,8 +1,8 @@
.play-slider {
- position: absolute;
- bottom: -16px;
+ position: relative;
height: 20px;
width: 100%;
+ margin: 0;
}
.slider-selection {
@@ -21,3 +21,7 @@
color: #b3b3b3;
margin-right: 5px;
}
+
+div.slider > div.tooltip.tooltip-main.top.in {
+ margin-left: 0 !important;
+}
diff --git a/superset/assets/src/visualizations/PlaySlider.jsx b/superset/assets/src/visualizations/PlaySlider.jsx
index b72dc63..107aa55 100644
--- a/superset/assets/src/visualizations/PlaySlider.jsx
+++ b/superset/assets/src/visualizations/PlaySlider.jsx
@@ -21,6 +21,7 @@ const propTypes = {
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
reversed: PropTypes.bool,
disabled: PropTypes.bool,
+ range: PropTypes.bool,
};
const defaultProps = {
@@ -30,6 +31,7 @@ const defaultProps = {
orientation: 'horizontal',
reversed: false,
disabled: false,
+ range: true,
};
export default class PlaySlider extends React.PureComponent {
@@ -84,15 +86,17 @@ export default class PlaySlider extends React.PureComponent {
this.setState({ intervalId: null });
}
step() {
- if (this.props.disabled) {
+ const { start, end, step, values, disabled } = this.props;
+
+ if (disabled) {
return;
}
- let values = this.props.values.map(value => value + this.increment);
- if (values[1] > this.props.end) {
- const cr = values[0] - this.props.start;
- values = values.map(value => value - cr);
- }
- this.props.onChange(values);
+
+ const currentValues = Array.isArray(values) ? values : [values, values + step];
+ const nextValues = currentValues.map(value => value + this.increment);
+ const carriageReturn = (nextValues[1] > end) ? (nextValues[0] - start) : 0;
+
+ this.props.onChange(nextValues.map(value => value - carriageReturn));
}
formatter(values) {
if (this.props.disabled) {
@@ -108,6 +112,7 @@ export default class PlaySlider extends React.PureComponent {
return parts.map(value => (new Date(value)).toUTCString()).join(' : ');
}
render() {
+ const { start, end, step, orientation, reversed, disabled, range, values } = this.props;
return (
<Row className="play-slider">
<Col md={1} className="padded">
@@ -116,15 +121,16 @@ export default class PlaySlider extends React.PureComponent {
</Col>
<Col md={11} className="padded">
<ReactBootstrapSlider
- value={this.props.values}
+ value={range ? values : values[0]}
+ range={range}
formatter={this.formatter}
change={this.onChange}
- min={this.props.start}
- max={this.props.end}
- step={this.props.step}
- orientation={this.props.orientation}
- reversed={this.props.reversed}
- disabled={this.props.disabled ? 'disabled' : 'enabled'}
+ min={start}
+ max={end}
+ step={step}
+ orientation={orientation}
+ reversed={reversed}
+ disabled={disabled ? 'disabled' : 'enabled'}
/>
</Col>
</Row>
diff --git a/superset/assets/src/visualizations/deckgl/AnimatableDeckGLContainer.jsx b/superset/assets/src/visualizations/deckgl/AnimatableDeckGLContainer.jsx
index 3bee4a4..ddf5a40 100644
--- a/superset/assets/src/visualizations/deckgl/AnimatableDeckGLContainer.jsx
+++ b/superset/assets/src/visualizations/deckgl/AnimatableDeckGLContainer.jsx
@@ -10,12 +10,14 @@ const propTypes = {
end: PropTypes.number.isRequired,
step: PropTypes.number.isRequired,
values: PropTypes.array.isRequired,
+ aggregation: PropTypes.bool,
disabled: PropTypes.bool,
viewport: PropTypes.object.isRequired,
children: PropTypes.node,
};
const defaultProps = {
+ aggregation: false,
disabled: false,
step: 1,
};
@@ -26,30 +28,41 @@ export default class AnimatableDeckGLContainer extends React.Component {
const { getLayers, start, end, step, values, disabled, viewport, ...other } = props;
this.state = { values, viewport };
this.other = other;
+ this.onChange = this.onChange.bind(this);
}
componentWillReceiveProps(nextProps) {
this.setState({ values: nextProps.values, viewport: nextProps.viewport });
}
+ onChange(newValues) {
+ this.setState({
+ values: Array.isArray(newValues)
+ ? newValues
+ : [newValues, newValues + this.props.step],
+ });
+ }
render() {
- const layers = this.props.getLayers(this.state.values);
+ const { start, end, step, disabled, aggregation, children, getLayers } = this.props;
+ const { values, viewport } = this.state;
+ const layers = getLayers(values);
return (
<div>
<DeckGLContainer
{...this.other}
- viewport={this.state.viewport}
+ viewport={viewport}
layers={layers}
onViewportChange={newViewport => this.setState({ viewport: newViewport })}
/>
- {!this.props.disabled &&
+ {!disabled &&
<PlaySlider
- start={this.props.start}
- end={this.props.end}
- step={this.props.step}
- values={this.state.values}
- onChange={newValues => this.setState({ values: newValues })}
+ start={start}
+ end={end}
+ step={step}
+ values={values}
+ range={!aggregation}
+ onChange={this.onChange}
/>
}
- {this.props.children}
+ {children}
</div>
);
}
diff --git a/superset/assets/src/visualizations/deckgl/layers/screengrid.jsx b/superset/assets/src/visualizations/deckgl/layers/screengrid.jsx
index cb21153..4ec6e8d 100644
--- a/superset/assets/src/visualizations/deckgl/layers/screengrid.jsx
+++ b/superset/assets/src/visualizations/deckgl/layers/screengrid.jsx
@@ -110,6 +110,7 @@ class DeckGLScreenGrid extends React.PureComponent {
mapboxApiAccessToken={this.props.payload.data.mapboxApiKey}
mapStyle={this.props.slice.formData.mapbox_style}
setControlValue={this.props.setControlValue}
+ aggregation
/>
</div>
);