Skip to content

Commit 94be168

Browse files
etpinardetpinard
authored
Merge pull request #770 from plotly/layout-updatemenus
Introducing layout update menus (aka dropdowns)
2 parents 95c8353 + 42d40ee commit 94be168

File tree

13 files changed

+1423
-3
lines changed

13 files changed

+1423
-3
lines changed

‎src/components/color/attributes.js

+2
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ exports.lightLine = '#eee';
2929

3030
exports.background = '#fff';
3131

32+
exports.borderLine = '#BEC8D9';
33+
3234
// with axis.color and Color.interp we aren't using lightLine
3335
// itself anymore, instead interpolating between axis.color
3436
// and the background color using tinycolor.mix. lightFraction

‎src/components/updatemenus/attributes.js

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
/**
2+
* Copyright 2012-2016, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
var fontAttrs = require('../../plots/font_attributes');
12+
var colorAttrs = require('../color/attributes');
13+
var extendFlat = require('../../lib/extend').extendFlat;
14+
15+
var buttonsAttrs = {
16+
_isLinkedToArray: true,
17+
18+
method: {
19+
valType: 'enumerated',
20+
values: ['restyle', 'relayout'],
21+
dflt: 'restyle',
22+
role: 'info',
23+
description: [
24+
'Sets the Plotly method to be called on click.'
25+
].join(' ')
26+
},
27+
args: {
28+
valType: 'info_array',
29+
role: 'info',
30+
items: [
31+
{ valType: 'any' },
32+
{ valType: 'any' },
33+
{ valType: 'any' }
34+
],
35+
description: [
36+
'Sets the arguments values to be passed to the Plotly',
37+
'method set in `method` on click.'
38+
].join(' ')
39+
},
40+
label: {
41+
valType: 'string',
42+
role: 'info',
43+
dflt: '',
44+
description: 'Sets the text label to appear on the button.'
45+
}
46+
};
47+
48+
module.exports = {
49+
_isLinkedToArray: true,
50+
51+
visible: {
52+
valType: 'boolean',
53+
role: 'info',
54+
description: [
55+
'Determines whether or not the update menu is visible.'
56+
].join(' ')
57+
},
58+
59+
active: {
60+
valType: 'integer',
61+
role: 'info',
62+
min: -1,
63+
dflt: 0,
64+
description: [
65+
'Determines which button (by index starting from 0) is',
66+
'considered active.'
67+
].join(' ')
68+
},
69+
70+
buttons: buttonsAttrs,
71+
72+
x: {
73+
valType: 'number',
74+
min: -2,
75+
max: 3,
76+
dflt: -0.05,
77+
role: 'style',
78+
description: 'Sets the x position (in normalized coordinates) of the update menu.'
79+
},
80+
xanchor: {
81+
valType: 'enumerated',
82+
values: ['auto', 'left', 'center', 'right'],
83+
dflt: 'right',
84+
role: 'info',
85+
description: [
86+
'Sets the update menu\'s horizontal position anchor.',
87+
'This anchor binds the `x` position to the *left*, *center*',
88+
'or *right* of the range selector.'
89+
].join(' ')
90+
},
91+
y: {
92+
valType: 'number',
93+
min: -2,
94+
max: 3,
95+
dflt: 1,
96+
role: 'style',
97+
description: 'Sets the y position (in normalized coordinates) of the update menu.'
98+
},
99+
yanchor: {
100+
valType: 'enumerated',
101+
values: ['auto', 'top', 'middle', 'bottom'],
102+
dflt: 'bottom',
103+
role: 'info',
104+
description: [
105+
'Sets the update menu\'s vertical position anchor',
106+
'This anchor binds the `y` position to the *top*, *middle*',
107+
'or *bottom* of the range selector.'
108+
].join(' ')
109+
},
110+
111+
font: extendFlat({}, fontAttrs, {
112+
description: 'Sets the font of the update menu button text.'
113+
}),
114+
115+
bgcolor: {
116+
valType: 'color',
117+
role: 'style',
118+
description: 'Sets the background color of the update menu buttons.'
119+
},
120+
bordercolor: {
121+
valType: 'color',
122+
dflt: colorAttrs.borderLine,
123+
role: 'style',
124+
description: 'Sets the color of the border enclosing the update menu.'
125+
},
126+
borderwidth: {
127+
valType: 'number',
128+
min: 0,
129+
dflt: 1,
130+
role: 'style',
131+
description: 'Sets the width (in px) of the border enclosing the update menu.'
132+
}
133+
};

‎src/components/updatemenus/constants.js

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
/**
2+
* Copyright 2012-2016, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
10+
'use strict';
11+
12+
13+
module.exports = {
14+
15+
// layout attribute names
16+
name: 'updatemenus',
17+
itemName: 'updatemenu',
18+
19+
// class names
20+
containerClassName: 'updatemenu-container',
21+
headerGroupClassName: 'updatemenu-header-group',
22+
headerClassName: 'updatemenu-header',
23+
headerArrowClassName: 'updatemenu-header-arrow',
24+
buttonGroupClassName: 'updatemenu-button-group',
25+
buttonClassName: 'updatemenu-button',
26+
itemRectClassName: 'updatemenu-item-rect',
27+
itemTextClassName: 'updatemenu-item-text',
28+
29+
// DOM attribute name in button group keeping track
30+
// of active update menu
31+
menuIndexAttrName: 'updatemenu-active-index',
32+
33+
// id root pass to Plots.autoMargin
34+
autoMarginIdRoot: 'updatemenu-',
35+
36+
// options when 'active: -1'
37+
blankHeaderOpts: { label: ' ' },
38+
39+
// min item width / height
40+
minWidth: 30,
41+
minHeight: 30,
42+
43+
// padding around item text
44+
textPadX: 40,
45+
46+
// font size to height scale
47+
fontSizeToHeight: 1.3,
48+
49+
// item rect radii
50+
rx: 2,
51+
ry: 2,
52+
53+
// item text x offset off left edge
54+
textOffsetX: 12,
55+
56+
// item text y offset (w.r.t. middle)
57+
textOffsetY: 3,
58+
59+
// arrow offset off right edge
60+
arrowOffsetX: 4,
61+
62+
// gap between header and buttons
63+
gapButtonHeader: 5,
64+
65+
// gap between between buttons
66+
gapButton: 2,
67+
68+
// color given to active buttons
69+
activeColor: '#F4FAFF',
70+
71+
// color given to hovered buttons
72+
hoverColor: '#F4FAFF'
73+
};

‎src/components/updatemenus/defaults.js

+93
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* Copyright 2012-2016, Plotly, Inc.
3+
* All rights reserved.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
9+
'use strict';
10+
11+
var Lib = require('../../lib');
12+
13+
var attributes = require('./attributes');
14+
var contants = require('./constants');
15+
16+
var name = contants.name;
17+
var buttonAttrs = attributes.buttons;
18+
19+
20+
module.exports = function updateMenusDefaults(layoutIn, layoutOut) {
21+
var contIn = Array.isArray(layoutIn[name]) ? layoutIn[name] : [],
22+
contOut = layoutOut[name] = [];
23+
24+
for(var i = 0; i < contIn.length; i++) {
25+
var menuIn = contIn[i] || {},
26+
menuOut = {};
27+
28+
menuDefaults(menuIn, menuOut, layoutOut);
29+
30+
// used on button click to update the 'active' field
31+
menuOut._input = menuIn;
32+
33+
// used to determine object constancy
34+
menuOut._index = i;
35+
36+
contOut.push(menuOut);
37+
}
38+
};
39+
40+
function menuDefaults(menuIn, menuOut, layoutOut) {
41+
42+
function coerce(attr, dflt) {
43+
return Lib.coerce(menuIn, menuOut, attributes, attr, dflt);
44+
}
45+
46+
var buttons = buttonsDefaults(menuIn, menuOut);
47+
48+
var visible = coerce('visible', buttons.length > 0);
49+
if(!visible) return;
50+
51+
coerce('active');
52+
53+
coerce('x');
54+
coerce('y');
55+
Lib.noneOrAll(menuIn, menuOut, ['x', 'y']);
56+
57+
coerce('xanchor');
58+
coerce('yanchor');
59+
60+
Lib.coerceFont(coerce, 'font', layoutOut.font);
61+
62+
coerce('bgcolor', layoutOut.paper_bgcolor);
63+
coerce('bordercolor');
64+
coerce('borderwidth');
65+
}
66+
67+
function buttonsDefaults(menuIn, menuOut) {
68+
var buttonsIn = menuIn.buttons || [],
69+
buttonsOut = menuOut.buttons = [];
70+
71+
var buttonIn, buttonOut;
72+
73+
function coerce(attr, dflt) {
74+
return Lib.coerce(buttonIn, buttonOut, buttonAttrs, attr, dflt);
75+
}
76+
77+
for(var i = 0; i < buttonsIn.length; i++) {
78+
buttonIn = buttonsIn[i];
79+
buttonOut = {};
80+
81+
if(!Lib.isPlainObject(buttonIn) || !Array.isArray(buttonIn.args)) {
82+
continue;
83+
}
84+
85+
coerce('method');
86+
coerce('args');
87+
coerce('label');
88+
89+
buttonsOut.push(buttonOut);
90+
}
91+
92+
return buttonsOut;
93+
}

0 commit comments

Comments
 (0)