diff --git a/src/plots/cartesian/graph_interact.js b/src/plots/cartesian/graph_interact.js index 623e802fc88..d2af96f5e48 100644 --- a/src/plots/cartesian/graph_interact.js +++ b/src/plots/cartesian/graph_interact.js @@ -309,6 +309,13 @@ fx.unhover = function (gd, evt, subplot) { // The actual implementation is here: function hover(gd, evt, subplot){ + if(subplot === 'pie'){ + gd.emit('plotly_hover', { + points: [evt] + }); + return; + } + if(!subplot) subplot = 'xy'; var fullLayout = gd._fullLayout, diff --git a/src/traces/pie/plot.js b/src/traces/pie/plot.js index 264902a03e2..91420deb68f 100644 --- a/src/traces/pie/plot.js +++ b/src/traces/pie/plot.js @@ -82,7 +82,7 @@ module.exports = function plot(gd, cdpie) { slicePath = sliceTop.selectAll('path.surface').data([pt]), hasHoverData = false; - function handleMouseOver() { + function handleMouseOver(evt) { // in case fullLayout or fullData has changed without a replot var fullLayout2 = gd._fullLayout, trace2 = gd._fullData[trace.index], @@ -123,6 +123,8 @@ module.exports = function plot(gd, cdpie) { } ); + Plotly.Fx.hover(gd, evt, 'pie'); + hasHoverData = true; } diff --git a/test/jasmine/assets/mouse_event.js b/test/jasmine/assets/mouse_event.js new file mode 100644 index 00000000000..036e33f0a4f --- /dev/null +++ b/test/jasmine/assets/mouse_event.js @@ -0,0 +1,6 @@ +module.exports = function (type, x, y, opts) { + var el = document.elementFromPoint(x,y); + var options = opts || { bubbles: true }; + var ev = new window.MouseEvent(type, options); + el.dispatchEvent(ev); +}; diff --git a/test/jasmine/tests/hover_pie_test.js b/test/jasmine/tests/hover_pie_test.js new file mode 100644 index 00000000000..cc52e8130e4 --- /dev/null +++ b/test/jasmine/tests/hover_pie_test.js @@ -0,0 +1,78 @@ +var Plotly = require('@src/index'); +var Lib = require('@src/lib'); + +var createGraphDiv = require('../assets/create_graph_div'); +var destroyGraphDiv = require('../assets/destroy_graph_div'); +var mouseEvent = require('../assets/mouse_event'); + +describe('pie hovering', function () { + var mock = require('@mocks/pie_simple.json'); + + describe('event data', function () { + var mockCopy = Lib.extendDeep({}, mock), + width = mockCopy.layout.width, + height = mockCopy.layout.height, + gd; + + beforeEach(function (done) { + gd = createGraphDiv(); + + Plotly.plot(gd, mockCopy.data, mockCopy.layout) + .then(done); + }); + + afterEach(destroyGraphDiv); + + it('should contain the correct fields', function () { + + var expected = [{ + v: 4, + label: '3', + color: '#ff7f0e', + i: 3, + hidden: false, + text: '26.7%', + px1: [0,-60], + pxmid: [-44.588689528643656,-40.14783638153149], + midangle: -0.8377580409572781, + px0: [-59.67131372209641,6.2717077960592], + largeArc: 0, + cxFinal: 200, + cyFinal: 160 + }], + futureData; + + + gd.on('plotly_hover', function (data) { + futureData = data; + }); + + mouseEvent('mouseover', width / 2, height / 2); + expect(futureData.points.length).toEqual(1); + expect(Object.keys(futureData.points[0])).toEqual([ + 'v', 'label', 'color', 'i', 'hidden', + 'text', 'px1', 'pxmid', 'midangle', + 'px0', 'largeArc', 'cxFinal', 'cyFinal' + ]); + expect(futureData.points[0].i).toEqual(3); + }); + + it('should fire when moving from one slice to another', function (done) { + var count = 0 + futureData = []; + + gd.on('plotly_hover', function (data) { + count++; + futureData.push(data); + }); + + mouseEvent('mouseover', 180, 140); + setTimeout(function () { + mouseEvent('mouseover', 240, 200); + expect(count).toEqual(2); + expect(futureData[0]).not.toEqual(futureData[1]) + done(); + }, 100); + }); + }); +});