feat(charts): base charts now is directive

BREAKING CHANGES:
- 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>

components/charts/charts.ts

@@ -1,16 +1,21 @@
 import {
-  Component, OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef, Input,
-  Output, NgModule, SimpleChanges
+  OnDestroy,
+  OnInit,
+  OnChanges,
+  EventEmitter,
+  ElementRef,
+  Input,
+  Output,
+  NgModule,
+  SimpleChanges,
+  Directive
 } from '@angular/core';
 
 declare var Chart:any;
 
-@Component({
-  selector: 'base-chart',
-  template: `<canvas width="100%" height="100%"></canvas>`,
-  styles: [`:host { display: block; }`]
-})
-export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
+/* tslint:disable-next-line */
+@Directive({selector: 'canvas[baseChart]'})
+export class BaseChartDirective implements OnDestroy, OnChanges, OnInit {
   public static defaultColors:Array<number[]> = [
     [255, 99, 132],
     [54, 162, 235],
@@ -29,7 +34,7 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
   @Input() public data:number[] | Array<number[]>;
   @Input() public datasets:any[];
   @Input() public labels:Array<any> = [];
-  @Input() public options:any = {responsive: true};
+  @Input() public options:any = {};
   @Input() public chartType:string;
   @Input() public colors:Array<any>;
   @Input() public legend:boolean;
@@ -39,7 +44,6 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
 
   private ctx:any;
   private cvs:any;
-  private parent:any;
   private chart:any;
   private initFlag:boolean = false;
 
@@ -50,9 +54,8 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
   }
 
   public ngOnInit():any {
-    this.ctx = this.element.nativeElement.children[0].getContext('2d');
-    this.cvs = this.element.nativeElement.children[0];
-    this.parent = this.element.nativeElement;
+    this.ctx = this.element.nativeElement.getContext('2d');
+    this.cvs = this.element.nativeElement;
     this.initFlag = true;
     if (this.data || this.datasets) {
       this.refresh();
@@ -154,9 +157,9 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
   }
 
   private refresh():any {
-    if (this.options && this.options.responsive && this.parent.clientHeight === 0) {
-      return setTimeout(() => this.refresh(), 50);
-    }
+    // if (this.options && this.options.responsive) {
+    //   setTimeout(() => this.refresh(), 50);
+    // }
 
     // todo: remove this line, it is producing flickering
     this.ngOnDestroy();
@@ -256,7 +259,7 @@ function getRandomColor():number[] {
  * @returns {number[]|Color}
  */
 function generateColor(index:number):number[] {
-  return BaseChartComponent.defaultColors[index] || getRandomColor();
+  return BaseChartDirective.defaultColors[index] || getRandomColor();
 }
 
 /**
@@ -267,7 +270,7 @@ function generateColor(index:number):number[] {
 function generateColors(count:number):Array<number[]> {
   let colorsArr:Array<number[]> = new Array(count);
   for (let i = 0; i < count; i++) {
-    colorsArr[i] = BaseChartComponent.defaultColors[i] || getRandomColor();
+    colorsArr[i] = BaseChartDirective.defaultColors[i] || getRandomColor();
   }
   return colorsArr;
 }
@@ -300,10 +303,10 @@ function getColors(chartType:string, index:number, count:number):Color {
 
 @NgModule({
   declarations: [
-    BaseChartComponent
+    BaseChartDirective
   ],
   exports: [
-    BaseChartComponent
+    BaseChartDirective
   ],
   imports: []
 })

demo/assets/css/style.css

@@ -246,34 +246,3 @@ pre {
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
-
-.chart-legend, .bar-legend, .line-legend, .pie-legend, .radar-legend, .polararea-legend, .doughnut-legend {
-  list-style-type: none;
-  margin-top: 5px;
-  text-align: center;
-  -webkit-padding-start: 0;
-  -moz-padding-start: 0;
-  padding-left: 0
-}
-
-.chart-legend li, .bar-legend li, .line-legend li, .pie-legend li, .radar-legend li, .polararea-legend li, .doughnut-legend li {
-  display: inline-block;
-  white-space: nowrap;
-  position: relative;
-  margin-bottom: 4px;
-  border-radius: 5px;
-  padding: 2px 8px 2px 28px;
-  font-size: smaller;
-  cursor: default
-}
-
-.chart-legend li span, .bar-legend li span, .line-legend li span, .pie-legend li span, .radar-legend li span, .polararea-legend li span, .doughnut-legend li span {
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 20px;
-  height: 20px;
-  border-radius: 5px
-}
-.chart {display: block; width: 100%;}

demo/components/charts/bar-chart-demo.html

@@ -1,10 +1,13 @@
-<base-chart class="chart"
+<div>
+  <div style="display: block">
+    <canvas baseChart
             [datasets]="barChartData"
             [labels]="barChartLabels"
             [options]="barChartOptions"
             [legend]="barChartLegend"
             [chartType]="barChartType"
             (chartHover)="chartHovered($event)"
-            (chartClick)="chartClicked($event)"></base-chart>
-
-<button (click)="randomize()">Update</button>
+            (chartClick)="chartClicked($event)"></canvas>
+  </div>
+  <button (click)="randomize()">Update</button>
+</div>

demo/components/charts/base-chart-demo.html

@@ -1,22 +1,22 @@
   <div class="col-md-6">
 
-    <base-chart class="chart"
+    <canvas baseChart
                 [data]="lineChartData"
                 [labels]="lineChartLabels"
                 [options]="lineChartOptions"
                 [chartType]="lineChartType"
                 (chartHover)="chartHovered($event)"
-                (chartClick)="chartClicked($event)"></base-chart>
+                (chartClick)="chartClicked($event)"></canvas>
   </div>
   <div class="col-md-6">
-    <base-chart class="chart"
+    <canvas baseChart
                 [data]="pieChartData"
                 [labels]="pieChartLabels"
                 [chartType]="pieChartType"
                 (chartHover)="chartHovered($event)"
-                (chartClick)="chartClicked($event)"></base-chart>
+                (chartClick)="chartClicked($event)"></canvas>
   </div>
-  <div class="col-md-12 text-center" style="margin-top: 10px;">
+  <div class="col-md-12 text-center" style="margin-top: 10px;height: 50%">
     <button (click)="randomizeType()" style="display: inline-block">Toggle</button>
   </div>
 

demo/components/charts/doughnut-chart-demo.html

@@ -1,6 +1,8 @@
-<base-chart class="chart"
-                [data]="doughnutChartData"
-                [labels]="doughnutChartLabels"
-                [chartType]="doughnutChartType"
-                (chartHover)="chartHovered($event)"
-                (chartClick)="chartClicked($event)"></base-chart>
+<div style="display: block">
+  <canvas baseChart
+              [data]="doughnutChartData"
+              [labels]="doughnutChartLabels"
+              [chartType]="doughnutChartType"
+              (chartHover)="chartHovered($event)"
+              (chartClick)="chartClicked($event)"></canvas>
+</div>

demo/components/charts/line-chart-demo.html

@@ -1,16 +1,18 @@
 <div class="row">
   <div class="col-md-6">
-    <base-chart class="chart"
+    <div style="display: block;">
+    <canvas baseChart width="400" height="400"
                 [datasets]="lineChartData"
                 [labels]="lineChartLabels"
                 [options]="lineChartOptions"
                 [colors]="lineChartColors"
                 [legend]="lineChartLegend"
                 [chartType]="lineChartType"
                 (chartHover)="chartHovered($event)"
-                (chartClick)="chartClicked($event)"></base-chart>
+                (chartClick)="chartClicked($event)"></canvas>
+    </div>
   </div>
-  <div class="col-md-6" style="margin-bottom: 10px;">
+  <div class="col-md-6" style="margin-bottom: 10px">
     <table class="table table-responsive table-condensed">
       <tr>
         <th *ngFor="let label of lineChartLabels">{{label}}</th>

demo/components/charts/pie-chart-demo.html

@@ -1,6 +1,8 @@
-<base-chart class="chart"
-           [data]="pieChartData"
-           [labels]="pieChartLabels"
-           [chartType]="pieChartType"
-           (chartHover)="chartHovered($event)"
-           (chartClick)="chartClicked($event)"></base-chart>
+<div style="display: block">
+  <canvas baseChart
+          [data]="pieChartData"
+          [labels]="pieChartLabels"
+          [chartType]="pieChartType"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+</div>

demo/components/charts/polar-area-chart-demo.html

@@ -1,7 +1,9 @@
-<base-chart class="chart"
-            [data]="polarAreaChartData"
-            [labels]="polarAreaChartLabels"
-            [legend]="polarAreaLegend"
-            [chartType]="polarAreaChartType"
-            (chartHover)="chartHovered($event)"
-            (chartClick)="chartClicked($event)"></base-chart>
+<div style="display: block">
+  <canvas baseChart
+          [data]="polarAreaChartData"
+          [labels]="polarAreaChartLabels"
+          [legend]="polarAreaLegend"
+          [chartType]="polarAreaChartType"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+</div>

demo/components/charts/radar-chart-demo.html

@@ -1,6 +1,8 @@
-<base-chart class="chart"
-             [datasets]="radarChartData"
-             [labels]="radarChartLabels"
-             [chartType]="radarChartType"
-             (chartHover)="chartHovered($event)"
-             (chartClick)="chartClicked($event)"></base-chart>
+<div style="display: block">
+  <canvas baseChart
+          [datasets]="radarChartData"
+          [labels]="radarChartLabels"
+          [chartType]="radarChartType"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)"></canvas>
+</div>

package.json

@@ -46,33 +46,34 @@
   },
   "homepage": "https://github.com/valor-software/ng2-charts#readme",
   "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",
     "bootstrap": "3.3.7",
     "conventional-changelog-cli": "1.2.0",
     "conventional-github-releaser": "1.1.3",
     "copy-webpack-plugin": "3.0.1",
     "cpy-cli": "1.0.1",
     "del-cli": "0.2.0",
-    "es6-promise": "3.3.1",
+    "es6-promise": "4.0.5",
     "es6-shim": "0.35.1",
     "eslint-config-valorsoft": "0.1.0",
     "gh-pages": "0.11.0",
@@ -81,21 +82,21 @@
     "gulp-clean": "0.3.2",
     "gulp-eslint": "3.0.1",
     "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"
   },
   "contributors": [