Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit b223222

Browse files
antoinergantoinerg
committed
image: support hoverinfo the old way trusted way
1 parent 1525a0d commit b223222

File tree

6 files changed

+103
-48
lines changed

6 files changed

+103
-48
lines changed

‎src/components/fx/hover.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -630,7 +630,7 @@ function _hover(gd, evt, subplot, noHoverEvent) {
630630
if(pt.cd[pt.index] && pt.cd[pt.index].ht) {
631631
ht = pt.cd[pt.index].ht;
632632
}
633-
pt.hovertemplate = ht || pt.trace.hovertemplate || pt.hovertemplate;
633+
pt.hovertemplate = ht || pt.trace.hovertemplate || false;
634634
}
635635

636636
pt.eventData = [eventData];

‎src/traces/image/constants.js

Lines changed: 34 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,39 @@
1111

1212
module.exports = {
1313
colormodel: {
14-
rgb: {min: [0, 0, 0], max: [255, 255, 255], fmt: function(c) {return c.slice(0, 3);}},
15-
rgba: {min: [0, 0, 0, 0], max: [255, 255, 255, 1], fmt: function(c) {return c.slice(0, 4);}},
16-
hsl: {min: [0, 0, 0], max: [360, 100, 100], fmt: function(c) {
17-
var p = c.slice(0, 3);
18-
p[1] = p[1] + '%';
19-
p[2] = p[2] + '%';
20-
return p;
21-
}},
22-
hsla: {min: [0, 0, 0, 0], max: [360, 100, 100, 1], fmt: function(c) {
23-
var p = c.slice(0, 4);
24-
p[1] = p[1] + '%';
25-
p[2] = p[2] + '%';
26-
return p;
27-
}}
14+
rgb: {
15+
min: [0, 0, 0],
16+
max: [255, 255, 255],
17+
fmt: function(c) {return c.slice(0, 3);},
18+
suffix: ['', '', '']
19+
},
20+
rgba: {
21+
min: [0, 0, 0, 0],
22+
max: [255, 255, 255, 1],
23+
fmt: function(c) {return c.slice(0, 4);},
24+
suffix: ['', '', '', '']
25+
},
26+
hsl: {
27+
min: [0, 0, 0],
28+
max: [360, 100, 100],
29+
fmt: function(c) {
30+
var p = c.slice(0, 3);
31+
p[1] = p[1] + '%';
32+
p[2] = p[2] + '%';
33+
return p;
34+
},
35+
suffix: ['°', '%', '%']
36+
},
37+
hsla: {
38+
min: [0, 0, 0, 0],
39+
max: [360, 100, 100, 1],
40+
fmt: function(c) {
41+
var p = c.slice(0, 4);
42+
p[1] = p[1] + '%';
43+
p[2] = p[2] + '%';
44+
return p;
45+
},
46+
suffix: ['°', '%', '%', '']
47+
}
2848
}
2949
};

‎src/traces/image/event_data.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@
1010

1111
module.exports = function eventData(out, pt) {
1212
out.colormodel = pt.trace.colormodel;
13-
var cd0 = pt.cd[0];
14-
var trace = cd0.trace;
15-
out.x = trace.x0 + trace.dx * pt.index[1];
16-
out.y = trace.y0 + trace.dy * pt.index[0];
17-
out.c = trace._scaler(cd0.z[pt.index[0]][pt.index[1]]);
13+
if('xVal' in pt) out.x = pt.xVal;
14+
if('yVal' in pt) out.y = pt.yVal;
15+
if(pt.xa) out.xaxis = pt.xa;
16+
if(pt.ya) out.yaxis = pt.ya;
17+
out.c = pt.c;
1818
return out;
1919
};

‎src/traces/image/hover.js

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010

1111
var Fx = require('../../components/fx');
1212
var Lib = require('../../lib');
13-
var attributes = require('./attributes');
13+
var constants = require('./constants');
14+
1415
// var Axes = require('../../plots/cartesian/axes');
1516

1617
module.exports = function hoverPoints(pointData, xval, yval) {
@@ -24,42 +25,48 @@ module.exports = function hoverPoints(pointData, xval, yval) {
2425
Fx.inbox(yval - cd0.y0, yval - (cd0.y0 + cd0.h * trace.dy), 0) > 0) {
2526
return;
2627
}
27-
var ht;
28-
if(!trace.hovertemplate) {
29-
var colormodel = trace.colormodel;
30-
var dims = colormodel.length;
31-
var hoverinfo = cd0.hi || trace.hoverinfo;
32-
var parts = hoverinfo.split('+');
33-
34-
ht = [];
35-
if(parts.indexOf('all') !== -1) parts = attributes.hoverinfo.flags;
36-
if(parts.indexOf('x') !== -1) ht.push('x: %{x}');
37-
if(parts.indexOf('y') !== -1) ht.push('y: %{y}');
38-
if(parts.indexOf('z') !== -1) ht.push('z: [%{z[0]}, %{z[1]}, %{z[2]}' + (dims === 4 ? ', %{z[3]}' : '') + ']');
39-
if(parts.indexOf('color') !== -1) {
40-
var colorstring = [];
41-
colorstring.push('<span style="text-transform:uppercase">%{colormodel}</span>: ');
42-
if(colormodel === 'hsl' || colormodel === 'hsla') {
43-
colorstring.push('[%{c[0]}°, %{c[1]}%, %{c[2]}%' + (dims === 4 ? ', %{c[3]}' : '') + ']');
44-
} else {
45-
colorstring.push('[%{c[0]}, %{c[1]}, %{c[2]}' + (dims === 4 ? ', %{c[3]}' : '') + ']');
46-
}
47-
ht.push(colorstring.join(''));
48-
}
49-
ht = ht.join('<br>');
50-
}
5128

5229
// Find nearest pixel's index and pixel center
5330
var nx = Math.floor((xval - cd0.x0) / trace.dx);
5431
var ny = Math.floor(Math.abs(yval - cd0.y0) / trace.dy);
5532

33+
var colormodel = trace.colormodel;
34+
var dims = colormodel.length;
35+
var hoverinfo = cd0.hi || trace.hoverinfo;
36+
var c = trace._scaler(cd0.z[ny][nx]);
37+
var s = constants.colormodel[colormodel].suffix;
38+
39+
var colorstring = [];
40+
if(trace.hovertemplate || hoverinfo && hoverinfo.split('+').indexOf('color') !== -1) {
41+
colorstring.push('[' + [c[0] + s[0], c[1] + s[1], c[2] + s[2]].join(', '));
42+
if(dims === 4) colorstring.push(', ' + c[3] + s[3]);
43+
colorstring.push(']');
44+
colorstring = colorstring.join('');
45+
pointData.extraText = '<span style="text-transform:uppercase">' + colormodel + '</span>: ' + colorstring;
46+
}
47+
5648
var py = ya.c2p(cd0.y0 + (ny + 0.5) * trace.dy);
49+
var xVal = cd0.x0 + (nx + 0.5) * trace.dx;
50+
var yVal = cd0.y0 + (ny + 0.5) * trace.dy;
51+
var zLabel = '[' + cd0.z[ny][nx].slice(0, trace.colormodel.length).join(', ') + ']';
5752
return [Lib.extendFlat(pointData, {
5853
index: [ny, nx],
5954
x0: xa.c2p(cd0.x0 + nx * trace.dx),
6055
x1: xa.c2p(cd0.x0 + (nx + 1) * trace.dx),
6156
y0: py,
6257
y1: py,
63-
hovertemplate: ht
58+
c: c,
59+
xVal: xVal,
60+
xLabelVal: xVal,
61+
yVal: yVal,
62+
yLabelVal: yVal,
63+
zLabelVal: zLabel,
64+
hovertemplateLabels: {
65+
'zLabel': zLabel,
66+
'cLabel': colorstring,
67+
'c[0]Label': c[0] + s[0],
68+
'c[1]Label': c[1] + s[1],
69+
'c[2]Label': c[2] + s[2]
70+
}
6471
})];
6572
};

‎src/traces/image/plot.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,14 +115,14 @@ module.exports.plot = function(gd, plotinfo, cdimage, imageLayer) {
115115
var jpx = function(j) {return Lib.constrain(Math.round(ya.c2p(y0 + j * dy) - top), 0, imageHeight);};
116116

117117
trace._scaler = module.exports.scaler(trace);
118-
var strfmt = constants.colormodel[trace.colormodel].fmt;
118+
var fmt = constants.colormodel[trace.colormodel].fmt;
119119
var c;
120120
for(var i = 0; i < cd0.w; i++) {
121121
if(ipx(i + 1) === ipx(i)) continue;
122122
for(var j = 0; j < cd0.h; j++) {
123123
if(jpx(j + 1) === jpx(j)) continue;
124124
c = trace._scaler(z[j][i]);
125-
context.fillStyle = trace.colormodel + '(' + strfmt(c).join(',') + ')';
125+
context.fillStyle = trace.colormodel + '(' + fmt(c).join(',') + ')';
126126
context.fillRect(ipx(i), jpx(j), ipx(i + 1) - ipx(i), jpx(j + 1) - jpx(j));
127127
}
128128
}

‎test/jasmine/tests/image_test.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,5 +349,33 @@ describe('image hover:', function() {
349349
.catch(failTest)
350350
.then(done);
351351
});
352+
353+
[
354+
['x', '25.5'],
355+
['y', '14.5'],
356+
['z', '[54, 136, 153]'],
357+
['c', '[54, 136, 153]'],
358+
['c[0]', '54'],
359+
['c[0]', '54°', 'hsl'],
360+
['c[1]', '100%', 'hsl'],
361+
['c[2]', '100%', 'hsl'],
362+
['c[3]', '1', 'hsla'],
363+
].forEach(function(test) {
364+
it('should support hovertemplate variable ' + test[0], function(done) {
365+
var mockCopy = Lib.extendDeep({}, mock);
366+
mockCopy.data[0].colormodel = test[2] || 'rgb';
367+
mockCopy.data[0].hovertemplate = '%{' + test[0] + '}<extra></extra>';
368+
Plotly.newPlot(gd, mockCopy)
369+
.then(function() {_hover(205, 125);})
370+
.then(function() {
371+
assertHoverLabelContent({
372+
nums: test[1],
373+
name: ''
374+
}, 'variable `' + test[0] + '` should be available!');
375+
})
376+
.catch(failTest)
377+
.then(done);
378+
});
379+
});
352380
});
353381
});

0 commit comments

Comments
 (0)