diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index 7fe5f429c81..a32ad3f0922 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -1177,7 +1177,7 @@ function hoverAvoidOverlaps(hoverLabels, ax, fullLayout) { donepositioning = true; i = 0; while(i < pointgroups.length - 1) { - // the higher (g0) and lower (g1) point group + // the higher (g0) and lower (g1) point group var g0 = pointgroups[i]; var g1 = pointgroups[i + 1]; diff --git a/src/traces/violin/hover.js b/src/traces/violin/hover.js index 184e41744c7..30305e4b87e 100644 --- a/src/traces/violin/hover.js +++ b/src/traces/violin/hover.js @@ -26,10 +26,6 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, hoverLay if(hasHoveronViolins || hasHoveronKDE) { var closeBoxData = boxHoverPoints.hoverOnBoxes(pointData, xval, yval, hovermode); - if(hasHoveronViolins) { - closeData = closeData.concat(closeBoxData); - } - if(hasHoveronKDE && closeBoxData.length > 0) { var xa = pointData.xa; var ya = pointData.ya; @@ -82,6 +78,10 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, hoverLay violinLineAttrs[vLetter + '1'] = violinLineAttrs[vLetter + '2'] = vAxis._offset + vValPx; } } + + if(hasHoveronViolins) { + closeData = closeData.concat(closeBoxData); + } } if(hoveron.indexOf('points') !== -1) { diff --git a/test/image/baselines/violin_zoomed-in.png b/test/image/baselines/violin_zoomed-in.png new file mode 100644 index 00000000000..ae8e8e3225b Binary files /dev/null and b/test/image/baselines/violin_zoomed-in.png differ diff --git a/test/image/mocks/violin_zoomed-in.json b/test/image/mocks/violin_zoomed-in.json new file mode 100644 index 00000000000..3894212df73 --- /dev/null +++ b/test/image/mocks/violin_zoomed-in.json @@ -0,0 +1,274 @@ +{ + "data": [ + { + "box": { + "visible": true + }, + "fillcolor": "#8dd3c7", + "line": { + "color": "black" + }, + "meanline": { + "visible": true + }, + "opacity": 0.6, + "type": "violin", + "x0": "Total Bill", + "y": [ + 16.99, + 10.34, + 21.01, + 23.68, + 24.59, + 25.29, + 8.77, + 26.88, + 15.04, + 14.78, + 10.27, + 35.26, + 15.42, + 18.43, + 14.83, + 21.58, + 10.33, + 16.29, + 16.97, + 20.65, + 17.92, + 20.29, + 15.77, + 39.42, + 19.82, + 17.81, + 13.37, + 12.69, + 21.7, + 19.65, + 9.55, + 18.35, + 15.06, + 20.69, + 17.78, + 24.06, + 16.31, + 16.93, + 18.69, + 31.27, + 16.04, + 17.46, + 13.94, + 9.68, + 30.4, + 18.29, + 22.23, + 32.4, + 28.55, + 18.04, + 12.54, + 10.29, + 34.81, + 9.94, + 25.56, + 19.49, + 38.01, + 26.41, + 11.24, + 48.27, + 20.29, + 13.81, + 11.02, + 18.29, + 17.59, + 20.08, + 16.45, + 3.07, + 20.23, + 15.01, + 12.02, + 17.07, + 26.86, + 25.28, + 14.73, + 10.51, + 17.92, + 27.2, + 22.76, + 17.29, + 19.44, + 16.66, + 10.07, + 32.68, + 15.98, + 34.83, + 13.03, + 18.28, + 24.71, + 21.16, + 28.97, + 22.49, + 5.75, + 16.32, + 22.75, + 40.17, + 27.28, + 12.03, + 21.01, + 12.46, + 11.35, + 15.38, + 44.3, + 22.42, + 20.92, + 15.36, + 20.49, + 25.21, + 18.24, + 14.31, + 14, + 7.25, + 38.07, + 23.95, + 25.71, + 17.31, + 29.93, + 10.65, + 12.43, + 24.08, + 11.69, + 13.42, + 14.26, + 15.95, + 12.48, + 29.8, + 8.52, + 14.52, + 11.38, + 22.82, + 19.08, + 20.27, + 11.17, + 12.26, + 18.26, + 8.51, + 10.33, + 14.15, + 16, + 13.16, + 17.47, + 34.3, + 41.19, + 27.05, + 16.43, + 8.35, + 18.64, + 11.87, + 9.78, + 7.51, + 14.07, + 13.13, + 17.26, + 24.55, + 19.77, + 29.85, + 48.17, + 25, + 13.39, + 16.49, + 21.5, + 12.66, + 16.21, + 13.81, + 17.51, + 24.52, + 20.76, + 31.71, + 10.59, + 10.63, + 50.81, + 15.81, + 7.25, + 31.85, + 16.82, + 32.9, + 17.89, + 14.48, + 9.6, + 34.63, + 34.65, + 23.33, + 45.35, + 23.17, + 40.55, + 20.69, + 20.9, + 30.46, + 18.15, + 23.1, + 15.69, + 19.81, + 28.44, + 15.48, + 16.58, + 7.56, + 10.34, + 43.11, + 13, + 13.51, + 18.71, + 12.74, + 13, + 16.4, + 20.53, + 16.47, + 26.59, + 38.73, + 24.27, + 12.76, + 30.06, + 25.89, + 48.33, + 13.27, + 28.17, + 12.9, + 28.15, + 11.59, + 7.74, + 30.14, + 12.16, + 13.42, + 8.58, + 15.98, + 13.42, + 16.27, + 10.09, + 20.45, + 13.28, + 22.12, + 24.01, + 15.69, + 11.61, + 10.77, + 15.53, + 10.07, + 12.6, + 32.83, + 35.83, + 29.03, + 27.18, + 22.67, + 17.82, + 18.78 + ] + } + ], + "layout": { + "xaxis": { + "range": [-0.125, 0.125] + }, + "yaxis": { + "range": [-18, 35], + "zeroline": false + } + } +} diff --git a/test/jasmine/tests/violin_test.js b/test/jasmine/tests/violin_test.js index d4ac9aa4698..ab4bb5ed657 100644 --- a/test/jasmine/tests/violin_test.js +++ b/test/jasmine/tests/violin_test.js @@ -724,6 +724,40 @@ describe('Test violin hover:', function() { .then(done); }); }); + + it('labels should avoid overlaps', function(done) { + gd = createGraphDiv(); + + var fig = Lib.extendDeep({}, require('@mocks/violin_zoomed-in.json')); + fig.layout.width = 700; + fig.layout.height = 450; + + Plotly.plot(gd, fig) + .then(function() { + mouseEvent('mousemove', 350, 225); + + var actual = []; + d3.selectAll('g.hovertext').each(function() { + var bbox = this.getBoundingClientRect(); + var tx = d3.select(this).text(); + actual.push([tx, bbox]); + }); + + actual = actual.sort(function(a, b) { return a[1].top - b[1].top; }); + + expect(actual.length).toBe(7, '# of value hover labels'); + + for(var i = 0; i < actual.length - 1; i++) { + var a = actual[i]; + var b = actual[i + 1]; + if(b[1].top < a[1].bottom) { + fail('Labels ' + a[0] + ' and ' + b[1] + ' overlap.'); + } + } + }) + .catch(failTest) + .then(done); + }); }); describe('Test violin restyle:', function() {