From 17edf42311585fe5a81214905d8ec2431a289fed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Farzat?= <andrefarzat@gmail.com>
Date: Sat, 31 Aug 2019 21:59:56 -0300
Subject: [PATCH] adding plotly_click event
---
FAQ.md | 7 +++++++
src/app/demo/fancyplot/fancyplot.component.html | 2 +-
src/app/demo/fancyplot/fancyplot.component.ts | 4 ++++
src/app/shared/plot/plot.component.ts | 15 ++++++++++++++-
src/app/shared/plotly.service.ts | 5 +++++
5 files changed, 31 insertions(+), 2 deletions(-)
diff --git a/FAQ.md b/FAQ.md
index fbcf29e..b0f2287 100644
--- a/FAQ.md
+++ b/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
diff --git a/src/app/demo/fancyplot/fancyplot.component.html b/src/app/demo/fancyplot/fancyplot.component.html
index b965f27..c8400b6 100644
--- a/src/app/demo/fancyplot/fancyplot.component.html
+++ b/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>
diff --git a/src/app/demo/fancyplot/fancyplot.component.ts b/src/app/demo/fancyplot/fancyplot.component.ts
index 2ac0b31..1d7ea56 100644
--- a/src/app/demo/fancyplot/fancyplot.component.ts
+++ b/src/app/demo/fancyplot/fancyplot.component.ts
@@ -20,4 +20,8 @@ export class FancyplotComponent implements OnInit {
ngOnInit() {
}
+ onClick(event: any) {
+ console.log('click!');
+ }
+
}
diff --git a/src/app/shared/plot/plot.component.ts b/src/app/shared/plot/plot.component.ts
index 25391b6..7257af1 100644
--- a/src/app/shared/plot/plot.component.ts
+++ b/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);
diff --git a/src/app/shared/plotly.service.ts b/src/app/shared/plotly.service.ts
index 59b00d9..f10faec 100644
--- a/src/app/shared/plotly.service.ts
+++ b/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) {