Pass the chart event instance to listeners (#271)

Author: stockiNail

.codeclimate.yml

@@ -1,5 +1,9 @@
 version: "2"
 checks:
+  argument-count:
+    enabled: true
+    config:
+      threshold: 5
   complex-logic:
     enabled: false
   method-complexity:

docs/guide/events.md

@@ -14,7 +14,7 @@ This plugin currently supports the following label events:
 
 ## Listeners
 
-The `listeners` option allows to register callbacks to be notified when an event is detected on a specific label. This option is an object where each property represents an event, the key being the type of the event to listen and the value being a callback accepting a unique `context` argument.
+The `listeners` option allows to register callbacks to be notified when an event is detected on a specific label. This option is an object where each property represents an event, the key being the type of the event to listen and the value being a callback accepting the `context` and `event` arguments.
 
 The `context` contains the same information as for [scriptable options](options.md#option-context), can be modified (e.g. add new properties) and thus, **if the callback explicitly returns `true`**, the label is updated with the new context and the chart re-rendered. This allows to implement visual interactions with labels such as highlight, selection, etc.
 
@@ -32,10 +32,15 @@ If no listener is registered, incoming events are immediately ignored, preventin
     datasets: [{
       datalabels: {
         listeners: {
-          click: function(context) {
+          click: function(context, event) {
             // Receives `click` events only for labels of the first dataset.
             // The clicked label index is available in `context.dataIndex`.
             console.log('label ' + context.dataIndex + ' has been clicked!');
+            console.log('mouse is at position x:', event.x, 'and y:', event.y);
+
+            if (event.native.ctrlKey) {
+              console.log('control key is pressed!');
+            }
           }
         }
       }
@@ -47,15 +52,15 @@ If no listener is registered, incoming events are immediately ignored, preventin
     plugins: {
       datalabels: {
         listeners: {
-          enter: function(context) {
+          enter: function(context, event) {
             // Receives `enter` events for any labels of any dataset. Indices of the
             // clicked label are: `context.datasetIndex` and `context.dataIndex`.
             // For example, we can modify keep track of the hovered state and
             // return `true` to update the label and re-render the chart.
             context.hovered = true;
             return true;
           },
-          leave: function(context) {
+          leave: function(context, event) {
             // Receives `leave` events for any labels of any dataset.
             context.hovered = false;
             return true;

src/plugin.js

@@ -62,7 +62,7 @@ function configure(dataset, options) {
   };
 }
 
-function dispatchEvent(chart, listeners, label) {
+function dispatchEvent(chart, listeners, label, event) {
   if (!listeners) {
     return;
   }
@@ -80,7 +80,7 @@ function dispatchEvent(chart, listeners, label) {
     return;
   }
 
-  if (callbackHelper(callback, [context]) === true) {
+  if (callbackHelper(callback, [context, event]) === true) {
     // Users are allowed to tweak the given context by injecting values that can be
     // used in scriptable options to display labels differently based on the current
     // event (e.g. highlight an hovered label). That's why we update the label with
@@ -90,7 +90,7 @@ function dispatchEvent(chart, listeners, label) {
   }
 }
 
-function dispatchMoveEvents(chart, listeners, previous, label) {
+function dispatchMoveEvents(chart, listeners, previous, label, event) {
   var enter, leave;
 
   if (!previous && !label) {
@@ -106,10 +106,10 @@ function dispatchMoveEvents(chart, listeners, previous, label) {
   }
 
   if (leave) {
-    dispatchEvent(chart, listeners.leave, previous);
+    dispatchEvent(chart, listeners.leave, previous, event);
   }
   if (enter) {
-    dispatchEvent(chart, listeners.enter, label);
+    dispatchEvent(chart, listeners.enter, label, event);
   }
 }
 
@@ -130,15 +130,15 @@ function handleMoveEvents(chart, event) {
 
   previous = expando._hovered;
   expando._hovered = label;
-  dispatchMoveEvents(chart, listeners, previous, label);
+  dispatchMoveEvents(chart, listeners, previous, label, event);
 }
 
 function handleClickEvents(chart, event) {
   var expando = chart[EXPANDO_KEY];
   var handlers = expando._listeners.click;
   var label = handlers && layout.lookup(expando._labels, event);
   if (label) {
-    dispatchEvent(chart, handlers, label);
+    dispatchEvent(chart, handlers, label, event);
   }
 }
 

test/specs/events.spec.js

@@ -80,8 +80,10 @@ describe('events', function() {
       expect(spy.calls.count()).toBe(2);
       expect(spy.calls.argsFor(0)[0].dataIndex).toBe(1);
       expect(spy.calls.argsFor(0)[0].datasetIndex).toBe(0);
+      expect(spy.calls.argsFor(0)[1].native.type).toBe('mousemove');
       expect(spy.calls.argsFor(1)[0].dataIndex).toBe(2);
       expect(spy.calls.argsFor(1)[0].datasetIndex).toBe(0);
+      expect(spy.calls.argsFor(1)[1].native.type).toBe('mousemove');
     });
   });
 
@@ -115,6 +117,7 @@ describe('events', function() {
       expect(spy.calls.count()).toBe(1);
       expect(spy.calls.argsFor(0)[0].dataIndex).toBe(1);
       expect(spy.calls.argsFor(0)[0].datasetIndex).toBe(0);
+      expect(spy.calls.argsFor(0)[1].native.type).toBe('mousemove');
     });
 
     it('should be called when the mouse moves out the canvas', async function() {
@@ -146,6 +149,7 @@ describe('events', function() {
       expect(spy.calls.count()).toBe(1);
       expect(spy.calls.argsFor(0)[0].dataIndex).toBe(1);
       expect(spy.calls.argsFor(0)[0].datasetIndex).toBe(0);
+      expect(spy.calls.argsFor(0)[1].native.type).toBe('mouseout');
     });
   });
 
@@ -175,6 +179,7 @@ describe('events', function() {
       expect(spy.calls.count()).toBe(1);
       expect(spy.calls.argsFor(0)[0].dataIndex).toBe(1);
       expect(spy.calls.argsFor(0)[0].datasetIndex).toBe(0);
+      expect(spy.calls.argsFor(0)[1].native.type).toBe('click');
     });
   });
 

types/options.d.ts

@@ -1,9 +1,10 @@
+import {ChartEvent} from 'chart.js';
 import {Context} from './context';
 
 type Align = 'bottom' | 'center' | 'end' | 'left' | 'right' | 'start' | 'top' | number;
 type Anchor = 'center' | 'end' | 'start';
 type Color = string | CanvasGradient | CanvasPattern;
-type Listener = (context: Context) => boolean | void;
+type Listener = (context: Context, event: ChartEvent) => boolean | void;
 type TextAlign = 'left' | 'right' | 'start' | 'center' | 'end';
 
 type Font = {

types/test/options.basic.ts

@@ -1,4 +1,4 @@
-import {Chart} from 'chart.js';
+import {Chart, ChartEvent} from 'chart.js';
 import {Context} from '../context';
 import {Options} from '../options';
 
@@ -45,9 +45,9 @@ const options: Options = {
       offset: 42,
       opacity: 0.42,
       listeners: {
-        click: (ctx: Context) => true,
-        enter: (ctx: Context) => false,
-        leave: (ctx: Context) => {
+        click: (ctx: Context, event: ChartEvent) => true,
+        enter: (ctx: Context, event: ChartEvent) => false,
+        leave: (ctx: Context, event: ChartEvent) => {
           // return void
         }
       },

types/test/options.context.ts

@@ -1,4 +1,4 @@
-import {Chart} from 'chart.js';
+import {Chart, ChartEvent} from 'chart.js';
 import {Context} from '../context';
 import {Options} from '../options';
 
@@ -9,7 +9,7 @@ interface CustomContext extends Context {
 const options: Options = {
   rotation: (ctx: CustomContext) => ctx.foo || 0,
   listeners: {
-    click: (ctx: CustomContext) => {
+    click: (ctx: CustomContext, event: ChartEvent) => {
       ctx.foo = 42;
     }
   },

types/test/options.inline.ts

@@ -1,4 +1,4 @@
-import {Chart} from 'chart.js';
+import {Chart, ChartEvent} from 'chart.js';
 import {Context} from '../context';
 
 const chart = new Chart('id', {
@@ -16,12 +16,12 @@ const chart = new Chart('id', {
             bla: {
               align: 'end',
               listeners: {
-                click: (ctx: Context) => true
+                click: (ctx: Context, event: ChartEvent) => true
               }
             }
           },
           listeners: {
-            click: (ctx: Context) => true
+            click: (ctx: Context, event: ChartEvent) => true
           }
         }
       }
@@ -37,12 +37,12 @@ const chart = new Chart('id', {
           bla: {
             align: 'end',
             listeners: {
-              click: (ctx: Context) => true
+              click: (ctx: Context, event: ChartEvent) => true
             }
           }
         },
         listeners: {
-          click: (ctx: Context) => true
+          click: (ctx: Context, event: ChartEvent) => true
         }
       }
     }