Skip to content

Commit de4c815

Browse files
mohdrashidmohdrashid
committed
Added Timeline, News, Progress bars
Fixed Charts
1 parent 0d02b78 commit de4c815

File tree

6 files changed

+236
-13
lines changed

6 files changed

+236
-13
lines changed

‎src/app/components/pieChart/pieChart.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,6 @@
5252
// Really large screens
5353
@media only screen and (min-width: 1382px) {
5454
.progressBarText {
55-
font-size: 4rem;
55+
font-size: 4.5rem;
5656
}
5757
}

‎src/app/dashboard/dashboard.component.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
<div class="panel-heading">Site Traffic Overview</div>
2020
<div class="panel-body">
2121
<div class="canvas-wrapper" >
22-
<canvas baseChart style="width: 791px; height: 263px;" width="1582" height="500"
22+
<canvas baseChart style="min-height: 300px;width: 100%; height: 50vh"
23+
[options]="ChartOptions"
2324
[datasets]="lineChartData"
2425
[labels]="lineChartLabels"
2526
[chartType]="lineChartType"

‎src/app/dashboard/dashboard.component.ts

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
11
/**
22
* Created by mohma on 7/26/2017.
33
*/
4-
import { Component } from '@angular/core';
4+
import {Component, OnInit} from '@angular/core';
55
import {StatsCard} from "../components/statsCard/statsCard";
66
import {PieChart} from "../components/pieChart/pieChart";
77

88
@Component({
99
templateUrl: './dashboard.component.html',
10-
selector:'dashboard'
10+
selector:'dashboard',
11+
styleUrls:['./dashboard.scss']
1112
})
12-
export class DashboardComponent {
13+
export class DashboardComponent implements OnInit{
14+
public chartHeight=35;
15+
16+
public ChartOptions:any = {
17+
scaleShowVerticalLines: false,
18+
responsive: true,
19+
mainAspectRatio:false
20+
};
21+
22+
ngOnInit(): void {
23+
24+
}
25+
1326
//Card
1427

1528
public card1:StatsCard={color:"#1ebfae",icon:"fa-users",label:"Users",data:50};
@@ -20,8 +33,8 @@ export class DashboardComponent {
2033
//ProgressBars
2134
public pbar1:PieChart={color:"#1ebfae",max:100,label:"Load",current:2};
2235
public pbar2:PieChart={color:"#30a5ff",max:100,label:"Traffic",current:20};
23-
public pbar3:PieChart={color:"#ffb53e",max:100,label:"Traffic",current:50};
24-
public pbar4:PieChart={color:"#f9243f",max:100,label:"Traffic",current:57};
36+
public pbar3:PieChart={color:"#ffb53e",max:100,label:"Users",current:50};
37+
public pbar4:PieChart={color:"#f9243f",max:100,label:"RAM",current:57};
2538

2639

2740
// lineChart
@@ -32,6 +45,7 @@ export class DashboardComponent {
3245
public lineChartLabels:Array<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
3346
public lineChartType:string = 'line';
3447

48+
3549
// events
3650
public chartClicked(e:any):void {
3751
console.log(e);
@@ -40,11 +54,6 @@ export class DashboardComponent {
4054
public chartHovered(e:any):void {
4155
console.log(e);
4256
}
43-
44-
45-
constructor() {
46-
47-
}
4857
}
4958

5059

‎src/app/dashboard/dashboard.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.responsiveChart{
2+
min-height: 300px !important;
3+
width: 100% !important;
4+
height: 50vh !important;
5+
}

‎src/app/widgets/main/main.component.html

Lines changed: 154 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,7 +207,7 @@ <h4>Tab 3</h4>
207207
</div><!-- /.row -->
208208

209209
<div class="row">
210-
<div class="col-md-8">
210+
<div class="col-md-6">
211211
<div class="panel chat">
212212
<div class="panel-heading panel-blue" id="accordion">
213213
<i class="fa fa-list fa-fw"></i> Chat</div>
@@ -266,5 +266,158 @@ <h4>Tab 3</h4>
266266
</div>
267267

268268
</div><!--/.col-->
269+
<div class="col-md-6">
270+
<div class="panel panel-default ">
271+
<div class="panel-heading">
272+
Timeline
273+
</div>
274+
275+
<div class="panel-body timeline-container">
276+
<ul class="timeline">
277+
<li>
278+
<div class="timeline-badge"><i class="fa fa-home"></i></div>
279+
<div class="timeline-panel">
280+
<div class="timeline-heading">
281+
<h4 class="timeline-title">Lorem ipsum dolor sit amet</h4>
282+
</div>
283+
<div class="timeline-body">
284+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sodales nisl. Donec malesuada orci ornare risus finibus feugiat.</p>
285+
</div>
286+
</div>
287+
</li>
288+
<li>
289+
<div class="timeline-badge primary"><i class="fa fa-cogs"></i></div>
290+
<div class="timeline-panel">
291+
<div class="timeline-heading">
292+
<h4 class="timeline-title">Lorem ipsum dolor sit amet</h4>
293+
</div>
294+
<div class="timeline-body">
295+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
296+
</div>
297+
</div>
298+
</li>
299+
<li>
300+
<div class="timeline-badge"><i class="fa fa-pencil"></i></div>
301+
<div class="timeline-panel">
302+
<div class="timeline-heading">
303+
<h4 class="timeline-title">Lorem ipsum dolor sit amet</h4>
304+
</div>
305+
<div class="timeline-body">
306+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sodales nisl. Donec malesuada orci ornare risus finibus feugiat.</p>
307+
</div>
308+
</div>
309+
</li>
310+
<li>
311+
<div class="timeline-badge"><em class="fa fa-lock"></em></div>
312+
<div class="timeline-panel">
313+
<div class="timeline-heading">
314+
<h4 class="timeline-title">Lorem ipsum dolor sit amet</h4>
315+
</div>
316+
<div class="timeline-body">
317+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
318+
</div>
319+
</div>
320+
</li>
321+
</ul>
322+
</div>
323+
</div>
324+
</div>
269325

270326
</div><!--/.row-->
327+
328+
<div class="row">
329+
<div class="col-md-6">
330+
<div class="panel panel-default articles">
331+
<div class="panel-heading">
332+
Latest News
333+
</div>
334+
<div class="panel-body articles-container">
335+
<div class="article border-bottom">
336+
<div class="col-xs-12">
337+
<div class="row">
338+
<div class="col-xs-2 col-md-2 date">
339+
<div class="large">30</div>
340+
<div class="text-muted">Jun</div>
341+
</div>
342+
<div class="col-xs-10 col-md-10">
343+
<h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
344+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sodales nisl. Donec malesuada orci ornare risus finibus feugiat.</p>
345+
</div>
346+
</div>
347+
</div>
348+
<div class="clear"></div>
349+
</div><!--End .article-->
350+
351+
<div class="article border-bottom">
352+
<div class="col-xs-12">
353+
<div class="row">
354+
<div class="col-xs-2 col-md-2 date">
355+
<div class="large">28</div>
356+
<div class="text-muted">Jun</div>
357+
</div>
358+
<div class="col-xs-10 col-md-10">
359+
<h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
360+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sodales nisl. Donec malesuada orci ornare risus finibus feugiat.</p>
361+
</div>
362+
</div>
363+
</div>
364+
<div class="clear"></div>
365+
</div><!--End .article-->
366+
367+
<div class="article">
368+
<div class="col-xs-12">
369+
<div class="row">
370+
<div class="col-xs-2 col-md-2 date">
371+
<div class="large">24</div>
372+
<div class="text-muted">Jun</div>
373+
</div>
374+
<div class="col-xs-10 col-md-10">
375+
<h4><a href="#">Lorem ipsum dolor sit amet</a></h4>
376+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sodales nisl. Donec malesuada orci ornare risus finibus feugiat.</p>
377+
</div>
378+
</div>
379+
</div>
380+
<div class="clear"></div>
381+
</div><!--End .article-->
382+
</div>
383+
</div><!--End .articles-->
384+
385+
<div class="panel panel-default ">
386+
<div class="panel-heading">
387+
Progress bars
388+
</div>
389+
<div class="panel-body">
390+
<div class="col-md-12 no-padding">
391+
<div class="row progress-labels">
392+
<div class="col-sm-6">New Orders</div>
393+
<div class="col-sm-6" style="text-align: right;">80%</div>
394+
</div>
395+
<div class="progress">
396+
<div data-percentage="0%" style="width: 80%;" class="progress-bar progress-bar-blue" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
397+
</div>
398+
<div class="row progress-labels">
399+
<div class="col-sm-6">Comments</div>
400+
<div class="col-sm-6" style="text-align: right;">60%</div>
401+
</div>
402+
<div class="progress">
403+
<div data-percentage="0%" style="width: 60%;background-color: #1ebfae" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
404+
</div>
405+
<div class="row progress-labels">
406+
<div class="col-sm-6">New Users</div>
407+
<div class="col-sm-6" style="text-align: right;">40%</div>
408+
</div>
409+
<div class="progress">
410+
<div data-percentage="0%" style="width: 40%;" class="progress-bar progress-bar-teal" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
411+
</div>
412+
<div class="row progress-labels">
413+
<div class="col-sm-6">Page Views</div>
414+
<div class="col-sm-6" style="text-align: right;">20%</div>
415+
</div>
416+
<div class="progress">
417+
<div data-percentage="0%" style="width: 20%;" class="progress-bar progress-bar-red" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
418+
</div>
419+
</div>
420+
</div>
421+
</div>
422+
</div>
423+
</div>

‎src/styles.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,58 @@ table tr td, table th{
1919
.todo-list-item{
2020
list-style: none;
2121
}
22+
23+
.timeline {
24+
list-style: none;
25+
padding: 20px 0 20px;
26+
position: relative;
27+
}
28+
.timeline:before {
29+
top: 0;
30+
bottom: 0;
31+
position: absolute;
32+
content: " ";
33+
width: 2px;
34+
background-color: #e9ecf2;
35+
left: 25px;
36+
margin-right: -1.5px;
37+
}
38+
.timeline > li {
39+
margin-bottom: 20px;
40+
position: relative;
41+
box-sizing: border-box;
42+
}
43+
.timeline > li:before, .timeline > li:after {
44+
content: " ";
45+
display: table;
46+
}
47+
.timeline > li > .timeline-badge {
48+
color: #fff;
49+
width: 46px;
50+
height: 46px;
51+
line-height: 51px;
52+
font-size: 1.4em;
53+
text-align: center;
54+
position: absolute;
55+
top: 16px;
56+
left: 0px;
57+
margin-right: -25px;
58+
background-color: #999999;
59+
z-index: 100;
60+
border-radius: 9999px;
61+
}
62+
.timeline > li > .timeline-panel {
63+
width: calc( 100% - 65px );
64+
float: right;
65+
border: 1px solid #edeeed;
66+
border-radius: 2px;
67+
padding: 10px 20px;
68+
position: relative;
69+
box-shadow: none;
70+
}
71+
.timeline > li:after {
72+
clear: both;
73+
}
74+
.timeline-badge.primary {
75+
background-color: #30a5ff !important;
76+
}

0 commit comments

Comments
 (0)