ngx-echarts/fesm5/ngx-echarts.js

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

import { of, empty, Subject } from 'rxjs';
import { Directive, ElementRef, Input, Output, HostListener, EventEmitter, NgZone, NgModule } from '@angular/core';
import { debounceTime } from 'rxjs/operators';
import { init } from 'echarts';

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var ChangeFilter = /** @class */ (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 of(value);
            }
        }
        return empty();
    };
    /**
     * @template T
     * @param {?} key
     * @return {?}
     */
    ChangeFilter.prototype.has = function (key) {
        if (this._changes[key]) {
            var /** @type {?} */ value = this._changes[key].currentValue;
            return of(value);
        }
        return 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 of(value);
        }
        return 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 of(value);
            }
        }
        return empty();
    };
    return ChangeFilter;
}());

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var EChartEvents = /** @class */ (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 = /** @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;
}());
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'],] },],
};

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
var NgxEchartsModule = /** @class */ (function () {
    function NgxEchartsModule() {
    }
    return NgxEchartsModule;
}());
NgxEchartsModule.decorators = [
    { type: NgModule, args: [{
                imports: [],
                declarations: [
                    NgxEchartsDirective
                ],
                exports: [
                    NgxEchartsDirective
                ]
            },] },
];

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */

export { NgxEchartsModule, NgxEchartsDirective as ɵa };
//# sourceMappingURL=ngx-echarts.js.map