adding plotly_click event

Author: andrefarzat

FAQ.md

@@ -4,3 +4,10 @@
 ## How to disable plotly events ?
 
 It's possible disable some plotly events returning `false` in its event. Please see issue: https://github.com/plotly/angular-plotly.js/issues/52#issuecomment-476018478
+
+
+
+## Why using `(plotly_click)` instead of `(click)` ?
+
+Angular uses the `(click)` directive to itself. If we use the `click` name as event alias to `plotly_click` we might get unexpected behaviour from both angular and plotly.js. We believe it is simpler to just avoid using the same name is better.
+Please see issue: https://github.com/plotly/angular-plotly.js/issues/63

src/app/demo/fancyplot/fancyplot.component.html

@@ -1,3 +1,3 @@
 <div>
-    <plotly-plot [data]="graph.data" [layout]="graph.layout" [revision]="0" [debug]="true" [useResizeHandler]="true"></plotly-plot>
+    <plotly-plot (plotly_click)="onClick($event)" [data]="graph.data" [layout]="graph.layout" [revision]="0" [debug]="true" [useResizeHandler]="true"></plotly-plot>
 </div>

src/app/demo/fancyplot/fancyplot.component.ts

@@ -20,4 +20,8 @@ export class FancyplotComponent implements OnInit {
     ngOnInit() {
     }
 
+    onClick(event: any) {
+        console.log('click!');
+    }
+
 }

src/app/shared/plot/plot.component.ts

@@ -63,6 +63,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     @Output() beforeExport = new EventEmitter();
     @Output() buttonClicked = new EventEmitter();
     @Output() click = new EventEmitter();
+    @Output() plotly_click = new EventEmitter();
     @Output() clickAnnotation = new EventEmitter();
     @Output() deselect = new EventEmitter();
     @Output() doubleClick = new EventEmitter();
@@ -83,7 +84,7 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
     @Output() unhover = new EventEmitter();
 
     public eventNames = ['afterExport', 'afterPlot', 'animated', 'animatingFrame', 'animationInterrupted', 'autoSize',
-        'beforeExport', 'buttonClicked', 'click', 'clickAnnotation', 'deselect', 'doubleClick', 'framework', 'hover',
+        'beforeExport', 'buttonClicked', 'clickAnnotation', 'deselect', 'doubleClick', 'framework', 'hover',
         'legendClick', 'legendDoubleClick', 'relayout', 'restyle', 'redraw', 'selected', 'selecting', 'sliderChange',
         'sliderEnd', 'sliderStart', 'transitioning', 'transitionInterrupted', 'unhover'];
 
@@ -98,6 +99,13 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
             const figure = this.createFigure();
             this.initialized.emit(figure);
         });
+
+
+        if (this.plotly.debug && this.click.observers.length > 0) {
+            const msg = 'DEPRECATED: Reconsider using `(plotly_click)` instead of `(click)` to avoid event conflict. '
+                + 'Please check https://github.com/plotly/angular-plotly.js#FAQ';
+            console.error(msg);
+        }
     }
 
     ngOnDestroy() {
@@ -188,6 +196,11 @@ export class PlotComponent implements OnInit, OnChanges, OnDestroy, DoCheck {
                 plotlyInstance.on(eventName, (data: any) => (this[name] as EventEmitter<void>).emit(data));
             });
 
+            plotlyInstance.on('plotly_click', (data: any) => {
+                this.click.emit(data);
+                this.plotly_click.emit(data);
+            });
+
             this.updateWindowResizeHandler();
         }, err => {
             console.error('Error while plotting:', err);

src/app/shared/plotly.service.ts

@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
 import { Plotly } from './plotly.interface';
+import { environment } from '../../environments/environment';
 
 type PlotlyName = 'Plotly' | 'ViaCDN' | 'ViaWindow';
 
@@ -40,6 +41,10 @@ export class PlotlyService {
         }
     }
 
+    public get debug(): boolean {
+        return environment.production === false;
+    }
+
     public getInstanceByDivId(id: string): Plotly.PlotlyHTMLElement | undefined {
         for (const instance of PlotlyService.instances) {
             if (instance && instance.id === id) {