Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Feature range slider #336

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 59 commits into from
Mar 30, 2016
Merged

Feature range slider #336

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
59 commits
Select commit Hold shift + click to select a range
4c28de7
add range component
mdtusz Feb 26, 2016
866d1d2
Change td to gd
mdtusz Feb 26, 2016
d2973f3
Update slider to have greyed exclusion zone
mdtusz Feb 26, 2016
eb619ef
Update slider styling to match existing ranges
mdtusz Feb 29, 2016
854442d
Change arguments to makeSlider and add skeleton tests
mdtusz Feb 29, 2016
b0c16cd
Add slider component directory and scatter rangePlot
mdtusz Mar 1, 2016
2666162
Change where range slider is inserted (now in plot_api)
mdtusz Mar 1, 2016
c8d87d0
Wednesday updates
mdtusz Mar 2, 2016
598d69f
Linting
mdtusz Mar 4, 2016
3ecdcdc
Change file name
mdtusz Mar 4, 2016
fb863f6
Check for null children in appendChildren helper
mdtusz Mar 4, 2016
5857574
Fix handle positioning issue
mdtusz Mar 4, 2016
028b46e
Use variable for slider handle width
mdtusz Mar 4, 2016
4143a65
Add scattergl to allowed types
mdtusz Mar 8, 2016
8cfd258
Initial pass at range slider positioning
mdtusz Mar 8, 2016
fe51426
Add range-sider marker size and opacity
mdtusz Mar 8, 2016
09af762
Pull range-scatter plot into its own function
mdtusz Mar 8, 2016
f381299
Change function name from makeSlider to draw
mdtusz Mar 9, 2016
149348c
Add rangeslider attribute
mdtusz Mar 10, 2016
0ebc894
Position axis title correctly when rangeslider visible
mdtusz Mar 10, 2016
80571f3
Fix margin values for rangeslider
mdtusz Mar 11, 2016
c4d19ad
Change naming from Range to RangeSlider
mdtusz Mar 14, 2016
242458d
Remove initialrange attribute
mdtusz Mar 14, 2016
4f4ffeb
Change Helpers to helpers and add tests
mdtusz Mar 15, 2016
665c061
Move data processors to own file and fix date ranges
mdtusz Mar 15, 2016
c008328
Add re-ranging on slider movement
mdtusz Mar 15, 2016
0a63f2a
Test slider movement
mdtusz Mar 16, 2016
771546c
More tests
mdtusz Mar 16, 2016
47a6829
Lock y-axis zoom/pan
mdtusz Mar 16, 2016
ab9ba72
Change default background color to white
mdtusz Mar 16, 2016
25071ae
Fix test error and remove fdescribe
mdtusz Mar 17, 2016
37e93d5
Add image baseline for range-sliders
Mar 17, 2016
00c0732
Minor changes to tests
mdtusz Mar 17, 2016
4d238e9
Prevent slider from being drawn on export
mdtusz Mar 17, 2016
21d6bdc
Merge branch 'feature-range-slider' of https://github.com/plotly/plot…
Mar 17, 2016
0e9bc90
Update range_slider baseline
Mar 17, 2016
7fd37ae
Update tests for ff
mdtusz Mar 17, 2016
0b32a36
Use constant svg namespace
mdtusz Mar 17, 2016
88e855b
Move supplyLayoutDefaults to own file
mdtusz Mar 17, 2016
df58e62
Fix borderwidth and color defaults and respective tests
mdtusz Mar 18, 2016
358243d
Remove unused empty svg elements
mdtusz Mar 18, 2016
6bb10c0
Remove rangeslider when visible set to false
mdtusz Mar 18, 2016
0fd5c37
Fix beyond-range-end bug
mdtusz Mar 18, 2016
288c4a3
Remove fdescribe
mdtusz Mar 18, 2016
767a821
Fix title positioning and split out slider creation
mdtusz Mar 21, 2016
67674b6
Update image baseline
Mar 21, 2016
2deed2e
Wrap clip path in <defs>
mdtusz Mar 21, 2016
7ead461
Adjust handle grab area for more fine grained control
mdtusz Mar 22, 2016
5214897
fixup! Adjust handle grab area for more fine grained control
mdtusz Mar 22, 2016
771b113
Change attribute names (height->thickness, backgroundcolor->bgcolor)
mdtusz Mar 22, 2016
fb91908
Update image baseline
Mar 22, 2016
2dd5e8e
Defaults now accept `rangeslider: true` and fixrange on all counterAxes
mdtusz Mar 22, 2016
83375d2
Alphabetize attributes
mdtusz Mar 23, 2016
cb50997
fixup! Alphabetize attributes
mdtusz Mar 23, 2016
6736bbb
Fix changed height->thickness attribute
mdtusz Mar 23, 2016
c613c6c
Remove scattergl support (for now)
mdtusz Mar 23, 2016
c55bf02
Update baseline image
Mar 23, 2016
cbe2c26
Add role to attribute
mdtusz Mar 23, 2016
271589c
Change role style->info
mdtusz Mar 23, 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
15 changes: 11 additions & 4 deletions 15 src/components/rangeslider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,12 @@ function draw(gd, minStart, maxStart) {
var fullLayout = gd._fullLayout,
options = fullLayout.xaxis.rangeslider;

if(!options.visible) return;
// don't draw if being exported
if(!options.visible || gd._context.staticPlot) {
options.visible = false;
return;
Copy link
Contributor

Choose a reason for hiding this comment

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

I'm ok with this for the first iteration. But, I'm curious. What happens when you try to export a graph with a range slider?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It happily exports it :)

We could maybe add the option to have it displayed on export or not as an attribute too.

excludeonexport: false or something a bit less verbose.

Copy link
Contributor

Choose a reason for hiding this comment

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

Highchart exports their range sliders by default ; I'd vote for exporting them by default.

}


var width = fullLayout._size.w,
height = (fullLayout.height - fullLayout.margin.b - fullLayout.margin.t) * options.height,
Expand All @@ -41,6 +46,7 @@ function draw(gd, minStart, maxStart) {
var x = fullLayout.margin.l,
y = fullLayout.height - height - fullLayout.margin.b;


var slider = document.createElementNS(svgNS, 'g');
Copy link
Contributor

Choose a reason for hiding this comment

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

image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

My favourite library: http://vanilla-js.com/

helpers.setAttributes(slider, {
'class': 'range-slider',
Expand Down Expand Up @@ -274,12 +280,13 @@ function supplyLayoutDefaults(layoutIn, layoutOut) {
attributes, attr, dflt);
}

var yaxis = layoutOut.yaxis || {};
yaxis.fixedrange = true;

coerce('visible');
coerce('height');
Copy link
Contributor

Choose a reason for hiding this comment

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

we should return early (and not coerce the other attributes) if containerOut.visible isn't true.

coerce('backgroundcolor');
coerce('bordercolor');
coerce('borderwidth');

if(containerOut.visible) {
layoutOut.yaxis.fixedrange = true;
}
}
2 changes: 1 addition & 1 deletion 2 src/plot_api/plot_api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2407,7 +2407,7 @@ Plotly.relayout = function relayout(gd, astr, val) {
newMin = changes['xaxis.range[0]'],
newMax = changes['xaxis.range[1]'];

if(fullLayout.xaxis.rangeslider.visible) {
if(fullLayout.xaxis && fullLayout.xaxis.rangeslider.visible) {
Copy link
Contributor

Choose a reason for hiding this comment

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

kinda hacky here. But, yeah, I can't think of a better way at the moment. 👍

if(newMin && newMax) {
fullLayout.xaxis.rangeslider.setRange(newMin, newMax);
} else if(changes['xaxis.autorange']) {
Expand Down
43 changes: 25 additions & 18 deletions 43 test/jasmine/tests/range_slider_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ describe('the range slider', function() {
});

it('should react to resizing the minimum handle', function() {
var start = 86,
var start = 85,
end = 140,
dataMinStart = rangeSlider.getAttribute('data-min'),
diff = end - start;
Expand All @@ -62,7 +62,7 @@ describe('the range slider', function() {
});

it('should react to resizing the maximum handle', function() {
var start = 706,
var start = 705,
end = 500,
dataMaxStart = rangeSlider.getAttribute('data-max'),
diff = end - start;
Expand Down Expand Up @@ -117,7 +117,7 @@ describe('the range slider', function() {

var rangeDiff = gd._fullLayout.xaxis.range[1] - gd._fullLayout.xaxis.range[0];

expect(rangeDiff).toBeCloseTo(21.009, 2);
expect(rangeDiff).toBeCloseTo(21, 1);
});
});

Expand All @@ -142,9 +142,9 @@ describe('the range slider', function() {
describe('supplyLayoutDefaults function', function() {

it('should not mutate layoutIn', function() {
var layoutIn = { xaxis: { rangeslider: { visible: true }}},
layoutOut = { xaxis: { rangeslider: {}}},
expected = { xaxis: { rangeslider: { visible: true }}};
var layoutIn = { xaxis: { rangeslider: { visible: true }}, yaxis: {}},
layoutOut = { xaxis: { rangeslider: {}}, yaxis: {}},
expected = { xaxis: { rangeslider: { visible: true }}, yaxis: {}};

RangeSlider.supplyLayoutDefaults(layoutIn, layoutOut);

Expand All @@ -161,15 +161,22 @@ describe('the range slider', function() {
});

it('should set defaults if rangeslider.visible is true', function() {
var layoutIn = { xaxis: { rangeslider: { visible: true }}},
layoutOut = { xaxis: { rangeslider: {}}},
expected = { xaxis: { rangeslider: {
visible: true,
height: 0.15,
backgroundcolor: '#ffffff',
borderwidth: 1,
bordercolor: 'transparent'
}}};
var layoutIn = { xaxis: { rangeslider: { visible: true }}, yaxis: {}},
layoutOut = { xaxis: { rangeslider: {}}, yaxis: {}},
expected = {
xaxis: {
rangeslider: {
visible: true,
height: 0.15,
backgroundcolor: '#ffffff',
borderwidth: 1,
bordercolor: 'transparent'
}
},
yaxis: {
fixedrange: true
}
};

RangeSlider.supplyLayoutDefaults(layoutIn, layoutOut);

Expand All @@ -183,15 +190,15 @@ describe('the range slider', function() {
backgroundcolor: 42,
bordercolor: 42,
borderwidth: 'superfat'
}}},
layoutOut = { xaxis: { rangeslider: {}}},
}}, yaxis: {}},
layoutOut = { xaxis: { rangeslider: {}}, yaxis: {}},
expected = { xaxis: { rangeslider: {
visible: false,
height: 0.15,
Copy link
Contributor

Choose a reason for hiding this comment

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

ICYMI ⏫ , the attributes shouldn't be coerced when visible isn't true.

backgroundcolor: '#ffffff',
borderwidth: 1,
bordercolor: 'transparent'
}}};
}}, yaxis: {}};

RangeSlider.supplyLayoutDefaults(layoutIn, layoutOut);

Expand Down
Morty Proxy This is a proxified and sanitized view of the page, visit original site.