ng2-charts - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

.github/ISSUE_TEMPLATE.md

@@ -5,6 +5,6 @@ **Reproduction of the problem**
 To confirm, if the issue shows in a pure Chart.js project, it is a issue of Chart.js.
-Pure Chart.js starting template: https://jsfiddle.net/Hongbo_Miao/mvct2uwo/
+Pure Chart.js starting template: https://jsfiddle.net/Hongbo_Miao/mvct2uwo/3/
 
 If the issue does not show in a pure Chart.js project, and shows in a ng2-charts project, please try to provide a minimal demo of the problem.
-ng2-charts starting template: http://plnkr.co/edit/7fGsiuRjcF0M0Ffeoml2?p=preview
+ng2-charts starting template: http://plnkr.co/edit/Ka4NXG3pZ1mXnaN95HX5?p=preview
 

bundles/ng2-charts.js

@@ -8,6 +8,7 @@ System.registerDynamic('ng2-charts/components/charts/charts', ['@angular/core'], true, function ($__require, exports, module) {
     var core_1 = $__require('@angular/core');
-    var BaseChartComponent = function () {
-        function BaseChartComponent(element) {
+    /* tslint:disable-next-line */
+    var BaseChartDirective = function () {
+        function BaseChartDirective(element) {
             this.labels = [];
-            this.options = { responsive: true };
+            this.options = {};
             this.chartClick = new core_1.EventEmitter();
@@ -18,6 +19,5 @@ this.chartHover = new core_1.EventEmitter();
         }
-        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;
+        BaseChartDirective.prototype.ngOnInit = function () {
+            this.ctx = this.element.nativeElement.getContext('2d');
+            this.cvs = this.element.nativeElement;
             this.initFlag = true;
@@ -28,3 +28,3 @@ if (this.data || this.datasets) {
         };
-        BaseChartComponent.prototype.ngOnChanges = function (changes) {
+        BaseChartDirective.prototype.ngOnChanges = function (changes) {
             if (this.initFlag) {
@@ -40,3 +40,3 @@ // Check if the changes are in the data or datasets
         };
-        BaseChartComponent.prototype.ngOnDestroy = function () {
+        BaseChartDirective.prototype.ngOnDestroy = function () {
             if (this.chart) {
@@ -47,3 +47,3 @@ this.chart.destroy();
         };
-        BaseChartComponent.prototype.getChartBuilder = function (ctx /*, data:Array<any>, options:any*/) {
+        BaseChartDirective.prototype.getChartBuilder = function (ctx /*, data:Array<any>, options:any*/) {
             var _this = this;
@@ -83,3 +83,3 @@ var datasets = this.getDatasets();
         };
-        BaseChartComponent.prototype.getDatasets = function () {
+        BaseChartDirective.prototype.getDatasets = function () {
             var _this = this;
@@ -113,9 +113,6 @@ var datasets = void 0;
         };
-        BaseChartComponent.prototype.refresh = function () {
-            var _this = this;
-            if (this.options && this.options.responsive && this.parent.clientHeight === 0) {
-                return setTimeout(function () {
-                    return _this.refresh();
-                }, 50);
-            }
+        BaseChartDirective.prototype.refresh = function () {
+            // if (this.options && this.options.responsive) {
+            //   setTimeout(() => this.refresh(), 50);
+            // }
             // todo: remove this line, it is producing flickering
@@ -125,11 +122,7 @@ this.ngOnDestroy();
         };
-        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; }"]
-            }] }];
+        BaseChartDirective.defaultColors = [[255, 99, 132], [54, 162, 235], [255, 206, 86], [231, 233, 237], [75, 192, 192], [151, 187, 205], [220, 220, 220], [247, 70, 74], [70, 191, 189], [253, 180, 92], [148, 159, 177], [77, 83, 96]];
+        BaseChartDirective.decorators = [{ type: core_1.Directive, args: [{ selector: 'canvas[baseChart]' }] }];
         /** @nocollapse */
-        BaseChartComponent.ctorParameters = [{ type: core_1.ElementRef }];
-        BaseChartComponent.propDecorators = {
+        BaseChartDirective.ctorParameters = [{ type: core_1.ElementRef }];
+        BaseChartDirective.propDecorators = {
             'data': [{ type: core_1.Input }],
@@ -145,5 +138,5 @@ 'datasets': [{ type: core_1.Input }],
         };
-        return BaseChartComponent;
+        return BaseChartDirective;
     }();
-    exports.BaseChartComponent = BaseChartComponent;
+    exports.BaseChartDirective = BaseChartDirective;
     function rgba(colour, alpha) {
@@ -220,3 +213,3 @@ return 'rgba(' + colour.concat(alpha).join(',') + ')';
     function generateColor(index) {
-        return BaseChartComponent.defaultColors[index] || getRandomColor();
+        return BaseChartDirective.defaultColors[index] || getRandomColor();
     }
@@ -231,3 +224,3 @@ /**
         for (var i = 0; i < count; i++) {
-            colorsArr[i] = BaseChartComponent.defaultColors[i] || getRandomColor();
+            colorsArr[i] = BaseChartDirective.defaultColors[i] || getRandomColor();
         }
@@ -261,4 +254,4 @@ return colorsArr;
         ChartsModule.decorators = [{ type: core_1.NgModule, args: [{
-                declarations: [BaseChartComponent],
-                exports: [BaseChartComponent],
+                declarations: [BaseChartDirective],
+                exports: [BaseChartDirective],
                 imports: []
@@ -265,0 +258,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 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});
+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 BaseChartDirective.defaultColors[index]||getRandomColor()}function generateColors(count){for(var colorsArr=new Array(count),i=0;i<count;i++)colorsArr[i]=BaseChartDirective.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")),BaseChartDirective=function(){function BaseChartDirective(element){this.labels=[],this.options={},this.chartClick=new core_1.EventEmitter,this.chartHover=new core_1.EventEmitter,this.initFlag=!1,this.element=element}return BaseChartDirective.prototype.ngOnInit=function(){this.ctx=this.element.nativeElement.getContext("2d"),this.cvs=this.element.nativeElement,this.initFlag=!0,(this.data||this.datasets)&&this.refresh()},BaseChartDirective.prototype.ngOnChanges=function(changes){this.initFlag&&(changes.hasOwnProperty("data")||changes.hasOwnProperty("datasets")?(this.chart.data.datasets=this.getDatasets(),this.chart.update()):this.refresh())},BaseChartDirective.prototype.ngOnDestroy=function(){this.chart&&(this.chart.destroy(),this.chart=void 0)},BaseChartDirective.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)},BaseChartDirective.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},BaseChartDirective.prototype.refresh=function(){this.ngOnDestroy(),this.chart=this.getChartBuilder(this.ctx)},BaseChartDirective.defaultColors=[[255,99,132],[54,162,235],[255,206,86],[231,233,237],[75,192,192],[151,187,205],[220,220,220],[247,70,74],[70,191,189],[253,180,92],[148,159,177],[77,83,96]],BaseChartDirective.decorators=[{type:core_1.Directive,args:[{selector:"canvas[baseChart]"}]}],BaseChartDirective.ctorParameters=[{type:core_1.ElementRef}],BaseChartDirective.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}]},BaseChartDirective}();exports.BaseChartDirective=BaseChartDirective;var ChartsModule=function(){function ChartsModule(){}return ChartsModule.decorators=[{type:core_1.NgModule,args:[{declarations:[BaseChartDirective],exports:[BaseChartDirective],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,24 @@
+<a name="1.4.0"></a>
+# [1.4.0](https://github.com/valor-software/ng2-charts/compare/v1.2.0...v1.4.0) (2016-10-07)
+
+
+### 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))
+* **pie&doughnut:** Sizing issue on doughnut and pie charts ([#444](https://github.com/valor-software/ng2-charts/issues/444)) ([cfb1033](https://github.com/valor-software/ng2-charts/commit/cfb1033))
+
+
+### Features
+
+* **charts:** base charts now is directive ([7c9e782](https://github.com/valor-software/ng2-charts/commit/7c9e782))
+* **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))
+
+
+### BREAKING CHANGES
+
+* charts: - base-chart component became baseChart directive
+so you need to convert <base-chart...><&lt;base-chart> to <canvas baseChart...><&lt;canvas> and most probably wrap in <div style='display:block'>...<&lt;div>
+
+
+
 <a name="1.3.0"></a>
@@ -2,0 +25,0 @@ # [1.3.0](https://github.com/valor-software/ng2-charts/compare/v1.2.0...v1.3.0) (2016-09-21)

components/charts/charts.d.ts

 import { OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef, SimpleChanges } from '@angular/core';
-export declare class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
+export declare class BaseChartDirective implements OnDestroy, OnChanges, OnInit {
     static defaultColors: Array<number[]>;
@@ -15,3 +15,2 @@ data: number[] | Array<number[]>;
     private cvs;
-    private parent;
     private chart;
@@ -18,0 +17,0 @@ private initFlag;

components/charts/charts.js

 "use strict";
 var core_1 = require('@angular/core');
-var BaseChartComponent = (function () {
-    function BaseChartComponent(element) {
+/* tslint:disable-next-line */
+var BaseChartDirective = (function () {
+    function BaseChartDirective(element) {
         this.labels = [];
-        this.options = { responsive: true };
+        this.options = {};
         this.chartClick = new core_1.EventEmitter();
@@ -12,6 +13,5 @@ this.chartHover = new core_1.EventEmitter();
     }
-    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;
+    BaseChartDirective.prototype.ngOnInit = function () {
+        this.ctx = this.element.nativeElement.getContext('2d');
+        this.cvs = this.element.nativeElement;
         this.initFlag = true;
@@ -22,3 +22,3 @@ if (this.data || this.datasets) {
     };
-    BaseChartComponent.prototype.ngOnChanges = function (changes) {
+    BaseChartDirective.prototype.ngOnChanges = function (changes) {
         if (this.initFlag) {
@@ -35,3 +35,3 @@ // Check if the changes are in the data or datasets
     };
-    BaseChartComponent.prototype.ngOnDestroy = function () {
+    BaseChartDirective.prototype.ngOnDestroy = function () {
         if (this.chart) {
@@ -42,3 +42,3 @@ this.chart.destroy();
     };
-    BaseChartComponent.prototype.getChartBuilder = function (ctx /*, data:Array<any>, options:any*/) {
+    BaseChartDirective.prototype.getChartBuilder = function (ctx /*, data:Array<any>, options:any*/) {
         var _this = this;
@@ -78,3 +78,3 @@ var datasets = this.getDatasets();
     };
-    BaseChartComponent.prototype.getDatasets = function () {
+    BaseChartDirective.prototype.getDatasets = function () {
         var _this = this;
@@ -112,7 +112,6 @@ var datasets = void 0;
     };
-    BaseChartComponent.prototype.refresh = function () {
-        var _this = this;
-        if (this.options && this.options.responsive && this.parent.clientHeight === 0) {
-            return setTimeout(function () { return _this.refresh(); }, 50);
-        }
+    BaseChartDirective.prototype.refresh = function () {
+        // if (this.options && this.options.responsive) {
+        //   setTimeout(() => this.refresh(), 50);
+        // }
         // todo: remove this line, it is producing flickering
@@ -122,3 +121,3 @@ this.ngOnDestroy();
     };
-    BaseChartComponent.defaultColors = [
+    BaseChartDirective.defaultColors = [
         [255, 99, 132],
@@ -137,14 +136,10 @@ [54, 162, 235],
     ];
-    BaseChartComponent.decorators = [
-        { type: core_1.Component, args: [{
-                    selector: 'base-chart',
-                    template: "<canvas style=\"width: 100%; height: 100%;\"></canvas>",
-                    styles: [":host { display: block; }"]
-                },] },
+    BaseChartDirective.decorators = [
+        { type: core_1.Directive, args: [{ selector: 'canvas[baseChart]' },] },
     ];
     /** @nocollapse */
-    BaseChartComponent.ctorParameters = [
+    BaseChartDirective.ctorParameters = [
         { type: core_1.ElementRef, },
     ];
-    BaseChartComponent.propDecorators = {
+    BaseChartDirective.propDecorators = {
         'data': [{ type: core_1.Input },],
@@ -160,5 +155,5 @@ 'datasets': [{ type: core_1.Input },],
     };
-    return BaseChartComponent;
+    return BaseChartDirective;
 }());
-exports.BaseChartComponent = BaseChartComponent;
+exports.BaseChartDirective = BaseChartDirective;
 function rgba(colour, alpha) {
@@ -215,3 +210,3 @@ return 'rgba(' + colour.concat(alpha).join(',') + ')';
 function generateColor(index) {
-    return BaseChartComponent.defaultColors[index] || getRandomColor();
+    return BaseChartDirective.defaultColors[index] || getRandomColor();
 }
@@ -226,3 +221,3 @@ /**
     for (var i = 0; i < count; i++) {
-        colorsArr[i] = BaseChartComponent.defaultColors[i] || getRandomColor();
+        colorsArr[i] = BaseChartDirective.defaultColors[i] || getRandomColor();
     }
@@ -259,6 +254,6 @@ return colorsArr;
                     declarations: [
-                        BaseChartComponent
+                        BaseChartDirective
                     ],
                     exports: [
-                        BaseChartComponent
+                        BaseChartDirective
                     ],
@@ -265,0 +260,0 @@ imports: []

components/charts/charts.metadata.json

@@ -1,1 +0,1 @@
-{"__symbolic":"module","version":1,"metadata":{"BaseChartComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"base-chart","template":"<canvas style=\"width: 100%; height: 100%;\"></canvas>","styles":[":host { display: block; }"]}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"datasets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"labels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"chartType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"chartClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"chartHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getChartBuilder":[{"__symbolic":"method"}],"getDatasets":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}]},"statics":{"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]]}},"ChartsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"BaseChartComponent"}],"exports":[{"__symbolic":"reference","name":"BaseChartComponent"}],"imports":[]}]}]}}}
+{"__symbolic":"module","version":1,"metadata":{"BaseChartDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"canvas[baseChart]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"datasets":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"labels":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"chartType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"colors":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"legend":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"chartClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"chartHover":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"getChartBuilder":[{"__symbolic":"method"}],"getDatasets":[{"__symbolic":"method"}],"refresh":[{"__symbolic":"method"}]},"statics":{"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]]}},"ChartsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule"},"arguments":[{"declarations":[{"__symbolic":"reference","name":"BaseChartDirective"}],"exports":[{"__symbolic":"reference","name":"BaseChartDirective"}],"imports":[]}]}]}}}

package.json

 {
   "name": "ng2-charts",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Reactive, responsive, beautiful charts for Angular2 based on Chart.js",
@@ -49,21 +49,22 @@ "scripts": {
   "peerDependencies": {
-    "@angular/core": "2.0.0",
-    "@angular/compiler": "2.0.0",
-    "@angular/common": "2.0.0",
-    "@angular/forms": "2.0.0"
+    "@angular/core": "~2.0.0",
+    "@angular/compiler": "~2.0.0",
+    "@angular/common": "~2.0.0",
+    "@angular/forms": "~2.0.0"
   },
   "dependencies": {
-    "chart.js": "2.2.2"
+    "chart.js": "2.3.0"
   },
   "devDependencies": {
-    "@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",
+    "@angular/common": "2.0.2",
+    "@angular/compiler": "2.0.2",
+    "@angular/compiler-cli": "0.6.4",
+    "@angular/core": "2.0.2",
+    "@angular/forms": "2.0.2",
+    "@angular/platform-browser": "2.0.2",
+    "@angular/platform-browser-dynamic": "2.0.2",
+    "@angular/platform-server": "2.0.2",
+    "@types/jasmine": "2.5.35",
+    "@types/node": "6.0.45",
+    "@types/webpack": "1.12.35",
     "async": "2.0.1",
@@ -76,3 +77,3 @@ "bootstrap": "3.3.7",
     "del-cli": "0.2.0",
-    "es6-promise": "3.3.1",
+    "es6-promise": "4.0.5",
     "es6-shim": "0.35.1",
@@ -86,17 +87,17 @@ "eslint-config-valorsoft": "0.1.0",
     "gulp-size": "2.1.0",
-    "gulp-tsc": "1.2.3",
-    "gulp-tslint": "6.1.1",
+    "gulp-tsc": "1.2.4",
+    "gulp-tslint": "6.1.2",
     "marked": "0.3.6",
-    "ng2-bootstrap": "1.1.5",
+    "ng2-bootstrap": "~1.1.5",
     "ng2-webpack-config": "0.0.5",
     "pre-commit": "1.1.3",
     "prismjs": "1.5.1",
-    "prismjs-loader": "0.0.3",
+    "prismjs-loader": "0.0.4",
     "reflect-metadata": "0.1.8",
-    "require-dir": "0.3.0",
+    "require-dir": "0.3.1",
     "rxjs": "5.0.0-beta.12",
-    "systemjs-builder": "0.15.31",
+    "systemjs-builder": "0.15.32",
     "transfer-webpack-plugin": "0.1.4",
     "tslint-config-valorsoft": "1.1.1",
-    "typescript": "2.0.2",
+    "typescript": "2.0.3",
     "zone.js": "0.6.25"
@@ -103,0 +104,0 @@ },

No alert changes

Worsened metrics

Total package byte prevSize

64802

decreased by-0.43%

Dev dependency count

43

increased by2.38%

Lines of code

867

decreased by-1.59%

Dependency changes

• + Added@angular/common@2.0.2(transitive)

• + Added@angular/compiler@2.0.2(transitive)

• + Added@angular/core@2.0.2(transitive)

• + Added@angular/forms@2.0.2(transitive)

• + Addedchart.js@2.3.0(transitive)

• - Removed@angular/common@2.0.0(transitive)

• - Removed@angular/compiler@2.0.0(transitive)

• - Removed@angular/core@2.0.0(transitive)

• - Removed@angular/forms@2.0.0(transitive)

• - Removedchart.js@2.2.2(transitive)

• Updatedchart.js@2.3.0