1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
/* jshint -W041 */
/* jshint -W083 */
/*This is for the loop closure I am using in line 143 */
/* jslint browser: true*/
/* global cordova,StatusBar,angular,console,moment */
// This controller generates a graph for events
// the main function is generateChart. I call generate chart with required parameters
// from the template file
angular.module('zmApp.controllers').controller('zmApp.EventsGraphsCtrl', ['$ionicPlatform', '$scope','zm', 'ZMDataModel', '$ionicSideMenuDelegate', '$rootScope', '$http', function ($ionicPlatform, $scope, zm,ZMDataModel, $ionicSideMenuDelegate, $rootScope, $http) {
console.log("Inside Graphs controller");
$scope.openMenu = function () {
$ionicSideMenuDelegate.toggleLeft();
};
$scope.$on('$ionicView.loaded', function () {
console.log("**VIEW ** Graph Ctrl Loaded");
});
//-------------------------------------------------------------------------
// Lets make sure we set screen dim properly as we enter
// The problem is we enter other states before we leave previous states
// from a callback perspective in ionic, so we really can't predictably
// reset power state on exit as if it is called after we enter another
// state, that effectively overwrites current view power management needs
//------------------------------------------------------------------------
$scope.$on('$ionicView.enter', function () {
console.log("**VIEW ** EventsGraphs Ctrl Entered");
ZMDataModel.setAwake(false);
});
$scope.$on('$ionicView.leave', function () {
console.log("**VIEW ** Graph Ctrl Left");
});
$scope.$on('$ionicView.unloaded', function () {
console.log("**VIEW ** Graph Ctrl Unloaded");
});
//-------------------------------------------------
// Controller main
//-------------------------------------------------
// $scope.chart = "";
$scope.navTitle = 'Tab Page';
// $scope.chart="";
$scope.leftButtons = [{
type: 'button-icon icon ion-navicon',
tap: function (e) {
$scope.toggleMenu();
}
}];
// -------------------------------------------------
// Called when user taps on a bar
//---------------------------------------------------
$scope.handleChartClick = function (event) {
console.log (JSON.stringify( $scope.chartwithbars.getBarsAtEvent(event)));
//console.log(angular.element[0].getContext('2d'));
//console.log (JSON.stringify( $scope.chart));
};
//-------------------------------------------------
// Generates a bar graph with data provided
//-------------------------------------------------
$scope.generateTCChart = function (id, chartTitle, hrs) {
var monitors = [];
var dateRange = "";
var startDate = "";
var endDate = "";
$scope.chart = {
barHeight:"",
data:"",
options:""
};
$scope.chart.barHeight = $rootScope.devHeight;
if (hrs) {
// Apply a time based filter if I am not watching all events
var cur = moment();
endDate = cur.format("YYYY-MM-DD hh:mm:ss");
startDate = cur.subtract(hrs, 'hours').format("YYYY-MM-DD hh:mm:ss");
console.log("Start and End " + startDate + "==" + endDate);
ZMDataModel.zmLog("Generating graph for " + startDate + " to " + endDate);
}
var loginData = ZMDataModel.getLogin();
//$scope.chart.data = {};
$scope.chart.data = {
labels: [],
datasets: [
{
label: '',
fillColor: zm.graphFillColor,
strokeColor: zm.graphStrokeColor,
highlightFill: zm.graphHighlightFill,
data: []
},
]};
ZMDataModel.getMonitors(0).then(function (data) {
monitors = data;
var adjustedHeight = monitors.length * 30;
if (adjustedHeight > $rootScope.devHeight) {
$scope.chart.barHeight = adjustedHeight;
console.log("********* BAR HEIGHT TO " + $scope.chart.barHeight);
}
for (var i = 0; i < monitors.length; i++) {
(function (j) { // loop closure - http is async, so success returns after i goes out of scope
// so we need to bind j to i when http returns so its not out of scope. Gak.
// I much prefer the old days of passing context data from request to response
$scope.chart.data.labels.push(monitors[j].Monitor.Name);
//$scope.chartObject[id].data.push([monitors[j].Monitor.Name,'0','color:#76A7FA','0']);
// $scope.chartObject.data[j+1]=([monitors[j].Monitor.Name,'100','color:#76A7FA','0']);
var dateString = "";
if (hrs) {
dateString = "/StartTime >=:" + startDate + "/EndTime <=:" + endDate;
}
var url = loginData.apiurl +
"/events/index/MonitorId:" + monitors[j].Monitor.Id + dateString +
".json?page=1";
// console.log("Monitor event URL:" + url);
$http.get(url /*,{timeout:15000}*/ )
.success(function (data) {
console.log("**** EVENT COUNT FOR MONITOR " +
monitors[j].Monitor.Id + " IS " + data.pagination.count);
$scope.chart.data.datasets[0].data[j] = data.pagination.count;
})
.error(function (data) {
// ideally I should be treating it as an error
// but what I am really doing now is treating it like no events
// works but TBD: make this into a proper error handler
$scope.chart.data.datasets[0].data[j] = 0;
ZMDataModel.zmLog ("Error retrieving events for graph " + JSON.stringify(data), "error");
});
})(i); // j
} //for
});
$scope.chart.options = {
responsive: true,
scaleBeginAtZero: true,
scaleShowGridLines: false,
scaleGridLineColor: "rgba(0,0,0,.05)",
scaleGridLineWidth: 1,
barShowStroke: true,
barStrokeWidth: 2,
barValueSpacing: 5,
barDatasetSpacing: 1,
showTooltip: true,
//String - A legend template
// legendTemplate : '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
};
}; //generateTCChart
}]);
|
