ng2-charts - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

bundles/ng2-charts.js

@@ -1,2 +0,2 @@
-System.registerDynamic("ng2-charts/components/charts/charts", ["@angular/core"], true, function ($__require, exports, module) {
+System.registerDynamic('ng2-charts/components/charts/charts', ['@angular/core'], true, function ($__require, exports, module) {
     "use strict";
@@ -7,13 +7,3 @@
         GLOBAL = global;
-    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 = $__require("@angular/core");
+    var core_1 = $__require('@angular/core');
     var BaseChartComponent = function () {
@@ -37,5 +27,11 @@ function BaseChartComponent(element) {
         };
-        BaseChartComponent.prototype.ngOnChanges = function () {
+        BaseChartComponent.prototype.ngOnChanges = function (changes) {
             if (this.initFlag) {
-                this.refresh();
+                // Check if the changes are in the data or datasets
+                if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
+                    this.chart.data.datasets = this.getDatasets();
+                    this.chart.update();
+                } else {
+                    this.refresh();
+                }
             }
@@ -51,27 +47,3 @@ };
             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);
-            }
+            var datasets = this.getDatasets();
             var options = Object.assign({}, this.options);
@@ -109,2 +81,31 @@ if (this.legend === false) {
         };
+        BaseChartComponent.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;
+        };
         BaseChartComponent.prototype.refresh = function () {
@@ -122,16 +123,20 @@ var _this = this;
         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>",
-            styles: [":host { display: block; }"]
-        }), __metadata('design:paramtypes', [core_1.ElementRef])], BaseChartComponent);
+        BaseChartComponent.decorators = [{ type: core_1.Component, args: [{
+                selector: 'base-chart',
+                template: "<canvas style=\"width: 100%; height: 100%;\"></canvas>",
+                styles: [":host { display: block; }"]
+            }] }];
+        /** @nocollapse */
+        BaseChartComponent.ctorParameters = [{ type: core_1.ElementRef }];
+        BaseChartComponent.propDecorators = {
+            'data': [{ type: core_1.Input }],
+            'datasets': [{ type: core_1.Input }],
+            'labels': [{ type: core_1.Input }],
+            'options': [{ type: core_1.Input }],
+            'chartType': [{ type: core_1.Input }],
+            'colors': [{ type: core_1.Input }],
+            'legend': [{ type: core_1.Input }],
+            'chartClick': [{ type: core_1.Output }],
+            'chartHover': [{ type: core_1.Output }]
+        };
         return BaseChartComponent;
@@ -249,7 +254,9 @@ }();
         function ChartsModule() {}
-        ChartsModule = __decorate([core_1.NgModule({
-            declarations: [BaseChartComponent],
-            exports: [BaseChartComponent],
-            imports: []
-        }), __metadata('design:paramtypes', [])], ChartsModule);
+        ChartsModule.decorators = [{ type: core_1.NgModule, args: [{
+                declarations: [BaseChartComponent],
+                exports: [BaseChartComponent],
+                imports: []
+            }] }];
+        /** @nocollapse */
+        ChartsModule.ctorParameters = [];
         return ChartsModule;
@@ -256,0 +263,0 @@ }();

bundles/ng2-charts.min.js

@@ -1,2 +0,2 @@
-System.registerDynamic("ng2-charts/components/charts/charts",["@angular/core"],!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;i<count;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||"horizontalBar"===chartType?formatBarColor(generateColor(index)):generateColor(index)}var __decorate=(this||self,this&&this.__decorate||function(decorators,target,key,desc){var d,c=arguments.length,r=c<3?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=(c<3?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){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(k,v)},core_1=$__require("@angular/core"),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);this.legend===!1&&(options.legend={display:!1}),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>',styles:[":host { display: block; }"]}),__metadata("design:paramtypes",[core_1.ElementRef])],BaseChartComponent)}();exports.BaseChartComponent=BaseChartComponent;var ChartsModule=function(){function ChartsModule(){}return ChartsModule=__decorate([core_1.NgModule({declarations:[BaseChartComponent],exports:[BaseChartComponent],imports:[]}),__metadata("design:paramtypes",[])],ChartsModule)}();return exports.ChartsModule=ChartsModule,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])}this||self;return __export($__require("./components/charts/charts")),module.exports});
+System.registerDynamic("ng2-charts/components/charts/charts",["@angular/core"],!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;i<count;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||"horizontalBar"===chartType?formatBarColor(generateColor(index)):generateColor(index)}var core_1=(this||self,$__require("@angular/core")),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(changes){this.initFlag&&(changes.hasOwnProperty("data")||changes.hasOwnProperty("datasets")?(this.chart.data.datasets=this.getDatasets(),this.chart.update()):this.refresh())},BaseChartComponent.prototype.ngOnDestroy=function(){this.chart&&(this.chart.destroy(),this.chart=void 0)},BaseChartComponent.prototype.getChartBuilder=function(ctx){var _this=this,datasets=this.getDatasets(),options=Object.assign({},this.options);this.legend===!1&&(options.legend={display:!1}),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.getDatasets=function(){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);return datasets},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]],BaseChartComponent.decorators=[{type:core_1.Component,args:[{selector:"base-chart",template:'<canvas style="width: 100%; height: 100%;"></canvas>',styles:[":host { display: block; }"]}]}],BaseChartComponent.ctorParameters=[{type:core_1.ElementRef}],BaseChartComponent.propDecorators={data:[{type:core_1.Input}],datasets:[{type:core_1.Input}],labels:[{type:core_1.Input}],options:[{type:core_1.Input}],chartType:[{type:core_1.Input}],colors:[{type:core_1.Input}],legend:[{type:core_1.Input}],chartClick:[{type:core_1.Output}],chartHover:[{type:core_1.Output}]},BaseChartComponent}();exports.BaseChartComponent=BaseChartComponent;var ChartsModule=function(){function ChartsModule(){}return ChartsModule.decorators=[{type:core_1.NgModule,args:[{declarations:[BaseChartComponent],exports:[BaseChartComponent],imports:[]}]}],ChartsModule.ctorParameters=[],ChartsModule}();return exports.ChartsModule=ChartsModule,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])}this||self;return __export($__require("./components/charts/charts")),module.exports});
 //# sourceMappingURL=ng2-charts.min.js.map

CHANGELOG.md

@@ -0,1 +1,16 @@
+<a name="1.3.0"></a>
+# [1.3.0](https://github.com/valor-software/ng2-charts/compare/v1.2.0...v1.3.0) (2016-09-21)
+
+
+### Bug Fixes
+
+* **docs:** Updates for ng2-charts[@1](https://github.com/1).2.0 ([#399](https://github.com/valor-software/ng2-charts/issues/399)) ([2bcb549](https://github.com/valor-software/ng2-charts/commit/2bcb549))
+
+
+### Features
+
+* **package:** upgrade to ng2 2.0.0 and use [@types](https://github.com/types) instead of typings ([#413](https://github.com/valor-software/ng2-charts/issues/413)) ([e5eae04](https://github.com/valor-software/ng2-charts/commit/e5eae04))
+
+
+
 <a name="1.2.0"></a>
@@ -2,0 +17,0 @@ # [1.2.0](https://github.com/valor-software/ng2-charts/compare/v1.1.2...v1.2.0) (2016-09-09)

components/charts/charts.d.ts

@@ -1,2 +0,2 @@
-import { OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef } from '@angular/core';
+import { OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef, SimpleChanges } from '@angular/core';
 export declare class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
@@ -21,5 +21,6 @@ static defaultColors: Array<number[]>;
     ngOnInit(): any;
-    ngOnChanges(): any;
+    ngOnChanges(changes: SimpleChanges): any;
     ngOnDestroy(): any;
     getChartBuilder(ctx: any): any;
+    private getDatasets();
     private refresh();
@@ -26,0 +27,0 @@ }

components/charts/charts.js

 "use strict";
-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 = require('@angular/core');
@@ -30,5 +21,12 @@ var BaseChartComponent = (function () {
     };
-    BaseChartComponent.prototype.ngOnChanges = function () {
+    BaseChartComponent.prototype.ngOnChanges = function (changes) {
         if (this.initFlag) {
-            this.refresh();
+            // Check if the changes are in the data or datasets
+            if (changes.hasOwnProperty('data') || changes.hasOwnProperty('datasets')) {
+                this.chart.data.datasets = this.getDatasets();
+                this.chart.update();
+            }
+            else {
+                this.refresh();
+            }
         }
@@ -44,31 +42,3 @@ };
         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);
-        }
+        var datasets = this.getDatasets();
         var options = Object.assign({}, this.options);
@@ -106,2 +76,35 @@ if (this.legend === false) {
     };
+    BaseChartComponent.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;
+    };
     BaseChartComponent.prototype.refresh = function () {
@@ -130,46 +133,24 @@ var _this = this;
     ];
-    __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>",
-            styles: [":host { display: block; }"]
-        }), 
-        __metadata('design:paramtypes', [core_1.ElementRef])
-    ], BaseChartComponent);
+    BaseChartComponent.decorators = [
+        { type: core_1.Component, args: [{
+                    selector: 'base-chart',
+                    template: "<canvas style=\"width: 100%; height: 100%;\"></canvas>",
+                    styles: [":host { display: block; }"]
+                },] },
+    ];
+    /** @nocollapse */
+    BaseChartComponent.ctorParameters = [
+        { type: core_1.ElementRef, },
+    ];
+    BaseChartComponent.propDecorators = {
+        'data': [{ type: core_1.Input },],
+        'datasets': [{ type: core_1.Input },],
+        'labels': [{ type: core_1.Input },],
+        'options': [{ type: core_1.Input },],
+        'chartType': [{ type: core_1.Input },],
+        'colors': [{ type: core_1.Input },],
+        'legend': [{ type: core_1.Input },],
+        'chartClick': [{ type: core_1.Output },],
+        'chartHover': [{ type: core_1.Output },],
+    };
     return BaseChartComponent;
@@ -268,16 +249,17 @@ }());
     }
-    ChartsModule = __decorate([
-        core_1.NgModule({
-            declarations: [
-                BaseChartComponent
-            ],
-            exports: [
-                BaseChartComponent
-            ],
-            imports: []
-        }), 
-        __metadata('design:paramtypes', [])
-    ], ChartsModule);
+    ChartsModule.decorators = [
+        { type: core_1.NgModule, args: [{
+                    declarations: [
+                        BaseChartComponent
+                    ],
+                    exports: [
+                        BaseChartComponent
+                    ],
+                    imports: []
+                },] },
+    ];
+    /** @nocollapse */
+    ChartsModule.ctorParameters = [];
     return ChartsModule;
 }());
 exports.ChartsModule = ChartsModule;

components/charts/readme.md

 ### Usage
 ```typescript
-import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';
+import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';
 ```
@@ -5,0 +5,0 @@

package.json

 {
   "name": "ng2-charts",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Reactive, responsive, beautiful charts for Angular2 based on Chart.js",
   "scripts": {
-    "flow.install:typings": "./node_modules/.bin/typings install",
-    "flow.compile": "npm run flow.install:typings && npm run flow.compile:common && npm run flow.compile:system",
-    "flow.compile:common": "./node_modules/.bin/tsc -p tsconfig.publish.json",
+    "flow.compile": "npm run flow.compile:common && npm run flow.compile:system",
+    "flow.compile:common": "ngc -p tsconfig.publish.json",
     "flow.compile:system": "./.config/bundle-system.js",
-    "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-charts.+(js|d.ts|js.map)\"",
-    "flow.deploy:gh-pages": "npm run flow.build:prod && ./node_modules/.bin/gh-pages -d demo-build",
-    "flow.eslint": "./node_modules/.bin/eslint --ignore-path .gitignore  --ext js --fix . .config",
-    "flow.tslint": "./node_modules/.bin/gulp lint",
+    "flow.copy:src": "cpy ng2-charts.ts \"components/*.ts\" ts --parents",
+    "flow.clean": "del bundles coverage demo-build \"components/**/*.+(js|d.ts|js.map)\" dist \"ng2-charts.+(js|d.ts|js.map)\"",
+    "flow.deploy:gh-pages": "npm run flow.build:prod && gh-pages -d demo-build",
+    "flow.eslint": "eslint --ignore-path .gitignore  --ext js --fix . .config",
+    "flow.tslint": "gulp lint",
     "flow.lint": "npm run flow.eslint && npm run flow.tslint",
-    "flow.changelog": "./node_modules/.bin/conventional-changelog -i CHANGELOG.md -s -p angular -v",
-    "flow.github-release": "./node_modules/.bin/conventional-github-releaser -p angular",
-    "flow.build:prod": "NODE_ENV=production ./node_modules/.bin/webpack --progress --color --display-error-details --display-cached",
-    "flow.build:dev": "./node_modules/.bin/webpack --progress --color",
-    "flow.serve:dev": "./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
-    "flow.serve:prod": "NODE_ENV=production ./node_modules/.bin/webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
+    "flow.changelog": "conventional-changelog -i CHANGELOG.md -s -p angular -v",
+    "flow.github-release": "conventional-github-releaser -p angular",
+    "flow.build:prod": "NODE_ENV=production webpack --progress --color --display-error-details --display-cached",
+    "flow.build:dev": "webpack --progress --color",
+    "flow.serve:dev": "webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
+    "flow.serve:prod": "NODE_ENV=production webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
     "prepublish": "npm run flow.clean && npm run flow.compile",
@@ -26,4 +25,4 @@ "postpublish": "npm run flow.deploy:gh-pages",
     "pretest": "npm run flow.lint",
-    "test": "NODE_ENV=test ./node_modules/.bin/karma start",
-    "test:watch": "NODE_ENV=test ./node_modules/.bin/karma start --auto-watch --no-single-run",
+    "test": "NODE_ENV=test karma start",
+    "test:watch": "NODE_ENV=test karma start --auto-watch --no-single-run",
     "preversion": "npm test",
@@ -51,6 +50,6 @@ "version": "npm run flow.changelog && git add -A",
   "peerDependencies": {
-    "@angular/core": "2.0.0-rc.6",
-    "@angular/compiler": "2.0.0-rc.6",
-    "@angular/common": "2.0.0-rc.6",
-    "@angular/forms": "2.0.0-rc.6"
+    "@angular/core": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/common": "2.0.0",
+    "@angular/forms": "2.0.0"
   },
@@ -61,8 +60,12 @@ "dependencies": {
   "devDependencies": {
-    "@angular/common": "2.0.0-rc.6",
-    "@angular/compiler": "2.0.0-rc.6",
-    "@angular/core": "2.0.0-rc.6",
-    "@angular/forms": "2.0.0-rc.6",
-    "@angular/platform-browser": "2.0.0-rc.6",
-    "@angular/platform-browser-dynamic": "2.0.0-rc.6",
+    "@angular/common": "2.0.0",
+    "@angular/compiler": "2.0.0",
+    "@angular/compiler-cli": "0.6.2",
+    "@angular/core": "2.0.0",
+    "@angular/forms": "2.0.0",
+    "@angular/platform-browser": "2.0.0",
+    "@angular/platform-browser-dynamic": "2.0.0",
+    "@types/jasmine": "2.2.34",
+    "@types/node": "6.0.39",
+    "@types/webpack": "1.12.34",
     "async": "2.0.1",
@@ -75,3 +78,3 @@ "bootstrap": "3.3.7",
     "del-cli": "0.2.0",
-    "es6-promise": "3.2.1",
+    "es6-promise": "3.3.1",
     "es6-shim": "0.35.1",
@@ -88,4 +91,4 @@ "eslint-config-valorsoft": "0.1.0",
     "marked": "0.3.6",
-    "ng2-bootstrap": "1.1.1",
-    "ng2-webpack-config": "0.0.4",
+    "ng2-bootstrap": "1.1.5",
+    "ng2-webpack-config": "0.0.5",
     "pre-commit": "1.1.3",
@@ -96,9 +99,8 @@ "prismjs": "1.5.1",
     "require-dir": "0.3.0",
-    "rxjs": "5.0.0-beta.10",
+    "rxjs": "5.0.0-beta.12",
     "systemjs-builder": "0.15.31",
     "transfer-webpack-plugin": "0.1.4",
     "tslint-config-valorsoft": "1.1.1",
-    "typescript": "1.8.10",
-    "typings": "1.3.3",
-    "zone.js": "0.6.17"
+    "typescript": "2.0.2",
+    "zone.js": "0.6.25"
   },
@@ -105,0 +107,0 @@ "contributors": [

README.md

@@ -13,5 +13,9 @@ # ng2-charts [![npm version](https://badge.fury.io/js/ng2-charts.svg)](http://badge.fury.io/js/ng2-charts)
 # Usage & Demo
+
+Sample in below website uses ng2-charts@1.1.0
+
 [http://valor-software.github.io/ng2-charts/](http://valor-software.github.io/ng2-charts/)
 [http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview](http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview)
 
+
 - - -
@@ -18,0 +22,0 @@

tsconfig.json

 {
-  "version": "1.8.9",
   "compilerOptions": {
@@ -7,19 +6,25 @@ "target": "es5",
     "moduleResolution": "node",
-    "sourceMap": false,
-    "declaration": true,
-    "removeComments": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "sourceMap": true,
+    "noEmitHelpers": true,
     "noImplicitAny": true,
-    "listFiles": false,
-    "noLib": false
+    "declaration": false,
+    "skipLibCheck": true,
+    "stripInternal": true,
+    "lib": ["dom", "es6"],
+    "types": [
+      "jasmine",
+      "node",
+      "webpack"
+    ]
   },
   "exclude": [
-    "node_modules"
+    "node_modules", "bundles", "dist"
   ],
   "files": [
     "./demo/custom-typings.d.ts",
-    "./typings/index.d.ts",
     "./ng2-charts.ts"
-  ]
+  ],
+  "atom": { "rewriteTsconfig": false }
 }

tsconfig.publish.json

@@ -11,3 +11,11 @@ {
     "noImplicitAny": true,
-    "declaration": true
+    "declaration": true,
+    "skipLibCheck": true,
+    "stripInternal": true,
+    "lib": ["dom", "es6"],
+    "types": [
+      "jasmine",
+      "node",
+      "webpack"
+    ]
   },
@@ -18,6 +26,8 @@ "exclude": [
   "files": [
-    "./typings/index.d.ts",
     "./demo/custom-typings.d.ts",
     "./ng2-charts.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "genDir": "factories"
+  }
 }

No alert changes

Improved metrics

Number of package files

31

increased by6.9%

Lines of code

881

increased by0.11%

Number of lines in readme file

99

increased by4.21%

Worsened metrics

Total package byte prevSize

65079

decreased by-0.46%

Dev dependency count

42

increased by7.69%

No dependency changes