Merge pull request #2215 from plotly/hover-farther

allow hover labels to extend to the edges of the plot

Author: alexcjohnson

src/components/fx/hover.js

@@ -452,7 +452,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
 
     var hoverLabels = createHoverText(hoverData, labelOpts, gd);
 
-    hoverAvoidOverlaps(hoverData, rotateLabels ? 'xa' : 'ya');
+    hoverAvoidOverlaps(hoverData, rotateLabels ? 'xa' : 'ya', fullLayout);
 
     alignHoverText(hoverLabels, rotateLabels);
 
@@ -791,7 +791,7 @@ function createHoverText(hoverData, opts, gd) {
 // know what happens if the group spans all the way from one edge to
 // the other, though it hardly matters - there's just too much
 // information then.
-function hoverAvoidOverlaps(hoverData, ax) {
+function hoverAvoidOverlaps(hoverData, ax, fullLayout) {
     var nummoves = 0,
 
         // make groups of touching points
@@ -804,8 +804,8 @@ function hoverAvoidOverlaps(hoverData, ax) {
                     pos: d.pos,
                     posref: d.posref,
                     size: d.by * (axis._id.charAt(0) === 'x' ? YFACTOR : 1) / 2,
-                    pmin: axis._offset,
-                    pmax: axis._offset + axis._length
+                    pmin: 0,
+                    pmax: (axis._id.charAt(0) === 'x' ? fullLayout.width : fullLayout.height)
                 }];
             })
             .sort(function(a, b) { return a[0].posref - b[0].posref; }),

test/jasmine/tests/box_test.js

@@ -223,11 +223,11 @@ describe('Test box hover:', function() {
             return fig;
         },
         nums: [
-            'q1: 0.3', 'median: 0.45', 'q3: 0.6', 'max: 1', 'median: 0.55', 'min: 0.2',
+            'q1: 0.3', 'median: 0.45', 'q3: 0.6', 'max: 1', 'median: 0.55', 'min: 0', 'min: 0.2',
             'q3: 0.6', 'max: 0.7', 'median: 0.45', 'min: 0.1', 'q3: 0.6', 'max: 0.9'
         ],
         name: [
-            '', 'kale', '', '', 'radishes', '',
+            '', 'kale', '', '', 'radishes', '', '',
             '', '', 'carrots', '', '', ''
         ],
         axis: 'day 1'

test/jasmine/tests/hover_label_test.js

@@ -966,6 +966,44 @@ describe('hover info', function() {
             .then(done);
         });
     });
+
+    describe('overflowing hover labels', function() {
+        var trace = {y: [1, 2, 3], text: ['', 'a<br>b<br>c', '']};
+        var data = [trace, trace, trace, trace, trace, trace, trace];
+        var layout = {
+            width: 600, height: 600, showlegend: false,
+            margin: {l: 100, r: 100, t: 100, b: 100},
+            hovermode: 'x'
+        };
+
+        var gd;
+
+        beforeEach(function(done) {
+            gd = createGraphDiv();
+            Plotly.plot(gd, data, layout).then(done);
+        });
+
+        function labelCount() {
+            return d3.select(gd).selectAll('g.hovertext').size();
+        }
+
+        it('shows as many labels as will fit on the div, not on the subplot', function(done) {
+            _hoverNatural(gd, 200, 200);
+
+            expect(labelCount()).toBe(7);
+
+            Plotly.relayout(gd, {'yaxis.domain': [0.48, 0.52]})
+            .then(function() {
+                _hoverNatural(gd, 150, 200);
+                _hoverNatural(gd, 200, 200);
+
+                expect(labelCount()).toBe(7);
+            })
+            .catch(fail)
+            .then(done);
+        });
+
+    });
 });
 
 describe('hover info on stacked subplots', function() {

test/jasmine/tests/violin_test.js

@@ -296,13 +296,12 @@ describe('Test violin hover:', function() {
         },
         nums: [
             'q3: 0.6', 'median: 0.45', 'q3: 0.6', 'max: 1', 'y: 0.9266848, kde: 0.383',
-            'median: 0.55', 'max: 0.7', 'y: 0.9266848, kde: 0.182',
-            'median: 0.45', 'q3: 0.6', 'max: 0.9', 'y: 0.9266848, kde: 0.435',
-            'q3: 0.6', 'max: 0.9'
+            'median: 0.55', 'min: 0', 'q1: 0.3', 'min: 0.2', 'max: 0.7', 'y: 0.9266848, kde: 0.182',
+            'median: 0.45', 'min: 0.1', 'q3: 0.6', 'max: 0.9', 'y: 0.9266848, kde: 0.435'
         ],
         name: [
-            '', 'kale', '', '', '', 'radishes', '',
-            '', 'carrots', '', '', ''
+            '', 'kale', '', '', '', 'radishes', '', '', '', '',
+            '', 'carrots', '', '', '', ''
         ],
         axis: 'day 1'
     }, {