saving with admin and public base

src/app/admin/charts/chartjs/chartjs-bar-horizontal.component.ts

@@ -0,0 +1,85 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-chartjs-bar-horizontal',
+  template: `
+    <chart type="horizontalBar" [data]="data" [options]="options"></chart>
+  `,
+})
+export class ChartjsBarHorizontalComponent implements OnDestroy {
+  data: any;
+  options: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const chartjs: any = config.variables.chartjs;
+
+      this.data = {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+        datasets: [{
+            label: 'Dataset 1',
+            backgroundColor: colors.infoLight,
+            borderWidth: 1,
+            data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
+          }, {
+            label: 'Dataset 2',
+            backgroundColor: colors.successLight,
+            data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
+          },
+        ],
+      };
+
+      this.options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        elements: {
+          rectangle: {
+            borderWidth: 2,
+          },
+        },
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: chartjs.axisLineColor,
+              },
+              ticks: {
+                fontColor: chartjs.textColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                display: false,
+                color: chartjs.axisLineColor,
+              },
+              ticks: {
+                fontColor: chartjs.textColor,
+              },
+            },
+          ],
+        },
+        legend: {
+          position: 'right',
+          labels: {
+            fontColor: chartjs.textColor,
+          },
+        },
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+
+  private random() {
+    return Math.round(Math.random() * 100);
+  }
+}

src/app/admin/charts/chartjs/chartjs-bar.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService, NbColorHelper } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-chartjs-bar',
+  template: `
+    <chart type="bar" [data]="data" [options]="options"></chart>
+  `,
+})
+export class ChartjsBarComponent implements OnDestroy {
+  data: any;
+  options: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const chartjs: any = config.variables.chartjs;
+
+      this.data = {
+        labels: ['2006', '2007', '2008', '2009', '2010', '2011', '2012'],
+        datasets: [{
+          data: [65, 59, 80, 81, 56, 55, 40],
+          label: 'Series A',
+          backgroundColor: NbColorHelper.hexToRgbA(colors.primaryLight, 0.8),
+        }, {
+          data: [28, 48, 40, 19, 86, 27, 90],
+          label: 'Series B',
+          backgroundColor: NbColorHelper.hexToRgbA(colors.infoLight, 0.8),
+        }],
+      };
+
+      this.options = {
+        maintainAspectRatio: false,
+        responsive: true,
+        legend: {
+          labels: {
+            fontColor: chartjs.textColor,
+          },
+        },
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: false,
+                color: chartjs.axisLineColor,
+              },
+              ticks: {
+                fontColor: chartjs.textColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: chartjs.axisLineColor,
+              },
+              ticks: {
+                fontColor: chartjs.textColor,
+              },
+            },
+          ],
+        },
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/chartjs/chartjs-line.component.ts

@@ -0,0 +1,81 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService, NbColorHelper } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-chartjs-line',
+  template: `
+    <chart type="line" [data]="data" [options]="options"></chart>
+  `,
+})
+export class ChartjsLineComponent implements OnDestroy {
+  data: any;
+  options: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const chartjs: any = config.variables.chartjs;
+
+      this.data = {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [{
+          data: [65, 59, 80, 81, 56, 55, 40],
+          label: 'Series A',
+          backgroundColor: NbColorHelper.hexToRgbA(colors.primary, 0.3),
+          borderColor: colors.primary,
+        }, {
+          data: [28, 48, 40, 19, 86, 27, 90],
+          label: 'Series B',
+          backgroundColor: NbColorHelper.hexToRgbA(colors.danger, 0.3),
+          borderColor: colors.danger,
+        }, {
+          data: [18, 48, 77, 9, 100, 27, 40],
+          label: 'Series C',
+          backgroundColor: NbColorHelper.hexToRgbA(colors.info, 0.3),
+          borderColor: colors.info,
+        },
+        ],
+      };
+
+      this.options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        scales: {
+          xAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: chartjs.axisLineColor,
+              },
+              ticks: {
+                fontColor: chartjs.textColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              gridLines: {
+                display: true,
+                color: chartjs.axisLineColor,
+              },
+              ticks: {
+                fontColor: chartjs.textColor,
+              },
+            },
+          ],
+        },
+        legend: {
+          labels: {
+            fontColor: chartjs.textColor,
+          },
+        },
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/chartjs/chartjs-multiple-xaxis.component.ts

@@ -0,0 +1,117 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-chartjs-multiple-xaxis',
+  template: `
+    <chart type="line" [data]="data" [options]="options"></chart>
+  `,
+})
+export class ChartjsMultipleXaxisComponent implements OnDestroy {
+  data: {};
+  options: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const chartjs: any = config.variables.chartjs;
+
+      this.data = {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+        datasets: [{
+          label: 'dataset - big points',
+          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
+          borderColor: colors.primary,
+          backgroundColor: colors.primary,
+          fill: false,
+          borderDash: [5, 5],
+          pointRadius: 8,
+          pointHoverRadius: 10,
+        }, {
+          label: 'dataset - individual point sizes',
+          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
+          borderColor: colors.dangerLight,
+          backgroundColor: colors.dangerLight,
+          fill: false,
+          borderDash: [5, 5],
+          pointRadius: 8,
+          pointHoverRadius: 10,
+        }, {
+          label: 'dataset - large pointHoverRadius',
+          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
+          borderColor: colors.info,
+          backgroundColor: colors.info,
+          fill: false,
+          pointRadius: 8,
+          pointHoverRadius: 10,
+        }, {
+          label: 'dataset - large pointHitRadius',
+          data: [this.random(), this.random(), this.random(), this.random(), this.random(), this.random()],
+          borderColor: colors.success,
+          backgroundColor: colors.success,
+          fill: false,
+          pointRadius: 8,
+          pointHoverRadius: 10,
+        }],
+      };
+
+      this.options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        legend: {
+          position: 'bottom',
+          labels: {
+            fontColor: chartjs.textColor,
+          },
+        },
+        hover: {
+          mode: 'index',
+        },
+        scales: {
+          xAxes: [
+            {
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: 'Month',
+              },
+              gridLines: {
+                display: true,
+                color: chartjs.axisLineColor,
+              },
+              ticks: {
+                fontColor: chartjs.textColor,
+              },
+            },
+          ],
+          yAxes: [
+            {
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: 'Value',
+              },
+              gridLines: {
+                display: true,
+                color: chartjs.axisLineColor,
+              },
+              ticks: {
+                fontColor: chartjs.textColor,
+              },
+            },
+          ],
+        },
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+
+  private random() {
+    return Math.round(Math.random() * 100);
+  }
+}

src/app/admin/charts/chartjs/chartjs-pie.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-chartjs-pie',
+  template: `
+    <chart type="pie" [data]="data" [options]="options"></chart>
+  `,
+})
+export class ChartjsPieComponent implements OnDestroy {
+  data: any;
+  options: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const chartjs: any = config.variables.chartjs;
+
+      this.data = {
+        labels: ['Download Sales', 'In-Store Sales', 'Mail Sales'],
+        datasets: [{
+          data: [300, 500, 100],
+          backgroundColor: [colors.primaryLight, colors.infoLight, colors.successLight],
+        }],
+      };
+
+      this.options = {
+        maintainAspectRatio: false,
+        responsive: true,
+        scales: {
+          xAxes: [
+            {
+              display: false,
+            },
+          ],
+          yAxes: [
+            {
+              display: false,
+            },
+          ],
+        },
+        legend: {
+          labels: {
+            fontColor: chartjs.textColor,
+          },
+        },
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/chartjs/chartjs-radar.component.ts

@@ -0,0 +1,64 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService, NbColorHelper } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-chartjs-radar',
+  template: `
+    <chart type="radar" [data]="data" [options]="options"></chart>
+  `,
+})
+export class ChartjsRadarComponent implements OnDestroy {
+  options: any;
+  data: {};
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const chartjs: any = config.variables.chartjs;
+
+      this.data = {
+        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+        datasets: [{
+          data: [65, 59, 90, 81, 56, 55, 40],
+          label: 'Series A',
+          borderColor: colors.danger,
+          backgroundColor: NbColorHelper.hexToRgbA(colors.dangerLight, 0.5),
+        }, {
+          data: [28, 48, 40, 19, 96, 27, 100],
+          label: 'Series B',
+          borderColor: colors.warning,
+          backgroundColor: NbColorHelper.hexToRgbA(colors.warningLight, 0.5),
+        }],
+      };
+
+      this.options = {
+        responsive: true,
+        maintainAspectRatio: false,
+        scaleFontColor: 'white',
+        legend: {
+          labels: {
+            fontColor: chartjs.textColor,
+          },
+        },
+        scale: {
+          pointLabels: {
+            fontSize: 14,
+            fontColor: chartjs.textColor,
+          },
+          gridLines: {
+            color: chartjs.axisLineColor,
+          },
+          angleLines: {
+            color: chartjs.axisLineColor,
+          },
+        },
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/chartjs/chartjs.component.html

@@ -0,0 +1,50 @@
+<div class="row">
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Pie</nb-card-header>
+      <nb-card-body>
+        <ngx-chartjs-pie></ngx-chartjs-pie>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Bar</nb-card-header>
+      <nb-card-body>
+        <ngx-chartjs-bar></ngx-chartjs-bar>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Line</nb-card-header>
+      <nb-card-body>
+        <ngx-chartjs-line></ngx-chartjs-line>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Multiple x-axis</nb-card-header>
+      <nb-card-body>
+        <ngx-chartjs-multiple-xaxis></ngx-chartjs-multiple-xaxis>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Bar Horizontal</nb-card-header>
+      <nb-card-body>
+        <ngx-chartjs-bar-horizontal></ngx-chartjs-bar-horizontal>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Radar</nb-card-header>
+      <nb-card-body>
+        <ngx-chartjs-radar></ngx-chartjs-radar>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>

src/app/admin/charts/chartjs/chartjs.component.scss

@@ -0,0 +1,20 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  ngx-chartjs-pie,
+  ngx-chartjs-bar,
+  ngx-chartjs-line,
+  ngx-chartjs-multiple-xaxis,
+  ngx-chartjs-bar-horizontal,
+  ngx-chartjs-radar {
+    display: block;
+    height: nb-theme(card-height-medium);
+    width: 100%;
+
+    ::ng-deep chart {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}

src/app/admin/charts/chartjs/chartjs.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-chartjs',
+  styleUrls: ['./chartjs.component.scss'],
+  templateUrl: './chartjs.component.html',
+})
+export class ChartjsComponent {}

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

@@ -0,0 +1,35 @@
+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';
+import { ChartjsComponent } from './chartjs/chartjs.component';
+
+const routes: Routes = [{
+  path: '',
+  component: ChartsComponent,
+  children: [{
+    path: 'echarts',
+    component: EchartsComponent,
+  }, {
+    path: 'd3',
+    component: D3Component,
+  }, {
+    path: 'chartjs',
+    component: ChartjsComponent,
+  }],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ChartsRoutingModule { }
+
+export const routedComponents = [
+  ChartsComponent,
+  EchartsComponent,
+  D3Component,
+  ChartjsComponent,
+];

src/app/admin/charts/charts.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-charts',
+  template: `
+    <router-outlet></router-outlet>
+  `,
+})
+export class ChartsComponent {
+}

src/app/admin/charts/charts.module.ts

@@ -0,0 +1,63 @@
+import { NgModule } from '@angular/core';
+import { NgxEchartsModule } from 'ngx-echarts';
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { ChartModule } from 'angular2-chartjs';
+import { NbCardModule } from '@nebular/theme';
+
+import { ThemeModule } from '../../@theme/theme.module';
+
+import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
+import { ChartjsBarComponent } from './chartjs/chartjs-bar.component';
+import { ChartjsLineComponent } from './chartjs/chartjs-line.component';
+import { ChartjsPieComponent } from './chartjs/chartjs-pie.component';
+import { ChartjsMultipleXaxisComponent } from './chartjs/chartjs-multiple-xaxis.component';
+import { ChartjsBarHorizontalComponent } from './chartjs/chartjs-bar-horizontal.component';
+import { ChartjsRadarComponent } from './chartjs/chartjs-radar.component';
+import { D3BarComponent } from './d3/d3-bar.component';
+import { D3LineComponent } from './d3/d3-line.component';
+import { D3PieComponent } from './d3/d3-pie.component';
+import { D3AreaStackComponent } from './d3/d3-area-stack.component';
+import { D3PolarComponent } from './d3/d3-polar.component';
+import { D3AdvancedPieComponent } from './d3/d3-advanced-pie.component';
+import { EchartsLineComponent } from './echarts/echarts-line.component';
+import { EchartsPieComponent } from './echarts/echarts-pie.component';
+import { EchartsBarComponent } from './echarts/echarts-bar.component';
+import { EchartsMultipleXaxisComponent } from './echarts/echarts-multiple-xaxis.component';
+import { EchartsAreaStackComponent } from './echarts/echarts-area-stack.component';
+import { EchartsBarAnimationComponent } from './echarts/echarts-bar-animation.component';
+import { EchartsRadarComponent } from './echarts/echarts-radar.component';
+
+const components = [
+  ChartjsBarComponent,
+  ChartjsLineComponent,
+  ChartjsPieComponent,
+  ChartjsMultipleXaxisComponent,
+  ChartjsBarHorizontalComponent,
+  ChartjsRadarComponent,
+  D3BarComponent,
+  D3LineComponent,
+  D3PieComponent,
+  D3AreaStackComponent,
+  D3PolarComponent,
+  D3AdvancedPieComponent,
+  EchartsLineComponent,
+  EchartsPieComponent,
+  EchartsBarComponent,
+  EchartsMultipleXaxisComponent,
+  EchartsAreaStackComponent,
+  EchartsBarAnimationComponent,
+  EchartsRadarComponent,
+];
+
+@NgModule({
+  imports: [
+    ThemeModule,
+    ChartsRoutingModule,
+    NgxEchartsModule,
+    NgxChartsModule,
+    ChartModule,
+    NbCardModule,
+  ],
+  declarations: [...routedComponents, ...components],
+})
+export class ChartsModule {}

src/app/admin/charts/d3/d3-advanced-pie.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-d3-advanced-pie',
+  template: `
+    <ngx-charts-advanced-pie-chart
+      [scheme]="colorScheme"
+      [results]="single">
+    </ngx-charts-advanced-pie-chart>
+  `,
+})
+export class D3AdvancedPieComponent implements OnDestroy {
+  single = [
+    {
+      name: 'Germany',
+      value: 8940000,
+    },
+    {
+      name: 'USA',
+      value: 5000000,
+    },
+    {
+      name: 'France',
+      value: 7200000,
+    },
+  ];
+  colorScheme: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
+      this.colorScheme = {
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/d3/d3-area-stack.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-d3-area-stack',
+  template: `
+    <ngx-charts-area-chart
+      [scheme]="colorScheme"
+      [results]="multi"
+      [xAxis]="showXAxis"
+      [yAxis]="showYAxis"
+      [legend]="showLegend"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel"
+      [autoScale]="autoScale">
+    </ngx-charts-area-chart>
+  `,
+})
+export class D3AreaStackComponent implements OnDestroy {
+  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,
+      }],
+  }];
+  showLegend = true;
+  autoScale = true;
+  showXAxis = true;
+  showYAxis = true;
+  showXAxisLabel = true;
+  showYAxisLabel = true;
+  xAxisLabel = 'Country';
+  yAxisLabel = 'Population';
+  colorScheme: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
+      this.colorScheme = {
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/d3/d3-bar.component.ts

@@ -0,0 +1,45 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-d3-bar',
+  template: `
+    <ngx-charts-bar-vertical
+      [scheme]="colorScheme"
+      [results]="results"
+      [xAxis]="showXAxis"
+      [yAxis]="showYAxis"
+      [legend]="showLegend"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel">
+    </ngx-charts-bar-vertical>
+  `,
+})
+export class D3BarComponent implements OnDestroy {
+
+  results = [
+    { name: 'Germany', value: 8940 },
+    { name: 'USA', value: 5000 },
+    { name: 'France', value: 7200 },
+  ];
+  showLegend = true;
+  showXAxis = true;
+  showYAxis = true;
+  xAxisLabel = 'Country';
+  yAxisLabel = 'Population';
+  colorScheme: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
+      this.colorScheme = {
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/d3/d3-line.component.ts

@@ -0,0 +1,84 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-d3-line',
+  template: `
+    <ngx-charts-line-chart
+      [scheme]="colorScheme"
+      [results]="multi"
+      [xAxis]="showXAxis"
+      [yAxis]="showYAxis"
+      [legend]="showLegend"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel">
+    </ngx-charts-line-chart>
+  `,
+})
+export class D3LineComponent implements OnDestroy {
+  multi = [
+    {
+      name: 'Germany',
+      series: [
+        {
+          name: '2010',
+          value: 7300,
+        },
+        {
+          name: '2011',
+          value: 8940,
+        },
+      ],
+    },
+    {
+      name: 'USA',
+      series: [
+        {
+          name: '2010',
+          value: 7870,
+        },
+        {
+          name: '2011',
+          value: 8270,
+        },
+      ],
+    },
+    {
+      name: 'France',
+      series: [
+        {
+          name: '2010',
+          value: 5002,
+        },
+        {
+          name: '2011',
+          value: 5800,
+        },
+      ],
+    },
+  ];
+  showLegend = true;
+  showXAxis = true;
+  showYAxis = true;
+  showXAxisLabel = true;
+  xAxisLabel = 'Country';
+  showYAxisLabel = true;
+  yAxisLabel = 'Population';
+  colorScheme: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
+      this.colorScheme = {
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/d3/d3-pie.component.ts

@@ -0,0 +1,38 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-d3-pie',
+  template: `
+    <ngx-charts-pie-chart
+      [scheme]="colorScheme"
+      [results]="results"
+      [legend]="showLegend"
+      [labels]="showLabels">
+    </ngx-charts-pie-chart>
+  `,
+})
+export class D3PieComponent implements OnDestroy {
+  results = [
+    { name: 'Germany', value: 8940 },
+    { name: 'USA', value: 5000 },
+    { name: 'France', value: 7200 },
+  ];
+  showLegend = true;
+  showLabels = true;
+  colorScheme: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
+      this.colorScheme = {
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/d3/d3-polar.component.ts

@@ -0,0 +1,98 @@
+import { Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-d3-polar',
+  template: `
+    <ngx-charts-polar-chart
+      [scheme]="colorScheme"
+      [results]="multi"
+      [xAxis]="showXAxis"
+      [yAxis]="showYAxis"
+      [legend]="showLegend"
+      [showXAxisLabel]="showXAxisLabel"
+      [showYAxisLabel]="showYAxisLabel"
+      [xAxisLabel]="xAxisLabel"
+      [yAxisLabel]="yAxisLabel"
+      [autoScale]="autoScale">
+    </ngx-charts-polar-chart>
+  `,
+})
+export class D3PolarComponent implements OnDestroy {
+  multi = [
+    {
+      name: 'Germany',
+      series: [
+        {
+          name: '1990',
+          value: 31476,
+        },
+        {
+          name: '2000',
+          value: 36953,
+        },
+        {
+          name: '2010',
+          value: 40632,
+        },
+      ],
+    },
+    {
+      name: 'USA',
+      series: [
+        {
+          name: '1990',
+          value: 37060,
+        },
+        {
+          name: '2000',
+          value: 45986,
+        },
+        {
+          name: '2010',
+          value: 49737,
+        },
+      ],
+    },
+    {
+      name: 'France',
+      series: [
+        {
+          name: '1990',
+          value: 29476,
+        },
+        {
+          name: '2000',
+          value: 34774,
+        },
+        {
+          name: '2010',
+          value: 36240,
+        },
+      ],
+    },
+  ];
+  showLegend = true;
+  autoScale = true;
+  showXAxis = true;
+  showYAxis = true;
+  showXAxisLabel = true;
+  showYAxisLabel = true;
+  xAxisLabel = 'Country';
+  yAxisLabel = 'Population';
+  colorScheme: any;
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+      const colors: any = config.variables;
+      this.colorScheme = {
+        domain: [colors.primaryLight, colors.infoLight, colors.successLight, colors.warningLight, colors.dangerLight],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

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

@@ -0,0 +1,42 @@
+<div class="row">
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Pie</nb-card-header>
+      <nb-card-body>
+        <ngx-d3-pie></ngx-d3-pie>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Bar</nb-card-header>
+      <nb-card-body>
+        <ngx-d3-bar></ngx-d3-bar>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Line</nb-card-header>
+      <nb-card-body>
+        <ngx-d3-line></ngx-d3-line>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Advanced Pie</nb-card-header>
+      <nb-card-body>
+        <ngx-d3-advanced-pie></ngx-d3-advanced-pie>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Area Chart</nb-card-header>
+      <nb-card-body>
+        <ngx-d3-area-stack></ngx-d3-area-stack>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>

src/app/admin/charts/d3/d3.component.scss

@@ -0,0 +1,46 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  ngx-d3-bar,
+  ngx-d3-pie,
+  ngx-d3-advanced-pie,
+  ngx-d3-area-stack,
+  ngx-d3-line,
+  ngx-d3-polar {
+    display: block;
+    width: 100%;
+    height: nb-theme(card-height-medium);
+
+    ::ng-deep {
+      .pie-label {
+        fill: nb-theme(text-basic-color);
+      }
+
+      text {
+        fill: nb-theme(text-hint-color);
+      }
+
+      .chart-legend {
+        .legend-labels {
+          background: nb-theme(background-basic-color-2);
+        }
+        .legend-label {
+          color: nb-theme(text-hint-color);
+          .active .legend-label-text {
+            color: nb-theme(text-basic-color);
+          }
+        }
+      }
+
+      .total-value,
+      .item-value,
+      .item-percent {
+        line-height: 1.25;
+      }
+
+      .legend-items {
+        overflow-y: hidden;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-d3',
+  styleUrls: ['./d3.component.scss'],
+  templateUrl: './d3.component.html',
+})
+export class D3Component {}

src/app/admin/charts/echarts/echarts-area-stack.component.ts

@@ -0,0 +1,140 @@
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-echarts-area-stack',
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
+})
+export class EchartsAreaStackComponent implements AfterViewInit, OnDestroy {
+  options: any = {};
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+  }
+
+  ngAfterViewInit() {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const echarts: any = config.variables.echarts;
+
+      this.options = {
+        backgroundColor: echarts.bg,
+        color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: echarts.tooltipBackgroundColor,
+            },
+          },
+        },
+        legend: {
+          data: ['Mail marketing', 'Affiliate advertising', 'Video ad', 'Direct interview', 'Search engine'],
+          textStyle: {
+            color: echarts.textColor,
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              lineStyle: {
+                color: echarts.axisLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: echarts.axisLineColor,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: echarts.splitLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: 'Mail marketing',
+            type: 'line',
+            stack: 'Total amount',
+            areaStyle: { normal: { opacity: echarts.areaOpacity } },
+            data: [120, 132, 101, 134, 90, 230, 210],
+          },
+          {
+            name: 'Affiliate advertising',
+            type: 'line',
+            stack: 'Total amount',
+            areaStyle: { normal: { opacity: echarts.areaOpacity } },
+            data: [220, 182, 191, 234, 290, 330, 310],
+          },
+          {
+            name: 'Video ad',
+            type: 'line',
+            stack: 'Total amount',
+            areaStyle: { normal: { opacity: echarts.areaOpacity } },
+            data: [150, 232, 201, 154, 190, 330, 410],
+          },
+          {
+            name: 'Direct interview',
+            type: 'line',
+            stack: 'Total amount',
+            areaStyle: { normal: { opacity: echarts.areaOpacity } },
+            data: [320, 332, 301, 334, 390, 330, 320],
+          },
+          {
+            name: 'Search engine',
+            type: 'line',
+            stack: 'Total amount',
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                textStyle: {
+                  color: echarts.textColor,
+                },
+              },
+            },
+            areaStyle: { normal: { opacity: echarts.areaOpacity } },
+            data: [820, 932, 901, 934, 1290, 1330, 1320],
+          },
+        ],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/echarts/echarts-bar-animation.component.ts

@@ -0,0 +1,103 @@
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-echarts-bar-animation',
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
+})
+export class EchartsBarAnimationComponent implements AfterViewInit, OnDestroy {
+  options: any = {};
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+  }
+
+  ngAfterViewInit() {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+      const xAxisData = [];
+      const data1 = [];
+      const data2 = [];
+
+      const colors: any = config.variables;
+      const echarts: any = config.variables.echarts;
+
+      this.options = {
+        backgroundColor: echarts.bg,
+        color: [colors.primaryLight, colors.infoLight],
+        legend: {
+          data: ['bar', 'bar2'],
+          align: 'left',
+          textStyle: {
+            color: echarts.textColor,
+          },
+        },
+        xAxis: [
+          {
+            data: xAxisData,
+            silent: false,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              lineStyle: {
+                color: echarts.axisLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            axisLine: {
+              lineStyle: {
+                color: echarts.axisLineColor,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: echarts.splitLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: 'bar',
+            type: 'bar',
+            data: data1,
+            animationDelay: idx => idx * 10,
+          },
+          {
+            name: 'bar2',
+            type: 'bar',
+            data: data2,
+            animationDelay: idx => idx * 10 + 100,
+          },
+        ],
+        animationEasing: 'elasticOut',
+        animationDelayUpdate: idx => idx * 5,
+      };
+
+      for (let i = 0; i < 100; i++) {
+        xAxisData.push('Category ' + i);
+        data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
+        data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/echarts/echarts-bar.component.ts

@@ -0,0 +1,92 @@
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-echarts-bar',
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
+})
+export class EchartsBarComponent implements AfterViewInit, OnDestroy {
+  options: any = {};
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+  }
+
+  ngAfterViewInit() {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const echarts: any = config.variables.echarts;
+
+      this.options = {
+        backgroundColor: echarts.bg,
+        color: [colors.primaryLight],
+        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: echarts.axisLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: echarts.axisLineColor,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: echarts.splitLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: 'Score',
+            type: 'bar',
+            barWidth: '60%',
+            data: [10, 52, 200, 334, 390, 330, 220],
+          },
+        ],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/echarts/echarts-line.component.ts

@@ -0,0 +1,106 @@
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-echarts-line',
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
+})
+export class EchartsLineComponent implements AfterViewInit, OnDestroy {
+  options: any = {};
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+  }
+
+  ngAfterViewInit() {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const echarts: any = config.variables.echarts;
+
+      this.options = {
+        backgroundColor: echarts.bg,
+        color: [colors.danger, colors.primary, colors.info],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c}',
+        },
+        legend: {
+          left: 'left',
+          data: ['Line 1', 'Line 2', 'Line 3'],
+          textStyle: {
+            color: echarts.textColor,
+          },
+        },
+        xAxis: [
+          {
+            type: 'category',
+            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              lineStyle: {
+                color: echarts.axisLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: 'log',
+            axisLine: {
+              lineStyle: {
+                color: echarts.axisLineColor,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: echarts.splitLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true,
+        },
+        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],
+          },
+        ],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/echarts/echarts-multiple-xaxis.component.ts

@@ -0,0 +1,166 @@
+import { Component, AfterViewInit, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-echarts-multiple-xaxis',
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
+})
+export class EchartsMultipleXaxisComponent implements AfterViewInit, OnDestroy {
+  options: any = {};
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+  }
+
+  ngAfterViewInit() {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const echarts: any = config.variables.echarts;
+
+      this.options = {
+        backgroundColor: echarts.bg,
+        color: [colors.success, colors.info],
+        tooltip: {
+          trigger: 'none',
+          axisPointer: {
+            type: 'cross',
+          },
+        },
+        legend: {
+          data: ['2015 Precipitation', '2016 Precipitation'],
+          textStyle: {
+            color: echarts.textColor,
+          },
+        },
+        grid: {
+          top: 70,
+          bottom: 50,
+        },
+        xAxis: [
+          {
+            type: 'category',
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              onZero: false,
+              lineStyle: {
+                color: colors.info,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+            axisPointer: {
+              label: {
+                formatter: params => {
+                  return (
+                    'Precipitation  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+                  );
+                },
+              },
+            },
+            data: [
+              '2016-1',
+              '2016-2',
+              '2016-3',
+              '2016-4',
+              '2016-5',
+              '2016-6',
+              '2016-7',
+              '2016-8',
+              '2016-9',
+              '2016-10',
+              '2016-11',
+              '2016-12',
+            ],
+          },
+          {
+            type: 'category',
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              onZero: false,
+              lineStyle: {
+                color: colors.success,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+            axisPointer: {
+              label: {
+                formatter: params => {
+                  return (
+                    'Precipitation  ' + params.value + (params.seriesData.length ? '：' + params.seriesData[0].data : '')
+                  );
+                },
+              },
+            },
+            data: [
+              '2015-1',
+              '2015-2',
+              '2015-3',
+              '2015-4',
+              '2015-5',
+              '2015-6',
+              '2015-7',
+              '2015-8',
+              '2015-9',
+              '2015-10',
+              '2015-11',
+              '2015-12',
+            ],
+          },
+        ],
+        yAxis: [
+          {
+            type: 'value',
+            axisLine: {
+              lineStyle: {
+                color: echarts.axisLineColor,
+              },
+            },
+            splitLine: {
+              lineStyle: {
+                color: echarts.splitLineColor,
+              },
+            },
+            axisLabel: {
+              textStyle: {
+                color: echarts.textColor,
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: '2015 Precipitation',
+            type: 'line',
+            xAxisIndex: 1,
+            smooth: true,
+            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
+          },
+          {
+            name: '2016 Precipitation',
+            type: 'line',
+            smooth: true,
+            data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7],
+          },
+        ],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/echarts/echarts-pie.component.ts

@@ -0,0 +1,81 @@
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-echarts-pie',
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
+})
+export class EchartsPieComponent implements AfterViewInit, OnDestroy {
+  options: any = {};
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+  }
+
+  ngAfterViewInit() {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors = config.variables;
+      const echarts: any = config.variables.echarts;
+
+      this.options = {
+        backgroundColor: echarts.bg,
+        color: [colors.warningLight, colors.infoLight, colors.dangerLight, colors.successLight, colors.primaryLight],
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)',
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left',
+          data: ['USA', 'Germany', 'France', 'Canada', 'Russia'],
+          textStyle: {
+            color: echarts.textColor,
+          },
+        },
+        series: [
+          {
+            name: 'Countries',
+            type: 'pie',
+            radius: '80%',
+            center: ['50%', '50%'],
+            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: echarts.itemHoverShadowColor,
+              },
+            },
+            label: {
+              normal: {
+                textStyle: {
+                  color: echarts.textColor,
+                },
+              },
+            },
+            labelLine: {
+              normal: {
+                lineStyle: {
+                  color: echarts.axisLineColor,
+                },
+              },
+            },
+          },
+        ],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

src/app/admin/charts/echarts/echarts-radar.component.ts

@@ -0,0 +1,76 @@
+import { AfterViewInit, Component, OnDestroy } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-echarts-radar',
+  template: `
+    <div echarts [options]="options" class="echart"></div>
+  `,
+})
+export class EchartsRadarComponent implements AfterViewInit, OnDestroy {
+  options: any = {};
+  themeSubscription: any;
+
+  constructor(private theme: NbThemeService) {
+  }
+
+  ngAfterViewInit() {
+    this.themeSubscription = this.theme.getJsTheme().subscribe(config => {
+
+      const colors: any = config.variables;
+      const echarts: any = config.variables.echarts;
+
+      this.options = {
+        backgroundColor: echarts.bg,
+        color: [colors.danger, colors.warning],
+        tooltip: {},
+        legend: {
+          data: ['Allocated Budget', 'Actual Spending'],
+          textStyle: {
+            color: echarts.textColor,
+          },
+        },
+        radar: {
+          name: {
+            textStyle: {
+              color: echarts.textColor,
+            },
+          },
+          indicator: [
+            { name: 'Sales', max: 6500 },
+            { name: 'Administration', max: 16000 },
+            { name: 'Information Techology', max: 30000 },
+            { name: 'Customer Support', max: 38000 },
+            { name: 'Development', max: 52000 },
+            { name: 'Marketing', max: 25000 },
+          ],
+          splitArea: {
+            areaStyle: {
+              color: 'transparent',
+            },
+          },
+        },
+        series: [
+          {
+            name: 'Budget vs Spending',
+            type: 'radar',
+            data: [
+              {
+                value: [4300, 10000, 28000, 35000, 50000, 19000],
+                name: 'Allocated Budget',
+              },
+              {
+                value: [5000, 14000, 28000, 31000, 42000, 21000],
+                name: 'Actual Spending',
+              },
+            ],
+          },
+        ],
+      };
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.themeSubscription.unsubscribe();
+  }
+}

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

@@ -0,0 +1,58 @@
+<div class="row">
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Pie</nb-card-header>
+      <nb-card-body>
+        <ngx-echarts-pie></ngx-echarts-pie>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Bar</nb-card-header>
+      <nb-card-body>
+        <ngx-echarts-bar></ngx-echarts-bar>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Line</nb-card-header>
+      <nb-card-body>
+        <ngx-echarts-line></ngx-echarts-line>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Multiple x-axis</nb-card-header>
+      <nb-card-body>
+        <ngx-echarts-multiple-xaxis></ngx-echarts-multiple-xaxis>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Area Stack</nb-card-header>
+      <nb-card-body>
+        <ngx-echarts-area-stack></ngx-echarts-area-stack>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Bar Animation</nb-card-header>
+      <nb-card-body>
+        <ngx-echarts-bar-animation></ngx-echarts-bar-animation>
+      </nb-card-body>
+    </nb-card>
+  </div>
+  <div class="col-lg-6">
+    <nb-card>
+      <nb-card-header>Radar</nb-card-header>
+      <nb-card-body>
+        <ngx-echarts-radar></ngx-echarts-radar>
+      </nb-card-body>
+    </nb-card>
+  </div>
+</div>

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

@@ -0,0 +1,20 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  ngx-echarts-pie,
+  ngx-echarts-bar,
+  ngx-echarts-line,
+  ngx-echarts-multiple-xaxis,
+  ngx-echarts-area-stack,
+  ngx-echarts-bar-animation,
+  ngx-echarts-radar {
+    display: block;
+    height: nb-theme(card-height-medium);
+    width: 100%;
+  }
+
+  ::ng-deep .echart {
+    height: 100%;
+    width: 100%;
+  }
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-echarts',
+  styleUrls: ['./echarts.component.scss'],
+  templateUrl: './echarts.component.html',
+})
+export class EchartsComponent {}