Skip to content

Commit ead12dd

Browse files
mohdrashidmohdrashid
committed
Added ng2-smart-table and fixed sidebar
1 parent 96c3292 commit ead12dd

File tree

6 files changed

+223
-4
lines changed

6 files changed

+223
-4
lines changed

‎src/app/app.routing.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ export const routes: Routes = [
3535
{
3636
path: 'table',
3737
loadChildren: './widgets/tables/tables.module#TablesWidgetModule'
38+
},
39+
{
40+
path: 'charts',
41+
loadChildren: './widgets/charts/charts.module#ChartsWidgetModule'
3842
}
3943

4044
]

‎src/app/layout/full-layout.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@
3333
<li><a routerLinkActive="active" [routerLink]="['/form']"><i class="fa fa-list fa-fw"></i> Form</a></li>
3434

3535
<li class="parent ">
36-
<a href="#">
37-
<span data-toggle="collapse" href="#sub-item-1"><i class="fa fa-fw fa-chevron-circle-down"></i></span> Widgets
36+
<a data-toggle="collapse" href="#sub-item-1">
37+
<i class="fa fa-fw fa-chevron-circle-down"></i> Widgets
3838
</a>
3939
<ul class="children collapse" id="sub-item-1">
4040
<li>
@@ -48,8 +48,8 @@
4848
</a>
4949
</li>
5050
<li>
51-
<a class="" href="#">
52-
Sub Item 3
51+
<a routerLinkActive="active" [routerLink]="['/charts']">
52+
<i class="fa fa-fw fa-bar-chart"></i> Charts
5353
</a>
5454
</li>
5555
</ul>

‎src/app/widgets/charts/charts-routing.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Created by mohma on 7/26/2017.
3+
*/
4+
import { NgModule } from '@angular/core';
5+
import { Routes,
6+
RouterModule } from '@angular/router';
7+
import {ChartsWidgetComponent} from "./charts.component";
8+
9+
const routes: Routes = [
10+
{
11+
path: '',
12+
component: ChartsWidgetComponent,
13+
data: {
14+
title: 'Charts'
15+
}
16+
}
17+
];
18+
19+
@NgModule({
20+
imports: [RouterModule.forChild(routes)],
21+
exports: [RouterModule]
22+
})
23+
export class ChartsWidgetRoutingModule {}

‎src/app/widgets/charts/charts.component.ts

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
/**
2+
* Created by mohma on 7/26/2017.
3+
*/
4+
import { Component } from '@angular/core';
5+
6+
@Component({
7+
templateUrl: './charts.html',
8+
selector:'charts-widgets'
9+
})
10+
export class ChartsWidgetComponent {
11+
12+
/*LineChart*/
13+
public lineChartData:Array<any> = [
14+
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
15+
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
16+
{data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
17+
];
18+
public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
19+
public lineChartOptions:any = {
20+
responsive: true
21+
};
22+
public lineChartColors:Array<any> = [
23+
{ // grey
24+
backgroundColor: 'rgba(148,159,177,0.2)',
25+
borderColor: 'rgba(148,159,177,1)',
26+
pointBackgroundColor: 'rgba(148,159,177,1)',
27+
pointBorderColor: '#fff',
28+
pointHoverBackgroundColor: '#fff',
29+
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
30+
},
31+
{ // dark grey
32+
backgroundColor: 'rgba(77,83,96,0.2)',
33+
borderColor: 'rgba(77,83,96,1)',
34+
pointBackgroundColor: 'rgba(77,83,96,1)',
35+
pointBorderColor: '#fff',
36+
pointHoverBackgroundColor: '#fff',
37+
pointHoverBorderColor: 'rgba(77,83,96,1)'
38+
},
39+
{ // grey
40+
backgroundColor: 'rgba(148,159,177,0.2)',
41+
borderColor: 'rgba(148,159,177,1)',
42+
pointBackgroundColor: 'rgba(148,159,177,1)',
43+
pointBorderColor: '#fff',
44+
pointHoverBackgroundColor: '#fff',
45+
pointHoverBorderColor: 'rgba(148,159,177,0.8)'
46+
}
47+
];
48+
public lineChartLegend:boolean = true;
49+
public lineChartType:string = 'line';
50+
51+
/*Bar Chart*/
52+
public barChartOptions:any = {
53+
scaleShowVerticalLines: false,
54+
responsive: true
55+
};
56+
public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
57+
public barChartType:string = 'bar';
58+
public barChartLegend:boolean = true;
59+
60+
public barChartData:any[] = [
61+
{data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
62+
{data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'}
63+
];
64+
65+
// Doughnut
66+
public doughnutChartLabels:string[] = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales'];
67+
public doughnutChartData:number[] = [350, 450, 100];
68+
public doughnutChartType:string = 'doughnut';
69+
public pieChartType:string = 'pie';
70+
71+
72+
// events
73+
public chartClicked(e:any):void {
74+
console.log(e);
75+
}
76+
77+
public chartHovered(e:any):void {
78+
console.log(e);
79+
}
80+
81+
constructor() {
82+
}
83+
}
84+
85+

‎src/app/widgets/charts/charts.html

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<div class="row">
2+
<ol class="breadcrumb">
3+
<li><a href="#"><svg class="glyph stroked home"><use xlink:href="#stroked-home"></use></svg></a></li>
4+
<li class="active">Icons</li>
5+
</ol>
6+
</div><!--/.row-->
7+
8+
<div class="row">
9+
<div class="col-lg-12">
10+
<h1 class="page-header">Charts</h1>
11+
</div>
12+
</div><!--/.row-->
13+
14+
<div class="row">
15+
<div class="col-md-6">
16+
<div class="panel panel-default">
17+
<div class="panel-heading">
18+
Line Chart
19+
</div>
20+
<div class="panel-body">
21+
<canvas baseChart width="100" height="50"
22+
[datasets]="lineChartData"
23+
[labels]="lineChartLabels"
24+
[options]="lineChartOptions"
25+
[colors]="lineChartColors"
26+
[legend]="lineChartLegend"
27+
[chartType]="lineChartType"
28+
(chartHover)="chartHovered($event)"
29+
(chartClick)="chartClicked($event)"></canvas> </div>
30+
</div>
31+
</div>
32+
<div class="col-md-6">
33+
<div class="panel panel-default">
34+
<div class="panel-heading">
35+
Bar Chart
36+
</div>
37+
<div class="panel-body">
38+
<canvas baseChart width="100" height="50"
39+
[datasets]="barChartData"
40+
[labels]="barChartLabels"
41+
[options]="barChartOptions"
42+
[legend]="barChartLegend"
43+
[chartType]="barChartType"
44+
(chartHover)="chartHovered($event)"
45+
(chartClick)="chartClicked($event)"></canvas>
46+
</div>
47+
</div>
48+
</div>
49+
</div><!--/.row-->
50+
51+
52+
53+
<div class="row">
54+
<div class="col-md-6">
55+
<div class="panel panel-default">
56+
<div class="panel-heading">
57+
Line Chart
58+
</div>
59+
<div class="panel-body">
60+
<canvas baseChart width="100" height="50"
61+
[data]="doughnutChartData"
62+
[labels]="doughnutChartLabels"
63+
[chartType]="doughnutChartType"
64+
(chartHover)="chartHovered($event)"
65+
(chartClick)="chartClicked($event)"></canvas>
66+
</div>
67+
</div>
68+
</div>
69+
<div class="col-md-6">
70+
<div class="panel panel-default">
71+
<div class="panel-heading">
72+
Bar Chart
73+
</div>
74+
<div class="panel-body">
75+
<canvas baseChart width="100" height="50"
76+
[data]="doughnutChartData"
77+
[labels]="doughnutChartLabels"
78+
[chartType]="pieChartType"
79+
(chartHover)="chartHovered($event)"
80+
(chartClick)="chartClicked($event)"></canvas>
81+
</div>
82+
</div>
83+
</div>
84+
</div><!--/.row-->

‎src/app/widgets/charts/charts.module.ts

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Created by mohma on 7/26/2017.
3+
*/
4+
import { NgModule } from '@angular/core';
5+
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
6+
7+
import {CommonModule} from "@angular/common";
8+
import {ChartsWidgetComponent} from "./charts.component";
9+
import {ChartsWidgetRoutingModule} from "./charts-routing";
10+
import {ChartsModule} from "ng2-charts";
11+
12+
13+
@NgModule({
14+
imports: [
15+
FormsModule, ReactiveFormsModule,
16+
CommonModule,
17+
ChartsWidgetRoutingModule,
18+
ChartsModule
19+
],
20+
declarations: [ ChartsWidgetComponent],
21+
providers: [ ]
22+
})
23+
export class ChartsWidgetModule { }

0 commit comments

Comments
 (0)