Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/Scripts/Hubs/GraphDataCollector.js @ 13754

Last change on this file since 13754 was 13754, checked in by jlodewyc, 8 years ago

#2582 User management done, start resource calendar

File size: 8.8 KB
Line 
1//Keeps all the data for the job. Used to communicate through SignalR
2var dataCollection = [];
3//Possible task statusses
4var taskStatus = {
5    "Offline": "bar-off",
6    "Waiting": "bar-wait",
7    "Transferring": "bar-trans",
8    "Calculating": "bar-calc",
9    "Paused": "bar-paus",
10    "Finished": "bar-fin",
11    "Aborted": "bar-abo",
12    "Failed": "bar-fail"
13}
14
15
16function initSaveData(id, coll, name) {//initial data save
17    var temp = dataConversion(coll, name);
18    temp.unshift(id); //add ID in front of array
19    dataCollection.push(temp);// [id,timearr, piearr]
20    // console.log("#CREATION: " + id);
21}
22//Saves updated info in dataCollection
23function saveData(id, coll, name) {
24    var temp = dataConversion(coll, name);
25    for (var i = 0; i < dataCollection.length; i++) {
26        if (dataCollection[i][0] == id) {
27            dataCollection[i][1] = temp[0]; // [data,layout]
28            dataCollection[i][2] = temp[1]; // data
29            dataCollection[i][3] = temp[2]; // [tasks, name]
30        }
31    }
32    redrawGraph(id);
33}
34//Returns data for line graph
35//DISABLED FOR GANTT CHART
36/*
37function getData(id) {
38    for (var i = 0; i < dataCollection.length; i++) {
39        if (dataCollection[i][0] == id) {
40            return dataCollection[i][1];
41        }
42    }
43}*/
44//Returns data needed for Pie chart
45function getDataPie(id) {
46    for (var i = 0; i < dataCollection.length; i++) {
47        if (dataCollection[i][0] == id) {
48            return dataCollection[i][2];
49        }
50    }
51}
52//Returns data needed for Gantt chart
53function getDataGantt(id) {
54    for (var i = 0; i < dataCollection.length; i++) {
55        if (dataCollection[i][0] == id) {
56            return dataCollection[i][3];
57        }
58    }
59}
60//Converts received data from server to data needed for the graphs
61function dataConversion(coll, name) {
62    //var line = dataConversionLine(coll, name);
63    var pie = dataConversionPie(coll);
64    var gantt = dataConversionGantt(coll, name);
65    return [null, pie, gantt];
66}
67//Creates all data needed for drawing a single Gantt chart for one task
68function dataConversionGantt(coll, nam) {
69    var tasks = [];
70    for (var v = 0; v < coll.length; v++) {
71
72        var temp = {};
73        temp.startDate = Date.parse(coll[v].DateTime);
74        if (v < coll.length - 1)
75            temp.endDate = Date.parse(coll[v + 1].DateTime);
76        else {
77
78            var dat = Date.parse(coll[v].DateTime);
79            //console.log(dat);
80            temp.endDate = dat + 600000;
81            temp.last = true;
82        }
83        temp.taskName = nam;
84
85        if (coll[v].State == 0)
86            temp.status = "Offline";
87        else if (coll[v].State == 1)
88            temp.status = "Waiting";
89        else if (coll[v].State == 2)
90            temp.status = "Transferring";
91        else if (coll[v].State == 3)
92            temp.status = "Calculating";
93        else if (coll[v].State == 4)
94            temp.status = "Paused";
95        else if (coll[v].State == 5)
96            temp.status = "Finished";
97        else if (coll[v].State == 6)
98            temp.status = "Aborted";
99        else if (coll[v].State == 7)
100            temp.status = "Failed";
101        tasks.push(temp);
102    }
103    return [tasks, nam];
104}
105/* DISABLED FOR GANTT CHART
106function dataConversionLine(coll, nam) {
107    var xarr = [];
108    var yarr = [];
109
110    for (var v = 0; v < coll.length; v++) {
111
112        xarr.push(Date.parse(coll[v].DateTime));
113        // console.log(xarr[v]);
114        // xarr[v] = xarr[v] - 3600000;
115        if (coll[v].State == 1)
116            yarr.push("Waiting");
117        else if (coll[v].State == 2)
118            yarr.push("Transferring");
119        else if (coll[v].State == 3)
120            yarr.push("Calculating");
121        else if (coll[v].State == 5)
122            yarr.push("Finished");
123        else if (coll[v].State == 7)
124            yarr.push("Failed");
125    }
126
127
128    var data = [{//Time graph
129        x: xarr,
130        y: yarr,
131        type: 'scatter',
132        mode: 'lines',
133        name: nam,
134        connectgaps: true,
135        line: { shape: 'hvh' }
136    }];
137    layout = {
138        "showlegend": true,
139        "width": "100%",
140        "xaxis": {
141            "autorange": true,
142            "range": [
143                Date.parse(coll[0].DateTime),
144                Date.parse(coll[coll.length - 1].DateTime)
145            ],
146            "title": "Time",
147            "type": "date"
148        }
149
150    }
151
152    return [data, layout];
153}*/
154//Calculates data necessary for drawing  a pie chart for a single task.
155function dataConversionPie(coll) {
156    var waiting = 0;
157    var transfer = 0;
158    var calc = 0;
159    for (var v = 0; v < coll.length - 1; v++) {
160        if (coll[v].State == 1)
161            waiting += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
162        else if (coll[v].State == 2)
163            transfer += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
164        else if (coll[v].State == 3)
165            calc += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
166    }
167    var datap = [{//Pie graph
168        values: [
169            Math.round(waiting / 1000 / 60),
170            Math.round(transfer / 1000 / 60),
171            Math.round(calc / 1000 / 60)],
172        labels: [
173            'Minutes waiting',
174            'Minutes transferring',
175            'Minutes calculating'],
176        type: 'pie',
177        marker: {
178            colors: ['#f0a742', '#80d4ff', '#2f6fa6']
179        }
180    }];
181    return datap;
182}
183
184//Draws and redraws a graph from a single task
185function redrawGraph(val) {
186    document.getElementById("graph" + val).style.width = "100%";
187    document.getElementById("graph" + val).style.height = "400px";
188    document.getElementById("graph" + val).innerHTML = "";
189    document.getElementById("graph" + val).style.marginLeft = "0px";
190    if (document.getElementById("graphtoggle" + val).checked)
191    {//Redraws a Gantt chart
192        setTimeout(function () {
193
194            var temp = getDataGantt(val);
195            var w = $("#graph" + val).parent().width() - 30;
196            document.getElementById("graph" + val).style.height = "300px";
197            var gantt = d3.gantt().selector('#graph' + val).height('200').width(w).margin({
198                top: 20,
199                right: 40,
200                bottom: 20,
201                left: 20
202            }).drawytitles(false).taskTypes([temp[1]]).taskStatus(taskStatus);
203            gantt(temp[0]);
204           document.getElementById("legend" + val).style.display = "";
205        }, 100);
206
207
208        /* DISABLED FOR GANTT CHART
209        setTimeout(function () {
210            Plotly.newPlot('graph' + val, getData(val)[0], getData(val)[1]);
211        }, 100);*/
212    }
213    else
214    {//Redraws a pie chart
215        document.getElementById("legend" + val).style.display = "none";
216        setTimeout(function () {
217            Plotly.newPlot('graph' + val, getDataPie(val));
218        }, 100);
219    }
220
221
222}
223//Draws and redraws the main Gantt chart. Taking info from the single task charts
224//And combining these into one big chart
225function redrawMain() {
226    document.getElementById("graphMain").innerHTML = "";
227
228    var tempdata = [];
229    var tempnames = [];
230    for (var i = 0; i < dataCollection.length; i++) {
231        var t = dataCollection[i][3][0].slice();
232        var name =  t[0].taskName.substring(0, 5) + " | " + (i+1);
233
234        for (var v = 0; v < t.length; v++) {
235            t[v].taskName = name;
236        }
237        tempdata = tempdata.concat(t);
238        tempnames = tempnames.concat(name)
239    }
240    var h = (tempnames.length * 20) + 100;
241    document.getElementById("graphMain").style.height = h + "px";
242
243    var w = $("#graphMain").parent().width() - 100;
244
245    var gantt = d3.gantt().selector("#graphMain").height(h - 50).width(w).taskTypes(tempnames).taskStatus(taskStatus);
246    document.getElementById("graphMain").style.marginLeft = "20px";
247    gantt(tempdata);
248
249
250    /* LINE VERSION
251    var temp = [];
252    var min = dataCollection[0][1][0][0].x[0];
253    var max = min;
254    for (var i = 0; i < dataCollection.length; i++) {
255        temp.push(dataCollection[i][1][0][0]);
256        if (dataCollection[i][1][0][0].x[dataCollection[i][1][0][0].x.length - 1] > max)
257            max = dataCollection[i][1][0][0].x[dataCollection[i][1][0][0].x.length - 1];
258        if (dataCollection[i][1][0][0].x[0] < min)
259            min = dataCollection[i][1][0][0].x[0];
260    }
261    layout = {
262        "showlegend": true,
263        "title": new Date(min).toUTCString() + " to " + new Date(max).toUTCString(),
264        "xaxis": {
265            "autorange": true,
266            "range": [
267                min,
268                max
269            ],
270            "title": "Time",
271            "type": "date"
272        }
273
274    }
275     Plotly.newPlot('graphMain', temp, layout);
276     */
277
278}
Note: See TracBrowser for help on using the repository browser.