ngx-echarts/fesm2015/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
 */
class ChangeFilter {
    /**
     * @param {?} _changes
     */
    constructor(_changes) {
        this._changes = _changes;
    }
    /**
     * @param {?} changes
     * @return {?}
     */
    static of(changes) {
        return new ChangeFilter(changes);
    }
    /**
     * @template T
     * @param {?} key
     * @return {?}
     */
    notEmpty(key) {
        if (this._changes[key]) {
            const /** @type {?} */ value = this._changes[key].currentValue;
            if (value !== undefined && value !== null) {
                return of(value);
            }
        }
        return empty();
    }
    /**
     * @template T
     * @param {?} key
     * @return {?}
     */
    has(key) {
        if (this._changes[key]) {
            const /** @type {?} */ value = this._changes[key].currentValue;
            return of(value);
        }
        return empty();
    }
    /**
     * @template T
     * @param {?} key
     * @return {?}
     */
    notFirst(key) {
        if (this._changes[key] && !this._changes[key].isFirstChange()) {
            const /** @type {?} */ value = this._changes[key].currentValue;
            return of(value);
        }
        return empty();
    }
    /**
     * @template T
     * @param {?} key
     * @return {?}
     */
    notFirstAndEmpty(key) {
        if (this._changes[key] && !this._changes[key].isFirstChange()) {
            const /** @type {?} */ value = this._changes[key].currentValue;
            if (value !== undefined && value !== null) {
                return of(value);
            }
        }
        return empty();
    }
}

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

/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes} checked by tsc
 */
class 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