From 6d45161d5fb316e36e0618c6ea9d0520dc1a656f Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 3 Dec 2019 14:47:03 -0500
Subject: [PATCH 1/2] sankey: fix position of link hover labels in vertical
orientation
---
src/traces/sankey/plot.js | 14 +++++++-----
test/jasmine/tests/sankey_test.js | 36 +++++++++++++++++++++++++++++++
2 files changed, 45 insertions(+), 5 deletions(-)
diff --git a/src/traces/sankey/plot.js b/src/traces/sankey/plot.js
index 9b14ec6caac..1115f9515f7 100644
--- a/src/traces/sankey/plot.js
+++ b/src/traces/sankey/plot.js
@@ -178,13 +178,17 @@ module.exports = function plot(gd, calcData) {
function hoverCenterPosition(link) {
var hoverCenterX, hoverCenterY;
if(link.circular) {
- hoverCenterX = (link.circularPathData.leftInnerExtent + link.circularPathData.rightInnerExtent) / 2 + d.parent.translateX;
- hoverCenterY = link.circularPathData.verticalFullExtent + d.parent.translateY;
+ hoverCenterX = (link.circularPathData.leftInnerExtent + link.circularPathData.rightInnerExtent) / 2;
+ hoverCenterY = link.circularPathData.verticalFullExtent;
} else {
- hoverCenterX = (link.source.x1 + link.target.x0) / 2 + d.parent.translateX;
- hoverCenterY = (link.y0 + link.y1) / 2 + d.parent.translateY;
+ hoverCenterX = (link.source.x1 + link.target.x0) / 2;
+ hoverCenterY = (link.y0 + link.y1) / 2;
}
- return [hoverCenterX, hoverCenterY];
+ var center = [hoverCenterX, hoverCenterY];
+ if(link.trace.orientation === 'v') center.reverse();
+ center[0] += d.parent.translateX;
+ center[1] += d.parent.translateY;
+ return center;
}
// For each related links, create a hoverItem
diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js
index e995d92eaa4..d8c9b0e217b 100644
--- a/test/jasmine/tests/sankey_test.js
+++ b/test/jasmine/tests/sankey_test.js
@@ -777,6 +777,42 @@ describe('sankey tests', function() {
.then(done);
});
+ it('should position hover labels correctly', function(done) {
+ var gd = createGraphDiv();
+ var mockCopy = Lib.extendDeep({}, mock);
+
+ Plotly.plot(gd, mockCopy)
+ .then(function() {
+ _hover(900, 230);
+
+ assertLabel(
+ ['source: Thermal generation', 'target: Losses', '787TWh'],
+ ['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
+ );
+
+ var g = d3.select('.hovertext');
+ var pos = g.node().getBoundingClientRect();
+ expect(pos.x).toBeCloseTo(555, 0, 'it should have correct x position');
+ expect(pos.y).toBeCloseTo(196, 0, 'it should have correct y position');
+ return Plotly.restyle(gd, 'orientation', 'v');
+ })
+ .then(function() {
+ _hover(520, 500);
+
+ assertLabel(
+ ['source: Thermal generation', 'target: Losses', '787TWh'],
+ ['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
+ );
+
+ var g = d3.select('.hovertext');
+ var pos = g.node().getBoundingClientRect();
+ expect(pos.x).toBeCloseTo(279, 0, 'it should have correct x position');
+ expect(pos.y).toBeCloseTo(500, 0, 'it should have correct y position');
+ })
+ .catch(failTest)
+ .then(done);
+ });
+
it('should show the correct hover labels when hovertemplate is specified', function(done) {
var gd = createGraphDiv();
var mockCopy = Lib.extendDeep({}, mock);
From 1c29be9c0f35bb29b7a8819e2ee4863d6ed4cdd0 Mon Sep 17 00:00:00 2001
From: Antoine Roy-Gobeil <antoine@plot.ly>
Date: Tue, 3 Dec 2019 15:02:48 -0500
Subject: [PATCH 2/2] sankey_test: increase position tolerance to run on CI
---
test/jasmine/tests/sankey_test.js | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/test/jasmine/tests/sankey_test.js b/test/jasmine/tests/sankey_test.js
index d8c9b0e217b..5f0f02e5c07 100644
--- a/test/jasmine/tests/sankey_test.js
+++ b/test/jasmine/tests/sankey_test.js
@@ -792,8 +792,8 @@ describe('sankey tests', function() {
var g = d3.select('.hovertext');
var pos = g.node().getBoundingClientRect();
- expect(pos.x).toBeCloseTo(555, 0, 'it should have correct x position');
- expect(pos.y).toBeCloseTo(196, 0, 'it should have correct y position');
+ expect(pos.x).toBeCloseTo(555, -1.5, 'it should have correct x position');
+ expect(pos.y).toBeCloseTo(196, -1.5, 'it should have correct y position');
return Plotly.restyle(gd, 'orientation', 'v');
})
.then(function() {
@@ -806,8 +806,8 @@ describe('sankey tests', function() {
var g = d3.select('.hovertext');
var pos = g.node().getBoundingClientRect();
- expect(pos.x).toBeCloseTo(279, 0, 'it should have correct x position');
- expect(pos.y).toBeCloseTo(500, 0, 'it should have correct y position');
+ expect(pos.x).toBeCloseTo(279, -1.5, 'it should have correct x position');
+ expect(pos.y).toBeCloseTo(500, -1.5, 'it should have correct y position');
})
.catch(failTest)
.then(done);