Skip to content

hovertemplate support for sankey #3284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Dec 7, 2018
Merged

hovertemplate support for sankey #3284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6233297
adding hovertemplate support to sankey
antoinerg Nov 23, 2018
d952713
update hovertemplate description
antoinerg Nov 23, 2018
3204274
sankey: add fullData to eventData, test (node|link).hovertemplate
antoinerg Nov 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/fx/hovertemplate_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ module.exports = function(opts, extra) {
for(var i = 0; i < keys.length; i++) {
quotedKeys[i] = '`' + keys[i] + '`';
}
descPart = descPart + 'Finally, this trace also supports ';
descPart = descPart + 'Finally, the template string has access to ';
if(keys.length === 1) {
descPart = 'variable ' + quotedKeys[0];
} else {
Expand Down
9 changes: 9 additions & 0 deletions src/traces/sankey/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ var plotAttrs = require('../../plots/attributes');
var colorAttrs = require('../../components/color/attributes');
var fxAttrs = require('../../components/fx/attributes');
var domainAttrs = require('../../plots/domain').attributes;
var hovertemplateAttrs = require('../../components/fx/hovertemplate_attributes');

var extendFlat = require('../../lib/extend').extendFlat;
var overrideAll = require('../../plot_api/edit_types').overrideAll;
Expand Down Expand Up @@ -146,6 +147,10 @@ var attrs = module.exports = overrideAll({
].join(' ')
},
hoverlabel: fxAttrs.hoverlabel, // needs editType override,
hovertemplate: hovertemplateAttrs({}, {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm. Sankey event data is a bit of mess:

image

image

There's probably way more stuff it in than we need. Moreover, some of it isn't consistent with event data for other traces e.g. the trace key should be fullData. I'm not how much we can change it w/o making breaking changes.

Oh well, these descriptions look ok to me.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added fullData to the eventData in commit 3204274

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

v2 changes tracked in #168 (comment)

description: 'Variables `sourceLinks` and `targetLinks` are arrays of link objects.',
keys: ['value', 'label']
}),
description: 'The nodes of the Sankey plot.'
},

Expand Down Expand Up @@ -216,6 +221,10 @@ var attrs = module.exports = overrideAll({
].join(' ')
},
hoverlabel: fxAttrs.hoverlabel, // needs editType override,
hovertemplate: hovertemplateAttrs({}, {
description: 'Variables `source` and `target` are node objects.',
keys: ['value', 'label']
}),
description: 'The links of the Sankey plot.'
}
}, 'calc', 'nested');
Expand Down
2 changes: 2 additions & 0 deletions src/traces/sankey/defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
coerceNode('line.width');
coerceNode('hoverinfo', traceIn.hoverinfo);
handleHoverLabelDefaults(nodeIn, nodeOut, coerceNode, hoverlabelDefault);
coerceNode('hovertemplate');

var colors = layout.colorway;

Expand All @@ -57,6 +58,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
coerceLink('line.width');
coerceLink('hoverinfo', traceIn.hoverinfo);
handleHoverLabelDefaults(linkIn, linkOut, coerceLink, hoverlabelDefault);
coerceLink('hovertemplate');

var defaultLinkColor = tinycolor(layout.paper_bgcolor).getLuminance() < 0.333 ?
'rgba(255, 255, 255, 0.6)' :
Expand Down
24 changes: 21 additions & 3 deletions src/traces/sankey/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ module.exports = function plot(gd, calcData) {
if(gd._fullLayout.hovermode === false) return;
d3.select(element).call(linkHoveredStyle.bind(0, d, sankey, true));
if(d.link.trace.link.hoverinfo !== 'skip') {
d.link.fullData = d.link.trace;
gd.emit('plotly_hover', {
event: d3.event,
points: [d.link]
Expand All @@ -155,10 +156,13 @@ module.exports = function plot(gd, calcData) {
var hoverCenterX = boundingBox.left + boundingBox.width / 2;
var hoverCenterY = boundingBox.top + boundingBox.height / 2;

var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(d.link.value) + d.valueSuffix};
d.link.fullData = d.link.trace;

var tooltip = Fx.loneHover({
x: hoverCenterX - rootBBox.left,
y: hoverCenterY - rootBBox.top,
name: d3.format(d.valueFormat)(d.link.value) + d.valueSuffix,
name: hovertemplateLabels.valueLabel,
text: [
d.link.label || '',
sourceLabel + d.link.source.label,
Expand All @@ -169,7 +173,11 @@ module.exports = function plot(gd, calcData) {
fontFamily: castHoverOption(obj, 'font.family'),
fontSize: castHoverOption(obj, 'font.size'),
fontColor: castHoverOption(obj, 'font.color'),
idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left'
idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left',

hovertemplate: obj.hovertemplate,
hovertemplateLabels: hovertemplateLabels,
eventData: [d.link]
}, {
container: fullLayout._hoverlayer.node(),
outerContainer: fullLayout._paper.node(),
Expand All @@ -184,6 +192,7 @@ module.exports = function plot(gd, calcData) {
if(gd._fullLayout.hovermode === false) return;
d3.select(element).call(linkNonHoveredStyle.bind(0, d, sankey, true));
if(d.link.trace.link.hoverinfo !== 'skip') {
d.link.fullData = d.link.trace;
gd.emit('plotly_unhover', {
event: d3.event,
points: [d.link]
Expand All @@ -205,6 +214,7 @@ module.exports = function plot(gd, calcData) {
if(gd._fullLayout.hovermode === false) return;
d3.select(element).call(nodeHoveredStyle, d, sankey);
if(d.node.trace.node.hoverinfo !== 'skip') {
d.node.fullData = d.node.trace;
gd.emit('plotly_hover', {
event: d3.event,
points: [d.node]
Expand All @@ -224,6 +234,9 @@ module.exports = function plot(gd, calcData) {
var hoverCenterX1 = boundingBox.right + 2 - rootBBox.left;
var hoverCenterY = boundingBox.top + boundingBox.height / 4 - rootBBox.top;

var hovertemplateLabels = {valueLabel: d3.format(d.valueFormat)(d.node.value) + d.valueSuffix};
d.node.fullData = d.node.trace;

var tooltip = Fx.loneHover({
x0: hoverCenterX0,
x1: hoverCenterX1,
Expand All @@ -239,7 +252,11 @@ module.exports = function plot(gd, calcData) {
fontFamily: castHoverOption(obj, 'font.family'),
fontSize: castHoverOption(obj, 'font.size'),
fontColor: castHoverOption(obj, 'font.color'),
idealAlign: 'left'
idealAlign: 'left',

hovertemplate: obj.hovertemplate,
hovertemplateLabels: hovertemplateLabels,
eventData: [d.node]
}, {
container: fullLayout._hoverlayer.node(),
outerContainer: fullLayout._paper.node(),
Expand All @@ -254,6 +271,7 @@ module.exports = function plot(gd, calcData) {
if(gd._fullLayout.hovermode === false) return;
d3.select(element).call(nodeNonHoveredStyle, d, sankey);
if(d.node.trace.node.hoverinfo !== 'skip') {
d.node.fullData = d.node.trace;
gd.emit('plotly_unhover', {
event: d3.event,
points: [d.node]
Expand Down
56 changes: 55 additions & 1 deletion test/jasmine/tests/sankey_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -497,6 +497,53 @@ describe('sankey tests', function() {
.then(done);
});

it('should show the correct hover labels when hovertemplate is specified', function(done) {
var gd = createGraphDiv();
var mockCopy = Lib.extendDeep({}, mock);

Plotly.plot(gd, mockCopy).then(function() {
_hover(404, 302);

assertLabel(
['Solid', 'incoming flow count: 4', 'outgoing flow count: 3', '447TWh'],
['rgb(148, 103, 189)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
);
})
.then(function() {
_hover(450, 300);

assertLabel(
['source: Solid', 'target: Industry', '46TWh'],
['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
);
})
// Test (node|link).hovertemplate
.then(function() {
return Plotly.restyle(gd, {
'node.hovertemplate': 'hovertemplate<br>%{value}<br>%{value:0.2f}<extra>%{fullData.name}</extra>',
'link.hovertemplate': 'hovertemplate<br>source: %{source.label}<br>target: %{target.label}<br>size: %{value:0.0f}TWh<extra>%{fullData.name}</extra>'
});
})
.then(function() {
_hover(404, 302);

assertLabel(
[ 'hovertemplate', '447TWh', '447.48', 'trace 0'],
['rgb(148, 103, 189)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
);
})
.then(function() {
_hover(450, 300);

assertLabel(
['hovertemplate', 'source: Solid', 'target: Industry', 'size: 46TWh', 'trace 0'],
['rgb(0, 0, 96)', 'rgb(255, 255, 255)', 13, 'Arial', 'rgb(255, 255, 255)']
);
})
.catch(failTest)
.then(done);
});

it('should show the correct hover labels with the style provided in template', function(done) {
var gd = createGraphDiv();
var mockCopy = Lib.extendDeep({}, mock);
Expand Down Expand Up @@ -744,8 +791,12 @@ describe('sankey tests', function() {
_assert(d, {
curveNumber: 0,
pointNumber: 4,
label: 'Solid'
label: 'Solid',
value: 447.48
});
var pt = d.points[0];
expect(pt.sourceLinks.length).toBe(3);
expect(pt.targetLinks.length).toBe(4);
})
.then(function() { return _hover('link'); })
.then(function(d) {
Expand All @@ -754,6 +805,9 @@ describe('sankey tests', function() {
pointNumber: 61,
value: 46.477
});
var pt = d.points[0];
expect(pt.hasOwnProperty('source')).toBeTruthy();
expect(pt.hasOwnProperty('target')).toBeTruthy();
})
.then(function() { return _unhover('node'); })
.then(function(d) {
Expand Down