Skip to content

Displaying axis labels other than x, y & z in the hovering popup using hovertitle attribute #3498

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

Closed
wants to merge 6 commits into from
Closed

Displaying axis labels other than x, y & z in the hovering popup using hovertitle attribute #3498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a292922
fix for issue-2618
archmoj Dec 10, 2018
c4e3ff6
fixed category case polarbar and few more other cases
archmoj Jan 30, 2019
a388f2e
namely fixup for ternary
archmoj Jan 30, 2019
9a3591e
change in jasmine test of ternary now display title
archmoj Jan 30, 2019
0b7c5ab
apply hovertitle in ternary
archmoj Jan 30, 2019
590aa2d
parentheses needed
archmoj Jan 30, 2019
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
20 changes: 17 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 @@ -931,10 +931,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) {
if(gd._fullLayout.xaxis) xLetter = gd._fullLayout.xaxis.hovertitle || xLetter;
if(gd._fullLayout.yaxis) 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;
Copy link
Contributor

Choose a reason for hiding this comment

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

Hmm. So hovertitle for cartesian axes only has an effect for trace with a "z" field. That's ok, but should make that clear in the attribute description.

}
else if(showCommonLabel && d[hovermode + 'Label'] === t0) {
text = d[(hovermode === 'x' ? 'y' : 'x') + 'Label'] || '';
Expand Down
8 changes: 7 additions & 1 deletion src/plots/cartesian/axis_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,13 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, coerce,

handleCategoryOrderDefaults(containerIn, containerOut, coerce, options);

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

if(axType !== 'category') {
coerce('hoverformat');
}
}

if(!visible) return containerOut;

Expand Down
8 changes: 8 additions & 0 deletions src/plots/cartesian/layout_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,6 +594,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 to be displayed in the hovering popup'
].join(' ')
},
// lines and grids
showline: {
valType: 'boolean',
Expand Down
1 change: 1 addition & 0 deletions src/plots/gl3d/layout/axis_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,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
View file
Open in desktop
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,
Copy link
Contributor

@etpinard etpinard Feb 12, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

We could set a "hard" dflt value: 'r' for radialaxis.hovertitle and 'θ' for angularaxis.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
2 changes: 2 additions & 0 deletions src/plots/polar/layout_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,8 @@ function handleDefaults(contIn, contOut, coerce, opts) {

if(axType !== 'category') coerceAxis('hoverformat');

coerceAxis('hovertitle');

axOut._input = axIn;
}

Expand Down
1 change: 1 addition & 0 deletions src/plots/ternary/layout_attributes.js
View file
Open in desktop
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
3 changes: 2 additions & 1 deletion src/plots/ternary/layout_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ function handleAxisDefaults(containerIn, containerOut, options, ternaryLayoutOut
var dfltTitle = 'Component ' + letterUpper;

var title = coerce('title.text', dfltTitle);
containerOut._hovertitle = title === dfltTitle ? title : letterUpper;
coerce('hovertitle', title === dfltTitle ? title : letterUpper);

Lib.coerceFont(coerce, 'title.font', {
family: options.font.family,
Expand Down Expand Up @@ -126,5 +126,6 @@ function handleAxisDefaults(containerIn, containerOut, options, ternaryLayoutOut
});

coerce('hoverformat');
coerce('hovertitle');
coerce('layer');
}
8 changes: 8 additions & 0 deletions src/traces/carpet/axis_attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,14 @@ module.exports = {
},
editType: 'calc',
},
hovertitle: {
valType: 'string',
role: 'info',
editType: 'none',
description: [
'Sets axis title to be displayed in the hovering popup'
].join(' ')
},
type: {
valType: 'enumerated',
// '-' means we haven't yet run autotype or couldn't find any data
Expand Down
3 changes: 1 addition & 2 deletions src/traces/carpet/axis_defaults.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,8 +95,7 @@ module.exports = function handleAxisDefaults(containerIn, containerOut, options)

coerce('labelpadding');

containerOut._hovertitle = letter;

coerce('hovertitle', letter);

if(axType === 'date') {
var handleCalendarDefaults = Registry.getComponentMethod('calendars', 'handleDefaults');
Expand Down
2 changes: 1 addition & 1 deletion src/traces/scattercarpet/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
if(ax.labelprefix && ax.labelprefix.length > 0) {
prefix = ax.labelprefix.replace(/ = $/, '');
} else {
prefix = ax._hovertitle;
prefix = ax.hovertitle;
}

text.push(prefix + ': ' + val.toFixed(3) + ax.labelsuffix);
Expand Down
9 changes: 4 additions & 5 deletions src/traces/scatterpolar/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,25 +40,24 @@ function makeHoverPointText(cdi, trace, subplot, pointData) {

var radialAxis = subplot.radialAxis;
var angularAxis = subplot.angularAxis;
radialAxis._hovertitle = 'r';
angularAxis._hovertitle = 'θ';

var hoverinfo = cdi.hi || trace.hoverinfo;
var text = [];
function textPart(ax, val) {
text.push(ax._hovertitle + ': ' + Axes.tickText(ax, val, 'hover').text);
function textPart(dfltText, ax, val) {
text.push((ax.hovertitle || dfltText) + ': ' + Axes.tickText(ax, val, 'hover').text);
}

if(!trace.hovertemplate) {
var parts = hoverinfo.split('+');

if(parts.indexOf('all') !== -1) parts = ['r', 'theta', 'text'];
if(parts.indexOf('r') !== -1) {
textPart(radialAxis, radialAxis.c2l(cdi.r));
textPart('r', radialAxis, radialAxis.c2l(cdi.r));
}
if(parts.indexOf('theta') !== -1) {
var theta = cdi.theta;
textPart(
'θ',
angularAxis,
angularAxis.thetaunit === 'degrees' ? Lib.rad2deg(theta) : theta
);
Expand Down
3 changes: 2 additions & 1 deletion src/traces/scatterternary/hover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode) {
var hoverinfo = cdi.hi || trace.hoverinfo;
var text = [];
function textPart(ax, val) {
text.push(ax._hovertitle + ': ' + Axes.tickText(ax, val, 'hover').text);
var axTitle = ax.hovertitle || ax.title.text;
text.push(axTitle + ': ' + Axes.tickText(ax, val, 'hover').text);
}
if(!trace.hovertemplate) {
var parts = hoverinfo.split('+');
Expand Down
Binary file modified test/image/baselines/gl3d_surface_after_heatmap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions test/image/mocks/gl3d_ibm-plot.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,7 @@
"scene": {
"xaxis": {
"title": "Term",
"hovertitle": "Term",
Copy link
Contributor

@etpinard etpinard Feb 12, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

Adding hovertitle to a few mock is ok, but we should really test this issue jasmine tests.

  • https://github.com/plotly/plotly.js/blob/master/test/jasmine/tests/hover_label_test.js for cartesian

  • plotly.js/test/jasmine/tests/ternary_test.js

    Lines 120 to 174 in 884d2fa

    it('should display to hover labels', function(done) {
    mouseEvent('mousemove', blankPos[0], blankPos[1]);
    assertHoverLabelContent([null, null], 'only on data points');
    function check(content, style, msg) {
    Lib.clearThrottle();
    mouseEvent('mousemove', pointPos[0], pointPos[1]);
    assertHoverLabelContent({nums: content}, msg);
    assertHoverLabelStyle(d3.select('g.hovertext'), style, msg);
    }
    check([
    'Component A: 0.5',
    'B: 0.25',
    'Component C: 0.25'
    ].join('\n'), {
    bgcolor: 'rgb(31, 119, 180)',
    bordercolor: 'rgb(255, 255, 255)',
    fontColor: 'rgb(255, 255, 255)',
    fontSize: 13,
    fontFamily: 'Arial'
    }, 'one label per data pt');
    Plotly.restyle(gd, {
    'hoverlabel.bordercolor': 'blue',
    'hoverlabel.font.family': [['Gravitas', 'Arial', 'Roboto']]
    })
    .then(function() {
    check([
    'Component A: 0.5',
    'B: 0.25',
    'Component C: 0.25'
    ].join('\n'), {
    bgcolor: 'rgb(31, 119, 180)',
    bordercolor: 'rgb(0, 0, 255)',
    fontColor: 'rgb(0, 0, 255)',
    fontSize: 13,
    fontFamily: 'Gravitas'
    }, 'after hoverlabel styling restyle call');
    return Plotly.restyle(gd, 'hoverinfo', [['a', 'b+c', 'b']]);
    })
    .then(function() {
    check('Component A: 0.5', {
    bgcolor: 'rgb(31, 119, 180)',
    bordercolor: 'rgb(0, 0, 255)',
    fontColor: 'rgb(0, 0, 255)',
    fontSize: 13,
    fontFamily: 'Gravitas'
    }, 'after hoverlabel styling restyle call');
    })
    .catch(failTest)
    .then(done);
    });
    for ternary
  • https://github.com/plotly/plotly.js/blob/master/test/jasmine/tests/gl3d_plot_interact_test.js#L107 for gl3d

  • plotly.js/test/jasmine/tests/scatterpolar_test.js

    Lines 83 to 200 in 884d2fa

    describe('Test scatterpolar hover:', function() {
    var gd;
    afterEach(destroyGraphDiv);
    function run(specs) {
    gd = createGraphDiv();
    var fig = Lib.extendDeep(
    {width: 700, height: 500},
    specs.mock || require('@mocks/polar_scatter.json')
    );
    if(specs.patch) {
    fig = specs.patch(fig);
    }
    var pos = specs.pos || [200, 200];
    return Plotly.plot(gd, fig).then(function() {
    mouseEvent('mousemove', pos[0], pos[1]);
    assertHoverLabelContent(specs);
    });
    }
    [{
    desc: 'base',
    nums: 'r: 4.022892\nθ: 128.342°',
    name: 'Trial 3'
    }, {
    desc: 'with hovertemplate',
    patch: function(fig) {
    fig.data[2].hovertemplate = 'template %{r} %{theta}';
    return fig;
    },
    nums: 'template 4.02289202968 128.342009045',
    name: 'Trial 3'
    }, {
    desc: 'with hovertemplate and empty trace name',
    patch: function(fig) {
    fig.data[2].hovertemplate = 'template %{r} %{theta}';
    fig.data[2].name = '';
    return fig;
    },
    nums: 'template 4.02289202968 128.342009045',
    name: ''
    }, {
    desc: '(no labels - out of sector)',
    patch: function(fig) {
    fig.layout.polar.sector = [15, 75];
    return fig;
    },
    pos: [144, 350],
    nums: '',
    name: ''
    }, {
    desc: 'on a `thetaunit: radians` polar subplot',
    patch: function(fig) {
    fig.layout.polar.angularaxis.thetaunit = 'radians';
    return fig;
    },
    nums: 'r: 4.022892\nθ: 2.239991',
    name: 'Trial 3'
    }, {
    desc: 'on log radial axis',
    patch: function(fig) {
    fig.layout.polar.radialaxis.type = 'log';
    return fig;
    },
    nums: 'r: 1.108937\nθ: 115.4969°',
    name: 'Trial 3'
    }, {
    desc: 'on fills',
    mock: require('@mocks/polar_fills.json'),
    pos: [300, 230],
    nums: 'trace 2',
    name: ''
    }, {
    desc: 'on category axes',
    mock: require('@mocks/polar_categories.json'),
    patch: function(fig) {
    fig.data.forEach(function(t) { t.fill = 'none'; });
    return fig;
    },
    pos: [465, 90],
    nums: 'r: 4\nθ: d',
    name: 'angular cate...'
    }, {
    desc: 'on a subplot with hole>0',
    patch: function(fig) {
    fig.layout.polar.hole = 0.2;
    return fig;
    },
    nums: 'r: 1.108937\nθ: 115.4969°',
    name: 'Trial 3'
    }, {
    desc: 'with custom text scalar',
    patch: function(fig) {
    fig.data.forEach(function(t) { t.text = 'a'; });
    return fig;
    },
    nums: 'r: 4.022892\nθ: 128.342°\na',
    name: 'Trial 3'
    }, {
    desc: 'with custom text array',
    patch: function(fig) {
    fig.data.forEach(function(t) { t.text = t.r.map(String); });
    return fig;
    },
    nums: 'r: 4.022892\nθ: 128.342°\n4.02289202968',
    name: 'Trial 3'
    }]
    .forEach(function(specs) {
    it('should generate correct hover labels ' + specs.desc, function(done) {
    run(specs).catch(failTest).then(done);
    });
    });
    });
    for polar

  • plotly.js/test/jasmine/tests/carpet_test.js

    Lines 633 to 681 in 884d2fa

    describe('scattercarpet hover labels', function() {
    var gd;
    afterEach(destroyGraphDiv);
    function run(pos, fig, content) {
    gd = createGraphDiv();
    return Plotly.plot(gd, fig).then(function() {
    mouseEvent('mousemove', pos[0], pos[1]);
    assertHoverLabelContent({
    nums: content[0].join('\n'),
    name: content[1]
    });
    });
    }
    it('should generate hover label (base)', function(done) {
    var fig = Lib.extendDeep({}, require('@mocks/scattercarpet.json'));
    run(
    [200, 200], fig,
    [['a: 0.200', 'b: 3.500', 'y: 2.900'], 'a = 0.2']
    )
    .then(done);
    });
    it('should generate hover label with \'hoverinfo\' set', function(done) {
    var fig = Lib.extendDeep({}, require('@mocks/scattercarpet.json'));
    fig.data[5].hoverinfo = 'a+y';
    run(
    [200, 200], fig,
    [['a: 0.200', 'y: 2.900'], null]
    )
    .then(done);
    });
    it('should generate hover label with arrayOk \'hoverinfo\' settings', function(done) {
    var fig = Lib.extendDeep({}, require('@mocks/scattercarpet.json'));
    fig.data[5].hoverinfo = ['a+b', 'a+b', 'a+b', 'b+y'];
    run(
    [200, 200], fig,
    [['b: 3.500', 'y: 2.900'], null]
    )
    .then(done);
    });
    });
    for carpet

Oh and we should also add hovertitle to geo.lonaxis and geo.lataxis as displayed on https://codepen.io/etpinard/pen/gqKjeB

"titlefont": {
"color": "#D9D9D9"
},
Expand All @@ -318,6 +319,7 @@
},
"yaxis": {
"title": "Moneyness",
"hovertitle": "Moneyness",
"titlefont": {
"color": "#D9D9D9"
},
Expand All @@ -332,6 +334,7 @@
},
"zaxis": {
"title": "Volatilty",
"hovertitle": "Volatilty",
"titlefont": {
"color": "#D9D9D9"
},
Expand Down
66 changes: 55 additions & 11 deletions test/image/mocks/gl3d_surface_after_heatmap.json
View file
Open in desktop
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],
"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
View file
Open in desktop
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": "distribution", "ticksuffix": "%", "angle": 45, "dtick": 20},
"angularaxis": {"hovertitle": "direction", "direction": "clockwise"}
}
}
}
4 changes: 2 additions & 2 deletions test/jasmine/tests/ternary_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ describe('ternary plots', function() {

check([
'Component A: 0.5',
'B: 0.25',
'chocolate: 0.25',
'Component C: 0.25'
].join('\n'), {
bgcolor: 'rgb(31, 119, 180)',
Expand All @@ -148,7 +148,7 @@ describe('ternary plots', function() {
.then(function() {
check([
'Component A: 0.5',
'B: 0.25',
'chocolate: 0.25',
'Component C: 0.25'
].join('\n'), {
bgcolor: 'rgb(31, 119, 180)',
Expand Down