Skip to content

Commit 756bd69

Browse files
etpinardetpinard
authoredJul 19, 2017
Merge pull request #1896 from plotly/fix-pie-sankey-event-data
Add plotly-esque point data info to pie & sankey event data
·
v3.0.1v1.29.0
2 parents 1879cf9 + 15dc324 commit 756bd69

File tree

6 files changed

+625
-497
lines changed

6 files changed

+625
-497
lines changed
 

Diff for: ‎src/traces/pie/plot.js

+4
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@ module.exports = function plot(gd, cdpie) {
7777
return;
7878
}
7979

80+
// to have consistent event data compared to other traces
81+
pt.pointNumber = pt.i;
82+
pt.curveNumber = trace.index;
83+
8084
quadrants[pt.pxmid[1] < 0 ? 0 : 1][pt.pxmid[0] < 0 ? 0 : 1].push(pt);
8185

8286
var cx = cd0.cx + depthVector[0],

Diff for: ‎src/traces/sankey/plot.js

+16-10
Original file line numberDiff line numberDiff line change
@@ -115,24 +115,26 @@ function castHoverOption(trace, attr) {
115115
}
116116

117117
module.exports = function plot(gd, calcData) {
118-
119118
var fullLayout = gd._fullLayout;
120119
var svg = fullLayout._paper;
121120
var size = fullLayout._size;
122121

123122
var linkSelect = function(element, d) {
124-
gd._hoverdata = [d.link];
125-
gd._hoverdata.trace = calcData.trace;
123+
var evt = d.link;
124+
evt.originalEvent = d3.event;
125+
gd._hoverdata = [evt];
126126
Fx.click(gd, { target: true });
127127
};
128128

129129
var linkHover = function(element, d, sankey) {
130+
var evt = d.link;
131+
evt.originalEvent = d3.event;
130132
d3.select(element).call(linkHoveredStyle.bind(0, d, sankey, true));
131-
Fx.hover(gd, d.link, 'sankey');
133+
Fx.hover(gd, evt, 'sankey');
132134
};
133135

134136
var linkHoverFollow = function(element, d) {
135-
var trace = gd._fullData[d.traceId];
137+
var trace = d.link.trace;
136138
var rootBBox = gd.getBoundingClientRect();
137139
var boundingBox = element.getBoundingClientRect();
138140
var hoverCenterX = boundingBox.left + boundingBox.width / 2;
@@ -166,26 +168,30 @@ module.exports = function plot(gd, calcData) {
166168
var linkUnhover = function(element, d, sankey) {
167169
d3.select(element).call(linkNonHoveredStyle.bind(0, d, sankey, true));
168170
gd.emit('plotly_unhover', {
171+
event: d3.event,
169172
points: [d.link]
170173
});
171174

172175
Fx.loneUnhover(fullLayout._hoverlayer.node());
173176
};
174177

175178
var nodeSelect = function(element, d, sankey) {
176-
gd._hoverdata = [d.node];
177-
gd._hoverdata.trace = calcData.trace;
179+
var evt = d.node;
180+
evt.originalEvent = d3.event;
181+
gd._hoverdata = [evt];
178182
d3.select(element).call(nodeNonHoveredStyle, d, sankey);
179183
Fx.click(gd, { target: true });
180184
};
181185

182186
var nodeHover = function(element, d, sankey) {
187+
var evt = d.node;
188+
evt.originalEvent = d3.event;
183189
d3.select(element).call(nodeHoveredStyle, d, sankey);
184-
Fx.hover(gd, d.node, 'sankey');
190+
Fx.hover(gd, evt, 'sankey');
185191
};
186192

187193
var nodeHoverFollow = function(element, d) {
188-
var trace = gd._fullData[d.traceId];
194+
var trace = d.node.trace;
189195
var nodeRect = d3.select(element).select('.nodeRect');
190196
var rootBBox = gd.getBoundingClientRect();
191197
var boundingBox = nodeRect.node().getBoundingClientRect();
@@ -220,9 +226,9 @@ module.exports = function plot(gd, calcData) {
220226
};
221227

222228
var nodeUnhover = function(element, d, sankey) {
223-
224229
d3.select(element).call(nodeNonHoveredStyle, d, sankey);
225230
gd.emit('plotly_unhover', {
231+
event: d3.event,
226232
points: [d.node]
227233
});
228234

Diff for: ‎src/traces/sankey/render.js

+11-4
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ function switchToSankeyFormat(nodes) {
6565
// view models
6666

6767
function sankeyModel(layout, d, i) {
68-
6968
var trace = unwrap(d).trace,
7069
domain = trace.domain,
7170
nodeSpec = trace.node,
@@ -87,13 +86,15 @@ function sankeyModel(layout, d, i) {
8786

8887
var nodes = nodeSpec.label.map(function(l, i) {
8988
return {
89+
pointNumber: i,
9090
label: l,
9191
color: Lib.isArray(nodeSpec.color) ? nodeSpec.color[i] : nodeSpec.color
9292
};
9393
});
9494

9595
var links = linkSpec.value.map(function(d, i) {
9696
return {
97+
pointNumber: i,
9798
label: linkSpec.label[i],
9899
color: Lib.isArray(linkSpec.color) ? linkSpec.color[i] : linkSpec.color,
99100
source: linkSpec.source[i],
@@ -121,6 +122,7 @@ function sankeyModel(layout, d, i) {
121122

122123
return {
123124
key: i,
125+
trace: trace,
124126
guid: Math.floor(1e12 * (1 + Math.random())),
125127
horizontal: horizontal,
126128
width: width,
@@ -150,13 +152,16 @@ function sankeyModel(layout, d, i) {
150152
}
151153

152154
function linkModel(uniqueKeys, d, l) {
153-
154155
var tc = tinycolor(l.color);
155156
var basicKey = l.source.label + '|' + l.target.label;
156157
var foundKey = uniqueKeys[basicKey];
157158
uniqueKeys[basicKey] = (foundKey === void(0) ? foundKey : 0) + 1;
158159
var key = basicKey + (foundKey === void(0) ? '' : '__' + foundKey);
159160

161+
// for event data
162+
l.trace = d.trace;
163+
l.curveNumber = d.trace.index;
164+
160165
return {
161166
key: key,
162167
traceId: d.key,
@@ -173,7 +178,6 @@ function linkModel(uniqueKeys, d, l) {
173178
}
174179

175180
function nodeModel(uniqueKeys, d, n) {
176-
177181
var tc = tinycolor(n.color),
178182
zoneThicknessPad = c.nodePadAcross,
179183
zoneLengthPad = d.nodePad / 2,
@@ -185,6 +189,10 @@ function nodeModel(uniqueKeys, d, n) {
185189
uniqueKeys[basicKey] = (foundKey === void(0) ? foundKey : 0) + 1;
186190
var key = basicKey + (foundKey === void(0) ? '' : '__' + foundKey);
187191

192+
// for event data
193+
n.trace = d.trace;
194+
n.curveNumber = d.trace.index;
195+
188196
return {
189197
key: key,
190198
traceId: d.key,
@@ -416,7 +424,6 @@ function snappingForce(sankeyNode, forceKey, nodes, d) {
416424
// scene graph
417425

418426
module.exports = function(svg, styledData, layout, callbacks) {
419-
420427
var sankey = svg.selectAll('.sankey')
421428
.data(styledData
422429
.filter(function(d) {return unwrap(d).trace.visible;})

Diff for: ‎test/jasmine/tests/hover_pie_test.js

-480
This file was deleted.

Diff for: ‎test/jasmine/tests/pie_test.js

+485-3
Large diffs are not rendered by default.

Diff for: ‎test/jasmine/tests/sankey_test.js

+109
Original file line numberDiff line numberDiff line change
@@ -410,4 +410,113 @@ describe('sankey tests', function() {
410410
.then(done);
411411
});
412412
});
413+
414+
describe('Test hover/click event data:', function() {
415+
var gd;
416+
417+
beforeEach(function() {
418+
gd = createGraphDiv();
419+
});
420+
421+
afterEach(destroyGraphDiv);
422+
423+
function _makeWrapper(eventType, mouseFn) {
424+
var posByElementType = {
425+
node: [400, 300],
426+
link: [450, 300]
427+
};
428+
429+
return function(elType) {
430+
return new Promise(function(resolve, reject) {
431+
gd.once(eventType, function(d) {
432+
delete gd._lastHoverTime;
433+
resolve(d);
434+
});
435+
436+
mouseFn(posByElementType[elType]);
437+
setTimeout(function() {
438+
reject(eventType + ' did not get called!');
439+
}, 100);
440+
});
441+
};
442+
}
443+
444+
var _hover = _makeWrapper('plotly_hover', function(pos) {
445+
mouseEvent('mouseover', pos[0], pos[1]);
446+
});
447+
448+
var _click = _makeWrapper('plotly_click', function(pos) {
449+
mouseEvent('click', pos[0], pos[1]);
450+
});
451+
452+
var _unhover = _makeWrapper('plotly_unhover', function(pos) {
453+
mouseEvent('mouseover', pos[0], pos[1]);
454+
mouseEvent('mouseout', pos[0], pos[1]);
455+
});
456+
457+
it('should output correct hover/click/unhover event data', function(done) {
458+
var fig = Lib.extendDeep({}, mock);
459+
460+
function _assert(d, expectedPtData) {
461+
expect(d.event).toBeDefined('original event reference');
462+
463+
var ptData = d.points[0];
464+
Object.keys(expectedPtData).forEach(function(k) {
465+
expect(ptData[k]).toBe(expectedPtData[k], 'point data for ' + k);
466+
});
467+
}
468+
469+
Plotly.plot(gd, fig)
470+
.then(function() { return _hover('node'); })
471+
.then(function(d) {
472+
_assert(d, {
473+
curveNumber: 0,
474+
pointNumber: 4,
475+
label: 'Solid'
476+
});
477+
})
478+
.then(function() { return _hover('link'); })
479+
.then(function(d) {
480+
_assert(d, {
481+
curveNumber: 0,
482+
pointNumber: 61,
483+
value: 46.477
484+
});
485+
})
486+
.then(function() { return _click('node'); })
487+
.then(function(d) {
488+
_assert(d, {
489+
curveNumber: 0,
490+
pointNumber: 4,
491+
label: 'Solid'
492+
});
493+
})
494+
.then(function() { return _click('link'); })
495+
.then(function(d) {
496+
_assert(d, {
497+
curveNumber: 0,
498+
pointNumber: 61,
499+
value: 46.477
500+
});
501+
})
502+
.then(function() { return _unhover('node'); })
503+
.then(function(d) {
504+
_assert(d, {
505+
curveNumber: 0,
506+
pointNumber: 4,
507+
label: 'Solid'
508+
});
509+
})
510+
.then(function() { return _unhover('link'); })
511+
.then(function(d) {
512+
_assert(d, {
513+
curveNumber: 0,
514+
pointNumber: 61,
515+
value: 46.477
516+
});
517+
})
518+
.catch(fail)
519+
.then(done);
520+
});
521+
});
413522
});

0 commit comments

Comments
 (0)
Please sign in to comment.