angular2-echarts
Version:
Angular directive for echarts v3.
339 lines (325 loc) • 15.6 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(require("@angular/core"));
else if(typeof define === 'function' && define.amd)
define(["@angular/core"], factory);
else if(typeof exports === 'object')
exports["angular2-echarts.umd"] = factory(require("@angular/core"));
else
root["angular2-echarts.umd"] = factory(root["@angular/core"]);
})(this, function(__WEBPACK_EXTERNAL_MODULE_1__) {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__angular_core__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AngularEchartsDirective; });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var AngularEchartsDirective = (function () {
function AngularEchartsDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
this.theme = '';
this.chartInit = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.chartClick = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.chartDblClick = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.chartMouseDown = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.chartMouseUp = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.chartMouseOver = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.chartMouseOut = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.chartGlobalOut = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.chartDataZoom = new __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"]();
this.myChart = null;
this.currentWindowWidth = null;
}
AngularEchartsDirective.prototype.createChart = function () {
this.theme = this.theme || '';
this.currentWindowWidth = window.innerWidth;
if (this.theme) {
return echarts.init(this.el.nativeElement, this.theme);
}
else {
return echarts.init(this.el.nativeElement);
}
};
AngularEchartsDirective.prototype.updateChart = function () {
this.myChart.setOption(this.options);
this.myChart.resize();
};
AngularEchartsDirective.prototype.onWindowResize = function (event) {
if (event.target.innerWidth !== this.currentWindowWidth) {
this.currentWindowWidth = event.target.innerWidth;
if (this.myChart) {
this.myChart.resize();
}
}
};
AngularEchartsDirective.prototype.ngOnChanges = function (changes) {
if (changes['dataset']) {
this.onDatasetChange(this.dataset);
}
if (changes['options']) {
this.onOptionsChange(this.options);
}
if (changes['loading']) {
this.onLoadingChange(this.loading);
}
};
AngularEchartsDirective.prototype.ngOnDestroy = function () {
if (this.myChart) {
this.myChart.dispose();
this.myChart = null;
}
};
AngularEchartsDirective.prototype.onOptionsChange = function (opt) {
if (opt) {
if (!this.myChart) {
this.myChart = this.createChart();
this.chartInit.emit(this.myChart);
this.registerEvents(this.myChart);
}
if (this.hasData()) {
this.updateChart();
}
else if (this.dataset && this.dataset.length) {
this.mergeDataset(this.dataset);
this.updateChart();
}
}
};
AngularEchartsDirective.prototype.onDatasetChange = function (dataset) {
if (this.myChart && this.options) {
if (!this.options.series) {
this.options.series = [];
}
this.mergeDataset(dataset);
this.updateChart();
}
};
AngularEchartsDirective.prototype.onLoadingChange = function (loading) {
if (this.myChart) {
if (loading) {
this.myChart.showLoading();
}
else {
this.myChart.hideLoading();
}
}
};
AngularEchartsDirective.prototype.mergeDataset = function (dataset) {
for (var i = 0, len = dataset.length; i < len; i++) {
if (!this.options.series[i]) {
this.options.series[i] = { data: dataset[i] };
}
else {
this.options.series[i].data = dataset[i];
}
}
};
AngularEchartsDirective.prototype.hasData = function () {
if (!this.options.series || !this.options.series.length) {
return false;
}
for (var _i = 0, _a = this.options.series; _i < _a.length; _i++) {
var serie = _a[_i];
if (serie.data && serie.data.length > 0) {
return true;
}
}
return false;
};
AngularEchartsDirective.prototype.registerEvents = function (myChart) {
var _this = this;
if (myChart) {
myChart.on('click', function (e) { _this.chartClick.emit(e); });
myChart.on('dblClick', function (e) { _this.chartDblClick.emit(e); });
myChart.on('mousedown', function (e) { _this.chartMouseDown.emit(e); });
myChart.on('mouseup', function (e) { _this.chartMouseUp.emit(e); });
myChart.on('mouseover', function (e) { _this.chartMouseOver.emit(e); });
myChart.on('mouseout', function (e) { _this.chartMouseOut.emit(e); });
myChart.on('globalout', function (e) { _this.chartGlobalOut.emit(e); });
myChart.on('dataZoom', function (e) { _this.chartDataZoom.emit(e); });
}
};
return AngularEchartsDirective;
}());
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(),
__metadata("design:type", Object)
], AngularEchartsDirective.prototype, "options", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(),
__metadata("design:type", Array)
], AngularEchartsDirective.prototype, "dataset", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(),
__metadata("design:type", String)
], AngularEchartsDirective.prototype, "theme", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(),
__metadata("design:type", Boolean)
], AngularEchartsDirective.prototype, "loading", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartInit", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartClick", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartDblClick", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartMouseDown", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartMouseUp", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartMouseOver", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartMouseOut", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartGlobalOut", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Output"])(),
__metadata("design:type", __WEBPACK_IMPORTED_MODULE_0__angular_core__["EventEmitter"])
], AngularEchartsDirective.prototype, "chartDataZoom", void 0);
__decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["HostListener"])('window:resize', ['$event']),
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], AngularEchartsDirective.prototype, "onWindowResize", null);
AngularEchartsDirective = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Directive"])({
selector: '[echarts]'
}),
__metadata("design:paramtypes", [__WEBPACK_IMPORTED_MODULE_0__angular_core__["ElementRef"], __WEBPACK_IMPORTED_MODULE_0__angular_core__["Renderer"]])
], AngularEchartsDirective);
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_1__;
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core__ = __webpack_require__(1);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__angular_core___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__angular_core__);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__directive_angular_echarts_directive__ = __webpack_require__(0);
/* harmony namespace reexport (by provided) */ __webpack_require__.d(__webpack_exports__, "AngularEchartsDirective", function() { return __WEBPACK_IMPORTED_MODULE_1__directive_angular_echarts_directive__["a"]; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AngularEchartsModule", function() { return AngularEchartsModule; });
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var AngularEchartsModule = (function () {
function AngularEchartsModule() {
}
return AngularEchartsModule;
}());
AngularEchartsModule = __decorate([
__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["NgModule"])({
declarations: [
__WEBPACK_IMPORTED_MODULE_1__directive_angular_echarts_directive__["a" /* AngularEchartsDirective */]
],
exports: [
__WEBPACK_IMPORTED_MODULE_1__directive_angular_echarts_directive__["a" /* AngularEchartsDirective */]
]
})
], AngularEchartsModule);
/***/ })
/******/ ]);
});
//# sourceMappingURL=angular2-echarts.umd.js.map