ngx-echarts
Version:
<!-- Badges section here. --> [][npm-badge-url] [][npm-badge-url] [][ci
353 lines (352 loc) • 12.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
import { Directive, ElementRef, Input, Output, HostListener, EventEmitter, NgZone } from '@angular/core';
import { ChangeFilter } from './change-filter';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { init } from 'echarts';
import { EChartEvents } from './echart-events';
export class NgxEchartsDirective {
/**
* @param {?} el
* @param {?} _ngZone
*/
constructor(el, _ngZone) {
this.el = el;
this._ngZone = _ngZone;
this.autoResize = true;
this.loadingType = 'default';
/**
* Whether to register event handlers on echartInstance. Default is true.
* Use it to avoid unwanted change detection, if you want to optimize the performance.
*/
this.detectEventChanges = true;
// chart events:
this.chartInit = new EventEmitter();
this.chartClick = new EventEmitter();
this.chartDblClick = new EventEmitter();
this.chartMouseDown = new EventEmitter();
this.chartMouseUp = new EventEmitter();
this.chartMouseOver = new EventEmitter();
this.chartMouseOut = new EventEmitter();
this.chartGlobalOut = new EventEmitter();
this.chartContextMenu = new EventEmitter();
this.chartDataZoom = new EventEmitter();
this.currentOffsetWidth = 0;
this.currentOffsetHeight = 0;
this._resize$ = new Subject();
}
/**
* @return {?}
*/
createChart() {
this.currentWindowWidth = window.innerWidth;
this.currentOffsetWidth = this.el.nativeElement.offsetWidth;
this.currentOffsetHeight = this.el.nativeElement.offsetHeight;
const /** @type {?} */ dom = this.el.nativeElement;
if (window && window.getComputedStyle) {
const /** @type {?} */ prop = window.getComputedStyle(dom, null).getPropertyValue('height');
if ((!prop || prop === '0px') &&
(!dom.style.height || dom.style.height === '0px')) {
dom.style.height = '400px';
}
}
return this._ngZone.runOutsideAngular(() => init(dom, this.theme || undefined, this.initOpts || undefined));
}
/**
* @param {?} event
* @return {?}
*/
onWindowResize(event) {
const /** @type {?} */ target = /** @type {?} */ (event.target);
if (this.autoResize && target.innerWidth !== this.currentWindowWidth) {
this.currentWindowWidth = target.innerWidth;
this.currentOffsetWidth = this.el.nativeElement.offsetWidth;
this.currentOffsetHeight = this.el.nativeElement.offsetHeight;
this._resize$.next();
}
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
const /** @type {?} */ filter = ChangeFilter.of(changes);
filter.notFirstAndEmpty('options').subscribe(opt => this.onOptionsChange(opt));
filter.notFirstAndEmpty('merge').subscribe(opt => this.setOption(opt));
filter.has('loading').subscribe(v => this.toggleLoading(!!v));
filter.notFirst('detectEventChanges').subscribe(v => this.toggleEventDetectors(!!v));
filter.notFirst('theme').subscribe(() => this.refreshChart());
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this._resizeSub) {
this._resizeSub.unsubscribe();
this._resizeSub = null;
}
if (this._chart) {
this._chart.dispose();
this._chart = null;
}
}
/**
* @return {?}
*/
ngDoCheck() {
// No heavy work in DoCheck!
if (this._chart && this.autoResize) {
const /** @type {?} */ offsetWidth = this.el.nativeElement.offsetWidth;
const /** @type {?} */ offsetHeight = this.el.nativeElement.offsetHeight;
if (this.currentOffsetWidth !== offsetWidth || this.currentOffsetHeight !== offsetHeight) {
this.currentOffsetWidth = offsetWidth;
this.currentOffsetHeight = offsetHeight;
this._resize$.next();
}
}
}
/**
* @return {?}
*/
ngAfterViewInit() {
setTimeout(() => this.initChart());
}
/**
* @return {?}
*/
initChart() {
this.onOptionsChange(this.options);
if (this.merge && this._chart) {
this.setOption(this.merge);
}
}
/**
* @param {?} opt
* @return {?}
*/
onOptionsChange(opt) {
if (opt) {
if (!this._chart) {
this._chart = this.createChart();
// subscribe to _resize$ and debounced
this._resizeSub = this._resize$.pipe(debounceTime(50)).subscribe(() => {
if (this._chart) {
this._chart.resize();
}
});
// output echart instance:
this.chartInit.emit(this._chart);
// register events:
if (this.detectEventChanges) {
this.registerEvents();
}
}
this._chart.setOption(this.options, true);
}
}
/**
* @return {?}
*/
registerEvents() {
if (this._chart) {
const /** @type {?} */ events = EChartEvents.All;
for (let /** @type {?} */ i = 0, /** @type {?} */ len = events.length; i < len; i++) {
this._chart.on(events[i], this.eventHandler, this);
}
}
}
/**
* @return {?}
*/
unregisterEvents() {
if (this._chart) {
const /** @type {?} */ events = EChartEvents.All;
for (let /** @type {?} */ i = 0, /** @type {?} */ len = events.length; i < len; i++) {
this._chart.off(events[i], this.eventHandler);
}
}
}
/**
* @return {?}
*/
clear() {
if (this._chart) {
this._chart.clear();
}
}
/**
* @param {?} loading
* @return {?}
*/
toggleLoading(loading) {
if (this._chart) {
loading ? this._chart.showLoading(this.loadingType, this.loadingOpts) : this._chart.hideLoading();
}
}
/**
* @param {?} option
* @param {?=} opts
* @return {?}
*/
setOption(option, opts) {
if (this._chart) {
this._chart.setOption(option, opts);
}
}
/**
* @param {?} event
* @return {?}
*/
eventHandler(event) {
switch (event.type) {
case EChartEvents.Click:
this._ngZone.run(() => this.chartClick.emit(event));
break;
case EChartEvents.DblClick:
this._ngZone.run(() => this.chartDblClick.emit(event));
break;
case EChartEvents.MouseDown:
this._ngZone.run(() => this.chartMouseDown.emit(event));
break;
case EChartEvents.MouseUp:
this._ngZone.run(() => this.chartMouseUp.emit(event));
break;
case EChartEvents.MouseOver:
this._ngZone.run(() => this.chartMouseOver.emit(event));
break;
case EChartEvents.MouseOut:
this._ngZone.run(() => this.chartMouseOut.emit(event));
break;
case EChartEvents.GlobalOut:
this._ngZone.run(() => this.chartGlobalOut.emit(event));
break;
case EChartEvents.ContextMenu:
this._ngZone.run(() => this.chartContextMenu.emit(event));
break;
case EChartEvents.DataZoom:
this._ngZone.run(() => this.chartDataZoom.emit(event));
break;
}
}
/**
* @param {?} detect
* @return {?}
*/
toggleEventDetectors(detect) {
if (this._chart) {
detect ? this.registerEvents() : this.unregisterEvents();
}
}
/**
* @return {?}
*/
refreshChart() {
this.ngOnDestroy();
this.initChart();
}
}
NgxEchartsDirective.decorators = [
{ type: Directive, args: [{
selector: 'echarts, [echarts]',
},] },
];
/** @nocollapse */
NgxEchartsDirective.ctorParameters = () => [
{ type: ElementRef, },
{ type: NgZone, },
];
NgxEchartsDirective.propDecorators = {
"options": [{ type: Input },],
"theme": [{ type: Input },],
"loading": [{ type: Input },],
"initOpts": [{ type: Input },],
"merge": [{ type: Input },],
"autoResize": [{ type: Input },],
"loadingType": [{ type: Input },],
"loadingOpts": [{ type: Input },],
"detectEventChanges": [{ type: Input },],
"chartInit": [{ type: Output },],
"chartClick": [{ type: Output },],
"chartDblClick": [{ type: Output },],
"chartMouseDown": [{ type: Output },],
"chartMouseUp": [{ type: Output },],
"chartMouseOver": [{ type: Output },],
"chartMouseOut": [{ type: Output },],
"chartGlobalOut": [{ type: Output },],
"chartContextMenu": [{ type: Output },],
"chartDataZoom": [{ type: Output },],
"onWindowResize": [{ type: HostListener, args: ['window:resize', ['$event'],] },],
};
function NgxEchartsDirective_tsickle_Closure_declarations() {
/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
NgxEchartsDirective.decorators;
/**
* @nocollapse
* @type {function(): !Array<(null|{type: ?, decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>)})>}
*/
NgxEchartsDirective.ctorParameters;
/** @type {!Object<string,!Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
NgxEchartsDirective.propDecorators;
/** @type {?} */
NgxEchartsDirective.prototype.options;
/** @type {?} */
NgxEchartsDirective.prototype.theme;
/** @type {?} */
NgxEchartsDirective.prototype.loading;
/** @type {?} */
NgxEchartsDirective.prototype.initOpts;
/** @type {?} */
NgxEchartsDirective.prototype.merge;
/** @type {?} */
NgxEchartsDirective.prototype.autoResize;
/** @type {?} */
NgxEchartsDirective.prototype.loadingType;
/** @type {?} */
NgxEchartsDirective.prototype.loadingOpts;
/**
* Whether to register event handlers on echartInstance. Default is true.
* Use it to avoid unwanted change detection, if you want to optimize the performance.
* @type {?}
*/
NgxEchartsDirective.prototype.detectEventChanges;
/** @type {?} */
NgxEchartsDirective.prototype.chartInit;
/** @type {?} */
NgxEchartsDirective.prototype.chartClick;
/** @type {?} */
NgxEchartsDirective.prototype.chartDblClick;
/** @type {?} */
NgxEchartsDirective.prototype.chartMouseDown;
/** @type {?} */
NgxEchartsDirective.prototype.chartMouseUp;
/** @type {?} */
NgxEchartsDirective.prototype.chartMouseOver;
/** @type {?} */
NgxEchartsDirective.prototype.chartMouseOut;
/** @type {?} */
NgxEchartsDirective.prototype.chartGlobalOut;
/** @type {?} */
NgxEchartsDirective.prototype.chartContextMenu;
/** @type {?} */
NgxEchartsDirective.prototype.chartDataZoom;
/** @type {?} */
NgxEchartsDirective.prototype._chart;
/** @type {?} */
NgxEchartsDirective.prototype.currentOffsetWidth;
/** @type {?} */
NgxEchartsDirective.prototype.currentOffsetHeight;
/** @type {?} */
NgxEchartsDirective.prototype.currentWindowWidth;
/** @type {?} */
NgxEchartsDirective.prototype._resize$;
/** @type {?} */
NgxEchartsDirective.prototype._resizeSub;
/** @type {?} */
NgxEchartsDirective.prototype.el;
/** @type {?} */
NgxEchartsDirective.prototype._ngZone;
}
//# sourceMappingURL=ngx-echarts.directive.js.map