Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c3a0118

Browse filesBrowse files
antoinergantoinerg
authored
Merge pull request #3150 from plotly/sankey-trace-hover
sankey hover improvements
2 parents d5ebb50 + 6ab718d commit c3a0118
Copy full SHA for c3a0118

File tree

Expand file treeCollapse file tree

3 files changed

+116
-53
lines changed
Filter options
Expand file treeCollapse file tree

3 files changed

+116
-53
lines changed

‎src/traces/sankey/attributes.js

Copy file name to clipboardExpand all lines: src/traces/sankey/attributes.js
+15-4Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,27 @@
99
'use strict';
1010

1111
var fontAttrs = require('../../plots/font_attributes');
12+
var plotAttrs = require('../../plots/attributes');
1213
var colorAttrs = require('../../components/color/attributes');
1314
var fxAttrs = require('../../components/fx/attributes');
1415
var domainAttrs = require('../../plots/domain').attributes;
1516

17+
var extendFlat = require('../../lib/extend').extendFlat;
1618
var overrideAll = require('../../plot_api/edit_types').overrideAll;
1719

18-
var attrs = module.exports = overrideAll({
20+
module.exports = overrideAll({
21+
hoverinfo: extendFlat({}, plotAttrs.hoverinfo, {
22+
flags: [],
23+
arrayOk: false,
24+
description: [
25+
'Determines which trace information appear on hover.',
26+
'If `none` or `skip` are set, no information is displayed upon hovering.',
27+
'But, if `none` is set, click and hover events are still fired.',
28+
'Note that this attribute is superseded by `node.hoverinfo` and `node.hoverinfo`',
29+
'for nodes and links respectively.'
30+
].join(' ')
31+
}),
32+
hoverlabel: fxAttrs.hoverlabel,
1933
domain: domainAttrs({name: 'sankey', trace: true}),
2034

2135
orientation: {
@@ -205,6 +219,3 @@ var attrs = module.exports = overrideAll({
205219
description: 'The links of the Sankey plot.'
206220
}
207221
}, 'calc', 'nested');
208-
// hide unsupported top-level properties from plot-schema
209-
attrs.hoverinfo = undefined;
210-
attrs.hoverlabel = undefined;

‎src/traces/sankey/defaults.js

Copy file name to clipboardExpand all lines: src/traces/sankey/defaults.js
+7-7Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
2121
return Lib.coerce(traceIn, traceOut, attributes, attr, dflt);
2222
}
2323

24+
var hoverlabelDefault = Lib.extendDeep(layout.hoverlabel, traceIn.hoverlabel);
25+
2426
// node attributes
2527
var nodeIn = traceIn.node, nodeOut = Template.newContainer(traceOut, 'node');
2628
function coerceNode(attr, dflt) {
@@ -31,8 +33,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
3133
coerceNode('thickness');
3234
coerceNode('line.color');
3335
coerceNode('line.width');
34-
coerceNode('hoverinfo');
35-
handleHoverLabelDefaults(nodeIn, nodeOut, coerceNode, layout.hoverlabel);
36+
coerceNode('hoverinfo', traceIn.hoverinfo);
37+
handleHoverLabelDefaults(nodeIn, nodeOut, coerceNode, hoverlabelDefault);
3638

3739
var colors = layout.colorway;
3840

@@ -53,16 +55,14 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
5355
coerceLink('value');
5456
coerceLink('line.color');
5557
coerceLink('line.width');
56-
coerceLink('hoverinfo');
57-
handleHoverLabelDefaults(linkIn, linkOut, coerceLink, layout.hoverlabel);
58+
coerceLink('hoverinfo', traceIn.hoverinfo);
59+
handleHoverLabelDefaults(linkIn, linkOut, coerceLink, hoverlabelDefault);
5860

5961
var defaultLinkColor = tinycolor(layout.paper_bgcolor).getLuminance() < 0.333 ?
6062
'rgba(255, 255, 255, 0.6)' :
6163
'rgba(0, 0, 0, 0.2)';
6264

63-
coerceLink('color', linkOut.value.map(function() {
64-
return defaultLinkColor;
65-
}));
65+
coerceLink('color', Lib.repeat(defaultLinkColor, linkOut.value.length));
6666

6767
handleDomainDefaults(traceOut, layout, coerce);
6868

‎test/jasmine/tests/sankey_test.js

Copy file name to clipboardExpand all lines: test/jasmine/tests/sankey_test.js
+94-42Lines changed: 94 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -416,7 +416,9 @@ describe('sankey tests', function() {
416416
['source: Solid', 'target: Industry', '46TWh'],
417417
['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
418418
);
419-
419+
})
420+
// Test layout.hoverlabel
421+
.then(function() {
420422
return Plotly.relayout(gd, 'hoverlabel.font.family', 'Roboto');
421423
})
422424
.then(function() {
@@ -434,16 +436,45 @@ describe('sankey tests', function() {
434436
['source: Solid', 'target: Industry', '46TWh'],
435437
['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Roboto', 'rgb(255, 255, 255)']
436438
);
439+
})
440+
// Test trace-level hoverlabel
441+
.then(function() {
442+
return Plotly.restyle(gd, {
443+
'hoverlabel.bgcolor': 'blue',
444+
'hoverlabel.bordercolor': 'red',
445+
'hoverlabel.font.size': 22,
446+
'hoverlabel.font.color': 'magenta'
447+
});
448+
})
449+
.then(function() {
450+
_hover(404, 302);
437451

452+
assertLabel(
453+
['Solid', 'incoming flow count: 4', 'outgoing flow count: 3', '447TWh'],
454+
['rgb(0, 0, 255)', 'rgb(255, 0, 0)', 22, 'Roboto', 'rgb(255, 0, 255)']
455+
);
456+
})
457+
.then(function() {
458+
_hover(450, 300);
459+
460+
assertLabel(
461+
['source: Solid', 'target: Industry', '46TWh'],
462+
['rgb(0, 0, 255)', 'rgb(255, 0, 0)', 22, 'Roboto', 'rgb(255, 0, 255)']
463+
);
464+
})
465+
// Test (node|link).hoverlabel
466+
.then(function() {
438467
return Plotly.restyle(gd, {
439468
'node.hoverlabel.bgcolor': 'red',
440469
'node.hoverlabel.bordercolor': 'blue',
441470
'node.hoverlabel.font.size': 20,
442471
'node.hoverlabel.font.color': 'black',
472+
'node.hoverlabel.font.family': 'Roboto',
443473
'link.hoverlabel.bgcolor': 'yellow',
444474
'link.hoverlabel.bordercolor': 'magenta',
445475
'link.hoverlabel.font.size': 18,
446-
'link.hoverlabel.font.color': 'green'
476+
'link.hoverlabel.font.color': 'green',
477+
'link.hoverlabel.font.family': 'Roboto'
447478
});
448479
})
449480
.then(function() {
@@ -556,49 +587,59 @@ describe('sankey tests', function() {
556587
.then(done);
557588
});
558589

559-
it('should not show node labels if node.hoverinfo is none', function(done) {
560-
var gd = createGraphDiv();
561-
var mockCopy = Lib.extendDeep({}, mock);
590+
['skip', 'none'].forEach(function(hoverinfoFlag) {
591+
it('should not show node labels if node.hoverinfo is ' + hoverinfoFlag, function(done) {
592+
var gd = createGraphDiv();
593+
var mockCopy = Lib.extendDeep({}, mock);
562594

563-
Plotly.plot(gd, mockCopy).then(function() {
564-
return Plotly.restyle(gd, 'node.hoverinfo', 'none');
565-
})
566-
.then(function() {
567-
_hover(node[0], node[1]);
568-
assertNoLabel();
569-
})
570-
.catch(failTest)
571-
.then(done);
595+
Plotly.plot(gd, mockCopy).then(function() {
596+
return Plotly.restyle(gd, 'node.hoverinfo', hoverinfoFlag);
597+
})
598+
.then(function() {
599+
_hover(node[0], node[1]);
600+
assertNoLabel();
601+
})
602+
.catch(failTest)
603+
.then(done);
604+
});
572605
});
573606

574-
it('should not show link labels if link.hoverinfo is none', function(done) {
575-
var gd = createGraphDiv();
576-
var mockCopy = Lib.extendDeep({}, mock);
607+
['skip', 'none'].forEach(function(hoverinfoFlag) {
608+
it('should not show link labels if link.hoverinfo is ' + hoverinfoFlag, function(done) {
609+
var gd = createGraphDiv();
610+
var mockCopy = Lib.extendDeep({}, mock);
577611

578-
Plotly.plot(gd, mockCopy).then(function() {
579-
return Plotly.restyle(gd, 'link.hoverinfo', 'none');
580-
})
581-
.then(function() {
582-
_hover(link[0], link[1]);
583-
assertNoLabel();
584-
})
585-
.catch(failTest)
586-
.then(done);
612+
Plotly.plot(gd, mockCopy).then(function() {
613+
return Plotly.restyle(gd, 'link.hoverinfo', hoverinfoFlag);
614+
})
615+
.then(function() {
616+
_hover(link[0], link[1]);
617+
assertNoLabel();
618+
})
619+
.catch(failTest)
620+
.then(done);
621+
});
587622
});
588623

589-
it('should not show node labels if node.hoverinfo is skip', function(done) {
590-
var gd = createGraphDiv();
591-
var mockCopy = Lib.extendDeep({}, mock);
624+
['skip', 'none'].forEach(function(hoverinfoFlag) {
625+
it('should not show labels if trace hoverinfo is ' + hoverinfoFlag + ' and (node|link).hoverinfo is undefined', function(done) {
626+
var gd = createGraphDiv();
627+
var mockCopy = Lib.extendDeep({}, mock);
592628

593-
Plotly.plot(gd, mockCopy).then(function() {
594-
return Plotly.restyle(gd, 'node.hoverinfo', 'skip');
595-
})
596-
.then(function() {
597-
_hover(node[0], node[1]);
598-
assertNoLabel();
599-
})
600-
.catch(failTest)
601-
.then(done);
629+
Plotly.plot(gd, mockCopy).then(function() {
630+
return Plotly.restyle(gd, 'hoverinfo', hoverinfoFlag);
631+
})
632+
.then(function() {
633+
_hover(node[0], node[1]);
634+
assertNoLabel();
635+
})
636+
.then(function() {
637+
_hover(link[0], link[1]);
638+
assertNoLabel();
639+
})
640+
.catch(failTest)
641+
.then(done);
642+
});
602643
});
603644

604645
it('should not show link labels if link.hoverinfo is skip', function(done) {
@@ -748,7 +789,7 @@ describe('sankey tests', function() {
748789
};
749790
}
750791

751-
it('should not output hover/unhover event data when hovermoder is false', function(done) {
792+
it('should not output hover/unhover event data when hovermode is false', function(done) {
752793
var fig = Lib.extendDeep({}, mock);
753794

754795
Plotly.plot(gd, fig)
@@ -759,17 +800,28 @@ describe('sankey tests', function() {
759800
.then(done);
760801
});
761802

762-
it('should not output hover/unhover event data when hoverinfo is skip', function(done) {
803+
it('should not output hover/unhover event data when trace hoverinfo is skip', function(done) {
763804
var fig = Lib.extendDeep({}, mock);
764805

765806
Plotly.plot(gd, fig)
766-
.then(function() { return Plotly.restyle(gd, 'link.hoverinfo', 'skip'); })
807+
.then(function() { return Plotly.restyle(gd, 'hoverinfo', 'skip'); })
767808
.then(assertNoHoverEvents('link'))
768-
.then(function() { return Plotly.restyle(gd, 'node.hoverinfo', 'skip'); })
769809
.then(assertNoHoverEvents('node'))
770810
.catch(failTest)
771811
.then(done);
772812
});
813+
814+
['node', 'link'].forEach(function(obj) {
815+
it('should not output hover/unhover event data when ' + obj + '.hoverinfo is skip', function(done) {
816+
var fig = Lib.extendDeep({}, mock);
817+
818+
Plotly.plot(gd, fig)
819+
.then(function() { return Plotly.restyle(gd, obj + '.hoverinfo', 'skip'); })
820+
.then(assertNoHoverEvents(obj))
821+
.catch(failTest)
822+
.then(done);
823+
});
824+
});
773825
});
774826

775827
it('emits a warning if node.pad is too large', function(done) {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.