Merge pull request #150 from plotly/hover-pie

Pie-chart hover events

Author: mdtusz

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,

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;
                 }
 

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);
+};

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);
+        });
+    });
+});