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
16 changes: 13 additions & 3 deletions src/components/fx/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,7 +486,8 @@ function _hover(gd, evt, subplot) {
rotateLabels: rotateLabels,
bgColor: bgColor,
container: fullLayout._hoverlayer,
outerContainer: fullLayout._paperdiv
outerContainer: fullLayout._paperdiv,
commonLabelOpts: fullLayout.hoverlabel
};

var hoverLabels = createHoverText(hoverData, labelOpts);
Expand Down Expand Up @@ -528,6 +529,7 @@ function createHoverText(hoverData, opts) {
var bgColor = opts.bgColor;
var container = opts.container;
var outerContainer = opts.outerContainer;
var commonLabelOpts = opts.commonLabelOpts || {};

// opts.fontFamily/Size are used for the common label
// and as defaults for each hover label, though the individual labels
Expand Down Expand Up @@ -577,9 +579,17 @@ function createHoverText(hoverData, opts) {
ltext = label.selectAll('text').data([0]);

lpath.enter().append('path')
.style({fill: Color.defaultLine, 'stroke-width': '1px', stroke: Color.background});
.style({
fill: commonLabelOpts.bgcolor || Color.defaultLine,
stroke: commonLabelOpts.bordercolor || Color.background,
Copy link
Collaborator

Choose a reason for hiding this comment

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

might want to be Color.fill and Color.stroke since these I guess support alpha now

Copy link
Collaborator

Choose a reason for hiding this comment

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

I started looking around at other places this might be needed... and there are a bunch potentially (seems like all in this file), including some in spikelines that I didn't catch when reviewing that. I'm not sure if it's really crucial, the distinction is mainly important for export right? And you're not going to export hover effects. Still, best to be consistent.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

After some thought, I think it would be best to not render the alpha channel in all hover labels, as the marker hover labels already blend marker opacities with plot_bgcolor filtering out the alpha channel. For example,

var trace = {
  x: [1],
  y: [1],
  marker: {
    color: ['rgba(255, 0, 0, 0.3)']
  }
}

var layout = {
  plot_bgcolor: 'grey'
}

renders the marker hover label as rgb(166, 90, 90) i.e. with no alpha channel.

We could add some special logic so that e.g.

var trace = {
  x: [1],
  y: [1],
  marker: {
    color: ['rgba(255, 0, 0, 0.3)']
  },
  hovelabel: {
    bgcolor: 'rgba(0,0,255,0.3)'
  }
}

var layout = {
  plot_bgcolor: 'grey'
}

renders the alpha channel overriding the marker color to hover label color behavior, but quite frankly I don't see the need.

Adding a line in the schema description saying that alpha channel aren't honored sounds sufficient for now. Thoughts?

Copy link
Collaborator

Choose a reason for hiding this comment

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

I've occasionally thought it would be nice to be able to see behind the hover labels - not just behind the name field like you can do now, but for example in a fractal when I want to draw a small zoom box it would be cool if the whole label were partially transparent. But in cases like that, seems like the best solution would be to make another attribute - hoverlabel.opacity, akin to marker.opacity so you don't need to set the background, the font color, and the border color all to rgba values - in fact, doing it that way would be a substandard experience for exactly the same reason as we have a marker.opacity in the first place, that you really want opacity applied to the whole group.

So yeah, I guess I'm agreeing with you that these attributes needn't support opacity on their own. If you feel like putting in hoverlabel.opacity now go for it, but it can also be left out of this PR and done later.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

but it can also be left out of this PR and done later.

I'm going to go with that if you don't mind. This PR is big enough.

Copy link
Collaborator

Choose a reason for hiding this comment

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

#1665

'stroke-width': '1px'
});
ltext.enter().append('text')
.call(Drawing.font, fontFamily, fontSize, Color.background)
.call(Drawing.font,
commonLabelOpts.font.family || fontFamily,
commonLabelOpts.font.size || fontSize,
commonLabelOpts.font.color || Color.background
)
// prohibit tex interpretation until we can handle
// tex and regular text together
.attr('data-notex', 1);
Expand Down