Merge pull request #392 from valor-software/feat-rc6

feat(package): upgrade to rc6 and use ng2-webpack-conf

Author: valorkin

.gitignore

@@ -8,23 +8,25 @@ npm-debug.log
 
 # WebStorm
 .idea
+.vscode
 
 # ignore build and dist for now
-/build
 /bundles
 /demo-build
 /dist
 /coverage
 /ts
+/doc
 
-ng2-charts.d.ts
-ng2-charts.js
-ng2-charts.js.map
+# ignore inline compiling
 /demo/**/*.js
 /demo/**/*.js.map
 /demo/**/*.d.ts
+!/demo/custom-typings.d.ts
 /components/**/*.js
 /components/**/*.js.map
 /components/**/*.d.ts
-
+ng2-charts.js
+ng2-charts.d.ts
+ng2-charts.js.map
 /logs

.ng2-config.js

@@ -0,0 +1,29 @@
+'use strict';
+var pkg = require('./package.json');
+
+module.exports = {
+  // metadata
+  title: pkg.description,
+  baseUrl: '/',
+  // root folder name
+  src: 'demo',
+  dist: 'demo-build',
+  htmlIndexes: ['index.html'],
+  // karma bundle src
+  spec: './spec-bundle.js',
+  // webpack entry
+  entry: {
+    polyfills: './demo/polyfills.ts',
+    vendor: './demo/vendor.ts',
+    main: './demo/index.ts'
+  },
+  commonChunks: {
+    name: ['polyfills', 'vendor'].reverse()
+  },
+  // webpack alias
+  alias: {},
+  copy: [
+    {from: 'demo/favicon.ico', to: 'favicon.ico'},
+    {from: 'demo/assets', to: 'assets'}
+  ]
+};

.travis.yml

@@ -2,12 +2,14 @@ language: node_js
 node_js:
   - "6"
 
+before_install: npm i -g npm@latest
+
 script:
   - npm run flow.install:typings
   - npm test
 
 after_success:
-  - ./node_modules/.bin/codecov
+  - ./node_modules/.bin/codecov  -f coverage/coverage-final.json
 
 addons:
   # sauce labs tunel connector (read more https://docs.travis-ci.com/user/sauce-connect/ )

README.md

@@ -31,7 +31,7 @@ Follow me at [twitter](https://twitter.com/valorkin) to be notified about new re
   **Important**: Embedding `Chart.js` in application is mandatory!
 
   ```html
-  <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
+  <script src="node_modules/chart.js/src/chart.js"></script>
   ```
 ### Usage & Demo
  Demo and API details of ***ng2-charts*** can be found here:
@@ -46,7 +46,7 @@ System.js bundles can be found in `bundles` directory of npm package or at [npm
 
 ### Import
 ```typescript
-import {ChartsModule} from 'ng2-charts/ng2-charts';
+import { ChartsModule } from 'ng2-charts/ng2-charts';
 
 // In your App's module:
 imports: [
@@ -80,7 +80,6 @@ There are one directive for all chart types: `base-chart`, and there are 6 types
 There are a set several default colors. Colors can be replaced using the `colors` attribute. If there is more data than colors, colors are generated randomly.
 
 
-
 ## Troubleshooting
 
 Please follow this guidelines when reporting bugs and feature requests:

components/charts/charts.spec.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChartsModule } from '../../ng2-charts';
+
+const html = ``;
+
+describe('Component: ng2-charts', () => {
+  let fixture:ComponentFixture<any>;
+  let context:TestChartsComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [TestChartsComponent],
+      imports: [ChartsModule]
+    });
+    TestBed.overrideComponent(TestChartsComponent, {set: {template: html}});
+    fixture = TestBed.createComponent(TestChartsComponent);
+    context = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('fixture should not be null', () => {
+    expect(fixture).not.toBeNull();
+  });
+});
+
+@Component({
+  selector: 'charts-test',
+  template: ''
+})
+
+class TestChartsComponent {
+}

components/charts/charts.ts

@@ -107,7 +107,7 @@ export class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
 
     let options:any = Object.assign({}, this.options);
     if (this.legend === false) {
-      options.legend = { display: false };
+      options.legend = {display: false};
     }
     // hock for onHover and onClick events
     options.hover = options.hover || {};
@@ -288,14 +288,13 @@ function getColors(chartType:string, index:number, count:number):Color {
 }
 
 @NgModule({
-    declarations: [
-        BaseChartComponent
-    ],
-    exports: [
-        BaseChartComponent
-    ],
-    imports: [
-
-    ]
+  declarations: [
+    BaseChartComponent
+  ],
+  exports: [
+    BaseChartComponent
+  ],
+  imports: []
 })
-export class ChartsModule {}
+export class ChartsModule {
+}

components/charts/readme.md

@@ -15,7 +15,7 @@ There are one directive for all chart types: `base-chart`, and there are 6 types
 - `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/))
-- `colours` (`?Array<any>`) - data colours, will use default and|or random colours if not specified (see below)
+- `colors` (`?Array<any>`) - data colors, will use default and|or random colors if not specified (see below)
 - `legend`: (`?boolean=false`) - if true show legend below the chart, otherwise not be shown
 
 ### Events
@@ -24,6 +24,6 @@ There are one directive for all chart types: `base-chart`, and there are 6 types
 - `chartHover`: fires when mousemove (hover) on a chart has occurred, returns information regarding active points and labels
 
 
-### Colours
+### Colors
 
-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.
+There are a set several default colors. Colors can be replaced using the `colors` attribute. If there is more data than colors, colors are generated randomly.

demo/components/charts-section.ts

@@ -1,9 +1,9 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 let name = 'Charts';
 let src = 'https://github.com/valor-software/ng2-charts/blob/master/components/charts/charts.ts';
 // webpack html imports
-let doc = ''; // require('../../components/charts/readme.md');
+let doc = require('../../components/charts/readme.md');
 
 let chartDesc:Array<any> = [
   {
@@ -60,7 +60,7 @@ let chartDesc:Array<any> = [
 ];
 
 let chartContent:string = ``;
-chartDesc.forEach((desc:any) => {
+chartDesc.forEach((desc:any, index:number) => {
 
   chartContent += `
       <section id="${desc.id}" style="padding-top: 50px;">
@@ -94,6 +94,7 @@ chartDesc.forEach((desc:any) => {
             </tab>
             <tab heading="TypeScript">
               <div class="card card-block panel panel-default panel-body">
+                <pre class="language-typescript"><code class="language-typescript" [innerHTML]="chartDesc[${index}].ts"></code></pre>
               </div>
             </tab>
           </tabset>
@@ -106,27 +107,31 @@ chartDesc.forEach((desc:any) => {
 @Component({
   selector: 'charts-section',
   template: `
-  <br>
-  <div class="row">
-    <h2>API</h2>
-    <div class="card card-block panel panel-default panel-body">${doc}</div>
-  </div>
-
-  <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
-
-    <hr>
-
+    <br>
     <div class="row">
-      <h2>Example</h2>
-        ${chartContent}
+      <h2>API</h2>
+      <div class="card card-block panel panel-default panel-body" [innerHTML]="doc"></div>
     </div>
-
-    <br>
-
-  </section>
+  
+    <section id="${name.toLowerCase()}">
+      <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+  
+      <hr>
+  
+      <div class="row">
+        <h2>Example</h2>
+          
+        ${chartContent}
+          
+      </div>
+  
+      <br>
+  
+    </section>
   `
-
 })
+
 export class ChartsSectionComponent {
+  public doc:string = doc;
+  public chartDesc:any[] = chartDesc;
 }

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 // webpack html imports
 let template = require('./bar-chart-demo.html');
@@ -17,8 +17,8 @@ export class BarChartDemoComponent {
   public barChartLegend:boolean = true;
 
   public barChartData:any[] = [
-    {data: [65, 59, 80, 81, 56, 55, 40], label:'Series A'},
-    {data: [28, 48, 40, 19, 86, 27, 90], label:'Series B'}
+    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
+    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
   ];
 
   // events

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 // webpack html imports
 let template = require('./base-chart-demo.html');