Merge pull request #6189 from plotly/improve-box-violin-hoverlabels

revise `box` & `violin` hover labels - improve order & handle duplicates

Author: archmoj

draftlogs/6189_fix.md

@@ -0,0 +1 @@
+ - Fix undesirable missing hover labels of `box` & `violin` traces [[#6189](https://github.com/plotly/plotly.js/pull/6189)]

src/traces/box/hover.js

@@ -44,7 +44,6 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
     var trace = cd[0].trace;
     var t = cd[0].t;
     var isViolin = trace.type === 'violin';
-    var closeBoxData = [];
 
     var pLetter, vLetter, pAxis, vAxis, vVal, pVal, dx, dy, dPos,
         hoverPseudoDistance, spikePseudoDistance;
@@ -141,22 +140,30 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
     pointData.spikeDistance = dxy(di) * spikePseudoDistance / hoverPseudoDistance;
     pointData[spikePosAttr] = pAxis.c2p(di.pos, true);
 
-    // box plots: each "point" gets many labels
-    var usedVals = {};
-    var attrs = ['med', 'q1', 'q3', 'min', 'max'];
+    var hasMean = trace.boxmean || (trace.meanline || {}).visible;
+    var hasFences = trace.boxpoints || trace.points;
 
-    if(trace.boxmean || (trace.meanline || {}).visible) {
-        attrs.push('mean');
-    }
-    if(trace.boxpoints || trace.points) {
-        attrs.push('lf', 'uf');
+    // labels with equal values (e.g. when min === q1) should still be presented in the order they have when they're unequal
+    var attrs =
+        (hasFences && hasMean) ? ['max', 'uf', 'q3', 'med', 'mean', 'q1', 'lf', 'min'] :
+        (hasFences && !hasMean) ? ['max', 'uf', 'q3', 'med', 'q1', 'lf', 'min'] :
+        (!hasFences && hasMean) ? ['max', 'q3', 'med', 'mean', 'q1', 'min'] :
+        ['max', 'q3', 'med', 'q1', 'min'];
+
+    var rev = vAxis.range[1] < vAxis.range[0];
+
+    if(trace.orientation === (rev ? 'v' : 'h')) {
+        attrs.reverse();
     }
 
+    var spikeDistance = pointData.spikeDistance;
+    var spikePosition = pointData[spikePosAttr];
+
+    var closeBoxData = [];
     for(var i = 0; i < attrs.length; i++) {
         var attr = attrs[i];
 
-        if(!(attr in di) || (di[attr] in usedVals)) continue;
-        usedVals[di[attr]] = true;
+        if(!(attr in di)) continue;
 
         // copy out to a new object for each value to label
         var val = di[attr];
@@ -176,17 +183,27 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
             pointData2[vLetter + 'err'] = di.sd;
         }
 
-        // only keep name and spikes on the first item (median)
-        pointData.name = '';
-        pointData.spikeDistance = undefined;
-        pointData[spikePosAttr] = undefined;
-
         // no hovertemplate support yet
         pointData2.hovertemplate = false;
 
         closeBoxData.push(pointData2);
     }
 
+    // only keep name and spikes on the median
+    pointData.name = '';
+    pointData.spikeDistance = undefined;
+    pointData[spikePosAttr] = undefined;
+    for(var k = 0; k < closeBoxData.length; k++) {
+        if(closeBoxData[k].attr !== 'med') {
+            closeBoxData[k].name = '';
+            closeBoxData[k].spikeDistance = undefined;
+            closeBoxData[k][spikePosAttr] = undefined;
+        } else {
+            closeBoxData[k].spikeDistance = spikeDistance;
+            closeBoxData[k][spikePosAttr] = spikePosition;
+        }
+    }
+
     return closeBoxData;
 }
 

src/traces/violin/hover.js

@@ -56,11 +56,19 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, opts) {
                 kdePointData[vLetter + 'Label'] = vLetter + ': ' + Axes.hoverLabelText(vAxis, vVal, trace[vLetter + 'hoverformat']) + ', ' + cd[0].t.labels.kde + ' ' + kdeVal.toFixed(3);
 
                 // move the spike to the KDE point
-                kdePointData.spikeDistance = closeBoxData[0].spikeDistance;
+                var medId = 0;
+                for(var k = 0; k < closeBoxData.length; k++) {
+                    if(closeBoxData[k].attr === 'med') {
+                        medId = k;
+                        break;
+                    }
+                }
+
+                kdePointData.spikeDistance = closeBoxData[medId].spikeDistance;
                 var spikePosAttr = pLetter + 'Spike';
-                kdePointData[spikePosAttr] = closeBoxData[0][spikePosAttr];
-                closeBoxData[0].spikeDistance = undefined;
-                closeBoxData[0][spikePosAttr] = undefined;
+                kdePointData[spikePosAttr] = closeBoxData[medId][spikePosAttr];
+                closeBoxData[medId].spikeDistance = undefined;
+                closeBoxData[medId][spikePosAttr] = undefined;
 
                 // no hovertemplate support yet
                 kdePointData.hovertemplate = false;

test/jasmine/tests/box_test.js

@@ -743,8 +743,8 @@ describe('Test box hover:', function() {
             fig.layout.hovermode = 'x';
             return fig;
         },
-        nums: ['median: 0.55', 'min: 0', 'q1: 0.3', 'q3: 0.6', 'max: 0.7'],
-        name: ['radishes', '', '', '', ''],
+        nums: ['median: 0.55', 'min: 0', 'lower fence: 0', 'q1: 0.3', 'q3: 0.6', 'upper fence: 0.7', 'max: 0.7'],
+        name: ['radishes', '', '', '', '', '', ''],
         axis: 'day 1'
     }, {
         desc: 'with mean',
@@ -755,8 +755,8 @@ describe('Test box hover:', function() {
             fig.layout.hovermode = 'x';
             return fig;
         },
-        nums: ['median: 0.55', 'min: 0', 'q1: 0.3', 'q3: 0.6', 'max: 0.7', 'mean: 0.45'],
-        name: ['radishes', '', '', '', '', ''],
+        nums: ['median: 0.55', 'min: 0', 'lower fence: 0', 'q1: 0.3', 'q3: 0.6', 'upper fence: 0.7', 'max: 0.7', 'mean: 0.45'],
+        name: ['radishes', '', '', '', '', '', '', ''],
         axis: 'day 1'
     }, {
         desc: 'with sd',
@@ -768,10 +768,10 @@ describe('Test box hover:', function() {
             return fig;
         },
         nums: [
-            'median: 0.55', 'min: 0', 'q1: 0.3', 'q3: 0.6', 'max: 0.7',
+            'median: 0.55', 'min: 0', 'lower fence: 0', 'q1: 0.3', 'q3: 0.6', 'upper fence: 0.7', 'max: 0.7',
             'mean ± σ: 0.45 ± 0.2362908'
         ],
-        name: ['radishes', '', '', '', '', ''],
+        name: ['radishes', '', '', '', '', '', '', ''],
         axis: 'day 1'
     }, {
         desc: 'with boxpoints fences',
@@ -782,10 +782,11 @@ describe('Test box hover:', function() {
         },
         pos: [350, 200],
         nums: [
+            '23.25',
             'median: 8.15', 'min: 0.75', 'q1: 6.8',
             'q3: 10.25', 'max: 23.25', 'lower fence: 5.25', 'upper fence: 12'
         ],
-        name: ['', '', '', '', '', '', ''],
+        name: ['', '', '', '', '', '', '', ''],
         axis: 'trace 0'
     }, {
         desc: 'with overlaid boxes',
@@ -795,12 +796,22 @@ describe('Test box hover:', function() {
             return fig;
         },
         nums: [
-            'q1: 0.3', 'median: 0.45', 'q3: 0.6', 'max: 1', 'median: 0.55', 'min: 0', 'q1: 0.1',
-            'q3: 0.6', 'max: 0.7', 'median: 0.45', 'q1: 0.2', 'q3: 0.6', 'max: 0.9'
+            'median: 0.45', 'median: 0.45', 'median: 0.55',
+            'min: 0', 'min: 0.1', 'min: 0.2',
+            'lower fence: 0', 'lower fence: 0.1', 'lower fence: 0.2',
+            'q1: 0.1', 'q1: 0.2', 'q1: 0.3',
+            'q3: 0.6', 'q3: 0.6', 'q3: 0.6',
+            'upper fence: 0.7', 'upper fence: 0.9', 'upper fence: 1',
+            'max: 0.7', 'max: 0.9', 'max: 1'
         ],
         name: [
-            '', 'kale', '', '', 'radishes', '', '',
-            '', '', 'carrots', '', '', ''
+            'carrots', 'kale', 'radishes',
+            '', '', '',
+            '', '', '',
+            '', '', '',
+            '', '', '',
+            '', '', '',
+            '', '', ''
         ],
         axis: 'day 1'
     }, {
@@ -841,8 +852,8 @@ describe('Test box hover:', function() {
             return fig;
         },
         pos: [215, 200],
-        nums: ['median: 0.55', 'min: 0', 'q1: 0.3', 'q3: 0.6', 'max: 0.7'],
-        name: ['radishes', '', '', '', ''],
+        nums: ['median: 0.55', 'min: 0', 'q1: 0.3', 'q3: 0.6', 'max: 0.7', 'lower fence: 0', 'upper fence: 0.7'],
+        name: ['radishes', '', '', '', '', '', ''],
         axis: 'day 1'
     }, {
         desc: 'hoveron boxes+points | hovermode x (box AND closest point)',
@@ -855,8 +866,8 @@ describe('Test box hover:', function() {
             fig.layout.hovermode = 'x';
             return fig;
         },
-        nums: ['0.6', 'median: 0.55', 'min: 0', 'q1: 0.3', 'q3: 0.6', 'max: 0.7'],
-        name: ['radishes', 'radishes', '', '', '', ''],
+        nums: ['0.6', 'median: 0.55', 'min: 0', 'q1: 0.3', 'q3: 0.6', 'max: 0.7', 'lower fence: 0', 'upper fence: 0.7'],
+        name: ['radishes', 'radishes', '', '', '', '', '', ''],
         axis: 'day 1'
     }, {
         desc: 'text items on hover',
@@ -909,20 +920,32 @@ describe('Test box hover:', function() {
         },
         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]
+            'median: 0.7',
+            'min: 0.3',
+            'q1: 0.5',
+            'q3: 0.9',
+            'max: 1',
+            'lower fence: 0.3',
+            'upper fence: 1',
+            'mean ± σ: 0.6833333 ± 0.2409472',
+        ],
+        name: ['carrots', '', '', '', '', '', '', ''],
+        axis: 'day 2'
     }, {
         desc: 'orientation:h | hovermode:closest',
         mock: require('@mocks/box_grouped_horz.json'),
         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]
+            '(median: 0.7, day 2)',
+            '(min: 0.3, day 2)',
+            '(q1: 0.5, day 2)',
+            '(q3: 0.9, day 2)',
+            '(max: 1, day 2)',
+            '(lower fence: 0.3, day 2)',
+            '(upper fence: 1, day 2)',
+            '(mean ± σ: 0.6833333 ± 0.2409472, day 2)'
+        ],
+        name: ['carrots', '', '', '', '', '', '', ''],
     }, {
         desc: 'on boxpoints with numeric positions | hovermode:closest',
         mock: {
@@ -967,8 +990,8 @@ describe('Test box hover:', function() {
             }
         },
         pos: [200, 200],
-        nums: ['median: 2', 'q1: 1.5', 'q3: 2.5', 'max: 3', 'min: 1'],
-        name: ['', '', '', '', ''],
+        nums: ['median: 2', 'q1: 1.5', 'q3: 2.5', 'max: 3', 'min: 1', 'lower fence: 1', 'upper fence: 3'],
+        name: ['', '', '', '', '', '', ''],
         axis: 'trace 0'
     }, {
         desc: 'q1/median/q3 signature on boxes',
@@ -987,8 +1010,8 @@ describe('Test box hover:', function() {
             }
         },
         pos: [200, 200],
-        nums: ['median: 2', 'q1: 1', 'q3: 3'],
-        name: ['', '', ''],
+        nums: ['median: 2', 'min: 1', 'q1: 1', 'q3: 3', 'max: 3', 'lower fence: 1', 'upper fence: 3'],
+        name: ['', '', '', '', '', '', ''],
         axis: 'A'
     }, {
         desc: 'q1/median/q3 signature on points',

test/jasmine/tests/hover_label_test.js

@@ -2833,21 +2833,25 @@ describe('hover on traces with (x|y)period positioning', function() {
         .then(function() { _hover(385, 355); })
         .then(function() {
             assertHoverLabelContent({
-                name: ['', '', '', 'box (v)', ''],
+                name: ['', '', '', 'box (v)', '', '', ''],
                 nums: [
                     '(Jan 2001, min: 2)',
+                    '(Jan 2001, lower fence: 2)',
                     '(Jan 2001, q1: 4)',
-                    '(Jan 2001, q3: 8)',
                     '(Jan 2001, median: 6)',
-                    '(Jan 2001, max: 10)',
+                    '(Jan 2001, q3: 8)',
+                    '(Jan 2001, upper fence: 10)',
+                    '(Jan 2001, max: 10)'
                 ]
             });
         })
         .then(function() { _hover(475, 120); })
         .then(function() {
             assertHoverLabelContent({
-                name: ['', '', '', '', 'box (h)'],
+                name: ['', '', '', '', '', '', 'box (h)'],
                 nums: [
+                    '(upper fence: 8, Jan 2004)',
+                    '(lower fence: 0, Jan 2004)',
                     '(max: 8, Jan 2004)',
                     '(min: 0, Jan 2004)',
                     '(q1: 2, Jan 2004)',
@@ -4673,7 +4677,13 @@ describe('hovermode: (x|y)unified', function() {
 
                 assertLabel({title: '3', items: [
                     'trace 0 : 2',
+                    'min: 1',
+                    'lower fence: 1',
+                    'q1: 1',
                     'trace 1 : median: 1',
+                    'q3: 1',
+                    'upper fence: 1',
+                    'max: 1',
                     'trace 3 : 2',
                     'trace 2 : 2',
                     'trace 5 : 2',
@@ -6262,7 +6272,18 @@ describe('hover on traces with (x|y)hoverformat', function() {
         {type: 'scattergl', nums: '(02/01/2000, 1.00)'},
         {type: 'histogram', nums: '(02/01/2000, 1.00)'},
         {type: 'bar', nums: '(02/01/2000, 1.00)'},
-        {type: 'box', nums: '(02/01/2000, median: 1.00)'},
+        {type: 'box',
+            name: ['', '', '', '', '', '', ''],
+            nums: [
+                '(02/01/2000, median: 1.00)',
+                '(02/01/2000, max: 1.00)',
+                '(02/01/2000, upper fence: 1.00)',
+                '(02/01/2000, q3: 1.00)',
+                '(02/01/2000, q1: 1.00)',
+                '(02/01/2000, lower fence: 1.00)',
+                '(02/01/2000, min: 1.00)'
+            ]
+        },
         {type: 'ohlc', nums: '02/01/2000\nopen: 4.00\nhigh: 5.00\nlow: 2.00\nclose: 3.00  ▼'},
         {type: 'candlestick', nums: '02/01/2000\nopen: 4.00\nhigh: 5.00\nlow: 2.00\nclose: 3.00  ▼'},
         {type: 'waterfall', nums: '(02/01/2000, 1.00)\n1.00 ▲\nInitial: 0.00'},
@@ -6286,7 +6307,7 @@ describe('hover on traces with (x|y)hoverformat', function() {
             .then(function() { _hover(200, 200); })
             .then(function() {
                 assertHoverLabelContent({
-                    name: '',
+                    name: t.name ? t.name : '',
                     nums: t.nums
                 });
             })