ng4-charts
Version:
Reactive, responsive, beautiful charts for Angular2 based on Chart.js
416 lines (406 loc) • 14.9 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["ng4-charts.umd"] = factory(require("@angular/core"));
else
root["ng4-charts.umd"] = factory(root["@angular/core"]);
})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_2__) {
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;
/******/
/******/ // 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 = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
;
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
__export(__webpack_require__(1));
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
;
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 core_1 = __webpack_require__(2);
/* tslint:disable-next-line */
var BaseChartDirective = (function () {
function BaseChartDirective(element) {
this.labels = [];
this.options = {};
this.chartClick = new core_1.EventEmitter();
this.chartHover = new core_1.EventEmitter();
this.initFlag = false;
this.element = element;
}
BaseChartDirective.prototype.ngOnInit = function () {
this.ctx = this.element.nativeElement.getContext('2d');
this.cvs = this.element.nativeElement;
this.initFlag = true;
if (this.data || this.datasets) {
this.refresh();
}
};
BaseChartDirective.prototype.ngOnChanges = function (changes) {
if (this.initFlag) {
var changeRequiresChartRefresh = false;
if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
this.chart.data.datasets = this.getDatasets();
}
if (changes.hasOwnProperty('labels')) {
this.chart.data.labels = this.labels;
}
if (changes.hasOwnProperty('options')) {
this.chart.options = this.options;
changeRequiresChartRefresh = true;
}
changeRequiresChartRefresh ? this.refresh() : this.chart.update();
}
};
BaseChartDirective.prototype.ngOnDestroy = function () {
if (this.chart) {
this.chart.destroy();
this.chart = void 0;
}
};
BaseChartDirective.prototype.getChartBuilder = function (ctx /*, data:Array<any>, options:any*/) {
var _this = this;
var datasets = this.getDatasets();
var options = Object.assign({}, this.options);
if (this.legend === false) {
options.legend = { display: false };
}
// hock for onHover and onClick events
options.hover = options.hover || {};
if (!options.hover.onHover) {
options.hover.onHover = function (active) {
if (active && !active.length) {
return;
}
_this.chartHover.emit({ active: active });
};
}
if (!options.onClick) {
options.onClick = function (event, active) {
_this.chartClick.emit({ event: event, active: active });
};
}
var opts = {
type: this.chartType,
data: {
labels: this.labels,
datasets: datasets
},
options: options
};
if (typeof Chart === 'undefined') {
throw new Error('ng2-charts configuration issue: Embedding Chart.js lib is mandatory');
}
return new Chart(ctx, opts);
};
BaseChartDirective.prototype.getDatasets = function () {
var _this = this;
var datasets = void 0;
// in case if datasets is not provided, but data is present
if (!this.datasets || !this.datasets.length && (this.data && this.data.length)) {
if (Array.isArray(this.data[0])) {
datasets = this.data.map(function (data, index) {
return { data: data, label: _this.labels[index] || "Label " + index };
});
}
else {
datasets = [{ data: this.data, label: "Label 0" }];
}
}
if (this.datasets && this.datasets.length ||
(datasets && datasets.length)) {
datasets = (this.datasets || datasets)
.map(function (elm, index) {
var newElm = Object.assign({}, elm);
if (_this.colors && _this.colors.length) {
Object.assign(newElm, _this.colors[index]);
}
else {
Object.assign(newElm, getColors(_this.chartType, index, newElm.data.length));
}
return newElm;
});
}
if (!datasets) {
throw new Error("ng-charts configuration error,\n data or datasets field are required to render char " + this.chartType);
}
return datasets;
};
BaseChartDirective.prototype.refresh = function () {
// if (this.options && this.options.responsive) {
// setTimeout(() => this.refresh(), 50);
// }
// todo: remove this line, it is producing flickering
this.ngOnDestroy();
this.chart = this.getChartBuilder(this.ctx /*, data, this.options*/);
};
return BaseChartDirective;
}());
BaseChartDirective.defaultColors = [
[255, 99, 132],
[54, 162, 235],
[255, 206, 86],
[231, 233, 237],
[75, 192, 192],
[151, 187, 205],
[220, 220, 220],
[247, 70, 74],
[70, 191, 189],
[253, 180, 92],
[148, 159, 177],
[77, 83, 96]
];
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], BaseChartDirective.prototype, "data", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], BaseChartDirective.prototype, "datasets", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], BaseChartDirective.prototype, "labels", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Object)
], BaseChartDirective.prototype, "options", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", String)
], BaseChartDirective.prototype, "chartType", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Array)
], BaseChartDirective.prototype, "colors", void 0);
__decorate([
core_1.Input(),
__metadata("design:type", Boolean)
], BaseChartDirective.prototype, "legend", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], BaseChartDirective.prototype, "chartClick", void 0);
__decorate([
core_1.Output(),
__metadata("design:type", core_1.EventEmitter)
], BaseChartDirective.prototype, "chartHover", void 0);
BaseChartDirective = __decorate([
core_1.Directive({ selector: 'canvas[baseChart]', exportAs: 'base-chart' }),
__metadata("design:paramtypes", [core_1.ElementRef])
], BaseChartDirective);
exports.BaseChartDirective = BaseChartDirective;
// private helper functions
function isObject(item) {
return (item && typeof item === 'object' && !Array.isArray(item));
}
function mergeDeep(target, source) {
var output = Object.assign({}, target);
if (isObject(target) && isObject(source)) {
Object.keys(source).forEach(function (key) {
if (isObject(source[key])) {
if (!(key in target)) {
Object.assign(output, (_a = {}, _a[key] = source[key], _a));
}
else {
output[key] = mergeDeep(target[key], source[key]);
}
}
else {
Object.assign(output, (_b = {}, _b[key] = source[key], _b));
}
var _a, _b;
});
}
return output;
}
function rgba(colour, alpha) {
return 'rgba(' + colour.concat(alpha).join(',') + ')';
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function formatLineColor(colors) {
return {
backgroundColor: rgba(colors, 0.4),
borderColor: rgba(colors, 1),
pointBackgroundColor: rgba(colors, 1),
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: rgba(colors, 0.8)
};
}
function formatBarColor(colors) {
return {
backgroundColor: rgba(colors, 0.6),
borderColor: rgba(colors, 1),
hoverBackgroundColor: rgba(colors, 0.8),
hoverBorderColor: rgba(colors, 1)
};
}
function formatPieColors(colors) {
return {
backgroundColor: colors.map(function (color) { return rgba(color, 0.6); }),
borderColor: colors.map(function () { return '#fff'; }),
pointBackgroundColor: colors.map(function (color) { return rgba(color, 1); }),
pointBorderColor: colors.map(function () { return '#fff'; }),
pointHoverBackgroundColor: colors.map(function (color) { return rgba(color, 1); }),
pointHoverBorderColor: colors.map(function (color) { return rgba(color, 1); })
};
}
function formatPolarAreaColors(colors) {
return {
backgroundColor: colors.map(function (color) { return rgba(color, 0.6); }),
borderColor: colors.map(function (color) { return rgba(color, 1); }),
hoverBackgroundColor: colors.map(function (color) { return rgba(color, 0.8); }),
hoverBorderColor: colors.map(function (color) { return rgba(color, 1); })
};
}
function getRandomColor() {
return [getRandomInt(0, 255), getRandomInt(0, 255), getRandomInt(0, 255)];
}
/**
* Generate colors for line|bar charts
* @param index
* @returns {number[]|Color}
*/
function generateColor(index) {
return BaseChartDirective.defaultColors[index] || getRandomColor();
}
/**
* Generate colors for pie|doughnut charts
* @param count
* @returns {Colors}
*/
function generateColors(count) {
var colorsArr = new Array(count);
for (var i = 0; i < count; i++) {
colorsArr[i] = BaseChartDirective.defaultColors[i] || getRandomColor();
}
return colorsArr;
}
/**
* Generate colors by chart type
* @param chartType
* @param index
* @param count
* @returns {Color}
*/
function getColors(chartType, index, count) {
if (chartType === 'pie' || chartType === 'doughnut') {
return formatPieColors(generateColors(count));
}
if (chartType === 'polarArea') {
return formatPolarAreaColors(generateColors(count));
}
if (chartType === 'line' || chartType === 'radar') {
return formatLineColor(generateColor(index));
}
if (chartType === 'bar' || chartType === 'horizontalBar') {
return formatBarColor(generateColor(index));
}
return generateColor(index);
}
var ChartsModule = (function () {
function ChartsModule() {
}
return ChartsModule;
}());
ChartsModule = __decorate([
core_1.NgModule({
declarations: [
BaseChartDirective
],
exports: [
BaseChartDirective
],
imports: []
})
], ChartsModule);
exports.ChartsModule = ChartsModule;
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = __WEBPACK_EXTERNAL_MODULE_2__;
/***/ })
/******/ ]);
});
//# sourceMappingURL=ng4-charts.umd.js.map