Skip to content

Cartesian subplot updates using data joins #946

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 17 commits into from
Oct 6, 2016
Merged

Cartesian subplot updates using data joins #946

Changes from 1 commit
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
c877c27
move subplot creation from makePlotFramework -> Cartesian.plot
etpinard Sep 15, 2016
ff26691
rm some early-Plotly.plot logic regarding makePlotFramwork
etpinard Sep 15, 2016
40fc7f9
plots: add linkSubplot method
etpinard Sep 15, 2016
652b905
first try at making the new cartesian subplot paradigm work
etpinard Sep 15, 2016
e85a6c7
keep ref to subplot image/shape layers in main drawData
etpinard Sep 15, 2016
43d227a
lint
etpinard Sep 16, 2016
937c54b
add baseModule drawFramework step
etpinard Sep 16, 2016
78faa3f
plots: add a cartesian subplot purge step
etpinard Sep 16, 2016
f8017f2
test: adapt relinkPrivateKeys test
etpinard Sep 16, 2016
c239602
test: adapt legend scroll test
etpinard Sep 16, 2016
f4aee1e
test: adapt gd._ keys ordering
etpinard Sep 16, 2016
ab96422
test: check clip path & dragger counts in cartesian plots
etpinard Sep 16, 2016
8c09af2
Merge branch 'master' into cartesian-per-subplot
etpinard Sep 16, 2016
b00d716
Merge branch 'master' into cartesian-per-subplot
etpinard Oct 4, 2016
ae3ab55
replace plotinfo.x() -> plotinfo.xaxis
etpinard Sep 23, 2016
a708381
make makeSubplotLayer agnostic to fullLayout
etpinard Oct 5, 2016
e78b099
rm useless return in makePlotFramework
etpinard Oct 6, 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
71 changes: 43 additions & 28 deletions test/jasmine/tests/legend_scroll_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ var Plotly = require('@lib/index');
var Lib = require('@src/lib');
var constants = require('@src/components/legend/constants');

var d3 = require('d3');
var createGraph = require('../assets/create_graph_div');
var destroyGraph = require('../assets/destroy_graph_div');
var getBBox = require('../assets/get_bbox');
Expand All @@ -11,8 +12,6 @@ var mock = require('../../image/mocks/legend_scroll.json');
describe('The legend', function() {
'use strict';

var gd, legend, bg;

function countLegendGroups(gd) {
return gd._fullLayout._toppaper.selectAll('g.legend').size();
}
Expand All @@ -27,41 +26,59 @@ describe('The legend', function() {
return gd._fullLayout.height - gd._fullLayout.margin.t - gd._fullLayout.margin.b;
}

function getLegendHeight() {
function getLegendHeight(gd) {
var bg = d3.select('g.legend').select('.bg').node();
return gd._fullLayout.legend.borderwidth + getBBox(bg).height;
}

function getLegend() {
return d3.select('g.legend').node();
}

function getScrollBox() {
return d3.select('g.legend').select('.scrollbox').node();
}

function getScrollBar() {
return d3.select('g.legend').select('.scrollbar').node();
}

function getToggle() {
return d3.select('g.legend').select('.legendtoggle').node();
}

describe('when plotted with many traces', function() {
var gd;

beforeEach(function(done) {
gd = createGraph();

var mockCopy = Lib.extendDeep({}, mock);

Plotly.plot(gd, mockCopy.data, mockCopy.layout).then(function() {
legend = document.getElementsByClassName('legend')[0];
bg = document.getElementsByClassName('bg')[0];
done();
});
});

afterEach(destroyGraph);

it('should not exceed plot height', function() {
var legendHeight = getLegendHeight();
var legendHeight = getLegendHeight(gd);

expect(+legendHeight).toBe(getPlotHeight(gd));
});

it('should insert a scrollbar', function() {
var scrollBar = legend.getElementsByClassName('scrollbar')[0];
var scrollBar = getScrollBar();

expect(scrollBar).toBeDefined();
expect(scrollBar.getAttribute('x')).not.toBe(null);
});

it('should scroll when there\'s a wheel event', function() {
var scrollBox = legend.getElementsByClassName('scrollbox')[0],
legendHeight = getLegendHeight(),
var legend = getLegend(),
scrollBox = getScrollBox(),
legendHeight = getLegendHeight(gd),
scrollBoxYMax = gd._fullLayout.legend.height - legendHeight,
scrollBarYMax = legendHeight -
constants.scrollBarHeight -
Expand All @@ -80,8 +97,9 @@ describe('The legend', function() {
});

it('should keep the scrollbar position after a toggle event', function() {
var scrollBox = legend.getElementsByClassName('scrollbox')[0],
toggle = legend.getElementsByClassName('legendtoggle')[0],
var legend = getLegend(),
scrollBox = getScrollBox(),
toggle = getToggle(),
wheelDeltaY = 100;

legend.dispatchEvent(scrollTo(wheelDeltaY));
Expand All @@ -96,7 +114,7 @@ describe('The legend', function() {

it('should be restored and functional after relayout', function() {
var wheelDeltaY = 100,
legend = document.getElementsByClassName('legend')[0],
legend = getLegend(),
scrollBox,
scrollBar,
scrollBarX,
Expand All @@ -111,10 +129,10 @@ describe('The legend', function() {
Plotly.relayout(gd, 'showlegend', false);
Plotly.relayout(gd, 'showlegend', true);

legend = document.getElementsByClassName('legend')[0];
scrollBox = legend.getElementsByClassName('scrollbox')[0];
scrollBar = legend.getElementsByClassName('scrollbar')[0];
toggle = legend.getElementsByClassName('legendtoggle')[0];
legend = getLegend();
scrollBox = getScrollBox();
scrollBar = getScrollBar();
toggle = getToggle();

legend.dispatchEvent(scrollTo(wheelDeltaY));
expect(scrollBar.getAttribute('x')).toBe(scrollBarX);
Expand All @@ -131,7 +149,8 @@ describe('The legend', function() {
});

it('should constrain scrolling to the contents', function() {
var scrollBox = legend.getElementsByClassName('scrollbox')[0];
var legend = getLegend(),
scrollBox = getScrollBox();

legend.dispatchEvent(scrollTo(-100));
expect(scrollBox.getAttribute('transform')).toBe('translate(0, 0)');
Expand All @@ -141,8 +160,9 @@ describe('The legend', function() {
});

it('should scale the scrollbar movement from top to bottom', function() {
var scrollBar = legend.getElementsByClassName('scrollbar')[0],
legendHeight = getLegendHeight();
var legend = getLegend(),
scrollBar = getScrollBar(),
legendHeight = getLegendHeight(gd);

// The scrollbar is 20px tall and has 4px margins

Expand All @@ -166,10 +186,10 @@ describe('The legend', function() {
});

it('should resize when relayout\'ed with new height', function(done) {
var origLegendHeight = getLegendHeight();
var origLegendHeight = getLegendHeight(gd);

Plotly.relayout(gd, 'height', gd._fullLayout.height / 2).then(function() {
var legendHeight = getLegendHeight();
var legendHeight = getLegendHeight(gd);

// legend still exists and not duplicated
expect(countLegendGroups(gd)).toBe(1);
Expand All @@ -184,7 +204,6 @@ describe('The legend', function() {
});
});


describe('when plotted with few traces', function() {
var gd;

Expand Down Expand Up @@ -219,14 +238,10 @@ describe('The legend', function() {
});

it('should resize when traces added', function(done) {
legend = document.getElementsByClassName('legend')[0];
bg = document.getElementsByClassName('bg')[0];
var origLegendHeight = getLegendHeight();
var origLegendHeight = getLegendHeight(gd);

Plotly.addTraces(gd, { x: [1, 2, 3], y: [4, 3, 2], name: 'Test2' }).then(function() {
legend = document.getElementsByClassName('legend')[0];
bg = document.getElementsByClassName('bg')[0];
var legendHeight = getLegendHeight();
var legendHeight = getLegendHeight(gd);

expect(+legendHeight).toBeCloseTo(+origLegendHeight + 19, 0);

Expand Down