ngx-echarts/esm5/lib/ngx-echarts.directive.js

<!-- Badges section here. --> [][npm-badge-url] [][npm-badge-url] [][ci

/**
 * @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';
var NgxEchartsDirective = /** @class */ (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 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 {?}
     */
    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 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(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;
}());
export { NgxEchartsDirective };
NgxEchartsDirective.decorators = [
    { type: Directive, args: [{
                selector: 'echarts, [echarts]',
            },] },
];
/** @nocollapse */
NgxEchartsDirective.ctorParameters = function () { return [
    { 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