import * as tslib_1 from "tslib";
import { Component, Input, Output, EventEmitter, ElementRef, Renderer2, ViewChild, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { init } from 'echarts';
import { OnChange } from '../core/decorators';
/**
 * Chart Component, depends on [Echarts](http://echarts.baidu.com/)
 */
var ChartComponent = /** @class */ (function () {
    function ChartComponent(_el, _renderer) {
        this._el = _el;
        this._renderer = _renderer;
        /**
         * chart init event
         */
        this.chartInit = new EventEmitter();
        /**
         * chart event
         */
        this.chartEvent = new EventEmitter();
        /**
         * chart event name
         * @default click
         */
        this.eventName = 'click';
        /**
         * chart width, can be a number(400) or a percent(30%)
         * @default 600
         */
        this.width = 600;
        this.widthChange = new EventEmitter();
        /**
         * chart height, can be a number(400) or a percent(30%)
         * @default 400
         */
        this.height = 400;
        this.heightChange = new EventEmitter();
        /**
         * chart title
         * @default ''
         */
        this.chartTitle = '';
        /**
         * callback when chart options change
         * @docs-private
         */
        this.optionsChange = new EventEmitter();
        /** if chart event is binded */
        this._eventBinded = false;
        this.setOptionsChangeListener();
    }
    /**
     * set window resize handler
     * @docs-private
     */
    ChartComponent.prototype.setOptionsChangeListener = function () {
        var _this = this;
        this.optionsChange.subscribe(function (options) {
            try {
                if (!_this._chartInstance && _this._chartContainer) {
                    var container = _this._chartContainer.nativeElement;
                    var width = _this.width + '';
                    var height = _this.height + '';
                    var widthUnit = width.indexOf('%') === -1 ? 'px' : '';
                    var heightUnit = height.indexOf('%') === -1 ? 'px' : '';
                    _this._renderer.setStyle(container, 'width', width + widthUnit);
                    _this._renderer.setStyle(container, 'height', height + heightUnit);
                    _this._chartInstance = init(container);
                    _this.chartInit.emit(_this._chartInstance);
                }
                _this._chartInstance.setOption(options, true);
                // if the event is binded, don't bind it again, otherwise their will be multi events
                if (_this.eventName && !_this._eventBinded) {
                    _this._chartInstance.on(_this.eventName, function (params) {
                        _this.chartEvent.emit({
                            target: _this._chartInstance,
                            params: params
                        });
                    });
                    _this._eventBinded = true;
                }
            }
            catch (_a) {
                throw new Error('chart component may not work in web work or universal apps');
            }
        });
        this.heightChange.subscribe(function (height) {
            if (_this._chartInstance) {
                var container = _this._chartContainer.nativeElement;
                var heightUnit = (height + '').indexOf('%') === -1 ? 'px' : '';
                _this._renderer.setStyle(container, 'height', height + heightUnit);
                _this._chartInstance.resize({
                    height: height
                });
            }
        });
        this.widthChange.subscribe(function (width) {
            if (_this._chartInstance) {
                var container = _this._chartContainer.nativeElement;
                var widthUnit = (width + '').indexOf('%') === -1 ? 'px' : '';
                _this._renderer.setStyle(container, 'width', width + widthUnit);
                _this._chartInstance.resize({
                    width: width
                });
            }
        });
    };
    ChartComponent.prototype.ngAfterViewInit = function () {
        var _this = this;
        this._resizeListener = this._renderer.listen('window', 'resize', function () {
            _this._chartInstance.resize();
        });
    };
    ChartComponent.prototype.ngOnDestroy = function () {
        if (this._chartInstance) {
            this._chartInstance.dispose();
            this._chartInstance = null;
        }
        if (this._resizeListener) {
            this._resizeListener();
        }
    };
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], ChartComponent.prototype, "chartInit", void 0);
    tslib_1.__decorate([
        Output(),
        tslib_1.__metadata("design:type", EventEmitter)
    ], ChartComponent.prototype, "chartEvent", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], ChartComponent.prototype, "eventName", void 0);
    tslib_1.__decorate([
        OnChange(),
        Input(),
        tslib_1.__metadata("design:type", Object)
    ], ChartComponent.prototype, "width", void 0);
    tslib_1.__decorate([
        OnChange(),
        Input(),
        tslib_1.__metadata("design:type", Object)
    ], ChartComponent.prototype, "height", void 0);
    tslib_1.__decorate([
        Input(),
        tslib_1.__metadata("design:type", String)
    ], ChartComponent.prototype, "chartTitle", void 0);
    tslib_1.__decorate([
        OnChange(),
        Input(),
        tslib_1.__metadata("design:type", Object)
    ], ChartComponent.prototype, "options", void 0);
    tslib_1.__decorate([
        ViewChild('chartContainer', { static: true }),
        tslib_1.__metadata("design:type", ElementRef)
    ], ChartComponent.prototype, "_chartContainer", void 0);
    ChartComponent = tslib_1.__decorate([
        Component({
            selector: 'nb-chart',
            template: "<div class=\"echarts-title\">{{ chartTitle }}</div><div class=\"echarts-container\" #chartContainer></div>",
            encapsulation: ViewEncapsulation.None,
            changeDetection: ChangeDetectionStrategy.OnPush,
            preserveWhitespaces: false,
            host: {
                'class': 'nb-widget nb-chart'
            },
            exportAs: 'nbChart'
        }),
        tslib_1.__metadata("design:paramtypes", [ElementRef, Renderer2])
    ], ChartComponent);
    return ChartComponent;
}());
export { ChartComponent };
//# sourceMappingURL=chart.js.map