Skip to content

Commit cb293c7

Browse files
rreusserrreusser
authored
Merge pull request #986 from plotly/slider-component
Slider component
2 parents bedb673 + 21e2f99 commit cb293c7

File tree

16 files changed

+1550
-6
lines changed

16 files changed

+1550
-6
lines changed

‎src/components/sliders/attributes.js

+269
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,269 @@
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 padAttrs = require('../../plots/pad_attributes');
13+
var extendFlat = require('../../lib/extend').extendFlat;
14+
var animationAttrs = require('../../plots/animation_attributes');
15+
var constants = require('./constants');
16+
17+
var stepsAttrs = {
18+
_isLinkedToArray: true,
19+
20+
method: {
21+
valType: 'enumerated',
22+
values: ['restyle', 'relayout', 'animate', 'update'],
23+
dflt: 'restyle',
24+
role: 'info',
25+
description: [
26+
'Sets the Plotly method to be called when the slider value is changed.'
27+
].join(' ')
28+
},
29+
args: {
30+
valType: 'info_array',
31+
role: 'info',
32+
freeLength: true,
33+
items: [
34+
{ valType: 'any' },
35+
{ valType: 'any' },
36+
{ valType: 'any' }
37+
],
38+
description: [
39+
'Sets the arguments values to be passed to the Plotly',
40+
'method set in `method` on slide.'
41+
].join(' ')
42+
},
43+
label: {
44+
valType: 'string',
45+
role: 'info',
46+
description: 'Sets the text label to appear on the slider'
47+
},
48+
value: {
49+
valType: 'string',
50+
role: 'info',
51+
description: [
52+
'Sets the value of the slider step, used to refer to the step programatically.',
53+
'Defaults to the slider label if not provided.'
54+
].join(' ')
55+
}
56+
};
57+
58+
module.exports = {
59+
visible: {
60+
valType: 'boolean',
61+
role: 'info',
62+
dflt: true,
63+
description: [
64+
'Determines whether or not the slider is visible.'
65+
].join(' ')
66+
},
67+
68+
active: {
69+
valType: 'number',
70+
role: 'info',
71+
min: -10,
72+
dflt: 0,
73+
description: [
74+
'Determines which button (by index starting from 0) is',
75+
'considered active.'
76+
].join(' ')
77+
},
78+
79+
steps: stepsAttrs,
80+
81+
lenmode: {
82+
valType: 'enumerated',
83+
values: ['fraction', 'pixels'],
84+
role: 'info',
85+
dflt: 'fraction',
86+
description: [
87+
'Determines whether this slider length',
88+
'is set in units of plot *fraction* or in *pixels.',
89+
'Use `len` to set the value.'
90+
].join(' ')
91+
},
92+
len: {
93+
valType: 'number',
94+
min: 0,
95+
dflt: 1,
96+
role: 'style',
97+
description: [
98+
'Sets the length of the slider',
99+
'This measure excludes the padding of both ends.',
100+
'That is, the slider\'s length is this length minus the',
101+
'padding on both ends.'
102+
].join(' ')
103+
},
104+
x: {
105+
valType: 'number',
106+
min: -2,
107+
max: 3,
108+
dflt: -0.05,
109+
role: 'style',
110+
description: 'Sets the x position (in normalized coordinates) of the slider.'
111+
},
112+
pad: extendFlat({}, padAttrs, {
113+
description: 'Set the padding of the slider component along each side.'
114+
}),
115+
xanchor: {
116+
valType: 'enumerated',
117+
values: ['auto', 'left', 'center', 'right'],
118+
dflt: 'left',
119+
role: 'info',
120+
description: [
121+
'Sets the slider\'s horizontal position anchor.',
122+
'This anchor binds the `x` position to the *left*, *center*',
123+
'or *right* of the range selector.'
124+
].join(' ')
125+
},
126+
y: {
127+
valType: 'number',
128+
min: -2,
129+
max: 3,
130+
dflt: 1,
131+
role: 'style',
132+
description: 'Sets the y position (in normalized coordinates) of the slider.'
133+
},
134+
yanchor: {
135+
valType: 'enumerated',
136+
values: ['auto', 'top', 'middle', 'bottom'],
137+
dflt: 'bottom',
138+
role: 'info',
139+
description: [
140+
'Sets the slider\'s vertical position anchor',
141+
'This anchor binds the `y` position to the *top*, *middle*',
142+
'or *bottom* of the range selector.'
143+
].join(' ')
144+
},
145+
146+
transition: {
147+
duration: {
148+
valType: 'number',
149+
role: 'info',
150+
min: 0,
151+
dflt: 150,
152+
description: 'Sets the duration of the slider transition'
153+
},
154+
easing: {
155+
valType: 'enumerated',
156+
values: animationAttrs.transition.easing.values,
157+
role: 'info',
158+
dflt: 'cubic-in-out',
159+
description: 'Sets the easing function of the slider transition'
160+
},
161+
},
162+
163+
currentvalue: {
164+
visible: {
165+
valType: 'boolean',
166+
role: 'info',
167+
dflt: true,
168+
description: [
169+
'Shows the currently-selected value above the slider.'
170+
].join(' ')
171+
},
172+
173+
xanchor: {
174+
valType: 'enumerated',
175+
values: ['left', 'center', 'right'],
176+
dflt: 'left',
177+
role: 'info',
178+
description: [
179+
'The alignment of the value readout relative to the length of the slider.'
180+
].join(' ')
181+
},
182+
183+
offset: {
184+
valType: 'number',
185+
dflt: 10,
186+
role: 'info',
187+
description: [
188+
'The amount of space, in pixels, between the current value label',
189+
'and the slider.'
190+
].join(' ')
191+
},
192+
193+
prefix: {
194+
valType: 'string',
195+
role: 'info',
196+
description: 'When currentvalue.visible is true, this sets the prefix of the label.'
197+
},
198+
199+
suffix: {
200+
valType: 'string',
201+
role: 'info',
202+
description: 'When currentvalue.visible is true, this sets the suffix of the label.'
203+
},
204+
205+
font: extendFlat({}, fontAttrs, {
206+
description: 'Sets the font of the current value label text.'
207+
}),
208+
},
209+
210+
font: extendFlat({}, fontAttrs, {
211+
description: 'Sets the font of the slider step labels.'
212+
}),
213+
214+
activebgcolor: {
215+
valType: 'color',
216+
role: 'style',
217+
dflt: constants.gripBgActiveColor,
218+
description: [
219+
'Sets the background color of the slider grip',
220+
'while dragging.'
221+
].join(' ')
222+
},
223+
bgcolor: {
224+
valType: 'color',
225+
role: 'style',
226+
dflt: constants.railBgColor,
227+
description: 'Sets the background color of the slider.'
228+
},
229+
bordercolor: {
230+
valType: 'color',
231+
dflt: constants.railBorderColor,
232+
role: 'style',
233+
description: 'Sets the color of the border enclosing the slider.'
234+
},
235+
borderwidth: {
236+
valType: 'number',
237+
min: 0,
238+
dflt: constants.railBorderWidth,
239+
role: 'style',
240+
description: 'Sets the width (in px) of the border enclosing the slider.'
241+
},
242+
ticklen: {
243+
valType: 'number',
244+
min: 0,
245+
dflt: constants.tickLength,
246+
role: 'style',
247+
description: 'Sets the length in pixels of step tick marks'
248+
},
249+
tickcolor: {
250+
valType: 'color',
251+
dflt: constants.tickColor,
252+
role: 'style',
253+
description: 'Sets the color of the border enclosing the slider.'
254+
},
255+
tickwidth: {
256+
valType: 'number',
257+
min: 0,
258+
dflt: 1,
259+
role: 'style',
260+
description: 'Sets the tick width (in px).'
261+
},
262+
minorticklen: {
263+
valType: 'number',
264+
min: 0,
265+
dflt: constants.minorTickLength,
266+
role: 'style',
267+
description: 'Sets the length in pixels of minor step tick marks'
268+
},
269+
};

‎src/components/sliders/constants.js

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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: 'sliders',
17+
itemName: 'slider',
18+
19+
// class names
20+
containerClassName: 'slider-container',
21+
groupClassName: 'slider-group',
22+
inputAreaClass: 'slider-input-area',
23+
railRectClass: 'slider-rail-rect',
24+
railTouchRectClass: 'slider-rail-touch-rect',
25+
gripRectClass: 'slider-grip-rect',
26+
tickRectClass: 'slider-tick-rect',
27+
inputProxyClass: 'slider-input-proxy',
28+
labelsClass: 'slider-labels',
29+
labelGroupClass: 'slider-label-group',
30+
labelClass: 'slider-label',
31+
currentValueClass: 'slider-current-value',
32+
33+
railHeight: 5,
34+
35+
// DOM attribute name in button group keeping track
36+
// of active update menu
37+
menuIndexAttrName: 'slider-active-index',
38+
39+
// id root pass to Plots.autoMargin
40+
autoMarginIdRoot: 'slider-',
41+
42+
// min item width / height
43+
minWidth: 30,
44+
minHeight: 30,
45+
46+
// padding around item text
47+
textPadX: 40,
48+
49+
// font size to height scale
50+
fontSizeToHeight: 1.3,
51+
52+
// arrow offset off right edge
53+
arrowOffsetX: 4,
54+
55+
railRadius: 2,
56+
railWidth: 5,
57+
railBorder: 4,
58+
railBorderWidth: 1,
59+
railBorderColor: '#bec8d9',
60+
railBgColor: '#f8fafc',
61+
62+
// The distance of the rail from the edge of the touchable area
63+
// Slightly less than the step inset because of the curved edges
64+
// of the rail
65+
railInset: 8,
66+
67+
// The distance from the extremal tick marks to the edge of the
68+
// touchable area. This is basically the same as the grip radius,
69+
// but for other styles it wouldn't really need to be.
70+
stepInset: 10,
71+
72+
gripRadius: 10,
73+
gripWidth: 20,
74+
gripHeight: 20,
75+
gripBorder: 20,
76+
gripBorderWidth: 1,
77+
gripBorderColor: '#bec8d9',
78+
gripBgColor: '#f6f8fa',
79+
gripBgActiveColor: '#dbdde0',
80+
81+
labelPadding: 8,
82+
labelOffset: 0,
83+
84+
tickWidth: 1,
85+
tickColor: '#333',
86+
tickOffset: 25,
87+
tickLength: 7,
88+
89+
minorTickOffset: 25,
90+
minorTickColor: '#333',
91+
minorTickLength: 4,
92+
93+
// Extra space below the current value label:
94+
currentValuePadding: 8,
95+
currentValueInset: 0,
96+
};

0 commit comments

Comments
 (0)