Skip to content

Commit 63afa3c

Browse files
archmojarchmoj
committed
revise box & violin hover labels - order & handle duplicates
1 parent 68a4917 commit 63afa3c

File tree

4 files changed

+87
-36
lines changed

4 files changed

+87
-36
lines changed

‎src/traces/box/hover.js‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
4444
var trace = cd[0].trace;
4545
var t = cd[0].t;
4646
var isViolin = trace.type === 'violin';
47-
var closeBoxData = [];
4847

4948
var pLetter, vLetter, pAxis, vAxis, vVal, pVal, dx, dy, dPos,
5049
hoverPseudoDistance, spikePseudoDistance;
@@ -141,22 +140,27 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
141140
pointData.spikeDistance = dxy(di) * spikePseudoDistance / hoverPseudoDistance;
142141
pointData[spikePosAttr] = pAxis.c2p(di.pos, true);
143142

144-
// box plots: each "point" gets many labels
145-
var usedVals = {};
146-
var attrs = ['med', 'q1', 'q3', 'min', 'max'];
143+
var hasMean = trace.boxmean || (trace.meanline || {}).visible;
144+
var hasFences = trace.boxpoints || trace.points;
147145

148-
if(trace.boxmean || (trace.meanline || {}).visible) {
149-
attrs.push('mean');
150-
}
151-
if(trace.boxpoints || trace.points) {
152-
attrs.push('lf', 'uf');
153-
}
146+
// labels with euqual values (e.g. when min === q1) should be presented in certain order
147+
var attrs =
148+
(hasFences && hasMean) ? ['uf', 'max', 'q3', 'mean', 'q1', 'min', 'lf'] :
149+
(hasFences && !hasMean) ? ['uf', 'max', 'q3', 'q1', 'min', 'lf'] :
150+
(!hasFences && hasMean) ? ['max', 'q3', 'mean', 'q1', 'min'] :
151+
['max', 'q3', 'q1', 'min'];
152+
153+
if(trace.orientation === 'h') attrs.reverse();
154+
155+
// always put median at the start so that it get the extra label
156+
attrs = ['med'].concat(attrs);
154157

158+
var closeBoxData = [];
159+
var lf, uf, min, max;
155160
for(var i = 0; i < attrs.length; i++) {
156161
var attr = attrs[i];
157162

158-
if(!(attr in di) || (di[attr] in usedVals)) continue;
159-
usedVals[di[attr]] = true;
163+
if(!(attr in di)) continue;
160164

161165
// copy out to a new object for each value to label
162166
var val = di[attr];
@@ -185,6 +189,19 @@ function hoverOnBoxes(pointData, xval, yval, hovermode) {
185189
pointData2.hovertemplate = false;
186190

187191
closeBoxData.push(pointData2);
192+
193+
if(attr === 'lf') lf = val;
194+
if(attr === 'uf') uf = val;
195+
if(attr === 'max') max = val;
196+
if(attr === 'min') min = val;
197+
}
198+
199+
// reduce labels if uf === max or lf === min
200+
if(uf === max) {
201+
closeBoxData = closeBoxData.filter(function(e) { return e.attr !== 'uf'; });
202+
}
203+
if(lf === min) {
204+
closeBoxData = closeBoxData.filter(function(e) { return e.attr !== 'lf'; });
188205
}
189206

190207
return closeBoxData;

‎test/jasmine/tests/box_test.js‎

Lines changed: 29 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -795,12 +795,18 @@ describe('Test box hover:', function() {
795795
return fig;
796796
},
797797
nums: [
798-
'q1: 0.3', 'median: 0.45', 'q3: 0.6', 'max: 1', 'median: 0.55', 'min: 0', 'q1: 0.1',
799-
'q3: 0.6', 'max: 0.7', 'median: 0.45', 'q1: 0.2', 'q3: 0.6', 'max: 0.9'
798+
'median: 0.45', 'median: 0.45', 'median: 0.55',
799+
'min: 0', 'min: 0.1', 'min: 0.2',
800+
'q1: 0.1', 'q1: 0.2', 'q1: 0.3',
801+
'q3: 0.6', 'q3: 0.6', 'q3: 0.6',
802+
'max: 0.7', 'max: 0.9', 'max: 1'
800803
],
801804
name: [
802-
'', 'kale', '', '', 'radishes', '', '',
803-
'', '', 'carrots', '', '', ''
805+
'carrots', 'kale', 'radishes',
806+
'', '', '',
807+
'', '', '',
808+
'', '', '',
809+
'', '', ''
804810
],
805811
axis: 'day 1'
806812
}, {
@@ -909,20 +915,28 @@ describe('Test box hover:', function() {
909915
},
910916
pos: [430, 130],
911917
nums: [
912-
'max: 1', 'mean ± σ: 0.6833333 ± 0.2409472', 'min: 0.3',
913-
'q1: 0.5', 'q3: 0.9', 'median: 0.7'],
914-
name: ['', '', '', '', '', 'carrots'],
915-
axis: 'day 2',
916-
hOrder: [0, 4, 5, 1, 3, 2]
918+
'median: 0.7',
919+
'min: 0.3',
920+
'q1: 0.5',
921+
'q3: 0.9',
922+
'max: 1',
923+
'mean ± σ: 0.6833333 ± 0.2409472',
924+
],
925+
name: ['carrots', '', '', '', '', ''],
926+
axis: 'day 2'
917927
}, {
918928
desc: 'orientation:h | hovermode:closest',
919929
mock: require('@mocks/box_grouped_horz.json'),
920930
pos: [430, 130],
921931
nums: [
922-
'(max: 1, day 2)', '(mean ± σ: 0.6833333 ± 0.2409472, day 2)', '(min: 0.3, day 2)',
923-
'(q1: 0.5, day 2)', '(q3: 0.9, day 2)', '(median: 0.7, day 2)'],
924-
name: ['', '', '', '', '', 'carrots'],
925-
hOrder: [0, 4, 5, 1, 3, 2]
932+
'(median: 0.7, day 2)',
933+
'(min: 0.3, day 2)',
934+
'(q1: 0.5, day 2)',
935+
'(q3: 0.9, day 2)',
936+
'(max: 1, day 2)',
937+
'(mean ± σ: 0.6833333 ± 0.2409472, day 2)'
938+
],
939+
name: ['carrots', '', '', '', '', ''],
926940
}, {
927941
desc: 'on boxpoints with numeric positions | hovermode:closest',
928942
mock: {
@@ -987,8 +1001,8 @@ describe('Test box hover:', function() {
9871001
}
9881002
},
9891003
pos: [200, 200],
990-
nums: ['median: 2', 'q1: 1', 'q3: 3'],
991-
name: ['', '', ''],
1004+
nums: ['median: 2', 'min: 1', 'q1: 1', 'q3: 3', 'max: 3'],
1005+
name: ['', '', '', '', ''],
9921006
axis: 'A'
9931007
}, {
9941008
desc: 'q1/median/q3 signature on points',

‎test/jasmine/tests/hover_label_test.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4673,6 +4673,10 @@ describe('hovermode: (x|y)unified', function() {
46734673

46744674
assertLabel({title: '3', items: [
46754675
'trace 0 : 2',
4676+
'min: 1',
4677+
'q1: 1',
4678+
'q3: 1',
4679+
'max: 1',
46764680
'trace 1 : median: 1',
46774681
'trace 3 : 2',
46784682
'trace 2 : 2',
@@ -6262,7 +6266,16 @@ describe('hover on traces with (x|y)hoverformat', function() {
62626266
{type: 'scattergl', nums: '(02/01/2000, 1.00)'},
62636267
{type: 'histogram', nums: '(02/01/2000, 1.00)'},
62646268
{type: 'bar', nums: '(02/01/2000, 1.00)'},
6265-
{type: 'box', nums: '(02/01/2000, median: 1.00)'},
6269+
{type: 'box',
6270+
name: ['', '', '', '', ''],
6271+
nums: [
6272+
'(02/01/2000, median: 1.00)',
6273+
'(02/01/2000, max: 1.00)',
6274+
'(02/01/2000, q3: 1.00)',
6275+
'(02/01/2000, q1: 1.00)',
6276+
'(02/01/2000, min: 1.00)'
6277+
]
6278+
},
62666279
{type: 'ohlc', nums: '02/01/2000\nopen: 4.00\nhigh: 5.00\nlow: 2.00\nclose: 3.00 ▼'},
62676280
{type: 'candlestick', nums: '02/01/2000\nopen: 4.00\nhigh: 5.00\nlow: 2.00\nclose: 3.00 ▼'},
62686281
{type: 'waterfall', nums: '(02/01/2000, 1.00)\n1.00 ▲\nInitial: 0.00'},
@@ -6286,7 +6299,7 @@ describe('hover on traces with (x|y)hoverformat', function() {
62866299
.then(function() { _hover(200, 200); })
62876300
.then(function() {
62886301
assertHoverLabelContent({
6289-
name: '',
6302+
name: t.name ? t.name : '',
62906303
nums: t.nums
62916304
});
62926305
})

‎test/jasmine/tests/violin_test.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -394,13 +394,20 @@ describe('Test violin hover:', function() {
394394
return fig;
395395
},
396396
nums: [
397-
'q3: 0.6', 'median: 0.45', 'q3: 0.6', 'max: 1', 'y: 0.9266848, kde: 0.383',
398-
'median: 0.55', 'min: 0', 'q1: 0.3', 'q1: 0.2', 'max: 0.7', 'y: 0.9266848, kde: 0.182',
399-
'median: 0.45', 'q1: 0.1', 'q3: 0.6', 'max: 0.9', 'y: 0.9266848, kde: 0.435'
397+
'median: 0.45', 'median: 0.45', 'median: 0.55',
398+
'min: 0', 'min: 0.1', 'min: 0.2',
399+
'q1: 0.1', 'q1: 0.2', 'q1: 0.3',
400+
'q3: 0.6', 'q3: 0.6', 'q3: 0.6',
401+
'max: 0.7', 'max: 0.9', 'max: 1',
402+
'y: 0.9266848, kde: 0.383', 'y: 0.9266848, kde: 0.182', 'y: 0.9266848, kde: 0.435'
400403
],
401404
name: [
402-
'', 'kale', '', '', '', 'radishes', '', '', '', '',
403-
'', 'carrots', '', '', '', ''
405+
'carrots', 'kale', 'radishes',
406+
'', '', '',
407+
'', '', '',
408+
'', '', '',
409+
'', '', '',
410+
'', '', ''
404411
],
405412
axis: 'day 1'
406413
}, {
@@ -531,13 +538,13 @@ describe('Test violin hover:', function() {
531538
return fig;
532539
},
533540
nums: [
534-
'max: 50.81', 'median: 18.24', 'min: 3.07',
541+
'max: 50.81', 'min: 3.07', 'median: 18.24',
535542
'q1: 13.8575', 'q3: 24.975', 'upper fence: 39.42'
536543
],
537544
name: ['', '', '', '', '', ''],
538545
axis: 'Sat',
539546
hoverLabelPos: [
540-
[364, 270], [352, 270], [339, 270],
547+
[364, 270], [339, 270], [352, 270],
541548
[346, 270], [349, 270], [387, 270]
542549
]
543550
}, {

0 commit comments

Comments
 (0)