fix #3840 - use half delta for one-side violin hover label placement

Author: etpinard

src/traces/box/hover.js

@@ -58,6 +58,7 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
         hoverPseudoDistance, spikePseudoDistance;
 
     var boxDelta = t.bdPos;
+    var boxDeltaPos, boxDeltaNeg;
     var posAcceptance = t.wHover;
     var shiftPos = function(di) { return di.pos + t.bPos - pVal; };
 
@@ -67,18 +68,23 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
                 var pos = shiftPos(di);
                 return Fx.inbox(pos, pos + posAcceptance, hoverPseudoDistance);
             };
+            boxDeltaPos = boxDelta;
+            boxDeltaNeg = 0;
         }
         if(trace.side === 'negative') {
             dPos = function(di) {
                 var pos = shiftPos(di);
                 return Fx.inbox(pos - posAcceptance, pos, hoverPseudoDistance);
             };
+            boxDeltaPos = 0;
+            boxDeltaNeg = boxDelta;
         }
     } else {
         dPos = function(di) {
             var pos = shiftPos(di);
             return Fx.inbox(pos - posAcceptance, pos + posAcceptance, hoverPseudoDistance);
         };
+        boxDeltaPos = boxDeltaNeg = boxDelta;
     }
 
     var dVal;
@@ -134,8 +140,8 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
     else if(Color.opacity(mc) && trace.boxpoints) pointData.color = mc;
     else pointData.color = trace.fillcolor;
 
-    pointData[pLetter + '0'] = pAxis.c2p(di.pos + t.bPos - boxDelta, true);
-    pointData[pLetter + '1'] = pAxis.c2p(di.pos + t.bPos + boxDelta, true);
+    pointData[pLetter + '0'] = pAxis.c2p(di.pos + t.bPos - boxDeltaNeg, true);
+    pointData[pLetter + '1'] = pAxis.c2p(di.pos + t.bPos + boxDeltaPos, true);
 
     pointData[pLetter + 'LabelVal'] = di.pos;
 

test/jasmine/tests/violin_test.js

@@ -347,6 +347,14 @@ describe('Test violin hover:', function() {
         return Plotly.plot(gd, fig).then(function() {
             mouseEvent('mousemove', pos[0], pos[1]);
             assertHoverLabelContent(specs);
+
+            if(specs.hoverLabelPos) {
+                d3.selectAll('g.hovertext').each(function(_, i) {
+                    var bbox = this.getBoundingClientRect();
+                    expect([bbox.bottom, bbox.top])
+                        .toBeWithinArray(specs.hoverLabelPos[i], 10, 'bottom--top hover label ' + i);
+                });
+            }
         });
     }
 
@@ -512,6 +520,24 @@ describe('Test violin hover:', function() {
         nums: 'x: 42.43046, kde: 0.083',
         name: '',
         axis: 'Saturday'
+    }, {
+        desc: 'one-sided violin under hovermode y (ridgeplot case)',
+        mock: require('@mocks/violin_ridgeplot.json'),
+        patch: function(fig) {
+            fig.data.forEach(function(t) { t.hoveron = 'violins'; });
+            fig.layout.hovermode = 'y';
+            return fig;
+        },
+        nums: [
+            'max: 50.81', 'median: 18.24', 'min: 3.07',
+            'q1: 13.8575', 'q3: 24.975', 'upper fence: 39.42'
+        ],
+        name: ['', '', '', '', '', ''],
+        axis: 'Sat',
+        hoverLabelPos: [
+            [364, 270], [339, 270], [352, 270],
+            [346, 270], [349, 270], [387, 270]
+        ]
     }, {
         desc: 'single horizontal violin',
         mock: require('@mocks/violin_non-linear.json'),