Merge pull request #3401 from plotly/horiz-box-violin-label-align-fix

Fix horizontal box/violin hover label misalignment under hovermode:'closest'

Author: etpinard

src/components/fx/hover.js

@@ -1082,7 +1082,6 @@ function createHoverText(hoverData, opts, gd) {
 // information then.
 function hoverAvoidOverlaps(hoverData, ax, fullLayout) {
     var nummoves = 0;
-
     var axSign = 1;
 
     // make groups of touching points
@@ -1328,7 +1327,7 @@ function cleanPoint(d, hovermode) {
     fill('fontColor', 'htc', 'hoverlabel.font.color');
     fill('nameLength', 'hnl', 'hoverlabel.namelength');
 
-    d.posref = hovermode === 'y' ?
+    d.posref = (hovermode === 'y' || (hovermode === 'closest' && trace.orientation === 'h')) ?
         (d.xa._offset + (d.x0 + d.x1) / 2) :
         (d.ya._offset + (d.y0 + d.y1) / 2);
 

test/jasmine/tests/box_test.js

@@ -312,6 +312,29 @@ describe('Test box hover:', function() {
         },
         nums: 'look:0.7',
         name: ''
+    }, {
+        desc: 'orientation:h | hovermode:y',
+        mock: require('@mocks/box_grouped_horz.json'),
+        pos: [430, 130],
+        nums: [
+            'max: 1', 'mean ± σ: 0.6833333 ± 0.2409472', 'min: 0.3',
+            'q1: 0.5', 'q3: 0.9', 'median: 0.7'],
+        name: ['', '', '', '', '', 'carrots'],
+        axis: 'day 2',
+        hOrder: [0, 4, 5, 1, 3, 2]
+    }, {
+        desc: 'orientation:h | hovermode:closest',
+        mock: require('@mocks/box_grouped_horz.json'),
+        patch: function(fig) {
+            fig.layout.hovermode = 'closest';
+            return fig;
+        },
+        pos: [430, 130],
+        nums: [
+            '(max: 1, day 2)', '(mean ± σ: 0.6833333 ± 0.2409472, day 2)', '(min: 0.3, day 2)',
+            '(q1: 0.5, day 2)', '(q3: 0.9, day 2)', '(median: 0.7, day 2)'],
+        name: ['', '', '', '', '', 'carrots'],
+        hOrder: [0, 4, 5, 1, 3, 2]
     }].forEach(function(specs) {
         it('should generate correct hover labels ' + specs.desc, function(done) {
             run(specs).catch(failTest).then(done);

test/jasmine/tests/violin_test.js

@@ -489,6 +489,40 @@ describe('Test violin hover:', function() {
         nums: '(96, Old Faithful)',
         name: '',
         isRotated: false
+    }, {
+        desc: 'orientation:h | hovermode:y',
+        mock: require('@mocks/violin_grouped_horz-multicategory.json'),
+        patch: function(fig) {
+            // don't hover on kde, to avoid local vs CI discrepancies
+            fig.data.forEach(function(t) {
+                t.hoveron = 'violins';
+            });
+            return fig;
+        },
+        pos: [430, 130],
+        nums: ['max: 0.9', 'min: 0.1', 'q1: 0.2', 'q3: 0.7', 'median: 0.4'],
+        name: ['', '', '', '', 'kale'],
+        axis: '2018 - day 2',
+        hOrder: [0, 3, 4, 2, 1]
+    }, {
+        desc: 'orientation:h | hovermode:closest',
+        mock: require('@mocks/violin_grouped_horz-multicategory.json'),
+        patch: function(fig) {
+            // don't hover on kde, to avoid local vs CI discrepancies
+            fig.data.forEach(function(t) {
+                t.hoveron = 'violins';
+            });
+            fig.layout.hovermode = 'closest';
+            return fig;
+        },
+        pos: [430, 130],
+        nums: [
+            '(max: 0.9, 2018 - day 2)', '(min: 0.1, 2018 - day 2)',
+            '(q1: 0.2, 2018 - day 2)', '(q3: 0.7, 2018 - day 2)',
+            '(median: 0.4, 2018 - day 2)'
+        ],
+        name: ['', '', '', '', 'kale'],
+        hOrder: [0, 3, 4, 2, 1]
     }]
     .forEach(function(specs) {
         it('should generate correct hover labels ' + specs.desc, function(done) {