ngx-echarts
Version:
<!-- Badges section here. --> [][npm-badge-url] [][npm-badge-url] [][ci
420 lines (415 loc) • 16.4 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('@angular/core'), require('rxjs/operators'), require('echarts')) :
typeof define === 'function' && define.amd ? define('ngx-echarts', ['exports', 'rxjs', '@angular/core', 'rxjs/operators', 'echarts'], factory) :
(factory((global['ngx-echarts'] = {}),null,global.ng.core,global.Rx.Observable.prototype,null));
}(this, (function (exports,rxjs,core,operators,echarts) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var ChangeFilter = (function () {
/**
* @param {?} _changes
*/
function ChangeFilter(_changes) {
this._changes = _changes;
}
/**
* @param {?} changes
* @return {?}
*/
ChangeFilter.of = function (changes) {
return new ChangeFilter(changes);
};
/**
* @template T
* @param {?} key
* @return {?}
*/
ChangeFilter.prototype.notEmpty = function (key) {
if (this._changes[key]) {
var /** @type {?} */ value = this._changes[key].currentValue;
if (value !== undefined && value !== null) {
return rxjs.of(value);
}
}
return rxjs.empty();
};
/**
* @template T
* @param {?} key
* @return {?}
*/
ChangeFilter.prototype.has = function (key) {
if (this._changes[key]) {
var /** @type {?} */ value = this._changes[key].currentValue;
return rxjs.of(value);
}
return rxjs.empty();
};
/**
* @template T
* @param {?} key
* @return {?}
*/
ChangeFilter.prototype.notFirst = function (key) {
if (this._changes[key] && !this._changes[key].isFirstChange()) {
var /** @type {?} */ value = this._changes[key].currentValue;
return rxjs.of(value);
}
return rxjs.empty();
};
/**
* @template T
* @param {?} key
* @return {?}
*/
ChangeFilter.prototype.notFirstAndEmpty = function (key) {
if (this._changes[key] && !this._changes[key].isFirstChange()) {
var /** @type {?} */ value = this._changes[key].currentValue;
if (value !== undefined && value !== null) {
return rxjs.of(value);
}
}
return rxjs.empty();
};
return ChangeFilter;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var EChartEvents = (function () {
function EChartEvents() {
}
return EChartEvents;
}());
EChartEvents.Click = 'click';
EChartEvents.DblClick = 'dblclick';
EChartEvents.MouseDown = 'mousedown';
EChartEvents.MouseUp = 'mouseup';
EChartEvents.MouseOver = 'mouseover';
EChartEvents.MouseOut = 'mouseout';
EChartEvents.GlobalOut = 'globalout';
EChartEvents.ContextMenu = 'contextmenu';
EChartEvents.DataZoom = 'datazoom';
EChartEvents.All = [
EChartEvents.Click,
EChartEvents.DblClick,
EChartEvents.MouseDown,
EChartEvents.MouseUp,
EChartEvents.MouseOver,
EChartEvents.MouseOut,
EChartEvents.GlobalOut,
EChartEvents.ContextMenu,
EChartEvents.DataZoom,
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var NgxEchartsDirective = (function () {
/**
* @param {?} el
* @param {?} _ngZone
*/
function NgxEchartsDirective(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 core.EventEmitter();
this.chartClick = new core.EventEmitter();
this.chartDblClick = new core.EventEmitter();
this.chartMouseDown = new core.EventEmitter();
this.chartMouseUp = new core.EventEmitter();
this.chartMouseOver = new core.EventEmitter();
this.chartMouseOut = new core.EventEmitter();
this.chartGlobalOut = new core.EventEmitter();
this.chartContextMenu = new core.EventEmitter();
this.chartDataZoom = new core.EventEmitter();
this.currentOffsetWidth = 0;
this.currentOffsetHeight = 0;
this._resize$ = new rxjs.Subject();
}
/**
* @return {?}
*/
NgxEchartsDirective.prototype.createChart = function () {
var _this = this;
this.currentWindowWidth = window.innerWidth;
this.currentOffsetWidth = this.el.nativeElement.offsetWidth;
this.currentOffsetHeight = this.el.nativeElement.offsetHeight;
var /** @type {?} */ dom = this.el.nativeElement;
if (window && window.getComputedStyle) {
var /** @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(function () { return echarts.init(dom, _this.theme || undefined, _this.initOpts || undefined); });
};
/**
* @param {?} event
* @return {?}
*/
NgxEchartsDirective.prototype.onWindowResize = function (event) {
var /** @type {?} */ target = (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 {?}
*/
NgxEchartsDirective.prototype.ngOnChanges = function (changes) {
var _this = this;
var /** @type {?} */ filter = ChangeFilter.of(changes);
filter.notFirstAndEmpty('options').subscribe(function (opt) { return _this.onOptionsChange(opt); });
filter.notFirstAndEmpty('merge').subscribe(function (opt) { return _this.setOption(opt); });
filter.has('loading').subscribe(function (v) { return _this.toggleLoading(!!v); });
filter.notFirst('detectEventChanges').subscribe(function (v) { return _this.toggleEventDetectors(!!v); });
filter.notFirst('theme').subscribe(function () { return _this.refreshChart(); });
};
/**
* @return {?}
*/
NgxEchartsDirective.prototype.ngOnDestroy = function () {
if (this._resizeSub) {
this._resizeSub.unsubscribe();
this._resizeSub = null;
}
if (this._chart) {
this._chart.dispose();
this._chart = null;
}
};
/**
* @return {?}
*/
NgxEchartsDirective.prototype.ngDoCheck = function () {
// No heavy work in DoCheck!
if (this._chart && this.autoResize) {
var /** @type {?} */ offsetWidth = this.el.nativeElement.offsetWidth;
var /** @type {?} */ offsetHeight = this.el.nativeElement.offsetHeight;
if (this.currentOffsetWidth !== offsetWidth || this.currentOffsetHeight !== offsetHeight) {
this.currentOffsetWidth = offsetWidth;
this.currentOffsetHeight = offsetHeight;
this._resize$.next();
}
}
};
/**
* @return {?}
*/
NgxEchartsDirective.prototype.ngAfterViewInit = function () {
var _this = this;
setTimeout(function () { return _this.initChart(); });
};
/**
* @return {?}
*/
NgxEchartsDirective.prototype.initChart = function () {
this.onOptionsChange(this.options);
if (this.merge && this._chart) {
this.setOption(this.merge);
}
};
/**
* @param {?} opt
* @return {?}
*/
NgxEchartsDirective.prototype.onOptionsChange = function (opt) {
var _this = this;
if (opt) {
if (!this._chart) {
this._chart = this.createChart();
// subscribe to _resize$ and debounced
this._resizeSub = this._resize$.pipe(operators.debounceTime(50)).subscribe(function () {
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 {?}
*/
NgxEchartsDirective.prototype.registerEvents = function () {
if (this._chart) {
var /** @type {?} */ events = EChartEvents.All;
for (var /** @type {?} */ i = 0, /** @type {?} */ len = events.length; i < len; i++) {
this._chart.on(events[i], this.eventHandler, this);
}
}
};
/**
* @return {?}
*/
NgxEchartsDirective.prototype.unregisterEvents = function () {
if (this._chart) {
var /** @type {?} */ events = EChartEvents.All;
for (var /** @type {?} */ i = 0, /** @type {?} */ len = events.length; i < len; i++) {
this._chart.off(events[i], this.eventHandler);
}
}
};
/**
* @return {?}
*/
NgxEchartsDirective.prototype.clear = function () {
if (this._chart) {
this._chart.clear();
}
};
/**
* @param {?} loading
* @return {?}
*/
NgxEchartsDirective.prototype.toggleLoading = function (loading) {
if (this._chart) {
loading ? this._chart.showLoading(this.loadingType, this.loadingOpts) : this._chart.hideLoading();
}
};
/**
* @param {?} option
* @param {?=} opts
* @return {?}
*/
NgxEchartsDirective.prototype.setOption = function (option, opts) {
if (this._chart) {
this._chart.setOption(option, opts);
}
};
/**
* @param {?} event
* @return {?}
*/
NgxEchartsDirective.prototype.eventHandler = function (event) {
var _this = this;
switch (event.type) {
case EChartEvents.Click:
this._ngZone.run(function () { return _this.chartClick.emit(event); });
break;
case EChartEvents.DblClick:
this._ngZone.run(function () { return _this.chartDblClick.emit(event); });
break;
case EChartEvents.MouseDown:
this._ngZone.run(function () { return _this.chartMouseDown.emit(event); });
break;
case EChartEvents.MouseUp:
this._ngZone.run(function () { return _this.chartMouseUp.emit(event); });
break;
case EChartEvents.MouseOver:
this._ngZone.run(function () { return _this.chartMouseOver.emit(event); });
break;
case EChartEvents.MouseOut:
this._ngZone.run(function () { return _this.chartMouseOut.emit(event); });
break;
case EChartEvents.GlobalOut:
this._ngZone.run(function () { return _this.chartGlobalOut.emit(event); });
break;
case EChartEvents.ContextMenu:
this._ngZone.run(function () { return _this.chartContextMenu.emit(event); });
break;
case EChartEvents.DataZoom:
this._ngZone.run(function () { return _this.chartDataZoom.emit(event); });
break;
}
};
/**
* @param {?} detect
* @return {?}
*/
NgxEchartsDirective.prototype.toggleEventDetectors = function (detect) {
if (this._chart) {
detect ? this.registerEvents() : this.unregisterEvents();
}
};
/**
* @return {?}
*/
NgxEchartsDirective.prototype.refreshChart = function () {
this.ngOnDestroy();
this.initChart();
};
return NgxEchartsDirective;
}());
NgxEchartsDirective.decorators = [
{ type: core.Directive, args: [{
selector: 'echarts, [echarts]',
},] },
];
/** @nocollapse */
NgxEchartsDirective.ctorParameters = function () {
return [
{ type: core.ElementRef, },
{ type: core.NgZone, },
];
};
NgxEchartsDirective.propDecorators = {
"options": [{ type: core.Input },],
"theme": [{ type: core.Input },],
"loading": [{ type: core.Input },],
"initOpts": [{ type: core.Input },],
"merge": [{ type: core.Input },],
"autoResize": [{ type: core.Input },],
"loadingType": [{ type: core.Input },],
"loadingOpts": [{ type: core.Input },],
"detectEventChanges": [{ type: core.Input },],
"chartInit": [{ type: core.Output },],
"chartClick": [{ type: core.Output },],
"chartDblClick": [{ type: core.Output },],
"chartMouseDown": [{ type: core.Output },],
"chartMouseUp": [{ type: core.Output },],
"chartMouseOver": [{ type: core.Output },],
"chartMouseOut": [{ type: core.Output },],
"chartGlobalOut": [{ type: core.Output },],
"chartContextMenu": [{ type: core.Output },],
"chartDataZoom": [{ type: core.Output },],
"onWindowResize": [{ type: core.HostListener, args: ['window:resize', ['$event'],] },],
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes} checked by tsc
*/
var NgxEchartsModule = (function () {
function NgxEchartsModule() {
}
return NgxEchartsModule;
}());
NgxEchartsModule.decorators = [
{ type: core.NgModule, args: [{
imports: [],
declarations: [
NgxEchartsDirective
],
exports: [
NgxEchartsDirective
]
},] },
];
exports.NgxEchartsModule = NgxEchartsModule;
exports.ɵa = NgxEchartsDirective;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-echarts.umd.js.map