Skip to content

Custom trace hover labels #1582

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 43 commits into from
May 10, 2017
Merged

Custom trace hover labels #1582

Changes from 1 commit
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
83cd8c8
add hoverlabel attribute container for all traces
etpinard Apr 11, 2017
258f1c7
merge hoverlabel items in scatter and bar calcdata
etpinard Apr 11, 2017
fe50b6f
add hover label setting to hoverData during `cleanPoint`
etpinard Apr 11, 2017
8d7ec16
Merge branch 'master' into hoverlabel-custom
etpinard Apr 20, 2017
ffde987
break up cartesian graph_interact.js:
etpinard Apr 20, 2017
1d4930c
update Fx require statements
etpinard Apr 20, 2017
e609955
update hover constant require statements
etpinard Apr 20, 2017
12954aa
sub Fx.init by (cartesian) initIterations
etpinard Apr 20, 2017
27fb2d0
decrease max allowed circular deps to 13 :tada:
etpinard Apr 20, 2017
a96af57
mv fx attribute out of plots/ and into components/fx/
etpinard Apr 20, 2017
abcf1b0
register fx in core.js
etpinard Apr 20, 2017
03554a5
Merge pull request #1613 from plotly/fx-component
etpinard Apr 20, 2017
efcb027
revert hoverlabel in arraysToCalcdata -> add Fx.calc
etpinard Apr 20, 2017
7907140
make fx default test more robust
etpinard Apr 21, 2017
0d66e6e
lint fx constants
etpinard Apr 21, 2017
3ac4c07
lint getComponentMethod call
etpinard Apr 21, 2017
295659e
add fx supplyDefaults method
etpinard Apr 21, 2017
9d91e2c
fix mapbox hover label color for array `marker.color` values
etpinard Apr 24, 2017
add85d2
lint var declarations
etpinard Apr 24, 2017
f986fd2
add global layout defaults step for `layout.hoverlabel`
etpinard Apr 24, 2017
a8cc8b0
make common label in 'x' and 'y' hovermode adhere to layout.hoverlabel
etpinard Apr 24, 2017
9ee8877
add tests for custom hover labels cartesian, geo, mapbox & ternary
etpinard Apr 24, 2017
4ec88ef
add support for per-point `hoverlabel` setting in 2d z traces
etpinard Apr 24, 2017
b053629
add support for per-pt `hoverlabel` setting in pie traces
etpinard Apr 24, 2017
92de017
put selection coords (not hoverlabel strings) to event data
etpinard Apr 25, 2017
7332d23
set `selection.index` during gl3d trace handlePick
etpinard Apr 25, 2017
6bbfa65
add support for custom hover label in gl3d
etpinard Apr 25, 2017
28c2770
add support for custom hover label in gl2d
etpinard Apr 25, 2017
cda735b
make hoverlabel text selection query more robust
etpinard Apr 25, 2017
ce27e10
bump back max allowed circular deps to 17
etpinard Apr 25, 2017
be9e6b9
resolves #1575 - call Fx.hover with evt object containing 'xpx' & 'ypx'
etpinard Apr 26, 2017
cf61dc2
fixes #1600 - allow z cartesian traces to have a name hover label
etpinard Apr 26, 2017
9eeadcf
don't override hover label data by undefined vals
etpinard Apr 26, 2017
8321959
make sure arrayOk resyle logic works for hoverlabel attributes
etpinard Apr 27, 2017
409b771
Merge pull request #1627 from plotly/hover-misc-bugs
etpinard May 9, 2017
60bd4fc
factor out gl2d / gl3d cast hover options logic into 1 Fx method
etpinard May 9, 2017
e45bff9
perf improvements in fx helpers
etpinard May 9, 2017
e0be6cd
Merge branch 'master' into hoverlabel-custom
etpinard May 9, 2017
8d021e0
:hocho: :evergreen_tree: in sankey tests
etpinard May 10, 2017
4d3ce92
implement 'hoverlabel' settings in sankey hover routines
etpinard May 10, 2017
e50886c
fixup: don't support array value in sankey hoverlabel settings
etpinard May 10, 2017
f8258cb
add sankey hover label style tests
etpinard May 10, 2017
3f52a89
Merge branch 'master' into hoverlabel-custom
etpinard May 10, 2017
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
18 changes: 14 additions & 4 deletions src/traces/sankey/plot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,8 @@ module.exports = function plot(gd, calcData) {
};

var linkHoverFollow = function(element, d) {

var trace = gd._fullData[d.traceId];
var ptNumber = d.originalIndex;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

@monfera does this look ok to you? I'm looking for the data array index corresponding to this link / node (below).

Oh wait. node and link can have different lengths, correct? So maybe hoverlabel should be set per-node and per-link e.g.:

var trace = {
  node: {
     hoverlabel: {
        bgcolor: [/* same length as node data arrays */]
     },
     link: {
       hoverlabel: {
         bgcolor: [/* same length as link data arrays */]
       }
     }
   },
   hoverlabel: {
     // for trace-wide hover label settings (that would be applied to all nodes and links)
   }
}

Well the above sounds uselessly complicated for v1 of sankey. So, I'd vote for not allowing array values in hoverlabel attribute of sankey traces. Does that sound ok?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes your conclusion sounds good to me. Indeed it'll be an unlikely occurrence that the number of nodes and links match.

Copy link
Contributor Author

@etpinard etpinard May 10, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

✅ in e50886c

🔒 in f8258cb

Copy link
Collaborator

Choose a reason for hiding this comment

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

We can leave it off for now to get 1.27 out, but we should definitely include custom hovertext (and at that point we might as well include custom styling) for both nodes and links in the near future - I can definitely see people wanting to explain what specifically is included in each of these elements in more detail than is displayed permanently on the diagram. Chatting with @monfera seems like link.label fills this role for links but there's no analog for nodes. I'll make an issue for this so we don't forget about it.

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'll make an issue for this so we don't forget about it.

Thanks!

Copy link
Collaborator

Choose a reason for hiding this comment

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

#1663

var boundingBox = element.getBoundingClientRect();
var hoverCenterX = boundingBox.left + boundingBox.width / 2;
var hoverCenterY = boundingBox.top + boundingBox.height / 2;
Expand All @@ -138,7 +139,11 @@ module.exports = function plot(gd, calcData) {
['Source:', d.link.source.label].join(' '),
['Target:', d.link.target.label].join(' ')
].filter(renderableValuePresent).join('<br>'),
color: Color.addOpacity(d.tinyColorHue, 1),
color: Fx.castHoverOption(trace, ptNumber, 'bgcolor') || Color.addOpacity(d.tinyColorHue, 1),
borderColor: Fx.castHoverOption(trace, ptNumber, 'bordercolor'),
fontFamily: Fx.castHoverOption(trace, ptNumber, 'font.family'),
fontSize: Fx.castHoverOption(trace, ptNumber, 'font.size'),
fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color'),
idealAlign: d3.event.x < hoverCenterX ? 'right' : 'left'
}, {
container: fullLayout._hoverlayer.node(),
Expand Down Expand Up @@ -171,7 +176,8 @@ module.exports = function plot(gd, calcData) {
};

var nodeHoverFollow = function(element, d) {

var trace = gd._fullData[d.traceId];
var ptNumber = d.originalIndex;
var nodeRect = d3.select(element).select('.nodeRect');
var boundingBox = nodeRect.node().getBoundingClientRect();
var hoverCenterX0 = boundingBox.left - 2;
Expand All @@ -188,7 +194,11 @@ module.exports = function plot(gd, calcData) {
['Incoming flow count:', d.node.targetLinks.length].join(' '),
['Outgoing flow count:', d.node.sourceLinks.length].join(' ')
].filter(renderableValuePresent).join('<br>'),
color: d.tinyColorHue,
color: Fx.castHoverOption(trace, ptNumber, 'bgcolor') || d.tinyColorHue,
borderColor: Fx.castHoverOption(trace, ptNumber, 'bordercolor'),
fontFamily: Fx.castHoverOption(trace, ptNumber, 'font.family'),
fontSize: Fx.castHoverOption(trace, ptNumber, 'font.size'),
fontColor: Fx.castHoverOption(trace, ptNumber, 'font.color'),
idealAlign: 'left'
}, {
container: fullLayout._hoverlayer.node(),
Expand Down