Skip to content

Commit 306fb06

Browse files
WtowerWtower
authored
Merge pull request #10 from Wtower/dashboard-graph
Dashboard graph
2 parents 2626f57 + 513df8f commit 306fb06

11 files changed

+199
-1
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,13 +54,22 @@ Automate the CRUD operations using gentelella's PNotify and default REST respons
5454

5555
Provide a list paginator.
5656

57+
### ga-progress
58+
59+
Render a progress bar.
60+
5761
### ga-dashboard-counter
5862

5963
Provide a large counter panel for dashboard as in
6064
[Gentelella index2](https://colorlib.com/polygon/gentelella/index2.html).
6165

6266
[Example](https://github.com/Wtower/generator-makrina/blob/master/generators/angular-app/templates/dashboard/dashboard.template.html)
6367

68+
### ga-dashboard-graph-flot
69+
70+
Render a line graph panel as in
71+
[Gentelella index](https://colorlib.com/polygon/gentelella/index.html).
72+
6473
### form-field-text
6574

6675
Render a standard gentelella form textbox.

‎gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.component.js‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
// /**
2+
// * Created by gkarak on 23/11/2016.
3+
// */
4+
5+
angular
6+
.module('gaDashboardGraphFlot')
7+
.component('gaDashboardGraphFlot', {
8+
templateUrl: 'static/ng-gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.template.html',
9+
bindings: {
10+
graphTitle: '@',
11+
graphSubTitle: '@',
12+
graphRange: '@',
13+
graphId: '@',
14+
graphLegendTitle: '@',
15+
graphData: '<'
16+
},
17+
transclude: true,
18+
controller: [
19+
function GaGraphFlotController() {
20+
var self = this;
21+
22+
// Initialise
23+
self.$onInit = function () {
24+
if (!self.graphId) self.graphId = 'main-graph';
25+
self.plotted = false;
26+
};
27+
28+
// Run on every digest cycle
29+
// The only suitable event, because the id in template is set after any other event
30+
// This is why we call plot only once with self.plotted
31+
self.$doCheck = function () {
32+
var canvas = $('.' + self.graphId);
33+
34+
if (!self.plotted && self.graphData && canvas.length) {
35+
36+
// Transform mongo data to flot data
37+
var data = [];
38+
self.graphData.forEach(function (row) {
39+
var series = [];
40+
row.forEach(function (val) {
41+
series.push([
42+
gd(val._id.year, val._id.month, val._id.day),
43+
val.count
44+
]);
45+
});
46+
data.push(series);
47+
});
48+
49+
function gd(year, month, day) {
50+
return new Date(year, month - 1, day + 1).getTime();
51+
}
52+
53+
// PLOT
54+
// !self.plotted && self.graphData && canvas.length && $.plot(canvas, self.graphData, {
55+
$.plot(canvas, data, {
56+
series: {
57+
lines: {
58+
show: false,
59+
fill: true
60+
},
61+
splines: {
62+
show: true,
63+
tension: 0.4,
64+
lineWidth: 1,
65+
fill: 0.4
66+
},
67+
points: {
68+
radius: 0,
69+
show: true
70+
},
71+
shadowSize: 2
72+
},
73+
grid: {
74+
verticalLines: true,
75+
hoverable: true,
76+
clickable: true,
77+
tickColor: "#d5d5d5",
78+
borderWidth: 1,
79+
color: '#fff'
80+
},
81+
colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
82+
xaxis: {
83+
tickColor: "rgba(51, 51, 51, 0.06)",
84+
mode: "time",
85+
tickSize: [1, "day"],
86+
//tickLength: 10,
87+
axisLabel: "Date",
88+
axisLabelUseCanvas: true,
89+
axisLabelFontSizePixels: 12,
90+
axisLabelFontFamily: 'Verdana, Arial',
91+
axisLabelPadding: 10
92+
},
93+
yaxis: {
94+
ticks: 8,
95+
tickColor: "rgba(51, 51, 51, 0.06)"
96+
},
97+
tooltip: false
98+
});
99+
100+
self.plotted = true;
101+
}
102+
};
103+
}
104+
]
105+
});

‎gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.component.spec.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/**
2+
* Created by gkarak on 23/11/2016.
3+
*/

‎gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.module.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/**
2+
* Created by gkarak on 23/11/2016.
3+
*/
4+
5+
angular.module('gaDashboardGraphFlot', [
6+
]);

‎gentelella/ga-dashboard-graph-flot/ga-dashboard-graph-flot.template.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="dashboard_graph">
2+
<div class="row x_title">
3+
<div class="col-md-6">
4+
<h3>{{ $ctrl.graphTitle }} <small>{{ $ctrl.graphSubTitle }}</small></h3>
5+
</div>
6+
<div class="col-md-6">
7+
<div class="report-range pull-right">
8+
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
9+
<span>{{ $ctrl.graphRange }}</span> <b class="caret hidden"></b>
10+
</div>
11+
</div>
12+
</div>
13+
14+
<div class="col-md-9 col-sm-9 col-xs-12">
15+
<div class="canvas-wrapper">
16+
<div ng-class="$ctrl.graphId" class="demo-placeholder canvas"></div>
17+
</div>
18+
</div>
19+
<div class="col-md-3 col-sm-3 col-xs-12 bg-white">
20+
<div class="x_title">
21+
<h2>{{ $ctrl.graphLegendTitle }}</h2>
22+
<div class="clearfix"></div>
23+
</div>
24+
25+
<div ng-transclude></div>
26+
</div>
27+
28+
<div class="clearfix"></div>
29+
</div>
30+
<br>

‎gentelella/ga-progress/ga-progress.component.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Created by gkarak on 25/11/2016.
3+
*/
4+
5+
angular
6+
.module('gaProgress')
7+
.component('gaProgress', {
8+
templateUrl: 'static/ng-gentelella/ga-progress/ga-progress.template.html',
9+
bindings: {
10+
progressSize: '@',
11+
progressValue: '<'
12+
}
13+
});

‎gentelella/ga-progress/ga-progress.component.spec.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/**
2+
* Created by gkarak on 25/11/2016.
3+
*/

‎gentelella/ga-progress/ga-progress.module.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/**
2+
* Created by gkarak on 25/11/2016.
3+
*/
4+
5+
angular.module('gaProgress', [
6+
]);

‎gentelella/ga-progress/ga-progress.template.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<div class="progress progress_{{ $ctrl.progressSize || 'sm' }}">
2+
<div class="progress-bar bg-green"
3+
data-transitiongoal="{{ $ctrl.progressValue }}"
4+
aria-valuenow="{{ $ctrl.progressValue }}"
5+
ng-style="{width: $ctrl.progressValue + '%'}"></div>
6+
</div>

‎gentelella/gentelella.generic.sass‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,20 @@ ga-paginate
5353
> .active > a, > .active > a:hover
5454
color: #2A3F54
5555
font-weight: 700
56+
57+
ga-dashboard-graph-flot
58+
.report-range
59+
background: #fff
60+
cursor: pointer
61+
padding: 5px 10px
62+
border: 1px solid #ccc
63+
64+
.canvas-wrapper
65+
width: 100%
66+
67+
.canvas
68+
height: 260px
69+
width: 100%
70+
71+
ga-progress .progress
72+
width: 76%

0 commit comments

Comments
 (0)