Skip to content

Handle NaN positions in funnel & waterfall and skip connectors over rangebreaks #4663

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 4 commits into from
Mar 19, 2020
Merged

Handle NaN positions in funnel & waterfall and skip connectors over rangebreaks #4663

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c4b811c
ensure waterfall connector lines cliped when there is an axis break
archmoj Mar 18, 2020
49a9605
add test waterfall handle BADNUM positions - can extend the test when…
archmoj Mar 19, 2020
8c1e7a1
fix funnel bars and connectors as well
archmoj Mar 19, 2020
d9f0002
improve funnel test - correct orientation, etc
archmoj Mar 19, 2020
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
10 changes: 9 additions & 1 deletion src/traces/funnel/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
var d3 = require('d3');
var Lib = require('../../lib');
var Drawing = require('../../components/drawing');
var BADNUM = require('../../constants/numerical').BADNUM;
var barPlot = require('../bar/plot');
var clearMinTextSize = require('../bar/uniform_text').clearMinTextSize;

Expand Down Expand Up @@ -66,14 +67,21 @@ function plotConnectorRegions(gd, plotinfo, cdModule, traceLayer) {

var shape = '';

if(x[3] !== undefined && y[3] !== undefined) {
if(
x[0] !== BADNUM && y[0] !== BADNUM &&
x[1] !== BADNUM && y[1] !== BADNUM &&
x[2] !== BADNUM && y[2] !== BADNUM &&
x[3] !== BADNUM && y[3] !== BADNUM
) {
if(isHorizontal) {
shape += 'M' + x[0] + ',' + y[1] + 'L' + x[2] + ',' + y[2] + 'H' + x[3] + 'L' + x[1] + ',' + y[1] + 'Z';
} else {
shape += 'M' + x[1] + ',' + y[1] + 'L' + x[2] + ',' + y[3] + 'V' + y[2] + 'L' + x[1] + ',' + y[0] + 'Z';
}
}

if(shape === '') shape = 'M0,0Z';

Lib.ensureSingle(d3.select(this), 'path')
.attr('d', shape)
.call(Drawing.setClipUrl, plotinfo.layerClipId, gd);
Expand Down
44 changes: 25 additions & 19 deletions src/traces/waterfall/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
var d3 = require('d3');
var Lib = require('../../lib');
var Drawing = require('../../components/drawing');
var BADNUM = require('../../constants/numerical').BADNUM;
var barPlot = require('../bar/plot');
var clearMinTextSize = require('../bar/uniform_text').clearMinTextSize;

Expand Down Expand Up @@ -66,31 +67,36 @@ function plotConnectors(gd, plotinfo, cdModule, traceLayer) {

var shape = '';

if(mode === 'spanning') {
if(!di.isSum && i > 0) {
if(isHorizontal) {
shape += 'M' + x[0] + ',' + y[1] + 'V' + y[0];
} else {
shape += 'M' + x[1] + ',' + y[0] + 'H' + x[0];
if(
x[0] !== BADNUM && y[0] !== BADNUM &&
x[1] !== BADNUM && y[1] !== BADNUM
) {
if(mode === 'spanning') {
if(!di.isSum && i > 0) {
if(isHorizontal) {
shape += 'M' + x[0] + ',' + y[1] + 'V' + y[0];
} else {
shape += 'M' + x[1] + ',' + y[0] + 'H' + x[0];
}
}
}
}

if(mode !== 'between') {
if(di.isSum || i < len - 1) {
if(isHorizontal) {
shape += 'M' + x[1] + ',' + y[0] + 'V' + y[1];
} else {
shape += 'M' + x[0] + ',' + y[1] + 'H' + x[1];
if(mode !== 'between') {
if(di.isSum || i < len - 1) {
if(isHorizontal) {
shape += 'M' + x[1] + ',' + y[0] + 'V' + y[1];
} else {
shape += 'M' + x[0] + ',' + y[1] + 'H' + x[1];
}
}
}
}

if(x[2] !== undefined && y[2] !== undefined) {
if(isHorizontal) {
shape += 'M' + x[1] + ',' + y[1] + 'V' + y[2];
} else {
shape += 'M' + x[1] + ',' + y[1] + 'H' + x[2];
if(x[2] !== BADNUM && y[2] !== BADNUM) {
if(isHorizontal) {
shape += 'M' + x[1] + ',' + y[1] + 'V' + y[2];
} else {
shape += 'M' + x[1] + ',' + y[1] + 'H' + x[2];
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion test/jasmine/tests/bar_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2932,7 +2932,7 @@ describe('bar tweening', function() {
.then(done);
});

it('handle NaN positions on vertical bars', function(done) {
it('handle BADNUM positions on vertical bars', function(done) {
var y1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var y2 = [10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
var mockCopy = {
Expand Down
49 changes: 49 additions & 0 deletions test/jasmine/tests/funnel_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ var rgb = color.rgb;
var customAssertions = require('../assets/custom_assertions');
var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
var checkTextTemplate = require('../assets/check_texttemplate');
var checkTransition = require('../assets/check_transitions');
var Fx = require('@src/components/fx');

var d3 = require('d3');
Expand Down Expand Up @@ -1033,6 +1034,54 @@ describe('A funnel plot', function() {
.then(done);
});

it('handle BADNUM positions', function(done) {
var x1 = [11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];
var x2 = x1; // no transition now
var mockCopy = {
data: [
{
type: 'funnel',
y: [
0,
1,
'',
'NaN',
NaN,
Infinity,
-Infinity,
undefined,
null,
9,
10
],
x: x1
}
],
layout: {
width: 800,
height: 600
}
};

var barTests = [
[0, '.point path', 'attr', 'd', ['M245,4V34H395V4Z', 'M251,42V73H389V42Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M306,347V378H334V347Z', 'M313,386V416H327V386Z']]
];

var connectorTests = [
[0, '.regions path', 'attr', 'd', ['M245,34L251,42H389L395,34Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M306,378L313,386H327L334,378Z', 'M0,0Z']]
];

var animateOpts = {data: [{x: x2}]};
var transitionOpts = false; // use default

checkTransition(gd, mockCopy, animateOpts, transitionOpts, barTests)
.then(function() {
return checkTransition(gd, mockCopy, animateOpts, transitionOpts, connectorTests);
})
.catch(failTest)
.then(done);
});

it('should be able to deal with transform that empty out the data coordinate arrays', function(done) {
Plotly.plot(gd, {
data: [{
Expand Down
49 changes: 49 additions & 0 deletions test/jasmine/tests/waterfall_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ var rgb = color.rgb;
var customAssertions = require('../assets/custom_assertions');
var assertHoverLabelContent = customAssertions.assertHoverLabelContent;
var checkTextTemplate = require('../assets/check_texttemplate');
var checkTransition = require('../assets/check_transitions');
var Fx = require('@src/components/fx');

var d3 = require('d3');
Expand Down Expand Up @@ -977,6 +978,54 @@ describe('A waterfall plot', function() {
.then(done);
});

it('handle BADNUM positions', function(done) {
var y1 = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var y2 = y1; // no transition now
var mockCopy = {
data: [
{
type: 'waterfall',
x: [
0,
1,
'',
'NaN',
NaN,
Infinity,
-Infinity,
undefined,
null,
9,
10
],
y: y1
}
],
layout: {
width: 400,
height: 300
}
};

var barTests = [
[0, '.point path', 'attr', 'd', ['M2,121V109H20V121Z', 'M24,111V98H41V111Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M199,28V15H216V28Z', 'M220,17V5H238V17Z']]
];

var connectorTests = [
[0, '.line path', 'attr', 'd', ['M20,110H24', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M0,0Z', 'M216,16H220', 'M0,0Z']]
];

var animateOpts = {data: [{y: y2}]};
var transitionOpts = false; // use default

checkTransition(gd, mockCopy, animateOpts, transitionOpts, barTests)
.then(function() {
return checkTransition(gd, mockCopy, animateOpts, transitionOpts, connectorTests);
})
.catch(failTest)
.then(done);
});

it('should be able to deal with transform that empty out the data coordinate arrays', function(done) {
Plotly.plot(gd, {
data: [{
Expand Down