Skip to content

Commit 80c75c7

Browse files
etpinardetpinard
committed
pull off update object logic into seperate file:
- so that it can be separatly tested.
1 parent b5e8301 commit 80c75c7

File tree

4 files changed

+165
-39
lines changed

4 files changed

+165
-39
lines changed

‎src/components/range_selector/button_attributes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ module.exports = {
2222
stepmode: {
2323
valType: 'enumerated',
2424
role: 'info',
25-
values: ['backward', 'to day'],
25+
values: ['backward', 'to date'],
2626
dflt: 'backward',
2727
description: [
2828
''

‎src/components/range_selector/draw.js‎

Lines changed: 8 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ var d3 = require('d3');
1414
var Plotly = require('../../plotly');
1515
var axisIds = require('../../plots/cartesian/axis_ids');
1616

17+
var getUpdateObject = require('./get_update_object');
18+
1719
var width1 = 50;
1820
var height1 = 40;
1921

@@ -22,16 +24,16 @@ module.exports = function draw(gd) {
2224
var fullLayout = gd._fullLayout;
2325

2426
var selectors = fullLayout._infolayer.selectAll('.rangeselector')
25-
.data(makeSelectorData(gd), function(d) { return d._id; });
27+
.data(makeSelectorData(gd), SelectorKeyFunc);
2628

2729
selectors.enter().append('g')
2830
.classed('rangeselector', true);
2931

3032
selectors.exit().remove();
3133

3234
selectors.style({
33-
'pointer-events': 'all',
34-
'cursor': 'pointer'
35+
cursor: 'pointer',
36+
'pointer-events': 'all'
3537
});
3638

3739
// selector.attr({ 'translate': });
@@ -73,22 +75,7 @@ module.exports = function draw(gd) {
7375
.text(d.label || d.count + ' ' + d.step.charAt(0));
7476

7577
button.on('click', function() {
76-
var update;
77-
78-
if(d.step === 'all') {
79-
update = {
80-
'xaxis.autorange': true,
81-
'xaxis.range': null
82-
};
83-
}
84-
else {
85-
var xrange = getXRange(axisLayout, d);
86-
87-
update = {
88-
'xaxis.range[0]': xrange[0],
89-
'xaxis.range[1]': xrange[1]
90-
};
91-
}
78+
var update = getUpdateObject(axisLayout, d);
9279

9380
Plotly.relayout(gd, update);
9481
});
@@ -115,23 +102,6 @@ function makeSelectorData(gd) {
115102
return data;
116103
}
117104

118-
function getXRange(axisLayout, opts) {
119-
var currentRange = axisLayout.range;
120-
var base = new Date(currentRange[1]);
121-
122-
var range0, range1;
123-
124-
switch(opts.stepmode) {
125-
case 'backward':
126-
range1 = currentRange[1];
127-
range0 = d3.time[opts.step].offset(base, -opts.count).getTime();
128-
break;
129-
130-
case 'to day':
131-
range1 = currentRange[1];
132-
range0 = d3.time[opts.step].floor(base).getTime();
133-
break;
134-
}
135-
136-
return [range0, range1];
105+
function SelectorKeyFunc(d) {
106+
return d._id;
137107
}

‎src/components/range_selector/get_update_object.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
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+
var d3 = require('d3');
13+
14+
15+
module.exports = function getUpdateObject(axisLayout, buttonLayout) {
16+
var update;
17+
18+
if(buttonLayout.step === 'all') {
19+
update = {
20+
'xaxis.autorange': true,
21+
'xaxis.range': null
22+
};
23+
}
24+
else {
25+
var xrange = getXRange(axisLayout, buttonLayout);
26+
27+
update = {
28+
'xaxis.range[0]': xrange[0],
29+
'xaxis.range[1]': xrange[1]
30+
};
31+
}
32+
33+
return update;
34+
};
35+
36+
function getXRange(axisLayout, buttonLayout) {
37+
var currentRange = axisLayout.range;
38+
var base = new Date(currentRange[1]);
39+
40+
var range0, range1;
41+
42+
switch(buttonLayout.stepmode) {
43+
case 'backward':
44+
range1 = currentRange[1];
45+
range0 = d3.time[buttonLayout.step]
46+
.offset(base, -buttonLayout.count).getTime();
47+
break;
48+
49+
case 'to date':
50+
range1 = currentRange[1];
51+
range0 = d3.time[buttonLayout.step]
52+
.floor(base).getTime();
53+
break;
54+
}
55+
56+
return [range0, range1];
57+
}

‎test/jasmine/tests/range_selector_test.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
var RangeSelector = require('@src/components/range_selector');
2+
var getUpdateObject = require('@src/components/range_selector/get_update_object');
23

34

45
describe('range selector', function() {
@@ -42,7 +43,105 @@ describe('range selector', function() {
4243
]);
4344
});
4445

46+
});
47+
48+
describe('getUpdateObject', function() {
49+
var axisLayout = {
50+
range: [
51+
-694292400000, // Thu Jan 01 1948 00:00:00
52+
1448859600000 // Mon Nov 30 2015 00:00:00
53+
]
54+
};
55+
56+
function assertRanges(update, range0, range1) {
57+
expect(update['xaxis.range[0]']).toEqual(range0);
58+
expect(update['xaxis.range[1]']).toEqual(range1);
59+
}
60+
61+
it('should return update object (1 month backward case)', function() {
62+
var buttonLayout = {
63+
step: 'month',
64+
stepmode: 'backward',
65+
count: 1
66+
};
67+
68+
var update = getUpdateObject(axisLayout, buttonLayout);
69+
70+
assertRanges(update, 1446177600000, 1448859600000);
71+
});
72+
73+
it('should return update object (3 months backward case)', function() {
74+
var buttonLayout = {
75+
step: 'month',
76+
stepmode: 'backward',
77+
count: 3
78+
};
4579

80+
var update = getUpdateObject(axisLayout, buttonLayout);
81+
82+
assertRanges(update, 1440907200000, 1448859600000);
83+
});
84+
85+
it('should return update object (6 months backward case)', function() {
86+
var buttonLayout = {
87+
step: 'month',
88+
stepmode: 'backward',
89+
count: 6
90+
};
91+
92+
var update = getUpdateObject(axisLayout, buttonLayout);
93+
94+
assertRanges(update, 1432958400000, 1448859600000);
95+
});
96+
97+
it('should return update object (6 months backward case)', function() {
98+
var buttonLayout = {
99+
step: 'month',
100+
stepmode: 'backward',
101+
count: 3
102+
};
103+
104+
var update = getUpdateObject(axisLayout, buttonLayout);
105+
106+
assertRanges(update, 1440907200000, 1448859600000);
107+
});
108+
109+
it('should return update object (year-to-date case)', function() {
110+
var buttonLayout = {
111+
step: 'year',
112+
stepmode: 'to date',
113+
count: 1
114+
};
115+
116+
var update = getUpdateObject(axisLayout, buttonLayout);
117+
118+
assertRanges(update, 1420088400000, 1448859600000);
119+
});
120+
121+
it('should return update object (1 year backward case)', function() {
122+
var buttonLayout = {
123+
step: 'year',
124+
stepmode: 'backward',
125+
count: 1
126+
};
127+
128+
var update = getUpdateObject(axisLayout, buttonLayout);
129+
130+
assertRanges(update, 1417323600000, 1448859600000);
131+
});
132+
133+
it('should return update object (reset case)', function() {
134+
var buttonLayout = {
135+
step: 'all'
136+
};
137+
138+
var update = getUpdateObject(axisLayout, buttonLayout);
139+
140+
expect(update).toEqual({
141+
'xaxis.autorange': true,
142+
'xaxis.range': null
143+
});
144+
});
46145
});
47146

48147

0 commit comments

Comments
 (0)