style(charts): refactoring components hierarchy

src/app/pages/charts/chart.js/chart-js.component.ts

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

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

@@ -18,7 +18,7 @@ import { Component } from '@angular/core';
           [chartType]="barChartType"></canvas>
   `,
 })
-export class ChartJsBarComponent {
+export class ChartjsBarComponent {
 
   barChartOptions: any = {
     scaleShowVerticalLines: false,

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

@@ -18,7 +18,7 @@ import { Component } from '@angular/core';
             [chartType]="lineChartType"></canvas>
   `,
 })
-export class ChartJsLineComponent {
+export class ChartjsLineComponent {
 
   lineChartData: any[] = [
     { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },

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

@@ -17,7 +17,7 @@ import { Component } from '@angular/core';
             [chartType]="pieChartType"></canvas>
   `,
 })
-export class ChartJsPieComponent {
+export class ChartjsPieComponent {
 
   pieChartType: string = 'pie';
   pieChartLabels: string[] = ['Download Sales', 'In-Store Sales', 'Mail Sales'];

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

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-4">
+  <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Pie</nga-card-header>
       <nga-card-body>
@@ -7,7 +7,7 @@
       </nga-card-body>
     </nga-card>
   </div>
-  <div class="col-md-4">
+  <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Bar</nga-card-header>
       <nga-card-body>
@@ -15,7 +15,7 @@
       </nga-card-body>
     </nga-card>
   </div>
-  <div class="col-md-4">
+  <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Line</nga-card-header>
       <nga-card-body>
@@ -23,4 +23,18 @@
       </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 {
+}

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

@@ -4,7 +4,7 @@ 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 './chart.js/chart-js.component';
+import { ChartjsComponent } from './chartjs/chartjs.component';
 
 const routes: Routes = [{
   path: '',
@@ -17,7 +17,7 @@ const routes: Routes = [{
     component: D3Component,
   }, {
     path: 'chartjs',
-    component: ChartJsComponent,
+    component: ChartjsComponent,
   }],
 }];
 
@@ -31,5 +31,5 @@ export const routedComponents = [
   ChartsComponent,
   EchartsComponent,
   D3Component,
-  ChartJsComponent,
+  ChartjsComponent,
 ];

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

@@ -1,31 +1,48 @@
 import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../../shared.module';
-
-import { ChartsRoutingModule, routedComponents } from './charts-routing.module';
-import { ChartJsBarComponent } from './chart.js/bar/bar.component';
-import { ChartJsLineComponent } from './chart.js/line/line.component';
-import { ChartJsPieComponent } from './chart.js/pie/pie.component';
-import { D3BarComponent } from './d3/bar/bar.component';
-import { D3LineComponent } from './d3/line/line.component';
-import { D3PieComponent } from './d3/pie/pie.component';
-import { EchartsLineComponent } from './echarts/line/line.component';
-import { EchartsPieComponent } from './echarts/pie/pie.component';
-import { EchartsBarComponent } from './echarts/bar/bar.component';
 import { AngularEchartsModule } from 'ngx-echarts';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 import { ChartsModule as Ng2Charts } from 'ng2-charts/ng2-charts';
 
+import { SharedModule } from '../../shared.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 { D3BarComponent } from './d3/d3-bar.component';
+import { D3LineComponent } from './d3/d3-line.component';
+import { D3PieComponent } from './d3/d3-pie.component';
+import { D3PlotComponent } from './d3/d3-plot.component';
+import { D3AreaStackComponent } from './d3/d3-area-stack.component';
+import { D3PolarComponent } from './d3/d3-polar.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,
+  ChartjsBarComponent,
-  ChartJsLineComponent,
+  ChartjsLineComponent,
-  ChartJsPieComponent,
+  ChartjsPieComponent,
+  ChartjsMultipleXaxisComponent,
+  ChartjsBarHorizontalComponent,
   D3BarComponent,
   D3LineComponent,
   D3PieComponent,
+  D3PlotComponent,
+  D3AreaStackComponent,
+  D3PolarComponent,
   EchartsLineComponent,
   EchartsPieComponent,
   EchartsBarComponent,
+  EchartsMultipleXaxisComponent,
+  EchartsAreaStackComponent,
+  EchartsBarAnimationComponent,
+  EchartsRadarComponent,
 ];
 
 @NgModule({

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-d3-area-stack',
+  template: ``,
+})
+export class D3AreaStackComponent {
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-d3-plot',
+  template: ``,
+})
+export class D3PlotComponent {
+}

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-d3-polar',
+  template: ``,
+})
+export class D3PolarComponent {
+}

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

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-6">
+  <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Pie</nga-card-header>
       <nga-card-body>
@@ -7,7 +7,7 @@
       </nga-card-body>
     </nga-card>
   </div>
-  <div class="col-md-6">
+  <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Bar</nga-card-header>
       <nga-card-body>
@@ -15,9 +15,7 @@
       </nga-card-body>
     </nga-card>
   </div>
-</div>
+  <div class="col-lg-6">
-<div class="row">
-  <div class="col-md-6">
     <nga-card size="large">
       <nga-card-header>Line</nga-card-header>
       <nga-card-body>
@@ -25,4 +23,22 @@
       </nga-card-body>
     </nga-card>
   </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Equatin Plots</nga-card-header>
+      <nga-card-body></nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Area Chart</nga-card-header>
+      <nga-card-body></nga-card-body>
+    </nga-card>
+  </div>
+  <div class="col-lg-6">
+    <nga-card size="large">
+      <nga-card-header>Polar Chart</nga-card-header>
+      <nga-card-body></nga-card-body>
+    </nga-card>
+  </div>
 </div>

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-echarts-area-stack',
+  template: ``,
+})
+export class EchartsAreaStackComponent {
+}

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

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

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

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

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

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-echarts-radar',
+  template: ``,
+})
+export class EchartsRadarComponent {
+}

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

@@ -1,5 +1,5 @@
 <div class="row">
-  <div class="col-md-6">
+  <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Pie</nga-card-header>
       <nga-card-body>
@@ -7,7 +7,7 @@
       </nga-card-body>
     </nga-card>
   </div>
-  <div class="col-md-6">
+  <div class="col-lg-6">
     <nga-card size="large">
       <nga-card-header>Bar</nga-card-header>
       <nga-card-body>
@@ -15,9 +15,7 @@
       </nga-card-body>
     </nga-card>
   </div>
-</div>
+  <div class="col-lg-6">
-<div class="row">
-  <div class="col-md-6">
     <nga-card size="large">
       <nga-card-header>Line</nga-card-header>
       <nga-card-body>
@@ -25,4 +23,22 @@
       </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>Area Stack</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 Animation</nga-card-header>
+      <nga-card-body></nga-card-body>
+    </nga-card>
+  </div>
 </div>