Run event handlers in zone (#1365)

* Run event handlers in zone

* Updated screenshots

angular.json

@@ -17,7 +17,6 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "preserveSymlinks": true,
             "outputPath": "dist/ng2-charts-demo",
             "index": "src/index.html",
             "main": "src/main.ts",

package.json

@@ -22,16 +22,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.0.3",
-    "@angular/cdk": "^13.0.3",
-    "@angular/common": "^13.0.3",
-    "@angular/compiler": "^13.0.3",
-    "@angular/core": "^13.0.3",
-    "@angular/forms": "^13.0.3",
-    "@angular/material": "^13.0.3",
-    "@angular/platform-browser": "^13.0.3",
-    "@angular/platform-browser-dynamic": "^13.0.3",
-    "@angular/router": "^13.0.3",
+    "@angular/animations": "^13.1.1",
+    "@angular/cdk": "^13.1.1",
+    "@angular/common": "^13.1.1",
+    "@angular/compiler": "^13.1.1",
+    "@angular/core": "^13.1.1",
+    "@angular/forms": "^13.1.1",
+    "@angular/material": "^13.1.1",
+    "@angular/platform-browser": "^13.1.1",
+    "@angular/platform-browser-dynamic": "^13.1.1",
+    "@angular/router": "^13.1.1",
     "chart.js": "^3.6.0",
     "chartjs-adapter-date-fns": "^2.0.0",
     "chartjs-chart-financial": "^0.1.0",
@@ -48,18 +48,18 @@
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.0.4",
-    "@angular-devkit/core": "^13.0.4",
-    "@angular-devkit/schematics": "^13.0.4",
+    "@angular-devkit/build-angular": "^13.1.2",
+    "@angular-devkit/core": "^13.1.2",
+    "@angular-devkit/schematics": "^13.1.2",
     "@angular-eslint/builder": "^13.0.1",
     "@angular-eslint/eslint-plugin": "^13.0.1",
     "@angular-eslint/eslint-plugin-template": "^13.0.1",
     "@angular-eslint/schematics": "^13.0.1",
     "@angular-eslint/template-parser": "^13.0.1",
-    "@angular/cli": "^13.0.4",
-    "@angular/compiler-cli": "^13.0.3",
-    "@angular/language-service": "^13.0.3",
-    "@nrwl/cypress": "^13.2.3",
+    "@angular/cli": "^13.1.2",
+    "@angular/compiler-cli": "^13.1.1",
+    "@angular/language-service": "^13.1.1",
+    "@nrwl/cypress": "^13.4.3",
     "@schematics/angular": "^13.0.3",
     "@types/jasmine": "~3.8.0",
     "@types/jasminewd2": "^2.0.10",
@@ -68,6 +68,7 @@
     "@types/node": "^14.17.32",
     "@typescript-eslint/eslint-plugin": "^5.5.0",
     "@typescript-eslint/parser": "^5.5.0",
+    "chartjs-test-utils": "^0.3.1",
     "cypress": "^9.1.0",
     "cypress-image-snapshot": "^4.0.1",
     "eslint": "^8.2.0",
@@ -88,4 +89,4 @@
     "tslib": "^2.3.1",
     "typescript": "~4.4.4"
   }
-}
+}

projects/ng2-charts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-charts",
-  "version": "3.0.5",
+  "version": "3.0.6",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

projects/ng2-charts/src/lib/base-chart.directive.spec.ts

@@ -1,19 +1,22 @@
 import { BaseChartDirective } from './base-chart.directive';
 import { By } from '@angular/platform-browser';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Component } from '@angular/core';
 import { Chart, registerables } from "chart.js";
 
 @Component({
   template: '<canvas baseChart' +
     ' [data]="data"' +
     ' [datasets]="datasets"' +
-    ' [labels]="labels"></canvas>'
+    ' [labels]="labels"' +
+    ' (chartClick)="click()"></canvas>'
 })
 class TestComponent {
   public data?: any
   public datasets?: any[]
   public labels?: string[]
+  public click? = jasmine.createSpy('chartClick')
+  public hover? = jasmine.createSpy('chartHover')
 }
 
 describe('BaseChartDirective', () => {
@@ -79,7 +82,7 @@ describe('BaseChartDirective', () => {
     expect(directive.chart?.data.labels).toEqual(element.data.labels);
 
     element.data = {
-      labels: [ 'Life', 'Universe', 'Everything'],
+      labels: [ 'Life', 'Universe', 'Everything' ],
       datasets: []
     }
 
@@ -89,4 +92,26 @@ describe('BaseChartDirective', () => {
     expect(directive.chart?.data?.labels && directive.chart?.data?.labels[0]).not.toEqual('Answers');
   });
 
+  it('should emit when the chart is clicked', fakeAsync(() => {
+
+    fixture.detectChanges();
+
+    let canvas = fixture.nativeElement.querySelector('canvas');
+
+    canvas.dispatchEvent(
+      new MouseEvent(
+        "click",
+        {
+          clientX: canvas.getBoundingClientRect().left + 50,
+          clientY: canvas.getBoundingClientRect().top + 50,
+          bubbles: true
+        }
+      )
+    );
+
+    tick(25);
+
+    expect(element.click).toHaveBeenCalled();
+  }));
+
 });

projects/ng2-charts/src/lib/base-chart.directive.ts

@@ -121,13 +121,18 @@ export class BaseChartDirective<TType extends ChartType = ChartType,
   private getChartOptions(): ChartConfiguration<TType, TData, TLabel>['options'] {
     return merge({
         onHover: (event: ChartEvent, active: {}[]) => {
-          if (active && !active.length) {
+          if (this.chartHover.observed && active && !active.length) {
             return;
           }
-          this.chartHover.emit({ event, active });
+
+          this.zone.run(() => this.chartHover.emit({ event, active }));
         },
         onClick: (event?: ChartEvent, active?: {}[]) => {
-          this.chartClick.emit({ event, active });
+          if(!this.chartClick.observed){
+            return;
+          }
+
+          this.zone.run(() => this.chartClick.emit({ event, active }));
         }
       },
       this.themeOverrides,

src/app/bar-chart/bar-chart.component.html

@@ -5,7 +5,9 @@
         [data]="barChartData"
         [options]="barChartOptions"
         [plugins]="barChartPlugins"
-        [type]="barChartType">
+        [type]="barChartType"
+        (chartHover)="chartHovered($event)"
+        (chartClick)="chartClicked($event)">
       </canvas>
     </div>
     <button mat-button mat-raised-button color="primary" (click)="randomize()">Update</button>

src/app/bar-chart/bar-chart.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
-import { ChartConfiguration, ChartData, ChartType } from 'chart.js';
+import { ChartConfiguration, ChartData, ChartEvent, ChartType } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 
 import DataLabelsPlugin from 'chartjs-plugin-datalabels';
@@ -45,11 +45,11 @@ export class BarChartComponent {
   };
 
   // events
-  public chartClicked({ event, active }: { event: MouseEvent, active: {}[] }): void {
+  public chartClicked({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
     console.log(event, active);
   }
 
-  public chartHovered({ event, active }: { event: MouseEvent, active: {}[] }): void {
+  public chartHovered({ event, active }: { event?: ChartEvent, active?: {}[] }): void {
     console.log(event, active);
   }