Skip to content

Commit 5163760

Browse files
silverbuxsilverbux
committed
Chartjs Component + deleted dialog and toast service
1 parent d6e8e5c commit 5163760

15 files changed

+296
-120
lines changed

‎angular/app/components/charts-chartjs/charts-chartjs.component.html

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
<section class="content-header">
2+
<h1>ChartJS<small>Preview sample</small></h1>
3+
<ol class="breadcrumb">
4+
<li><a ui-sref="app.landing"><i class="fa fa-dashboard"></i> Home</a></li>
5+
<li class="active">User Lists</li>
6+
</ol>
7+
</section>
8+
<section class="content">
9+
<div class="row">
10+
<div class="col-md-6">
11+
<div class="box box-primary">
12+
<div class="box-header with-border">
13+
<h3 class="box-title">Area Chart</h3>
14+
<div class="box-tools pull-right">
15+
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
16+
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
17+
</div>
18+
</div>
19+
<!-- /.box-header -->
20+
<div class="box-body">
21+
<div class="row">
22+
<div class="col-md-12">
23+
<p class="text-center">
24+
<strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
25+
</p>
26+
27+
<div class="chart">
28+
<!-- Sales Chart Canvas -->
29+
<canvas id="area"
30+
class="chart chart-line"
31+
chart-data="vm.areaChartData"
32+
chart-labels="vm.areaChartLabels"
33+
chart-legend="false"
34+
chart-series="vm.areaChartSeries"
35+
chart-click="vm.onClick"
36+
chart-colours="vm.areaChartColours"
37+
style="height: 180px;">
38+
</canvas>
39+
</div>
40+
<!-- /.chart-responsive -->
41+
</div>
42+
</div>
43+
<!-- /.row -->
44+
</div>
45+
<!-- ./box-body -->
46+
</div>
47+
<!-- /.box -->
48+
</div>
49+
<div class="col-md-6">
50+
<div class="box box-info">
51+
<div class="box-header with-border">
52+
<h3 class="box-title">Line Chart</h3>
53+
<div class="box-tools pull-right">
54+
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
55+
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
56+
</div>
57+
</div>
58+
<!-- /.box-header -->
59+
<div class="box-body">
60+
<div class="row">
61+
<div class="col-md-12">
62+
<p class="text-center">
63+
<strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
64+
</p>
65+
66+
<div class="chart">
67+
<!-- Sales Chart Canvas -->
68+
<canvas id="line"
69+
class="chart chart-line"
70+
chart-data="vm.lineChartData"
71+
chart-labels="vm.lineChartLabels"
72+
chart-legend="false"
73+
chart-series="vm.lineChartSeries"
74+
chart-click="vm.onClick"
75+
style="height: 180px;">
76+
</canvas>
77+
</div>
78+
<!-- /.chart-responsive -->
79+
</div>
80+
</div>
81+
<!-- /.row -->
82+
</div>
83+
<!-- ./box-body -->
84+
</div>
85+
<!-- /.box -->
86+
</div>
87+
<!-- /.col -->
88+
</div>
89+
<!-- /.row -->
90+
91+
<!-- Main row -->
92+
<div class="row">
93+
<div class="col-md-6">
94+
<div class="box box-danger">
95+
<div class="box-header with-border">
96+
<h3 class="box-title">Donut Chart</h3>
97+
98+
<div class="box-tools pull-right">
99+
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
100+
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
101+
</div>
102+
</div>
103+
<!-- /.box-header -->
104+
<div class="box-body">
105+
<div class="row">
106+
<div class="col-md-8">
107+
<div class="chart-responsive">
108+
<canvas id="doughnut" height="200" class="chart chart-doughnut"
109+
chart-data="vm.pieData" chart-labels="vm.pieLabels">
110+
</canvas>
111+
<!-- <canvas id="pieChart" height="150"></canvas> -->
112+
</div>
113+
<!-- ./chart-responsive -->
114+
</div>
115+
<!-- /.col -->
116+
<div class="col-md-4">
117+
<ul class="chart-legend clearfix">
118+
<li><i class="fa fa-circle-o text-red"></i> Chrome</li>
119+
<li><i class="fa fa-circle-o text-green"></i> IE</li>
120+
<li><i class="fa fa-circle-o text-yellow"></i> FireFox</li>
121+
<li><i class="fa fa-circle-o text-aqua"></i> Safari</li>
122+
<li><i class="fa fa-circle-o text-light-blue"></i> Opera</li>
123+
<li><i class="fa fa-circle-o text-gray"></i> Navigator</li>
124+
</ul>
125+
</div>
126+
<!-- /.col -->
127+
</div>
128+
<!-- /.row -->
129+
</div>
130+
<!-- /.box-body -->
131+
<div class="box-footer no-padding">
132+
<ul class="nav nav-pills nav-stacked">
133+
<li><a>United States of America <span class="pull-right text-red"><i class="fa fa-angle-down"></i> 12%</span></a></li>
134+
<li><a>India <span class="pull-right text-green"><i class="fa fa-angle-up"></i> 4%</span></a></li>
135+
<li><a>China<span class="pull-right text-yellow"><i class="fa fa-angle-left"></i> 0%</span></a></li>
136+
</ul>
137+
</div>
138+
<!-- /.footer -->
139+
</div>
140+
<!-- /.box -->
141+
</div>
142+
<div class="col-md-6">
143+
<div class="box box-success">
144+
<div class="box-header with-border">
145+
<h3 class="box-title">Bar Chart</h3>
146+
<div class="box-tools pull-right">
147+
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
148+
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
149+
</div>
150+
</div>
151+
<!-- /.box-header -->
152+
<div class="box-body">
153+
<div class="row">
154+
<div class="col-md-12">
155+
<p class="text-center">
156+
<strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
157+
</p>
158+
159+
<div class="chart">
160+
<!-- Sales Chart Canvas -->
161+
<canvas id="area"
162+
class="chart chart-bar"
163+
chart-data="vm.barChartData"
164+
chart-labels="vm.barChartLabels"
165+
chart-legend="false"
166+
chart-series="vm.barChartSeries"
167+
chart-click="vm.onClick"
168+
chart-colours="vm.barChartColours"
169+
style="height: 250px;">
170+
</canvas>
171+
</div>
172+
<!-- /.chart-responsive -->
173+
</div>
174+
</div>
175+
<!-- /.row -->
176+
</div>
177+
<!-- ./box-body -->
178+
</div>
179+
<!-- /.box -->
180+
</div>
181+
<!-- /.col -->
182+
</div>
183+
<!-- /.row -->
184+
</section>

‎angular/app/components/charts-chartjs/charts-chartjs.component.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
class ChartsChartjsController {
2+
constructor ($scope) {
3+
'ngInject'
4+
}
5+
6+
$onInit () {
7+
this.lineChartLabels = ['Januarys', 'February', 'March', 'April', 'May', 'June', 'July']
8+
this.lineChartSeries = ['Series A', 'Series B']
9+
this.lineChartData = [
10+
[65, 59, 80, 81, 56, 55, 40],
11+
[28, 48, 40, 19, 86, 27, 90]
12+
]
13+
14+
this.areaChartLabels = ['Januarys', 'February', 'March', 'April', 'May', 'June', 'July']
15+
this.areaChartSeries = ['Series A', 'Series B']
16+
this.areaChartData = [
17+
[65, 59, 80, 81, 56, 55, 40],
18+
[28, 48, 40, 19, 86, 27, 90]
19+
]
20+
this.areaChartColours = [
21+
{
22+
fillColor: '#D2D6DE',
23+
strokeColor: '#D2D6DE',
24+
pointColor: 'rgba(148,159,177,1)',
25+
pointStrokeColor: '#fff',
26+
pointHighlightFill: '#fff',
27+
pointHighlightStroke: 'rgba(148,159,177,0.8)'
28+
},
29+
{
30+
fillColor: '#4B94C0',
31+
strokeColor: '#4B94C0',
32+
pointColor: '#2980b9',
33+
pointStrokeColor: '#fff',
34+
pointHighlightFill: '#fff',
35+
pointHighlightStroke: 'rgba(77,83,96,1)'
36+
}
37+
]
38+
39+
this.onClick = function () {}
40+
41+
this.barChartLabels = ['Januarys', 'February', 'March', 'April', 'May', 'June', 'July']
42+
this.barChartSeries = ['Series A', 'Series B']
43+
this.barChartData = [
44+
[65, 59, 80, 81, 56, 55, 40],
45+
[28, 48, 40, 19, 86, 27, 90]
46+
]
47+
this.barChartColours = [
48+
{
49+
fillColor: '#D2D6DE',
50+
strokeColor: '#D2D6DE',
51+
pointColor: 'rgba(148,159,177,1)',
52+
pointStrokeColor: '#fff',
53+
pointHighlightFill: '#fff',
54+
pointHighlightStroke: 'rgba(148,159,177,0.8)'
55+
},
56+
{
57+
fillColor: '#00A65A',
58+
strokeColor: '#00A65A',
59+
pointColor: '#2980b9',
60+
pointStrokeColor: '#fff',
61+
pointHighlightFill: '#fff',
62+
pointHighlightStroke: 'rgba(77,83,96,1)'
63+
}
64+
]
65+
66+
this.pieLabels = ['Download Sales', 'In-Store Sales', 'Mail-Order Sales']
67+
this.pieData = [300, 500, 100]
68+
}
69+
}
70+
71+
export const ChartsChartjsComponent = {
72+
templateUrl: './views/app/components/charts-chartjs/charts-chartjs.component.html',
73+
controller: ChartsChartjsController,
74+
controllerAs: 'vm',
75+
bindings: {}
76+
}

‎angular/app/components/widgets/widgets.less renamed to ‎angular/app/components/charts-chartjs/charts-chartjs.scss

File renamed without changes.

‎angular/app/components/login-form/login-form.component.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ class LoginFormController {
1515
this.unverified = false
1616
}
1717

18-
$onInit(){
19-
this.email = '';
20-
this.password = '';
21-
}
18+
$onInit () {
19+
this.email = ''
20+
this.password = ''
21+
}
2222

2323
login () {
2424
this.loginfailed = false

‎angular/app/components/nav-sidebar/nav-sidebar.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<i class="fa fa-angle-left pull-right"></i>
7474
</a>
7575
<ul class="treeview-menu">
76-
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> ChartJS</a></li>
76+
<li><a ui-sref="app.chartjs"><i class="fa fa-circle-o"></i> ChartJS</a></li>
7777
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Morris</a></li>
7878
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Flot</a></li>
7979
<li><a ui-sref="app.comingsoon"><i class="fa fa-circle-o"></i> Inline charts</a></li>

‎angular/app/components/register-form/register-form.component.js

+5-6
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,11 @@ class RegisterFormController {
1111
this.errors = []
1212
}
1313

14-
15-
$onInit(){
16-
this.name = '';
17-
this.email = '';
18-
this.password = '';
19-
}
14+
$onInit () {
15+
this.name = ''
16+
this.email = ''
17+
this.password = ''
18+
}
2019

2120
register (isValid) {
2221
if (isValid) {

‎angular/app/components/widgets/widgets.scss

Whitespace-only changes.

‎angular/config/routes.config.js

+11
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,17 @@ export function RoutesConfig ($stateProvider, $urlRouterProvider) {
4141
}
4242
}
4343
})
44+
.state('app.chartjs', {
45+
url: '/charts-chartjs',
46+
data: {
47+
auth: true
48+
},
49+
views: {
50+
'main@app': {
51+
template: '<charts-chartjs></charts-chartjs>'
52+
}
53+
}
54+
})
4455
.state('app.comingsoon', {
4556
url: '/comingsoon',
4657
data: {

‎angular/index.components.js

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { ChartsChartjsComponent } from './app/components/charts-chartjs/charts-chartjs.component'
12
import { WidgetsComponent } from './app/components/widgets/widgets.component'
23
import { UserProfileComponent } from './app/components/user-profile/user-profile.component'
34
import { UserVerificationComponent } from './app/components/user-verification/user-verification.component'
@@ -20,6 +21,7 @@ import { LoginFormComponent } from './app/components/login-form/login-form.compo
2021
import { RegisterFormComponent } from './app/components/register-form/register-form.component'
2122

2223
angular.module('app.components')
24+
.component('chartsChartjs', ChartsChartjsComponent)
2325
.component('widgets', WidgetsComponent)
2426
.component('userProfile', UserProfileComponent)
2527
.component('userVerification', UserVerificationComponent)

‎angular/index.services.js

-4
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
import { ContextService } from './services/context.service'
22
import { APIService } from './services/API.service'
3-
import { DialogService } from './services/dialog.service'
4-
import { ToastService } from './services/toast.service'
53

64
angular.module('app.services')
75
.service('ContextService', ContextService)
86
.service('API', APIService)
9-
.service('DialogService', DialogService)
10-
.service('ToastService', ToastService)

0 commit comments

Comments
 (0)