New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

ng2-charts

Package Overview
Dependencies
Maintainers
1
Versions
99
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ng2-charts - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

9

.config/bundle-system.js

@@ -43,3 +43,7 @@ #!/usr/bin/env node

typescript: path.resolve('node_modules/typescript/lib/typescript.js'),
angular2: path.resolve('node_modules/angular2'),
'@angular/core': path.resolve('node_modules/@angular/core/index.js'),
'@angular/common': path.resolve('node_modules/@angular/common/index.js'),
'@angular/compiler': path.resolve('node_modules/@angular/compiler/index.js'),
'@angular/platform-browser': path.resolve('node_modules/@angular/platform-browser/index.js'),
'@angular/platform-browser-dynamic': path.resolve('node_modules/@angular/platform-browser-dynamic/'),
rxjs: path.resolve('node_modules/rxjs')

@@ -52,3 +56,4 @@ },

config.meta = ['angular2', 'rxjs'].reduce((memo, currentValue) => {
config.meta = ['@angular/common','@angular/compiler','@angular/core',
'@angular/platform-browser','@angular/platform-browser-dynamic', 'rxjs'].reduce((memo, currentValue) => {
memo[path.resolve(`node_modules/${currentValue}/*`)] = {build: false};

@@ -55,0 +60,0 @@ return memo;

371

bundles/ng2-charts.js

@@ -1,2 +0,2 @@

System.registerDynamic("ng2-charts/components/charts/charts", ["angular2/core", "angular2/common"], true, function($__require, exports, module) {
System.registerDynamic("ng2-charts/components/charts/charts", ["@angular/core", "@angular/common"], true, function($__require, exports, module) {
"use strict";

@@ -23,98 +23,23 @@ ;

};
var core_1 = $__require('angular2/core');
var common_1 = $__require('angular2/common');
var Charts = (function() {
function Charts(element) {}
Charts = __decorate([core_1.Component({
selector: 'chart, canvas[chart]',
template: "<canvas></canvas>",
directives: [common_1.CORE_DIRECTIVES, common_1.NgClass]
}), __metadata('design:paramtypes', [core_1.ElementRef])], Charts);
return Charts;
}());
exports.Charts = Charts;
var BaseChart = (function() {
function BaseChart(element) {
this.element = element;
this.data = [];
var core_1 = $__require('@angular/core');
var common_1 = $__require('@angular/common');
var BaseChartComponent = (function() {
function BaseChartComponent(element) {
this.labels = [];
this.options = {responsive: true};
this.series = [];
this.colours = [];
this.initFlag = false;
this.chartClick = new core_1.EventEmitter();
this.chartHover = new core_1.EventEmitter();
this.defaultsColours = [{
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)',
color: 'rgba(151,187,205,1)',
highlight: 'rgba(151,187,205,0.8)'
}, {
fillColor: 'rgba(220,220,220,0.2)',
strokeColor: 'rgba(220,220,220,1)',
pointColor: 'rgba(220,220,220,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220,220,220,0.8)',
color: 'rgba(220,220,220,1)',
highlight: 'rgba(220,220,220,0.8)'
}, {
fillColor: 'rgba(247,70,74,0.2)',
strokeColor: 'rgba(247,70,74,1)',
pointColor: 'rgba(247,70,74,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(247,70,74,0.8)',
color: 'rgba(247,70,74,1)',
highlight: 'rgba(247,70,74,0.8)'
}, {
fillColor: 'rgba(70,191,189,0.2)',
strokeColor: 'rgba(70,191,189,1)',
pointColor: 'rgba(70,191,189,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(70,191,189,0.8)',
color: 'rgba(70,191,189,1)',
highlight: 'rgba(70,191,189,0.8)'
}, {
fillColor: 'rgba(253,180,92,0.2)',
strokeColor: 'rgba(253,180,92,1)',
pointColor: 'rgba(253,180,92,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(253,180,92,0.8)',
color: 'rgba(253,180,92,1)',
highlight: 'rgba(253,180,92,0.8)'
}, {
fillColor: 'rgba(148,159,177,0.2)',
strokeColor: 'rgba(148,159,177,1)',
pointColor: 'rgba(148,159,177,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(148,159,177,0.8)',
color: 'rgba(148,159,177,1)',
highlight: 'rgba(148,159,177,0.8)'
}, {
fillColor: 'rgba(77,83,96,0.2)',
strokeColor: 'rgba(77,83,96,1)',
pointColor: 'rgba(77,83,96,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,0.8)',
color: 'rgba(77,83,96,1)',
highlight: 'rgba(77,83,96,0.8)'
}];
this.initFlag = false;
this.element = element;
}
BaseChart.prototype.ngOnInit = function() {
BaseChartComponent.prototype.ngOnInit = function() {
this.ctx = this.element.nativeElement.children[0].getContext('2d');
this.cvs = this.element.nativeElement.children[0];
this.parent = this.element.nativeElement;
this.refresh();
this.initFlag = true;
if (this.data || this.datasets) {
this.refresh();
}
};
BaseChart.prototype.ngOnChanges = function() {
BaseChartComponent.prototype.ngOnChanges = function() {
if (this.initFlag) {

@@ -124,95 +49,74 @@ this.refresh();

};
BaseChart.prototype.ngOnDestroy = function() {
BaseChartComponent.prototype.ngOnDestroy = function() {
if (this.chart) {
this.chart.destroy();
this.chart = null;
this.chart = void 0;
}
if (this.legendTemplate) {
this.legendTemplate.destroy();
this.legendTemplate = null;
}
};
BaseChart.prototype.setLegend = function() {
var list = this.parent.getElementsByTagName('ul');
if (list.length) {
list[0].remove();
this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
} else {
this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
BaseChartComponent.prototype.getChartBuilder = function(ctx) {
var _this = this;
var datasets = void 0;
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"
}];
}
}
};
BaseChart.prototype.getColour = function(colour) {
return {
fillColor: this.rgba(colour, 0.2),
strokeColor: this.rgba(colour, 1),
pointColor: this.rgba(colour, 1),
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: this.rgba(colour, 0.8),
color: this.rgba(colour, 1),
highlight: this.rgba(colour, 0.8)
};
};
BaseChart.prototype.getRandomInt = function(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
BaseChart.prototype.rgba = function(colour, alpha) {
return 'rgba(' + colour.concat(alpha).join(',') + ')';
};
BaseChart.prototype.click = function(evt) {
var atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
var activePoints = atEvent.call(this.chart, evt);
if (activePoints.length > 0) {
var activeLabel = activePoints[0].label;
this.chartClick.emit({
activePoints: activePoints,
activeLabel: activeLabel
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;
});
}
};
BaseChart.prototype.hover = function(evt) {
var atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
var activePoints = atEvent.call(this.chart, evt);
if (activePoints.length > 0) {
var activeLabel = activePoints[0].label;
var activePoint = activePoints[0].value;
this.chartHover.emit({
activePoints: activePoints,
activePoint: activePoint,
activeLabel: activeLabel
});
if (!datasets) {
throw new Error("ng-charts configuration error, \n data or datasets field are required to render char " + this.chartType);
}
};
BaseChart.prototype.getChartBuilder = function(ctx, data, options) {
return new Chart(ctx)[this.chartType](data, options);
};
BaseChart.prototype.getDataObject = function(label, value) {
if (this.chartType === 'Line' || this.chartType === 'Bar' || this.chartType === 'Radar') {
return {
label: label,
data: value
var options = Object.assign({}, this.options);
options.hover = options.hover || {};
if (!options.hover.onHover) {
options.hover.onHover = function(active) {
if (active && !active.length) {
return;
}
_this.chartHover.emit({active: active});
};
}
if (this.chartType === 'Pie' || this.chartType === 'Doughnut' || this.chartType === 'PolarArea') {
return {
label: label,
value: value
if (!options.onClick) {
options.onClick = function(event, active) {
_this.chartClick.emit({
event: event,
active: active
});
};
}
return null;
};
BaseChart.prototype.getChartData = function(labels, dataObject) {
if (this.chartType === 'Line' || this.chartType === 'Bar' || this.chartType === 'Radar') {
return {
labels: labels,
datasets: dataObject
};
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');
}
if (this.chartType === 'Pie' || this.chartType === 'Doughnut' || this.chartType === 'PolarArea') {
return dataObject;
}
return new Chart(ctx, opts);
};
BaseChart.prototype.refresh = function() {
BaseChartComponent.prototype.refresh = function() {
var _this = this;
if (this.options.responsive && this.parent.clientHeight === 0) {
if (this.options && this.options.responsive && this.parent.clientHeight === 0) {
return setTimeout(function() {

@@ -223,33 +127,113 @@ return _this.refresh();

this.ngOnDestroy();
var dataset = [];
for (var i = 0; i < this.data.length; i++) {
var colourDesc = [this.getRandomInt(0, 255), this.getRandomInt(0, 255), this.getRandomInt(0, 255)];
var colour = i < this.colours.length ? this.colours[i] : this.defaultsColours[i] || this.getColour(colourDesc);
var data_1 = Object.assign(colour, this.getDataObject(this.series[i] || this.labels[i], this.data[i]));
dataset.push(data_1);
}
var data = this.getChartData(this.labels, dataset);
this.chart = this.getChartBuilder(this.ctx, data, this.options);
if (this.legend) {
this.setLegend();
}
this.chart = this.getChartBuilder(this.ctx);
};
__decorate([core_1.Input(), __metadata('design:type', Array)], BaseChart.prototype, "data", void 0);
__decorate([core_1.Input(), __metadata('design:type', Array)], BaseChart.prototype, "labels", void 0);
__decorate([core_1.Input(), __metadata('design:type', Object)], BaseChart.prototype, "options", void 0);
__decorate([core_1.Input(), __metadata('design:type', String)], BaseChart.prototype, "chartType", void 0);
__decorate([core_1.Input(), __metadata('design:type', Array)], BaseChart.prototype, "series", void 0);
__decorate([core_1.Input(), __metadata('design:type', Array)], BaseChart.prototype, "colours", void 0);
__decorate([core_1.Input(), __metadata('design:type', Boolean)], BaseChart.prototype, "legend", void 0);
BaseChart = __decorate([core_1.Component({
BaseChartComponent.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', Object)], BaseChartComponent.prototype, "data", void 0);
__decorate([core_1.Input(), __metadata('design:type', Array)], BaseChartComponent.prototype, "datasets", void 0);
__decorate([core_1.Input(), __metadata('design:type', Array)], BaseChartComponent.prototype, "labels", void 0);
__decorate([core_1.Input(), __metadata('design:type', Object)], BaseChartComponent.prototype, "options", void 0);
__decorate([core_1.Input(), __metadata('design:type', String)], BaseChartComponent.prototype, "chartType", void 0);
__decorate([core_1.Input(), __metadata('design:type', Array)], BaseChartComponent.prototype, "colors", void 0);
__decorate([core_1.Input(), __metadata('design:type', Boolean)], BaseChartComponent.prototype, "legend", void 0);
__decorate([core_1.Output(), __metadata('design:type', core_1.EventEmitter)], BaseChartComponent.prototype, "chartClick", void 0);
__decorate([core_1.Output(), __metadata('design:type', core_1.EventEmitter)], BaseChartComponent.prototype, "chartHover", void 0);
BaseChartComponent = __decorate([core_1.Component({
selector: 'base-chart',
properties: ['data', 'labels', 'series', 'colours', 'chartType', 'legend', 'options'],
events: ['chartClick', 'chartHover'],
template: "\n <canvas style=\"width: 100%; height: 100%;\" (click)=\"click($event)\" (mousemove)=\"hover($event)\"></canvas>\n ",
template: "<canvas style=\"width: 100%; height: 100%;\"></canvas>",
directives: [common_1.CORE_DIRECTIVES, common_1.FORM_DIRECTIVES, common_1.NgClass]
}), __metadata('design:paramtypes', [core_1.ElementRef])], BaseChart);
return BaseChart;
}), __metadata('design:paramtypes', [core_1.ElementRef])], BaseChartComponent);
return BaseChartComponent;
}());
exports.BaseChart = BaseChart;
exports.CHART_DIRECTIVES = [Charts, BaseChart];
exports.BaseChartComponent = BaseChartComponent;
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)];
}
function generateColor(index) {
return BaseChartComponent.defaultColors[index] || getRandomColor();
}
function generateColors(count) {
var colorsArr = new Array(count);
for (var i = 0; i < count; i++) {
colorsArr[i] = BaseChartComponent.defaultColors[i] || getRandomColor();
}
return colorsArr;
}
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') {
return formatBarColor(generateColor(index));
}
return generateColor(index);
}
exports.CHART_DIRECTIVES = [BaseChartComponent];
return module.exports;

@@ -269,3 +253,6 @@ });

}
var charts_1 = $__require('./components/charts/charts');
__export($__require('./components/charts/charts'));
Object.defineProperty(exports, "__esModule", {value: true});
exports.default = {directives: [charts_1.CHART_DIRECTIVES]};
return module.exports;

@@ -272,0 +259,0 @@ });

2

bundles/ng2-charts.min.js

@@ -1,2 +0,2 @@

System.registerDynamic("ng2-charts/components/charts/charts",["angular2/core","angular2/common"],!0,function($__require,exports,module){"use strict";var __decorate=this&&this.__decorate||function(decorators,target,key,desc){var d,c=arguments.length,r=3>c?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(3>c?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r},__metadata=this&&this.__metadata||function(k,v){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(k,v):void 0},core_1=$__require("angular2/core"),common_1=$__require("angular2/common"),Charts=function(){function Charts(element){}return Charts=__decorate([core_1.Component({selector:"chart, canvas[chart]",template:"<canvas></canvas>",directives:[common_1.CORE_DIRECTIVES,common_1.NgClass]}),__metadata("design:paramtypes",[core_1.ElementRef])],Charts)}();exports.Charts=Charts;var BaseChart=function(){function BaseChart(element){this.element=element,this.data=[],this.labels=[],this.options={responsive:!0},this.series=[],this.colours=[],this.initFlag=!1,this.chartClick=new core_1.EventEmitter,this.chartHover=new core_1.EventEmitter,this.defaultsColours=[{fillColor:"rgba(151,187,205,0.2)",strokeColor:"rgba(151,187,205,1)",pointColor:"rgba(151,187,205,1)",pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:"rgba(151,187,205,0.8)",color:"rgba(151,187,205,1)",highlight:"rgba(151,187,205,0.8)"},{fillColor:"rgba(220,220,220,0.2)",strokeColor:"rgba(220,220,220,1)",pointColor:"rgba(220,220,220,1)",pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:"rgba(220,220,220,0.8)",color:"rgba(220,220,220,1)",highlight:"rgba(220,220,220,0.8)"},{fillColor:"rgba(247,70,74,0.2)",strokeColor:"rgba(247,70,74,1)",pointColor:"rgba(247,70,74,1)",pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:"rgba(247,70,74,0.8)",color:"rgba(247,70,74,1)",highlight:"rgba(247,70,74,0.8)"},{fillColor:"rgba(70,191,189,0.2)",strokeColor:"rgba(70,191,189,1)",pointColor:"rgba(70,191,189,1)",pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:"rgba(70,191,189,0.8)",color:"rgba(70,191,189,1)",highlight:"rgba(70,191,189,0.8)"},{fillColor:"rgba(253,180,92,0.2)",strokeColor:"rgba(253,180,92,1)",pointColor:"rgba(253,180,92,1)",pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:"rgba(253,180,92,0.8)",color:"rgba(253,180,92,1)",highlight:"rgba(253,180,92,0.8)"},{fillColor:"rgba(148,159,177,0.2)",strokeColor:"rgba(148,159,177,1)",pointColor:"rgba(148,159,177,1)",pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:"rgba(148,159,177,0.8)",color:"rgba(148,159,177,1)",highlight:"rgba(148,159,177,0.8)"},{fillColor:"rgba(77,83,96,0.2)",strokeColor:"rgba(77,83,96,1)",pointColor:"rgba(77,83,96,1)",pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:"rgba(77,83,96,0.8)",color:"rgba(77,83,96,1)",highlight:"rgba(77,83,96,0.8)"}]}return BaseChart.prototype.ngOnInit=function(){this.ctx=this.element.nativeElement.children[0].getContext("2d"),this.cvs=this.element.nativeElement.children[0],this.parent=this.element.nativeElement,this.refresh(),this.initFlag=!0},BaseChart.prototype.ngOnChanges=function(){this.initFlag&&this.refresh()},BaseChart.prototype.ngOnDestroy=function(){this.chart&&(this.chart.destroy(),this.chart=null),this.legendTemplate&&(this.legendTemplate.destroy(),this.legendTemplate=null)},BaseChart.prototype.setLegend=function(){var list=this.parent.getElementsByTagName("ul");list.length?(list[0].remove(),this.parent.insertAdjacentHTML("beforeend",this.chart.generateLegend())):this.parent.insertAdjacentHTML("beforeend",this.chart.generateLegend())},BaseChart.prototype.getColour=function(colour){return{fillColor:this.rgba(colour,.2),strokeColor:this.rgba(colour,1),pointColor:this.rgba(colour,1),pointStrokeColor:"#fff",pointHighlightFill:"#fff",pointHighlightStroke:this.rgba(colour,.8),color:this.rgba(colour,1),highlight:this.rgba(colour,.8)}},BaseChart.prototype.getRandomInt=function(min,max){return Math.floor(Math.random()*(max-min+1))+min},BaseChart.prototype.rgba=function(colour,alpha){return"rgba("+colour.concat(alpha).join(",")+")"},BaseChart.prototype.click=function(evt){var atEvent=this.chart.getPointsAtEvent||this.chart.getBarsAtEvent||this.chart.getSegmentsAtEvent,activePoints=atEvent.call(this.chart,evt);if(activePoints.length>0){var activeLabel=activePoints[0].label;this.chartClick.emit({activePoints:activePoints,activeLabel:activeLabel})}},BaseChart.prototype.hover=function(evt){var atEvent=this.chart.getPointsAtEvent||this.chart.getBarsAtEvent||this.chart.getSegmentsAtEvent,activePoints=atEvent.call(this.chart,evt);if(activePoints.length>0){var activeLabel=activePoints[0].label,activePoint=activePoints[0].value;this.chartHover.emit({activePoints:activePoints,activePoint:activePoint,activeLabel:activeLabel})}},BaseChart.prototype.getChartBuilder=function(ctx,data,options){return new Chart(ctx)[this.chartType](data,options)},BaseChart.prototype.getDataObject=function(label,value){return"Line"===this.chartType||"Bar"===this.chartType||"Radar"===this.chartType?{label:label,data:value}:"Pie"===this.chartType||"Doughnut"===this.chartType||"PolarArea"===this.chartType?{label:label,value:value}:null},BaseChart.prototype.getChartData=function(labels,dataObject){return"Line"===this.chartType||"Bar"===this.chartType||"Radar"===this.chartType?{labels:labels,datasets:dataObject}:"Pie"===this.chartType||"Doughnut"===this.chartType||"PolarArea"===this.chartType?dataObject:void 0},BaseChart.prototype.refresh=function(){var _this=this;if(this.options.responsive&&0===this.parent.clientHeight)return setTimeout(function(){return _this.refresh()},50);this.ngOnDestroy();for(var dataset=[],i=0;i<this.data.length;i++){var colourDesc=[this.getRandomInt(0,255),this.getRandomInt(0,255),this.getRandomInt(0,255)],colour=i<this.colours.length?this.colours[i]:this.defaultsColours[i]||this.getColour(colourDesc),data_1=Object.assign(colour,this.getDataObject(this.series[i]||this.labels[i],this.data[i]));dataset.push(data_1)}var data=this.getChartData(this.labels,dataset);this.chart=this.getChartBuilder(this.ctx,data,this.options),this.legend&&this.setLegend()},__decorate([core_1.Input(),__metadata("design:type",Array)],BaseChart.prototype,"data",void 0),__decorate([core_1.Input(),__metadata("design:type",Array)],BaseChart.prototype,"labels",void 0),__decorate([core_1.Input(),__metadata("design:type",Object)],BaseChart.prototype,"options",void 0),__decorate([core_1.Input(),__metadata("design:type",String)],BaseChart.prototype,"chartType",void 0),__decorate([core_1.Input(),__metadata("design:type",Array)],BaseChart.prototype,"series",void 0),__decorate([core_1.Input(),__metadata("design:type",Array)],BaseChart.prototype,"colours",void 0),__decorate([core_1.Input(),__metadata("design:type",Boolean)],BaseChart.prototype,"legend",void 0),BaseChart=__decorate([core_1.Component({selector:"base-chart",properties:["data","labels","series","colours","chartType","legend","options"],events:["chartClick","chartHover"],template:'\n <canvas style="width: 100%; height: 100%;" (click)="click($event)" (mousemove)="hover($event)"></canvas>\n ',directives:[common_1.CORE_DIRECTIVES,common_1.FORM_DIRECTIVES,common_1.NgClass]}),__metadata("design:paramtypes",[core_1.ElementRef])],BaseChart)}();return exports.BaseChart=BaseChart,exports.CHART_DIRECTIVES=[Charts,BaseChart],module.exports}),System.registerDynamic("ng2-charts/ng2-charts",["./components/charts/charts"],!0,function($__require,exports,module){"use strict";function __export(m){for(var p in m)exports.hasOwnProperty(p)||(exports[p]=m[p])}return __export($__require("./components/charts/charts")),module.exports});
System.registerDynamic("ng2-charts/components/charts/charts",["@angular/core","@angular/common"],!0,function($__require,exports,module){"use strict";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,.4),borderColor:rgba(colors,1),pointBackgroundColor:rgba(colors,1),pointBorderColor:"#fff",pointHoverBackgroundColor:"#fff",pointHoverBorderColor:rgba(colors,.8)}}function formatBarColor(colors){return{backgroundColor:rgba(colors,.6),borderColor:rgba(colors,1),hoverBackgroundColor:rgba(colors,.8),hoverBorderColor:rgba(colors,1)}}function formatPieColors(colors){return{backgroundColor:colors.map(function(color){return rgba(color,.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,.6)}),borderColor:colors.map(function(color){return rgba(color,1)}),hoverBackgroundColor:colors.map(function(color){return rgba(color,.8)}),hoverBorderColor:colors.map(function(color){return rgba(color,1)})}}function getRandomColor(){return[getRandomInt(0,255),getRandomInt(0,255),getRandomInt(0,255)]}function generateColor(index){return BaseChartComponent.defaultColors[index]||getRandomColor()}function generateColors(count){for(var colorsArr=new Array(count),i=0;count>i;i++)colorsArr[i]=BaseChartComponent.defaultColors[i]||getRandomColor();return colorsArr}function getColors(chartType,index,count){return"pie"===chartType||"doughnut"===chartType?formatPieColors(generateColors(count)):"polarArea"===chartType?formatPolarAreaColors(generateColors(count)):"line"===chartType||"radar"===chartType?formatLineColor(generateColor(index)):"bar"===chartType?formatBarColor(generateColor(index)):generateColor(index)}var __decorate=this&&this.__decorate||function(decorators,target,key,desc){var d,c=arguments.length,r=3>c?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(3>c?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r},__metadata=this&&this.__metadata||function(k,v){return"object"==typeof Reflect&&"function"==typeof Reflect.metadata?Reflect.metadata(k,v):void 0},core_1=$__require("@angular/core"),common_1=$__require("@angular/common"),BaseChartComponent=function(){function BaseChartComponent(element){this.labels=[],this.options={responsive:!0},this.chartClick=new core_1.EventEmitter,this.chartHover=new core_1.EventEmitter,this.initFlag=!1,this.element=element}return BaseChartComponent.prototype.ngOnInit=function(){this.ctx=this.element.nativeElement.children[0].getContext("2d"),this.cvs=this.element.nativeElement.children[0],this.parent=this.element.nativeElement,this.initFlag=!0,(this.data||this.datasets)&&this.refresh()},BaseChartComponent.prototype.ngOnChanges=function(){this.initFlag&&this.refresh()},BaseChartComponent.prototype.ngOnDestroy=function(){this.chart&&(this.chart.destroy(),this.chart=void 0)},BaseChartComponent.prototype.getChartBuilder=function(ctx){var _this=this,datasets=void 0;if((!this.datasets||!this.datasets.length&&this.data&&this.data.length)&&(datasets=Array.isArray(this.data[0])?this.data.map(function(data,index){return{data:data,label:_this.labels[index]||"Label "+index}}):[{data:this.data,label:"Label 0"}]),(this.datasets&&this.datasets.length||datasets&&datasets.length)&&(datasets=(this.datasets||datasets).map(function(elm,index){var newElm=Object.assign({},elm);return _this.colors&&_this.colors.length?Object.assign(newElm,_this.colors[index]):Object.assign(newElm,getColors(_this.chartType,index,newElm.data.length)),newElm})),!datasets)throw new Error("ng-charts configuration error, \n data or datasets field are required to render char "+this.chartType);var options=Object.assign({},this.options);options.hover=options.hover||{},options.hover.onHover||(options.hover.onHover=function(active){active&&!active.length||_this.chartHover.emit({active:active})}),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("undefined"==typeof Chart)throw new Error("ng2-charts configuration issue: Embedding Chart.js lib is mandatory");return new Chart(ctx,opts)},BaseChartComponent.prototype.refresh=function(){var _this=this;return this.options&&this.options.responsive&&0===this.parent.clientHeight?setTimeout(function(){return _this.refresh()},50):(this.ngOnDestroy(),void(this.chart=this.getChartBuilder(this.ctx)))},BaseChartComponent.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",Object)],BaseChartComponent.prototype,"data",void 0),__decorate([core_1.Input(),__metadata("design:type",Array)],BaseChartComponent.prototype,"datasets",void 0),__decorate([core_1.Input(),__metadata("design:type",Array)],BaseChartComponent.prototype,"labels",void 0),__decorate([core_1.Input(),__metadata("design:type",Object)],BaseChartComponent.prototype,"options",void 0),__decorate([core_1.Input(),__metadata("design:type",String)],BaseChartComponent.prototype,"chartType",void 0),__decorate([core_1.Input(),__metadata("design:type",Array)],BaseChartComponent.prototype,"colors",void 0),__decorate([core_1.Input(),__metadata("design:type",Boolean)],BaseChartComponent.prototype,"legend",void 0),__decorate([core_1.Output(),__metadata("design:type",core_1.EventEmitter)],BaseChartComponent.prototype,"chartClick",void 0),__decorate([core_1.Output(),__metadata("design:type",core_1.EventEmitter)],BaseChartComponent.prototype,"chartHover",void 0),BaseChartComponent=__decorate([core_1.Component({selector:"base-chart",template:'<canvas style="width: 100%; height: 100%;"></canvas>',directives:[common_1.CORE_DIRECTIVES,common_1.FORM_DIRECTIVES,common_1.NgClass]}),__metadata("design:paramtypes",[core_1.ElementRef])],BaseChartComponent)}();return exports.BaseChartComponent=BaseChartComponent,exports.CHART_DIRECTIVES=[BaseChartComponent],module.exports}),System.registerDynamic("ng2-charts/ng2-charts",["./components/charts/charts"],!0,function($__require,exports,module){"use strict";function __export(m){for(var p in m)exports.hasOwnProperty(p)||(exports[p]=m[p])}var charts_1=$__require("./components/charts/charts");return __export($__require("./components/charts/charts")),Object.defineProperty(exports,"__esModule",{value:!0}),exports["default"]={directives:[charts_1.CHART_DIRECTIVES]},module.exports});
//# sourceMappingURL=ng2-charts.min.js.map

18

CHANGELOG.md

@@ -0,1 +1,19 @@

<a name="1.1.0"></a>
# [1.1.0](https://github.com/valor-software/ng2-charts/compare/v1.0.3...v1.1.0) (2016-05-17)
### Features
* **package:** update to ng2 rc.1 and chart.js 2.* ([73e3ffa](https://github.com/valor-software/ng2-charts/commit/73e3ffa))
### BREAKING CHANGES
* package: S:
- series property removed
- datasets property added (please prefer it over data property)
- all chart type names lower cased (because of chart.js 2 changes)
<a name="1.0.3"></a>

@@ -2,0 +20,0 @@ ## [1.0.3](https://github.com/valor-software/ng2-charts/compare/v1.0.2...v1.0.3) (2016-04-15)

64

components/charts/charts.d.ts

@@ -1,14 +0,13 @@

import { OnDestroy, OnInit, OnChanges, ElementRef } from 'angular2/core';
export declare class Charts {
constructor(element: ElementRef);
}
export declare class BaseChart implements OnInit, OnDestroy, OnChanges {
private element;
data: Array<any>;
import { OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef } from '@angular/core';
export declare class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
static defaultColors: Array<number[]>;
data: number[] | Array<number[]>;
datasets: any[];
labels: Array<any>;
options: any;
chartType: string;
series: Array<any>;
colours: Array<any>;
colors: Array<any>;
legend: boolean;
chartClick: EventEmitter<any>;
chartHover: EventEmitter<any>;
private ctx;

@@ -18,22 +17,37 @@ private cvs;

private chart;
private legendTemplate;
private initFlag;
private chartClick;
private chartHover;
private defaultsColours;
private element;
constructor(element: ElementRef);
ngOnInit(): void;
ngOnChanges(): void;
ngOnDestroy(): void;
setLegend(): void;
getColour(colour: Array<number>): any;
getRandomInt(min: number, max: number): number;
rgba(colour: Array<number>, alpha: number): string;
click(evt: any): void;
hover(evt: any): void;
getChartBuilder(ctx: any, data: Array<any>, options: any): any;
getDataObject(label: string, value: any): any;
getChartData(labels: any, dataObject: any): any;
ngOnInit(): any;
ngOnChanges(): any;
ngOnDestroy(): any;
getChartBuilder(ctx: any): any;
private refresh();
}
export interface Color {
backgroundColor?: string | string[];
borderWidth?: number | number[];
borderColor?: string | string[];
borderCapStyle?: string;
borderDash?: number[];
borderDashOffset?: number;
borderJoinStyle?: string;
pointBorderColor?: string | string[];
pointBackgroundColor?: string | string[];
pointBorderWidth?: number | number[];
pointRadius?: number | number[];
pointHoverRadius?: number | number[];
pointHitRadius?: number | number[];
pointHoverBackgroundColor?: string | string[];
pointHoverBorderColor?: string | string[];
pointHoverBorderWidth?: number | number[];
pointStyle?: string | string[];
hoverBackgroundColor?: string | string[];
hoverBorderColor?: string | string[];
hoverBorderWidth?: number;
}
export interface Colors extends Color {
data?: number[];
label?: string;
}
export declare const CHART_DIRECTIVES: Array<any>;

403

components/charts/charts.js

@@ -11,103 +11,23 @@ "use strict";

};
var core_1 = require('angular2/core');
var common_1 = require('angular2/common');
var Charts = (function () {
function Charts(element) {
}
Charts = __decorate([
core_1.Component({
selector: 'chart, canvas[chart]',
template: "<canvas></canvas>",
directives: [common_1.CORE_DIRECTIVES, common_1.NgClass]
}),
__metadata('design:paramtypes', [core_1.ElementRef])
], Charts);
return Charts;
}());
exports.Charts = Charts;
var BaseChart = (function () {
function BaseChart(element) {
this.element = element;
this.data = [];
var core_1 = require('@angular/core');
var common_1 = require('@angular/common');
var BaseChartComponent = (function () {
function BaseChartComponent(element) {
this.labels = [];
this.options = { responsive: true };
this.series = [];
this.colours = [];
this.initFlag = false;
this.chartClick = new core_1.EventEmitter();
this.chartHover = new core_1.EventEmitter();
this.defaultsColours = [
{
fillColor: 'rgba(151,187,205,0.2)',
strokeColor: 'rgba(151,187,205,1)',
pointColor: 'rgba(151,187,205,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(151,187,205,0.8)',
color: 'rgba(151,187,205,1)',
highlight: 'rgba(151,187,205,0.8)'
}, {
fillColor: 'rgba(220,220,220,0.2)',
strokeColor: 'rgba(220,220,220,1)',
pointColor: 'rgba(220,220,220,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(220,220,220,0.8)',
color: 'rgba(220,220,220,1)',
highlight: 'rgba(220,220,220,0.8)'
}, {
fillColor: 'rgba(247,70,74,0.2)',
strokeColor: 'rgba(247,70,74,1)',
pointColor: 'rgba(247,70,74,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(247,70,74,0.8)',
color: 'rgba(247,70,74,1)',
highlight: 'rgba(247,70,74,0.8)'
}, {
fillColor: 'rgba(70,191,189,0.2)',
strokeColor: 'rgba(70,191,189,1)',
pointColor: 'rgba(70,191,189,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(70,191,189,0.8)',
color: 'rgba(70,191,189,1)',
highlight: 'rgba(70,191,189,0.8)'
}, {
fillColor: 'rgba(253,180,92,0.2)',
strokeColor: 'rgba(253,180,92,1)',
pointColor: 'rgba(253,180,92,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(253,180,92,0.8)',
color: 'rgba(253,180,92,1)',
highlight: 'rgba(253,180,92,0.8)'
}, {
fillColor: 'rgba(148,159,177,0.2)',
strokeColor: 'rgba(148,159,177,1)',
pointColor: 'rgba(148,159,177,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(148,159,177,0.8)',
color: 'rgba(148,159,177,1)',
highlight: 'rgba(148,159,177,0.8)'
}, {
fillColor: 'rgba(77,83,96,0.2)',
strokeColor: 'rgba(77,83,96,1)',
pointColor: 'rgba(77,83,96,1)',
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: 'rgba(77,83,96,0.8)',
color: 'rgba(77,83,96,1)',
highlight: 'rgba(77,83,96,0.8)'
}];
this.initFlag = false;
this.element = element;
}
BaseChart.prototype.ngOnInit = function () {
BaseChartComponent.prototype.ngOnInit = function () {
this.ctx = this.element.nativeElement.children[0].getContext('2d');
this.cvs = this.element.nativeElement.children[0];
this.parent = this.element.nativeElement;
this.refresh();
this.initFlag = true;
if (this.data || this.datasets) {
this.refresh();
}
};
BaseChart.prototype.ngOnChanges = function () {
BaseChartComponent.prototype.ngOnChanges = function () {
if (this.initFlag) {

@@ -117,162 +37,225 @@ this.refresh();

};
BaseChart.prototype.ngOnDestroy = function () {
BaseChartComponent.prototype.ngOnDestroy = function () {
if (this.chart) {
this.chart.destroy();
this.chart = null;
this.chart = void 0;
}
if (this.legendTemplate) {
this.legendTemplate.destroy();
this.legendTemplate = null;
}
};
BaseChart.prototype.setLegend = function () {
var list = this.parent.getElementsByTagName('ul');
if (list.length) {
list[0].remove();
this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
BaseChartComponent.prototype.getChartBuilder = function (ctx /*, data:Array<any>, options:any*/) {
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" }];
}
}
else {
this.parent.insertAdjacentHTML('beforeend', this.chart.generateLegend());
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;
});
}
};
BaseChart.prototype.getColour = function (colour) {
return {
fillColor: this.rgba(colour, 0.2),
strokeColor: this.rgba(colour, 1),
pointColor: this.rgba(colour, 1),
pointStrokeColor: '#fff',
pointHighlightFill: '#fff',
pointHighlightStroke: this.rgba(colour, 0.8),
color: this.rgba(colour, 1),
highlight: this.rgba(colour, 0.8)
};
};
BaseChart.prototype.getRandomInt = function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
BaseChart.prototype.rgba = function (colour, alpha) {
return 'rgba(' + colour.concat(alpha).join(',') + ')';
};
BaseChart.prototype.click = function (evt) {
var atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
var activePoints = atEvent.call(this.chart, evt);
if (activePoints.length > 0) {
var activeLabel = activePoints[0].label;
this.chartClick.emit({ activePoints: activePoints, activeLabel: activeLabel });
if (!datasets) {
throw new Error("ng-charts configuration error, \n data or datasets field are required to render char " + this.chartType);
}
};
BaseChart.prototype.hover = function (evt) {
var atEvent = this.chart.getPointsAtEvent || this.chart.getBarsAtEvent || this.chart.getSegmentsAtEvent;
var activePoints = atEvent.call(this.chart, evt);
if (activePoints.length > 0) {
var activeLabel = activePoints[0].label;
var activePoint = activePoints[0].value;
this.chartHover.emit({ activePoints: activePoints, activePoint: activePoint, activeLabel: activeLabel });
}
};
BaseChart.prototype.getChartBuilder = function (ctx, data, options) {
return new Chart(ctx)[this.chartType](data, options);
};
BaseChart.prototype.getDataObject = function (label, value) {
if (this.chartType === 'Line'
|| this.chartType === 'Bar'
|| this.chartType === 'Radar') {
return {
label: label,
data: value
var options = Object.assign({}, this.options);
// 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 (this.chartType === 'Pie'
|| this.chartType === 'Doughnut'
|| this.chartType === 'PolarArea') {
return {
label: label,
value: value
if (!options.onClick) {
options.onClick = function (event, active) {
_this.chartClick.emit({ event: event, active: active });
};
}
return null;
};
BaseChart.prototype.getChartData = function (labels, dataObject) {
if (this.chartType === 'Line'
|| this.chartType === 'Bar'
|| this.chartType === 'Radar') {
return {
labels: labels,
datasets: dataObject
};
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');
}
if (this.chartType === 'Pie'
|| this.chartType === 'Doughnut'
|| this.chartType === 'PolarArea') {
return dataObject;
}
return new Chart(ctx, opts);
};
BaseChart.prototype.refresh = function () {
BaseChartComponent.prototype.refresh = function () {
var _this = this;
if (this.options.responsive && this.parent.clientHeight === 0) {
if (this.options && this.options.responsive && this.parent.clientHeight === 0) {
return setTimeout(function () { return _this.refresh(); }, 50);
}
// todo: remove this line, it is producing flickering
this.ngOnDestroy();
var dataset = [];
for (var i = 0; i < this.data.length; i++) {
var colourDesc = [this.getRandomInt(0, 255), this.getRandomInt(0, 255), this.getRandomInt(0, 255)];
var colour = i < this.colours.length ? this.colours[i] : this.defaultsColours[i] || this.getColour(colourDesc);
var data_1 = Object.assign(colour, this.getDataObject(this.series[i] || this.labels[i], this.data[i]));
dataset.push(data_1);
}
var data = this.getChartData(this.labels, dataset);
this.chart = this.getChartBuilder(this.ctx, data, this.options);
if (this.legend) {
this.setLegend();
}
this.chart = this.getChartBuilder(this.ctx /*, data, this.options*/);
};
BaseChartComponent.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', Object)
], BaseChartComponent.prototype, "data", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Array)
], BaseChart.prototype, "data", void 0);
], BaseChartComponent.prototype, "datasets", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Array)
], BaseChart.prototype, "labels", void 0);
], BaseChartComponent.prototype, "labels", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], BaseChart.prototype, "options", void 0);
], BaseChartComponent.prototype, "options", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', String)
], BaseChart.prototype, "chartType", void 0);
], BaseChartComponent.prototype, "chartType", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Array)
], BaseChart.prototype, "series", void 0);
], BaseChartComponent.prototype, "colors", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Array)
], BaseChart.prototype, "colours", void 0);
__metadata('design:type', Boolean)
], BaseChartComponent.prototype, "legend", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Boolean)
], BaseChart.prototype, "legend", void 0);
BaseChart = __decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], BaseChartComponent.prototype, "chartClick", void 0);
__decorate([
core_1.Output(),
__metadata('design:type', core_1.EventEmitter)
], BaseChartComponent.prototype, "chartHover", void 0);
BaseChartComponent = __decorate([
core_1.Component({
selector: 'base-chart',
properties: [
'data',
'labels',
'series',
'colours',
'chartType',
'legend',
'options'
],
events: ['chartClick', 'chartHover'],
template: "\n <canvas style=\"width: 100%; height: 100%;\" (click)=\"click($event)\" (mousemove)=\"hover($event)\"></canvas>\n ",
template: "<canvas style=\"width: 100%; height: 100%;\"></canvas>",
directives: [common_1.CORE_DIRECTIVES, common_1.FORM_DIRECTIVES, common_1.NgClass]
}),
__metadata('design:paramtypes', [core_1.ElementRef])
], BaseChart);
return BaseChart;
], BaseChartComponent);
return BaseChartComponent;
}());
exports.BaseChart = BaseChart;
exports.CHART_DIRECTIVES = [Charts, BaseChart];
exports.BaseChartComponent = BaseChartComponent;
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 BaseChartComponent.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] = BaseChartComponent.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') {
return formatBarColor(generateColor(index));
}
return generateColor(index);
}
exports.CHART_DIRECTIVES = [BaseChartComponent];

25

components/charts/readme.md

@@ -6,13 +6,15 @@ ### Usage

# Utilisation
There are directive: `base-chart`, and there are 6 types of charts: , `Line`, `Bar`, `Radar`, `Pie`, `PolarArea`, `Doughnut`.
### Chart types
There are one directive for all chart types: `base-chart`, and there are 6 types of charts: , `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`.
### Properties
- `data` (`Array<any>`) - set of points of the chart, it should be Array&lt;Array&lt;number&gt;&gt; only for line, bar and radar, otherwise Array&lt;number&gt;
- `labels` (`?Array<any>`) - x axis labels. It's necessary for charts: line, bar and radar. And just labels (on hover) for charts: polar area, pie and doughnut
- `chartType` (`?string`) - indicates the type of charts, it can be: 'Line', 'Bar', 'Radar', 'Pie', 'PolarArea', 'Doughnut'
**Note**: For more information about possible options please refer to original [chart.js](http://www.chartjs.org/docs) documentation
- `data` (`Array<number[]> | number[]`) - set of points of the chart, it should be `Array<number[]>` only for `line`, `bar` and `radar`, otherwise `number[]`;
- `datasets` (`Array<{data: Array<number[]> | number[], label: string}>`) - `data` see about, the `label` for the dataset which appears in the legend and tooltips
- `labels` (`?Array<any>`) - x axis labels. It's necessary for charts: `line`, `bar` and `radar`. And just labels (on hover) for charts: `polarArea`, `pie` and `doughnut`
- `chartType` (`?string`) - indicates the type of charts, it can be: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`
- `options` (`?any`) - chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
- `series` (`?Array<any>`) - name points on the chart, work for line, bar and radar
- `colours` (`?Array<any>`) - data colours, will use default colours if not specified (see below)
- `colours` (`?Array<any>`) - data colours, will use default and|or random colours if not specified (see below)
- `legend`: (`?boolean=false`) - if true show legend below the chart, otherwise not be shown

@@ -26,9 +28,4 @@

## Colours
### Colours
There are a set of 7 default colours. Colours can be replaced using the `colours` attribute.
If there is more data than colours, colours are generated randomly or can be provided
via a function through the `getColour` attribute.
Hex colours are converted to Chart.js colours automatically,
including different shades for highlight, fill, stroke, etc.
There are a set several default colours. Colours can be replaced using the `colours` attribute. If there is more data than colours, colours are generated randomly.

16

gulpfile.js

@@ -5,18 +5,2 @@ 'use strict';

gulp.paths = {
tssrc: [
'**/*.ts',
'!**/*.d.ts',
'!node_modules/**/*',
'!bundles/**/*',
'!typings/**/*'],
jssrc: [
'*.js',
'gulp-tasks/*.js',
'!bundles/*.js',
'!ng2-bootstrap.js',
'!node_modules/**/*',
'!**/*.{ts,coffee}.js']
};
require('require-dir')('./gulp-tasks');

@@ -23,0 +7,0 @@

4

ng2-charts.d.ts
export * from './components/charts/charts';
declare var _default: {
directives: any[][];
};
export default _default;

7

ng2-charts.js

@@ -5,2 +5,9 @@ "use strict";

}
var charts_1 = require('./components/charts/charts');
__export(require('./components/charts/charts'));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {
directives: [
charts_1.CHART_DIRECTIVES
]
};

53

package.json
{
"name": "ng2-charts",
"version": "1.0.3",
"version": "1.1.0",
"description": "Reactive, responsive, beautiful charts for Angular2 based on Chart.js",

@@ -11,3 +11,3 @@ "scripts": {

"flow.copy:src": "./node_modules/.bin/cpy ng2-charts.ts \"components/**/*.ts\" ts --parents",
"flow.clean": "./node_modules/.bin/del bundles coverage demo-build typings \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-bootstrap.+(js|d.ts|js.map)\"",
"flow.clean": "./node_modules/.bin/del bundles coverage demo-build typings \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-charts.+(js|d.ts|js.map)\"",
"flow.deploy:gh-pages": "npm run flow.build:prod && ./node_modules/.bin/gh-pages -d demo-build",

@@ -50,24 +50,29 @@ "flow.eslint": "./node_modules/.bin/eslint --ignore-path .gitignore --ext js --fix . .config",

"peerDependencies": {
"angular2": "2.0.0-beta.15"
"@angular/core": "^2.0.0-rc.1",
"@angular/common": "^2.0.0-rc.1"
},
"dependencies": {
"chart.js": "1.0.2"
"chart.js": "2.1.3"
},
"devDependencies": {
"angular2": "2.0.0-beta.15",
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"async": "2.0.0-rc.3",
"bootstrap": "3.3.6",
"chart.js": "1.0.2",
"clean-webpack-plugin": "0.1.8",
"clean-webpack-plugin": "0.1.9",
"compression-webpack-plugin": "0.3.1",
"conventional-changelog-cli": "1.1.1",
"conventional-github-releaser": "1.1.1",
"copy-webpack-plugin": "2.0.1",
"conventional-changelog-cli": "1.2.0",
"conventional-github-releaser": "1.1.2",
"copy-webpack-plugin": "3.0.0",
"cpy-cli": "1.0.0",
"del-cli": "0.2.0",
"es6-promise": "3.1.2",
"es6-shim": "0.35.0",
"eslint-config-valorsoft": "0.0.10",
"es6-promise": "3.2.1",
"es6-shim": "0.35.1",
"eslint-config-valorsoft": "0.0.11",
"exports-loader": "0.6.3",
"gh-pages": "0.11.0",
"gitignore-to-glob": "0.2.1",
"gulp": "3.9.1",

@@ -78,24 +83,24 @@ "gulp-clean": "0.3.2",

"gulp-tsc": "1.1.5",
"gulp-tslint": "4.3.5",
"gulp-tslint": "5.0.0",
"html-loader": "0.4.3",
"html-webpack-plugin": "2.15.0",
"html-webpack-plugin": "2.17.0",
"markdown-loader": "0.1.7",
"marked": "0.3.5",
"ng2-bootstrap": "1.0.13",
"pre-commit": "1.1.2",
"prismjs": "1.4.1",
"prismjs-loader": "0.0.2",
"ng2-bootstrap": "1.0.16",
"pre-commit": "1.1.3",
"prismjs": "1.5.0",
"prismjs-loader": "0.0.3",
"raw-loader": "0.5.1",
"reflect-metadata": "0.1.3",
"reflect-metadata": "0.1.2",
"require-dir": "0.3.0",
"rxjs": "5.0.0-beta.6",
"systemjs-builder": "0.15.15",
"systemjs-builder": "0.15.16",
"transfer-webpack-plugin": "0.1.4",
"ts-loader": "0.8.2",
"tslint-config-valorsoft": "0.0.3",
"tslint-config-valorsoft": "1.0.3",
"typescript": "1.8.10",
"typings": "0.7.12",
"typings": "0.8.1",
"webpack": "1.13.0",
"webpack-dev-server": "1.14.1",
"zone.js": "0.6.11"
"zone.js": "0.6.12"
},

@@ -102,0 +107,0 @@ "contributors": [

60

README.md

@@ -17,39 +17,49 @@ # ng2-charts [![npm version](https://badge.fury.io/js/ng2-charts.svg)](http://badge.fury.io/js/ng2-charts)

## Quick start
### Installation
1. A recommended way to install ***ng2-charts*** is through [npm](https://www.npmjs.com/search?q=ng2-charts) package manager using the following command:
1. You can install ***ng2-charts*** using npm
`npm i ng2-charts --save`
```bash
npm install ng2-charts --save
```
2. You need to install and include `Chart.js` library in application via `html` or `webpack bundler` (more options can be found in official `chart.js` [documentation](http://www.chartjs.org/docs/#getting-started))
```bash
npm install chart.js --save
```
2. A way to install Chart.js component is through [npm](http://bower.io/search/?q=chartjs) package manager using the following command:
**Important**: Embedding `Chart.js` in application is mandatory!
`bower install Chart.js --save`
```html
<script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
```
### Usage & Demo
Demo and API details of ***ng2-charts*** can be found here:
[demo](http://valor-software.github.io/ng2-charts/) and [source code](https://github.com/valor-software/ng2-charts/tree/master/demo).
Alternatively, you can [download it in a ZIP file](https://github.com/nnnick/Chart.js/archive/master.zip).
### System.js
After Chart.js component is downloaded, embed the code into your project.
System.js bundles can be found in `bundles` directory of npm package or at [npm cdn](https://npmcdn.com/ng2-charts/bundles/)
```html
<script src="bower_components/Chart.js/Chart.min.js"></script>
```
3. Or you can link `charts.js` at cdn
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
## API
### Import
```typescript
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
```
4. More information regarding using of ***ng2-charts*** is located in
[demo](http://valor-software.github.io/ng2-charts/) and [demo sources](https://github.com/valor-software/ng2-charts/tree/master/demo).
### Chart types
There are one directive for all chart types: `base-chart`, and there are 6 types of charts: , `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`.
## API
### Properties
- `data` (`Array<any>`) - set of points of the chart, it should be Array&lt;Array&lt;number&gt;&gt; only for line, bar and radar, otherwise Array&lt;number&gt;
- `labels` (`?Array<any>`) - x axis labels. It's necessary for charts: line, bar and radar. And just labels (on hover) for charts: polar area, pie and doughnut
- `chartType` (`?string`) - indicates the type of charts, it can be: 'Line', 'Bar', 'Radar', 'Pie', 'PolarArea', 'Doughnut'
**Note**: For more information about possible options please refer to original [chart.js](http://www.chartjs.org/docs) documentation
- `data` (`Array<number[]> | number[]`) - set of points of the chart, it should be `Array<number[]>` only for `line`, `bar` and `radar`, otherwise `number[]`;
- `datasets` (`Array<{data: Array<number[]> | number[], label: string}>`) - `data` see about, the `label` for the dataset which appears in the legend and tooltips
- `labels` (`?Array<any>`) - x axis labels. It's necessary for charts: `line`, `bar` and `radar`. And just labels (on hover) for charts: `polarArea`, `pie` and `doughnut`
- `chartType` (`?string`) - indicates the type of charts, it can be: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`
- `options` (`?any`) - chart options (as from [Chart.js documentation](http://www.chartjs.org/docs/))
- `series` (`?Array<any>`) - name points on the chart, work for line, bar and radar
- `colours` (`?Array<any>`) - data colours, will use default colours if not specified ([see readme for components](https://github.com/valor-software/ng2-charts/blob/master/components/charts/readme.md))
- `colours` (`?Array<any>`) - data colours, will use default and|or random colours if not specified (see below)
- `legend`: (`?boolean=false`) - if true show legend below the chart, otherwise not be shown

@@ -63,2 +73,8 @@

### Colours
There are a set several default colours. Colours can be replaced using the `colours` attribute. If there is more data than colours, colours are generated randomly.
## Troubleshooting

@@ -65,0 +81,0 @@

4

tsconfig.json

@@ -20,5 +20,5 @@ {

"files": [
"./ng2-charts.ts",
"./typings/browser.d.ts"
"./typings/browser.d.ts",
"./ng2-charts.ts"
]
}

4

tslint.json
{
"extends": "./node_modules/tslint-config-valorsoft/tslint.json",
"rulesDirectory": "./node_modules/codelyzer/dist/src"
"extends": "tslint-config-valorsoft",
"rulesDirectory": "./node_modules/codelyzer"
}

7

typings.json
{
"dependencies": {
"moment": "registry:npm/moment#2.10.5+20160211003958",
"webpack": "registry:npm/webpack#1.12.9+20160219013405"
},
"devDependencies": {},
"ambientDependencies": {
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
"jasmine": "registry:dt/jasmine#2.2.0+20160317120654",
"require": "registry:dt/require#2.1.20+20160316155526"
}
}
.travis.yml

Sorry, the diff of this file is not supported yet

bundles/ng2-charts.js.gz

Sorry, the diff of this file is not supported yet

bundles/ng2-charts.js.map.gz

Sorry, the diff of this file is not supported yet

bundles/ng2-charts.min.js.gz

Sorry, the diff of this file is not supported yet

bundles/ng2-charts.min.js.map.gz

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc