chore(package): upgrade build tools (valor-software#822)

* chore wip * feat(package): upgrade to latest angular cli * wip * fix (demo): fix links, navigation (valor-software#828)
Barzille · May 30, 2017 · 971f37c · 971f37c
1 parent 8f59f85
commit 971f37c
Show file tree

Hide file tree

Showing 18 changed files with 9,634 additions and 101 deletions.
diff --git a/angular-cli.json → .angular-cli.json b/angular-cli.json → .angular-cli.json
@@ -20,8 +20,8 @@
       "scripts": [
         "../../node_modules/chart.js/dist/Chart.bundle.js"
       ],
+      "environmentSource": "environments/environment.ts",
       "environments": {
-        "source": "environments/environment.ts",
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }

diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,5 @@
 language: node_js
-node_js:
-  - "6"
+node_js: "7"
 
 before_install:
   - export CHROME_BIN=chromium-browser

diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
@@ -13,7 +13,7 @@ import { RadarChartDemoComponent } from './components/charts/radar-chart-demo';
 import { BaseChartDemoComponent } from './components/charts/base-chart-demo';
 import { ChartSectionComponent } from './components/chart-section.component';
 
-import { TabsModule, CollapseModule, DropdownModule } from 'ng2-bootstrap';
+import { TabsModule, CollapseModule, BsDropdownModule } from 'ngx-bootstrap';
 import { ChartsModule } from 'ng2-charts';
 
 import { AppComponent } from './app.component';
@@ -39,7 +39,7 @@ import { AppComponent } from './app.component';
     ChartsModule,
     TabsModule.forRoot(),
     CollapseModule.forRoot(),
-    DropdownModule.forRoot()
+    BsDropdownModule.forRoot()
   ]
 })
 export class AppModule {

diff --git a/demo/src/app/components/char-section.component.html b/demo/src/app/components/char-section.component.html
@@ -1,4 +1,4 @@
-<section id="${desc.id}" style="padding-top: 50px;">
+<section id="{{id}}" style="padding-top: 50px;">
   <div class="row">
     <div class="col-md-12">
       <h4>{{heading}}</h4>

diff --git a/demo/src/app/components/chart-section.component.ts b/demo/src/app/components/chart-section.component.ts
@@ -9,4 +9,5 @@ export class ChartSectionComponent {
   @Input() public ts:string;
   @Input() public html:string;
   @Input() public heading:string;
+  @Input() public id:string;
 }
diff --git a/demo/src/app/components/charts-section.ts b/demo/src/app/components/charts-section.ts
@@ -6,38 +6,78 @@ let doc = require('html-loader!markdown-loader!../../doc.md');
 @Component({
   selector: 'charts-section',
   template: `
-<br>
-<div class="row">
-  <h2>API</h2>
-  <div class="card card-block panel panel-default panel-body" [innerHTML]="doc"></div>
-</div>
+    <br>
+    <div class="row">
+      <h2>API</h2>
+      <div class="card card-block panel panel-default panel-body" [innerHTML]="doc"></div>
+    </div>
 
-<section [attr.id]="name">
-  <div class="row"><h1>{{name}}<small>(<a [attr.href]="src">src</a>)</small></h1></div>
+    <section [attr.id]="name">
+      <div class="row">
+        <h1>{{name}}
+          <small>(<a [attr.href]="src">src</a>)</small>
+        </h1>
+      </div>
 
-  <hr>
+      <hr>
 
-  <div class="row">
-    <h2>Example</h2>
-      
-    <chart-section [ts]="desc.lineChart.ts" [html]="desc.lineChart.html" [heading]="desc.lineChart.heading"><line-chart-demo></line-chart-demo></chart-section>
-    <chart-section [ts]="desc.barChart.ts" [html]="desc.barChart.html" [heading]="desc.barChart.heading"><bar-chart-demo></bar-chart-demo></chart-section>
-    <chart-section [ts]="desc.douChart.ts" [html]="desc.douChart.html" [heading]="desc.douChart.heading"><doughnut-chart-demo></doughnut-chart-demo></chart-section>
-    <chart-section [ts]="desc.radarChart.ts" [html]="desc.radarChart.html" [heading]="desc.radarChart.heading"><radar-chart-demo></radar-chart-demo></chart-section>
-    <chart-section [ts]="desc.pieChart.ts" [html]="desc.pieChart.html" [heading]="desc.pieChart.heading"><pie-chart-demo></pie-chart-demo></chart-section>
-    <chart-section [ts]="desc.polarChart.ts" [html]="desc.polarChart.html" [heading]="desc.polarChart.heading"><polar-area-chart-demo></polar-area-chart-demo></chart-section>
-    <chart-section [ts]="desc.baseChart.ts" [html]="desc.baseChart.html" [heading]="desc.baseChart.heading"><base-chart-demo></base-chart-demo></chart-section>
-  </div>
+      <div class="row">
+        <h2>Example</h2>
 
-  <br>
+        <chart-section [ts]="desc.lineChart.ts"
+                       [html]="desc.lineChart.html"
+                      
+                       [id]="desc.lineChart.id"
+                       [heading]="desc.lineChart.heading">
+          <line-chart-demo></line-chart-demo>
+        </chart-section>
+        <chart-section [ts]="desc.barChart.ts"
+                       [html]="desc.barChart.html"
+                       [id]="desc.barChart.id"
+                       [heading]="desc.barChart.heading">
+          <bar-chart-demo></bar-chart-demo>
+        </chart-section>
+        <chart-section [ts]="desc.douChart.ts"
+                       [html]="desc.douChart.html"
+                       [id]="desc.douChart.id"
+                       [heading]="desc.douChart.heading">
+          <doughnut-chart-demo></doughnut-chart-demo>
+        </chart-section>
+        <chart-section [ts]="desc.radarChart.ts"
+                       [html]="desc.radarChart.html"
+                       [id]="desc.radarChart.id"
+                       [heading]="desc.radarChart.heading">
+          <radar-chart-demo></radar-chart-demo>
+        </chart-section>
+        <chart-section [ts]="desc.pieChart.ts"
+                       [html]="desc.pieChart.html"
+                       [id]="desc.pieChart.id"
+                       [heading]="desc.pieChart.heading">
+          <pie-chart-demo></pie-chart-demo>
+        </chart-section>
+        <chart-section [ts]="desc.polarChart.ts"
+                       [html]="desc.polarChart.html"
+                       [id]="desc.polarChart.id"
+                       [heading]="desc.polarChart.heading">
+          <polar-area-chart-demo></polar-area-chart-demo>
+        </chart-section>
+        <chart-section [ts]="desc.baseChart.ts"
+                       [html]="desc.baseChart.html"
+                       [id]="desc.baseChart.id"
+                       [heading]="desc.baseChart.heading">
+          <base-chart-demo></base-chart-demo>
+        </chart-section>
+      </div>
 
-</section>
+      <br>
+
+    </section>
   `
 })
 
 export class ChartsSectionComponent {
   public name: string = 'Charts';
-  public src: string = 'https://github.com/valor-software/ng2-charts/blob/master/components/charts/charts.ts';
+  public src: string = 'https://github.com/valor-software/ng2-charts/blob/development/src/charts/charts.ts';
   public doc: string = doc;
   public desc: any = {
     lineChart: {

diff --git a/demo/src/app/components/charts/base-chart-demo.html b/demo/src/app/components/charts/base-chart-demo.html
@@ -3,7 +3,6 @@
     <canvas baseChart
                 [data]="lineChartData"
                 [labels]="lineChartLabels"
-                [options]="lineChartOptions"
                 [chartType]="lineChartType"
                 (chartHover)="chartHovered($event)"
                 (chartClick)="chartClicked($event)"></canvas>

diff --git a/demo/src/app/components/demo-header.ts b/demo/src/app/components/demo-header.ts
@@ -48,6 +48,7 @@ let components = [
   </header>`
 })
 export class DemoHeaderComponent {
+  isCollapsed: boolean;
   public components:Array<any> = components;
   public prefix:string = '';
 }
diff --git a/demo/src/doc.md b/demo/src/doc.md
@@ -9,13 +9,13 @@ imports: [
 ```
 
 ### Chart types
-There are one directive for all chart types: `base-chart`, and there are 6 types of charts: , `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`.
+There are one directive for all chart types: `base-chart`, and there are 6 types of charts: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`.
 
 ### Properties
 
 **Note**: For more information about possible options please refer to original [chart.js](http://www.chartjs.org/docs) documentation
 
-- `data` (`Array<number[]> | number[]`) -  set of points of the chart, it should be `Array<number[]>` only for `line`, `bar` and `radar`, otherwise `number[]`;
+- `data` (`Array<number[]> | number[]`) -  set of points of the chart, it should be `Array<number[]>` only for `line`, `bar` and `radar`, otherwise `number[]`
 - `datasets` (`Array<{data: Array<number[]> | number[], label: string}>`) - `data` see about, the `label` for the dataset which appears in the legend and tooltips
 - `labels` (`?Array<any>`) - x axis labels. It's necessary for charts: `line`, `bar` and `radar`. And just labels (on hover) for charts: `polarArea`, `pie` and `doughnut`
 - `chartType` (`?string`) - indicates the type of charts, it can be: `line`, `bar`, `radar`, `pie`, `polarArea`, `doughnut`

diff --git a/demo/src/getting-started.md b/demo/src/getting-started.md
@@ -16,9 +16,9 @@
   ```html
   <script src="node_modules/chart.js/src/chart.js"></script>
   ```
-### Usage & Demo
+### Usage
  Demo and API details of ***ng2-charts*** can be found here:
-  [demo](http://valor-software.github.io/ng2-charts/) and [source code](https://github.com/valor-software/ng2-charts/tree/master/demo).
+  [source code](https://github.com/valor-software/ng2-charts/tree/master/demo).
 
 ### System.js
 

diff --git a/demo/src/typings.d.ts b/demo/src/typings.d.ts
@@ -5,12 +5,3 @@ declare const System: any;
 declare const ENV:string;
 // google code-prettify
 declare const PR:any;
-
-declare const require:any;
-declare const global:any;
-
-declare module jasmine {
-  interface Matchers {
-    toHaveCssClass(expected: any): boolean;
-  }
-}
diff --git a/karma.conf.js b/karma.conf.js
@@ -6,32 +6,34 @@ const customLaunchers = require('./scripts/sauce-browsers').customLaunchers;
 module.exports = function (config) {
   const configuration = {
     basePath: '',
-    frameworks: ['jasmine', 'angular-cli'],
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
-      require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
     ],
+    mime: { 'text/x-typescript': ['ts','tsx'] },
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
     files: [
       {pattern: './scripts/test.ts', watched: false}
     ],
     preprocessors: {
-      './scripts/test.ts': ['angular-cli']
+      './scripts/test.ts': ['@angular/cli']
     },
-    remapIstanbulReporter: {
-      reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
-      }
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
     },
     angularCli: {
-      config: './angular-cli.json',
       environment: 'dev'
     },
     reporters: config.angularCli && config.angularCli.codeCoverage
-      ? ['dots', 'karma-remap-istanbul']
-      : ['dots'],
+      ? ['progress', 'coverage-istanbul']
+      : ['progress', 'kjhtml'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
@@ -44,8 +46,6 @@ module.exports = function (config) {
         flags: ['--no-sandbox']
       }
     },
-    mime: { 'text/x-typescript': ['ts','tsx'] },
-    client: { captureConsole: true }
   };
 
   if (process.env.TRAVIS) {