Skip to content
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

Add hoverlabel.zformat attribute #1

Closed
wants to merge 12 commits into from
6 changes: 5 additions & 1 deletion src/components/fx/hover.js
Original file line number Diff line number Diff line change
Expand Up @@ -1073,7 +1073,11 @@ function cleanPoint(d, hovermode) {
d.yLabel = ('yLabel' in d) ? d.yLabel : Axes.hoverLabelText(d.ya, d.yLabelVal);
d.yVal = d.ya.c2d(d.yLabelVal);
}
if(d.zLabelVal !== undefined) d.zLabel = String(d.zLabelVal);

// Traces like heatmaps generate the zLabel in their hoverPoints function
if(d.zLabelVal !== undefined && d.zLabel === undefined) {
d.zLabel = String(d.zLabelVal);
}

// for box means and error bars, add the range to the label
if(!isNaN(d.xerr) && !(d.xa.type === 'log' && d.xerr <= 0)) {
Expand Down
1 change: 1 addition & 0 deletions src/traces/contour/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ module.exports = extendFlat({
transpose: heatmapAttrs.transpose,
xtype: heatmapAttrs.xtype,
ytype: heatmapAttrs.ytype,
zhoverformat: heatmapAttrs.zhoverformat,

connectgaps: heatmapAttrs.connectgaps,

Expand Down
4 changes: 4 additions & 0 deletions src/traces/contour/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,8 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout

handleContoursDefaults(traceIn, traceOut, coerce);
handleStyleDefaults(traceIn, traceOut, coerce, layout);

coerce('zhoverformat');
// Needed for formatting of hoverlabel if format is not explicitly specified
traceOut._separators = layout.separators;
};
11 changes: 11 additions & 0 deletions src/traces/heatmap/attributes.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,17 @@ module.exports = extendFlat({}, {
editType: 'plot',
description: 'Sets the vertical gap (in pixels) between bricks.'
},
zhoverformat: {
valType: 'string',
dflt: '',
role: 'style',
editType: 'none',
description: [
'Sets the hover text formatting rule using d3 formatting mini-languages',
'which are very similar to those in Python. See:',
'https://github.com/d3/d3-format/blob/master/README.md#locale_format'
].join(' ')
},
},
colorscaleAttrs,
{ autocolorscale: extendFlat({}, colorscaleAttrs.autocolorscale, {dflt: false}) },
Expand Down
3 changes: 3 additions & 0 deletions src/traces/heatmap/defaults.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,4 +40,7 @@ module.exports = function supplyDefaults(traceIn, traceOut, defaultColor, layout
coerce('connectgaps', hasColumns(traceOut) && (traceOut.zsmooth !== false));

colorscaleDefaults(traceIn, traceOut, layout, coerce, {prefix: '', cLetter: 'z'});

coerce('zhoverformat');
traceOut._separators = layout.separators; // Needed for formatting of hoverlabel if format is not explicitly specified
};
16 changes: 16 additions & 0 deletions src/traces/heatmap/hover.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@

var Fx = require('../../components/fx');
var Lib = require('../../lib');
var Axes = require('../../plots/cartesian/axes');

var MAXDIST = Fx.constants.MAXDIST;

Expand All @@ -26,6 +27,9 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, contour)
y = cd0.y,
z = cd0.z,
zmask = cd0.zmask,
range = [trace.zmin, trace.zmax],
zhoverformat = trace.zhoverformat,
_separators = trace._separators,
x2 = x,
y2 = y,
xl,
Expand Down Expand Up @@ -99,6 +103,17 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, contour)
text = cd0.text[ny][nx];
}

var zLabel;
// dummy axis for formatting the z value
var dummyAx = {
type: 'linear',
range: range,
hoverformat: zhoverformat,
_separators: _separators
};
var zLabelObj = Axes.tickText(dummyAx, zVal, 'hover');
zLabel = zLabelObj.text;

return [Lib.extendFlat(pointData, {
index: [ny, nx],
// never let a 2D override 1D type as closest point
Expand All @@ -110,6 +125,7 @@ module.exports = function hoverPoints(pointData, xval, yval, hovermode, contour)
xLabelVal: xl,
yLabelVal: yl,
zLabelVal: zVal,
zLabel: zLabel,
text: text
})];
};
37 changes: 37 additions & 0 deletions test/jasmine/tests/hover_label_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -499,6 +499,43 @@ describe('hover info', function() {
.catch(fail)
.then(done);
});

it('should display correct label content with specified format', function(done) {

Choose a reason for hiding this comment

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

Looks like the two test cases you added are pretty much equivalent. Pick your favorite and 🔪 the other.

var gd = createGraphDiv();

Plotly.plot(gd, [{
type: 'heatmap',
y: [0, 1],
z: [[1.11111, 2.2222, 3.33333], [4.44444, 5.55555, 6.66666]],
name: 'one',
zhoverformat: '.2f'
}, {
type: 'heatmap',
y: [2, 3],
z: [[1, 2, 3], [2, 2, 1]],
name: 'two'
}], {
width: 500,
height: 400,
margin: {l: 0, t: 0, r: 0, b: 0}
})
.then(function() {
_hover(gd, 250, 100);
assertHoverLabelContent({
nums: 'x: 1\ny: 3\nz: 2',
name: 'two'
});
})
.then(function() {
_hover(gd, 250, 300);
assertHoverLabelContent({
nums: 'x: 1\ny: 1\nz: 5.56',
name: 'one'
});
})
.catch(fail)
.then(done);
});
});

describe('hoverformat', function() {
Expand Down
9 changes: 5 additions & 4 deletions test/jasmine/tests/select_test.js
Original file line number Diff line number Diff line change
Expand Up @@ -717,10 +717,11 @@ describe('Test select box and lasso per trace:', function() {
addInvisible(fig, false);

// add a trace with no locations which will then make trace invisible, lacking DOM elements
fig.data.push(Lib.extendDeep({}, fig.data[0]));
fig.data[1].text = [];
fig.data[1].locations = [];
fig.data[1].z = [];
var emptyChoroplethTrace = Lib.extendDeep({}, fig.data[0]);
emptyChoroplethTrace.text = [];
emptyChoroplethTrace.locations = [];
emptyChoroplethTrace.z = [];
fig.data.push(emptyChoroplethTrace);

Plotly.plot(gd, fig)
.then(function() {
Expand Down