Skip to content

Axis labels could be applied in the hovering popup #3317

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.

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

Closed
wants to merge 12 commits into from
20 changes: 17 additions & 3 deletions src/components/fx/hover.js
Original file line number Diff line number Diff line change
Expand Up @@ -934,10 +934,24 @@ function createHoverText(hoverData, opts, gd) {
}
}

var xLetter = 'x';
var yLetter = 'y';
var zLetter = 'z';

if(gd._fullLayout.scene) {
xLetter = gd._fullLayout.scene.xaxis.hovertitle || xLetter;
yLetter = gd._fullLayout.scene.yaxis.hovertitle || yLetter;
zLetter = gd._fullLayout.scene.zaxis.hovertitle || zLetter;
}
else if(!gd._fullLayout.ternary && !gd._fullLayout.title) {
xLetter = gd._fullLayout.xaxis.hovertitle || xLetter;
yLetter = gd._fullLayout.yaxis.hovertitle || yLetter;
}

if(d.zLabel !== undefined) {
if(d.xLabel !== undefined) text += 'x: ' + d.xLabel + '<br>';
if(d.yLabel !== undefined) text += 'y: ' + d.yLabel + '<br>';
text += (text ? 'z: ' : '') + d.zLabel;
if(d.xLabel !== undefined) text += xLetter + ': ' + d.xLabel + '<br>';
if(d.yLabel !== undefined) text += yLetter + ': ' + d.yLabel + '<br>';
text += (text ? zLetter + ': ' : '') + d.zLabel;
}
else if(showCommonLabel && d[hovermode + 'Label'] === t0) {
text = d[(hovermode === 'x' ? 'y' : 'x') + 'Label'] || '';
Expand Down
5 changes: 4 additions & 1 deletion src/plots/cartesian/axis_defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,10 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,

handleCategoryOrderDefaults(containerIn, containerOut, coerce, options);

if(axType !== 'category' && !options.noHover) coerce('hoverformat');
if(axType !== 'category' && !options.noHover) {
coerce('hoverformat');
coerce('hovertitle', options.dfltHoverTitle);
}

if(!visible) return containerOut;

Expand Down
8 changes: 8 additions & 0 deletions src/plots/cartesian/layout_attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -593,6 +593,14 @@ module.exports = {
'*%H~%M~%S.%2f* would display *09~15~23.46*'
].join(' ')
},
hovertitle: {
valType: 'string',
role: 'info',
editType: 'none',
description: [
'Sets axis title(s) to be displayed in the hovering popup'
].join(' ')
},
// lines and grids
showline: {
valType: 'boolean',
Expand Down
1 change: 1 addition & 0 deletions src/plots/cartesian/layout_defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {

var defaultOptions = {
letter: axLetter,
dfltHoverTitle: axLetter,
font: layoutOut.font,
outerTicks: outerTicks[axName],
showGrid: !noGrids[axName],
Expand Down
1 change: 1 addition & 0 deletions src/plots/gl3d/layout/axis_attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ module.exports = overrideAll({
tickformat: axesAttrs.tickformat,
tickformatstops: axesAttrs.tickformatstops,
hoverformat: axesAttrs.hoverformat,
hovertitle: axesAttrs.hovertitle,
// lines and grids
showline: axesAttrs.showline,
linecolor: axesAttrs.linecolor,
Expand Down
2 changes: 2 additions & 0 deletions src/plots/polar/layout_attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ var radialAxisAttrs = {
// might need a 'titleside' and even 'titledirection' down the road

hoverformat: axesAttrs.hoverformat,
hovertitle: axesAttrs.hovertitle,

uirevision: {
valType: 'any',
Expand Down Expand Up @@ -234,6 +235,7 @@ var angularAxisAttrs = {
},

hoverformat: axesAttrs.hoverformat,
hovertitle: axesAttrs.hovertitle,

uirevision: {
valType: 'any',
Expand Down
1 change: 1 addition & 0 deletions src/plots/ternary/layout_attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ var ternaryAxesAttrs = {
tickformat: axesAttrs.tickformat,
tickformatstops: axesAttrs.tickformatstops,
hoverformat: axesAttrs.hoverformat,
hovertitle: axesAttrs.hovertitle,
// lines and grids
showline: extendFlat({}, axesAttrs.showline, {dflt: true}),
linecolor: axesAttrs.linecolor,
Expand Down
1 change: 1 addition & 0 deletions src/plots/ternary/layout_defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -126,5 +126,6 @@ function handleAxisDefaults(containerIn, containerOut, options, ternaryLayoutOut
});

coerce('hoverformat');
coerce('hovertitle');
coerce('layer');
}
Binary file modified test/image/baselines/gl3d_surface_after_heatmap.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
66 changes: 55 additions & 11 deletions test/image/mocks/gl3d_surface_after_heatmap.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,72 @@
"data": [
{
"type": "heatmap",
"x": [0, 1, 2],
"y": [0, 1, 2],
"zsmooth": "best",
"x": [0, 1, 2, 3, 4],
Copy link
Contributor

Choose a reason for hiding this comment

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

Why did you patch this mock?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This was a new mock added quite recently. I thought we could expand a bit to allow interactivelytesting hovertitle on gl3d & gl2d.

"y": [0, 1, 2, 3, 4],
"z": [
[0, 1, 0],
[1, 0, 1],
[0, 1, 0]
[0, 1, 0, 1, 0],
[1, 0.25, 0.75, 0.25, 1],
[0, 0.75, 0.25, 0.75, 0],
[1, 0.25, 0.75, 0.25, 1],
[0, 1, 0, 1, 0]
]
},
{
"type": "surface",
"x": [0, 1, 2],
"y": [0, 1, 2],
"x": [0, 1, 2, 3, 4],
"y": [0, 1, 2, 3, 4],
"z": [
[0, 1, 0],
[1, 0, 1],
[0, 1, 0]
[0, 1, 0, 1, 0],
[1, 0.25, 0.75, 0.25, 1],
[0, 0.75, 0.25, 0.75, 0],
[1, 0.25, 0.75, 0.25, 1],
[0, 1, 0, 1, 0]
]
}
],
"layout": {
"title": "Surface 3d plot on top of 2d heatmap!",
"width": 600,
"height": 400
"height": 400,
"xaxis": {
"hovertitle": "lon",
"title": {
"text": "Longitude"
}
},
"yaxis": {
"hovertitle": "lat",
"title": {
"text": "Latitude"
}
},
"scene": {
"xaxis": {
"hovertitle": "lon",
"title": {
"text": "Longitude"
}
},
"yaxis": {
"hovertitle": "lat",
"title": {
"text": "Latitude"
}
},
"zaxis": {
"hovertitle": "alt",
"title": {
"text": "Altitude"
}
},
"camera": {
"eye": {
"x": 2,
"y": 2,
"z": 2
}
}
}
}
}
4 changes: 2 additions & 2 deletions test/image/mocks/polar_wind-rose.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,8 @@
"polar": {
"barmode": "overlay",
"bargap": 0,
"radialaxis": {"ticksuffix": "%", "angle": 45, "dtick": 20},
"angularaxis": {"direction": "clockwise"}
"radialaxis": {"hovertitle": "likelihood", "ticksuffix": "%", "angle": 45, "dtick": 20},
"angularaxis": {"hovertitle": "direction", "direction": "clockwise"}
}
}
}