style(charts): refactoring components hierarchy

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-chartjs-bar-horizontal',
+  template: ``,
+})
+export class ChartjsBarHorizontalComponent {
+}

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

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-chart-js-bar',
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  template: `
+    <canvas baseChart
+          [datasets]="barChartData"
+          [labels]="barChartLabels"
+          [options]="barChartOptions"
+          [legend]="barChartLegend"
+          [chartType]="barChartType"></canvas>
+  `,
+})
+export class ChartjsBarComponent {
+
+  barChartOptions: any = {
+    scaleShowVerticalLines: false,
+    responsive: true,
+    legend: {
+      labels: {
+        fontColor: 'white',
+      },
+    },
+    scales: {
+      xAxes: [{
+        gridLines: {
+          display: true,
+          color: 'rgba(148,159,177,1)',
+        },
+        ticks: {
+          fontColor: 'white',
+        },
+      }],
+      yAxes: [{
+        gridLines: {
+          display: true,
+          color: 'rgba(148,159,177,1)',
+        },
+        ticks: {
+          fontColor: 'white',
+        },
+      }],
+    },
+  };
+
+  barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
+
+  barChartType: string = 'bar';
+
+  barChartLegend: boolean = true;
+
+  barChartData: any[] = [
+    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
+    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
+  ];
+
+}

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

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-chart-js-line',
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  template: `
+    <canvas baseChart
+            [datasets]="lineChartData"
+            [labels]="lineChartLabels"
+            [options]="lineChartOptions"
+            [legend]="lineChartLegend"
+            [chartType]="lineChartType"></canvas>
+  `,
+})
+export class ChartjsLineComponent {
+
+  lineChartData: any[] = [
+    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
+    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' },
+    { data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C' },
+  ];
+
+  lineChartLabels: any[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
+
+  lineChartOptions: any = {
+    responsive: true,
+    scales: {
+      xAxes: [{
+        gridLines: {
+          display: true,
+          color: 'rgba(148,159,177,1)',
+        },
+        ticks: {
+          fontColor: 'white',
+        },
+      }],
+      yAxes: [{
+        gridLines: {
+          display: true,
+          color: 'rgba(148,159,177,1)',
+        },
+        ticks: {
+          fontColor: 'white',
+        },
+      }],
+    },
+    legend: {
+      labels: {
+        fontColor: 'white',
+      },
+    },
+  };
+
+  lineChartLegend: boolean = true;
+
+  lineChartType: string = 'line';
+
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-chartjs-multiple-xaxis',
+  template: ``,
+})
+export class ChartjsMultipleXaxisComponent {
+}

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

@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-chart-js-pie',
+  styles: [
+    `
+      :host {
+        display: block;
+      }
+    `,
+  ],
+  template: `
+    <canvas baseChart
+            [data]="pieChartData"
+            [labels]="pieChartLabels"
+            [options]="pieChartOptions"
+            [chartType]="pieChartType"></canvas>
+  `,
+})
+export class ChartjsPieComponent {
+
+  pieChartType: string = 'pie';
+  pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];
+  pieChartData: number[] = [300, 500, 100];
+  pieChartOptions: any = {
+    responsive: true,
+    scales: {
+      xAxes: [{
+        gridLines: {
+          display: true,
+          color: 'rgba(148,159,177,1)',
+        },
+        ticks: {
+          fontColor: 'white',
+        },
+      }],
+      yAxes: [{
+        gridLines: {
+          display: true,
+          color: 'rgba(148,159,177,1)',
+        },
+        ticks: {
+          fontColor: 'white',
+        },
+      }],
+    },
+    legend: {
+      labels: {
+        fontColor: 'white',
+      },
+    },
+  };
+
+}

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

@@ -0,0 +1,40 @@
+<div class="row">
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Pie</nga-card-header>
+      <nga-card-body>
+        <ngx-chart-js-pie></ngx-chart-js-pie>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Bar</nga-card-header>
+      <nga-card-body>
+        <ngx-chart-js-bar></ngx-chart-js-bar>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Line</nga-card-header>
+      <nga-card-body>
+        <ngx-chart-js-line></ngx-chart-js-line>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Multiple x-axis</nga-card-header>
+      <nga-card-body>
+      </nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Bar Horizontal</nga-card-header>
+      <nga-card-body>
+      </nga-card-body>
+    </nga-card>
+  </div>
+</div>

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

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