feat(charts): add the charts examples

src/app/@theme/styles/cosmic/cosmic.theme.scss

@@ -29,3 +29,7 @@ $theme-name: 'cosmic';
 // @nga/typography module styles
 @import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
 @include nga-typography($theme-name);
+
+// @nga/charts module styles
+@import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
+@include nga-charts($theme-name);

src/app/@theme/styles/default/default.theme.scss

@@ -28,3 +28,7 @@ $theme-name: 'default';
 // @nga/typography module styles
 @import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
 @include nga-typography($theme-name);
+
+// @nga/charts module styles
+@import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
+@include nga-charts($theme-name);

src/app/@theme/styles/light/light.theme.scss

@@ -28,3 +28,7 @@ $theme-name: 'light';
 // @nga/typography module styles
 @import '~@nga/theme/overrides/typography/styles/themes/nga.theme.default';
 @include nga-typography($theme-name);
+
+// @nga/charts module styles
+@import '~@nga/theme/overrides/charts/styles/themes/nga.theme.default';
+@include nga-charts($theme-name);

src/app/app.module.ts

@@ -4,6 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 import { HttpModule } from '@angular/http';
 
@@ -17,6 +18,7 @@ import { AppRoutingModule } from './app-routing.module';
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     HttpModule,
     AppRoutingModule,
     CoreModule,

src/app/pages/charts/charts-routing.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ChartsComponent } from './charts.component';
+import { EchartsComponent } from './echarts/echarts.component';
+import { D3Component } from './d3/d3.component';
+
+const routes: Routes = [{
+  path: '',
+  component: ChartsComponent,
+  children: [{
+    path: 'echarts',
+    component: EchartsComponent,
+  }, {
+    path: 'd3',
+    component: D3Component,
+  }],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ChartsRoutingModule { }
+
+export const routedComponents = [
+  ChartsComponent,
+  EchartsComponent,
+  D3Component,
+];

src/app/pages/charts/charts.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'ngx-charts',
   template: `
-    <p>charts work!</p>
+    <router-outlet></router-outlet>
   `,
 })
 export class ChartsComponent {

src/app/pages/charts/charts.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { NgaChartsModule } from '@nga/theme';
+
+import { SharedModule } from '../../shared.module';
+
+import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    NgaChartsModule,
+    ChartsRoutingModule,
+  ],
+  declarations: [
+    ...routedComponents,
+  ],
+})
+export class ChartsModule { }

src/app/pages/charts/d3/d3.component.html

@@ -0,0 +1,56 @@
+<div class="row">
+  <div class="col-md-6">
+    <nga-card size="xmedium">
+      <nga-card-header>Pie</nga-card-header>
+      <nga-card-body>
+        <ngx-charts-pie-chart
+          [view]="view"
+          [scheme]="colorScheme"
+          [results]="single"
+          [legend]="showLegend"
+          [labels]="showLabels">
+        </ngx-charts-pie-chart>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card size="xmedium">
+      <nga-card-header>Bar</nga-card-header>
+      <nga-card-body>
+        <ngx-charts-bar-vertical
+          [view]="view"
+          [scheme]="colorScheme"
+          [results]="single"
+          [xAxis]="showXAxis"
+          [yAxis]="showYAxis"
+          [legend]="showLegend"
+          [showXAxisLabel]="showXAxisLabel"
+          [showYAxisLabel]="showYAxisLabel"
+          [xAxisLabel]="xAxisLabel"
+          [yAxisLabel]="yAxisLabel">
+        </ngx-charts-bar-vertical>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-6">
+    <nga-card size="xmedium">
+      <nga-card-header>Line</nga-card-header>
+      <nga-card-body>
+        <ngx-charts-line-chart
+          [view]="view"
+          [scheme]="colorScheme"
+          [results]="multi"
+          [xAxis]="showXAxis"
+          [yAxis]="showYAxis"
+          [legend]="showLegend"
+          [showXAxisLabel]="showXAxisLabel"
+          [showYAxisLabel]="showYAxisLabel"
+          [xAxisLabel]="xAxisLabel"
+          [yAxisLabel]="yAxisLabel">
+        </ngx-charts-line-chart>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

src/app/pages/charts/d3/d3.component.ts

@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-d3',
+  templateUrl: './d3.component.html',
+})
+export class D3Component {
+
+  single = [{
+    name: 'Germany',
+    value: 8940000,
+  }, {
+    name: 'USA',
+    value: 5000000,
+  }, {
+    name: 'France',
+    value: 7200000,
+  }];
+
+  multi = [{
+    name: 'Germany',
+    series: [{
+      name: '2010',
+      value: 7300000,
+    }, {
+      name: '2011',
+      value: 8940000,
+    }],
+  }, {
+    name: 'USA',
+    series: [{
+      name: '2010',
+      value: 7870000,
+    }, {
+      name: '2011',
+      value: 8270000,
+    }],
+  }, {
+    name: 'France',
+    series: [{
+      name: '2010',
+      value: 5000002,
+    }, {
+      name: '2011',
+      value: 5800000,
+    }],
+  }];
+
+  view: any[] = [700, 400];
+
+  showLegend = true;
+
+  colorScheme = {
+    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
+  };
+
+  showXAxis = true;
+
+  showYAxis = true;
+
+  showLabels = true;
+
+  showXAxisLabel = true;
+
+  xAxisLabel = 'Country';
+
+  showYAxisLabel = true;
+
+  yAxisLabel = 'Population';
+}

src/app/pages/charts/echarts/echarts.component.html

@@ -0,0 +1,28 @@
+<div class="row">
+  <div class="col-md-6">
+    <nga-card size="xmedium">
+      <nga-card-header>Pie</nga-card-header>
+      <nga-card-body>
+        <div echarts [options]="pieChartOptions" class="echart"></div>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-md-6">
+    <nga-card size="xmedium">
+      <nga-card-header>Bar</nga-card-header>
+      <nga-card-body>
+        <div echarts [options]="barChartOptions" class="echart"></div>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>
+<div class="row">
+  <div class="col-md-6">
+    <nga-card size="xmedium">
+      <nga-card-header>Line</nga-card-header>
+      <nga-card-body>
+        <div echarts [options]="lineChartOptions" class="echart"></div>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

src/app/pages/charts/echarts/echarts.component.scss

@@ -0,0 +1,9 @@
+@import '~@nga/theme/overrides/bootstrap/styles/themes/nga.theme.default';
+
+:host {
+  display: block;
+
+  .echart {
+    height: calc(#{$nga-card-height-xmedium} - 50px);
+  }
+}

src/app/pages/charts/echarts/echarts.component.ts

@@ -0,0 +1,167 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-echarts',
+  styleUrls: ['./echarts.component.scss'],
+  templateUrl: './echarts.component.html',
+})
+export class EchartsComponent {
+
+  pieChartOptions = {
+
+    color: ['rgb(168, 56, 93)', 'rgb(122, 163, 229)', 'rgb(170, 227, 245)', 'rgb(173, 205, 237)', 'rgb(162, 126, 168)'],
+
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c} ({d}%)',
+    },
+
+    legend: {
+      orient: 'vertical',
+      left: 'left',
+      data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
+      textStyle: {
+        color: 'white',
+      },
+    },
+
+    series: [{
+      name: 'Countries',
+      type: 'pie',
+      radius: '55%',
+      center: ['50%', '60%'],
+      data: [{
+        value: 335,
+        name: 'Germany',
+      }, {
+        value: 310,
+        name: 'France',
+      }, {
+        value: 234,
+        name: 'Canada',
+      }, {
+        value: 135,
+        name: 'Russia',
+      }, {
+        value: 1548,
+        name: 'USA',
+      }],
+
+      itemStyle: {
+        emphasis: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)',
+        },
+      },
+    }],
+  };
+
+  barChartOptions = {
+
+    color: ['#3398DB'],
+
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow',
+      },
+    },
+
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+
+    xAxis: [{
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      axisTick: {
+        alignWithLabel: true,
+      },
+      axisLine: {
+        lineStyle: {
+          color: 'white',
+        },
+      },
+    }],
+
+    yAxis: [{
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: 'white',
+        },
+      },
+    }],
+
+    series: [{
+      name: 'Score',
+      type: 'bar',
+      barWidth: '60%',
+      data: [10, 52, 200, 334, 390, 330, 220],
+    }],
+  };
+
+  lineChartOptions = {
+
+    tooltip: {
+      trigger: 'item',
+      formatter: '{a} <br/>{b} : {c}',
+    },
+
+    legend: {
+      left: 'left',
+      data: ['Line 1', 'Line 2', 'Line 3'],
+      textStyle: {
+        color: 'white',
+      },
+    },
+
+    xAxis: {
+      type: 'category',
+      name: 'x',
+      splitLine: { show: false },
+      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+      axisLine: {
+        lineStyle: {
+          color: 'white',
+        },
+      },
+    },
+
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true,
+    },
+
+    yAxis: {
+      type: 'log',
+      name: 'y',
+      axisLine: {
+        lineStyle: {
+          color: 'white',
+        },
+      },
+    },
+
+    series: [{
+      name: 'Line 1',
+      type: 'line',
+      data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669],
+    }, {
+      name: 'Line 2',
+      type: 'line',
+      data: [1, 2, 4, 8, 16, 32, 64, 128, 256],
+    }, {
+      name: 'Line 3',
+      type: 'line',
+      data: [1 / 2, 1 / 4, 1 / 8, 1 / 16, 1 / 32, 1 / 64, 1 / 128, 1 / 256, 1 / 512],
+    }],
+  };
+
+}

src/app/pages/pages-menu.ts

@@ -50,7 +50,13 @@ export const menuItems: List<NgaMenuItem> = List([{
 }, {
   title: 'Charts',
   icon: 'ion ion-arrow-graph-up-right',
-  link: '/pages/charts',
+  children: List<NgaMenuItem>([{
+    title: 'Echarts',
+    link: '/pages/charts/echarts',
+  }, {
+    title: 'D3',
+    link: '/pages/charts/d3',
+  }]),
 }, {
   title: 'Editors',
   icon: 'ion ion-edit',

src/app/pages/pages-routing.module.ts

@@ -23,7 +23,7 @@ const routes: Routes = [{
     loadChildren: './maps/maps.module#MapsModule',
   }, {
     path: 'charts',
-    component: ChartsComponent,
+    loadChildren: './charts/charts.module#ChartsModule',
   }, {
     path: 'editors',
     loadChildren: './editors/editors.module#EditorsModule',

src/app/pages/pages.module.ts

@@ -9,13 +9,11 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { PagesRoutingModule } from './pages-routing.module';
 import { ThemeModule } from '../@theme/theme.module';
 import { ComponentsComponent } from './components/components.component';
-import { ChartsComponent } from './charts/charts.component';
 
 const PAGES_COMPONENTS = [
   PagesComponent,
   DashboardComponent,
   ComponentsComponent,
-  ChartsComponent,
 ];
 
 @NgModule({

src/app/shared.module.ts

@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { NgaCardModule, NgaBootstrapModule } from '@nga/theme';
 
-@NgModule ({
+@NgModule({
   exports: [
     CommonModule,
     FormsModule,