mv and clip text in common hovermode:'y' hover label

... so that their text start is visible in the graph's viewport

Author: etpinard

src/components/fx/hover.js

@@ -860,6 +860,29 @@ function createHoverText(hoverData, opts, gd) {
                 'V-' + (HOVERTEXTPAD + tbb.height / 2) +
                 'H' + leftsign + HOVERARROWSIZE + 'V-' + HOVERARROWSIZE + 'Z');
 
+            var halfHeight = tbb.height / 2;
+            var clipId = 'clip' + fullLayout._uid + 'commonlabel' + ya._id;
+            var clipPath;
+            var ltx;
+
+            if(lx < (tbb.width + 2 * HOVERTEXTPAD + HOVERARROWSIZE)) {
+                ltx = tbb.width - lx + HOVERTEXTPAD;
+                clipPath = 'M-' + (HOVERARROWSIZE + HOVERTEXTPAD) + '-' + halfHeight +
+                    'h-' + (tbb.width - HOVERTEXTPAD) +
+                    'V' + halfHeight +
+                    'h' + (tbb.width - HOVERTEXTPAD) + 'Z';
+            } else {
+                ltx = sgn * (HOVERTEXTPAD + HOVERARROWSIZE);
+                clipPath = null;
+            }
+
+            svgTextUtils.positionText(ltext, ltx, outerTop - tbb.top - halfHeight);
+
+            var textClip = fullLayout._topclips.selectAll('#' + clipId).data(clipPath ? [0] : []);
+            textClip.enter().append('clipPath').attr('id', clipId).append('path');
+            textClip.exit().remove();
+            textClip.select('path').attr('d', clipPath);
+            Drawing.setClipUrl(ltext, clipPath ? clipId : null, gd);
         }
 
         label.attr('transform', 'translate(' + lx + ',' + ly + ')');

test/jasmine/tests/hover_label_test.js

@@ -16,6 +16,7 @@ var delay = require('../assets/delay');
 var doubleClick = require('../assets/double_click');
 var failTest = require('../assets/fail_test');
 var touchEvent = require('../assets/touch_event');
+var negateIf = require('../assets/negate_if');
 
 var customAssertions = require('../assets/custom_assertions');
 var assertHoverLabelStyle = customAssertions.assertHoverLabelStyle;
@@ -1750,6 +1751,48 @@ describe('hover info', function() {
             .catch(failTest)
             .then(done);
         });
+
+        it('hovermode:y common label should shift and clip text start into graph div', function(done) {
+            function _assert(msg, exp) {
+                return function() {
+                    var label = d3.select('g.axistext');
+                    if(label.node()) {
+                        var ltext = label.select('text');
+                        expect(ltext.text()).toBe(exp.txt, 'common label text| ' + msg);
+                        expect(ltext.attr('x')).toBeWithin(exp.ltx, 5, 'common label text x| ' + msg);
+
+                        negateIf(exp.clip, expect(ltext.attr('clip-path'))).toBe(null, 'text clip url| ' + msg);
+
+                        var fullLayout = gd._fullLayout;
+                        var clipId = 'clip' + fullLayout._uid + 'commonlabely';
+                        var clipPath = d3.select('#' + clipId);
+                        negateIf(exp.clip, expect(clipPath.node())).toBe(null, 'text clip path|' + msg);
+                    } else {
+                        fail('fail to generate common hover label');
+                    }
+                };
+            }
+
+            function _hoverWayLong() { return _hover(gd, 135, 100); }
+
+            function _hoverA() { return _hover(gd, 135, 20); }
+
+            Plotly.plot(gd, [{
+                type: 'bar',
+                orientation: 'h',
+                y: ['Looong label', 'Loooooger label', 'Waay loooong label', 'a'],
+                x: [2, 5, 10, 2]
+            }], {
+                width: 400,
+                height: 400
+            })
+            .then(_hoverWayLong)
+            .then(_assert('on way long label', {txt: 'Waay loooong label', clip: true, ltx: 38}))
+            .then(_hoverA)
+            .then(_assert('on "a" label', {txt: 'a', clip: false, ltx: -9}))
+            .catch(failTest)
+            .then(done);
+        });
     });
 
     describe('hovertemplate', function() {