8000 Slider component by rreusser · Pull Request #986 · plotly/plotly.js · GitHub
[go: up one dir, main page]
Skip to content

Slider component #986

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 43 commits into from
Oct 6, 2016
Merged

Slider component #986

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
f5bccd5
First cut at slider
rreusser Sep 28, 2016
83483fd
Fix lint errors in slider
rreusser Sep 28, 2016
f69a328
Add slider transitions
rreusser Sep 28, 2016
82ea558
Expand touchable slider area
rreusser Sep 28, 2016
ca5f9f5
Add slider mock
rreusser Sep 28, 2016
c6a3e11
Rename sliders and bump circular require tolerance
rreusser Sep 28, 2016
5b74652
Add trbl padding to sliders
rreusser Sep 28, 2016
e13e0ee
Remove fanciness from slider constants
rreusser Sep 28, 2016
8fe1842
Tweak slider behavior to avoid event -> method loops
rreusser Sep 28, 2016
05ac586
Improve padding logic for updatemenus
rreusser Sep 28, 2016
4604341
Add jasmine tests for updatemenus padding
rreusser Sep 29, 2016
8558be8
add streaming maxpoints max and dflt
cldougl Sep 29, 2016
c673afe
Merge pull request #996 from plotly/maxpt_dflt
cldougl Sep 29, 2016
304174a
Add current value output to sliders
rreusser Sep 29, 2016
fce36fa
Merge pull request #989 from plotly/fix-updatemenus-padding
rreusser Sep 29, 2016
52b4a2a
First cut at slider
rreusser Sep 28, 2016
b161d55
Fix lint errors in slider
rreusser Sep 28, 2016
8d7c40d
Add slider transitions
rreusser Sep 28, 2016
30b5f2d
Expand touchable slider area
rreusser Sep 28, 2016
19442d9
Add slider mock 8000
rreusser Sep 28, 2016
ecb7e87
Rename sliders and bump circular require tolerance
rreusser Sep 28, 2016
9c0f9ac
Add trbl padding to sliders
rreusser Sep 29, 2016
2a6f987
Remove fanciness from slider constants
rreusser Sep 28, 2016
5bd6bdd
Tweak slider behavior to avoid event -> method loops
rreusser Sep 28, 2016
4520a48
Add current value output to sliders
rreusser Sep 29, 2016
88d6728
Tweak slider colors
rreusser Sep 29, 2016
6da5b0f
Fix sliders in plot schema
rreusser Sep 29, 2016
1cad8a4
Merge branch 'slider-component' of github.com:plotly/plotly.js into s…
rreusser Sep 29, 2016
4a9edd0
Working through slider testing issues
rreusser Sep 29, 2016
6cb6d42
Add slider tests
rreusser Oct 3, 2016
4775a47
Test updateevent for sliders
rreusser Oct 3, 2016
a08f084
Update sliders baseline to reflect bugfix
rreusser Oct 3, 2016
5816c24
Fix plot schema error
rreusser Oct 3, 2016
2cfa81b
Remove unneeded lines from sliders test
rreusser Oct 4, 2016
1d52b51
Remove updatevalue and updateevent
rreusser Oct 6, 2016
892583d
Removed unused slider function
rreusser Oct 6, 2016
5015710
Clean up slider options
rreusser Oct 6, 2016
582c643
Remove unneeded/failing slider test
rreusser Oct 6, 2016
70610ec
Add suffix to currentvalue slider label
rreusser Oct 6, 2016
f25127c
don't coerce slider currentvalue attrs when !visible
rreusser Oct 6, 2016
4b608ee
Be more specific about *all* unused slider attrs not set
rreusser Oct 6, 2016
6c9034d
Test mouse movement for sliders
rreusser Oct 6, 2016
21e2f99
Make sure slider Drawing.bBox calls fall back to defined
rreusser Oct 6, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Remove updatevalue and updateevent
  • Loading branch information
@rreusser
rreusser committed Oct 6, 2016
commit 1d52b51e18aab1a2cea6c164043be5d3aa931937
33 changes: 0 additions & 33 deletions src/components/sliders/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,39 +78,6 @@ module.exports = {

steps: stepsAttrs,

updateevent: {
valType: 'string',
arrayOk: true,
role: 'info',
description: [
'The name of the event to which this component subscribes',
'in order to trigger updates. When the event is received',
'the component will attempt to update the slider position',
'to reflect the value passed as the data property of the',
'event. The corresponding step\'s API method is assumed to',
'have been triggered externally and so is not triggered again',
'when the event is received. If an array is provided, multiple',
'events will be subscribed to for updates.'
].join(' ')
},

updatevalue: {
valType: 'string',
arrayOk: true,
role: 'info',
description: [
'The property of the event data that is matched to a slider',
'value when an event of type `updateevent` is received. If',
'undefined, the data argument itself is used. If a string,',
'that property is used, and if a string with dots, e.g.',
'`item.0.label`, then `data[0].label` is used. If an array,',
'it is matched to the respective updateevent item or if there',
'is no corresponding updatevalue for a particular updateevent,',
'it is interpreted as `undefined` and defaults to the data',
'property itself.'
].join(' ')
},

lenmode: {
valType: 'enumerated',
values: ['fraction', 'pixels'],
Expand Down
19 changes: 0 additions & 19 deletions src/components/sliders/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,28 +70,9 @@ function sliderDefaults(sliderIn, sliderOut, layoutOut) {
coerce('currentvalue.prefix');
coerce('currentvalue.offset');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to ot 8000 hers. Learn more.

this should be:

var currentValue = coerce('currentvalue.visible');

if(currentValue) {
  coerce('currentvalue.xanchor');
  coerce('currentvalue.prefix');
  coerce('currentvalue.offset');
}

so that Plotly.validate can detect e.g.

layout.sliders = [{
  currentvalue: {
    visible: false,
    xanchor: 'left'
}];

// => `xanchor` has no effects

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅


coerce('updateevent');
coerce('updatevalue');

coerce('transition.duration');
coerce('transition.easing');

if(sliderOut.updateevent) {
if(!Array.isArray(sliderOut.updateevent)) {
sliderOut.updateevent = [sliderOut.updateevent];
}
} else {
sliderOut.updateevent = [];
}

if(sliderOut.updatevalue) {
if(!Array.isArray(sliderOut.updatevalue)) {
sliderOut.updatevalue = [sliderOut.updatevalue];
}
} else {
sliderOut.updatevalue = [];
}

Lib.coerceFont(coerce, 'font', layoutOut.font);
Lib.coerceFont(coerce, 'currentvalue.font', layoutOut.font);

Expand Down
51 changes: 0 additions & 51 deletions src/components/sliders/draw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,11 +227,6 @@ function drawSlider(gd, sliderGroup, sliderOpts) {
// Position the rectangle:
Lib.setTranslate(sliderGroup, sliderOpts.lx + sliderOpts.pad.l, sliderOpts.ly + sliderOpts.pad.t);

// Every time the slider is draw from scratch, just detach and reattach the event listeners.
// This could perhaps be avoided.
removeListeners(gd, sliderGroup, sliderOpts);
attachListeners(gd, sliderGroup, sliderOpts);

setActive(gd, sliderGroup, sliderOpts, sliderOpts.active, false, false);
}

Expand Down Expand Up @@ -282,52 +277,6 @@ function drawCurrentValue(sliderGroup, sliderOpts, valueOverride) {
return text;
}

function removeListeners(gd, sliderGroup, sliderOpts) {
var listeners = sliderOpts._input.listeners;
var eventNames = sliderOpts._input.eventNames;
if(!Array.isArray(listeners) || !Array.isArray(eventNames)) return;
while(listeners.length) {
gd._removeInternalListener(eventNames.pop(), listeners.pop());
}
}

function attachListeners(gd, sliderGroup, sliderOpts) {
if(!sliderOpts.updateevent || !sliderOpts.updateevent.length) {
return;
}

var listeners = sliderOpts._input.listeners = [];
var eventNames = sliderOpts._input.eventNames = [];

function makeListener(eventname, updatevalue) {
return function(data) {
var value = data;
if(updatevalue) {
value = Lib.nestedProperty(data, updatevalue).get();
}

// If it's *currently* invoking a command an event is received,
// then we'll ignore the event in order to avoid complicated
// infinite loops.
if(sliderOpts._invokingCommand) return;

setActiveByLabel(gd, sliderGroup, sliderOpts, value, false, true);
};
}

for(var i = 0; i < sliderOpts.updateevent.length; i++) {
var updateEventName = sliderOpts.updateevent[i];
var updatevalue = (sliderOpts.updatevalue || [])[i];

var updatelistener = makeListener(updateEventName, updatevalue);

gd._internalEv.on(updateEventName, updatelistener);

eventNames.push(updateEventName);
listeners.push(updatelistener);
}
}

function drawGrip(sliderGroup, gd, sliderOpts) {
var grip = sliderGroup.selectAll('rect.' + constants.gripRectClass)
.data([0]);
Expand Down
73 changes: 0 additions & 73 deletions test/jasmine/tests/sliders_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -253,76 +253,3 @@ describe('update sliders interactions', function() {
expect(d3.selectAll(query).size()).toEqual(cnt);
}
});

describe('updateevent and updatevalue', function() {
'use strict';

var mock = require('@mocks/sliders.json');

var gd;

beforeEach(function(done) {
gd = createGraphDiv();

var mockCopy = Lib.extendDeep({}, mock);

Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(done);
});

afterEach(function() {
Plotly.purge(gd);
destroyGraphDiv();
});

it('updates a slider when an event is triggered', function(done) {
Plotly.relayout(gd, {
'sliders[0].updateevent': 'plotly_someevent',
'sliders[0].updatevalue': 'value'
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(2);
gd.emit('plotly_someevent', {value: 'green'});
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(3);
}).catch(fail).then(done);
});

it('updates a slider when updatevalue unspecified', function(done) {
Plotly.relayout(gd, {
'sliders[0].updateevent': 'plotly_someevent'
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(2);
gd.emit('plotly_someevent', 'green');
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(3);
}).catch(fail).then(done);
});

it('updates a slider when any of multiple updateevents occurs', function(done) {
Plotly.relayout(gd, {
'sliders[0].updateevent': ['plotly_someevent', 'plotly_anotherevent']
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(2);
gd.emit('plotly_someevent', 'green');
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(3);
gd.emit('plotly_anotherevent', 'yellow');
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(2);
}).catch(fail).then(done);
});

it('matches update events with update values', function(done) {
Plotly.relayout(gd, {
'sliders[0].updateevent': ['plotly_someevent', 'plotly_anotherevent'],
'sliders[0].updatevalue': ['foo', 'bar']
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(2);
gd.emit('plotly_someevent', {foo: 'green'});
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(3);
gd.emit('plotly_anotherevent', {bar: 'yellow'});
}).then(function() {
expect(gd._fullLayout.sliders[0].active).toEqual(2);
}).catch(fail).then(done);
});
});
0