-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Introducing layout update menus (aka dropdowns) #770
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.
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
Conversation
To reproduce the graph ⏫ function makeTrace(i) {
return {
y: Array.apply(null, Array(10)).map(() => Math.random()),
line: {
shape: 'spline' ,
color: 'red'
},
visible: i === 0,
name: 'Data set ' + i,
};
}
Plotly.plot(Tabs.fresh(), [0, 1, 2, 3].map(makeTrace), {
updatemenus: [{
buttons: [{
method: 'restyle',
args: ['line.color', 'red'],
label: 'red'
}, {
method: 'restyle',
args: ['line.color', 'blue'],
label: 'blue'
}, {
method: 'restyle',
args: ['line.color', 'green'],
label: 'green'
}]
}, {
y: 0.7,
buttons: [{
method: 'restyle',
args: ['visible', [true, false, false, false]],
label: 'Data set 0'
}, {
method: 'restyle',
args: ['visible', [false, true, false, false]],
label: 'Data set 1'
}, {
method: 'restyle',
args: ['visible', [false, false, true, false]],
label: 'Data set 2'
}, {
method: 'restyle',
args: ['visible', [false, false, false, true]],
label: 'Data set 3'
}]
}]
}); |
Nice!💃 from me once @delekru is happy with the dropdown colors and styling. |
@etpinard How about something simple like this? I can change the light-blue hover colour to something a bit more neutral if you'd like. |
Screenie of the new @delekru -proof style: ... looking really dope. |
- used in update menus (but possible more layout components down the road).
- For some reason, ../assets/mouse_event.js fails to detect the button elements in FF38 (like on CircleCI 2016/08/02), so dispatch the mouse event directly about the nodes instead - must compare item width with a tolerance as the exact result is browser/font dependent (via getBBox)
// active bgcolor | ||
// hover bgcolor | ||
// gap between buttons | ||
// gap between header & buttons |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we move this comment to an issue or link to an issue?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point. Thanks!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
moved to #810
Looks nice and clean! I didn't get deep into the d3 code as I am not strong in the d3 arts but your commenting made it possible to understand what was going on, nice work! 💃 |
- the '_index' field now corresponds to the menu index in the user layout update menu container. This is a more 'consistent' field than e.g. the index in the menuData. - the '_index' field is set at the default step -> no need to rely on relinkPrivateKeys.
- 'bottom' -> 'top' - 'bottom' was misplaced in #770 when the attributes were ported over from range selectors
Native update menus are coming to plotly.js 🎉
Update menus are designed to expose top-level
Plotly
methods to manage on-click updates. Each buttons is declared with amethod
and anargs
field which are then translated in aPlotly[method]
call. For example,I chose to link them to
layout.updatemenus
instead of e.g.layout.dropdowns
to allow adding support for other menu views (e.g. static buttons) down the road.TODOs:
args
for a given buttonmethod
or let plotly error out. Answer: let plotly error out.cc @jackparmer @chriddyp