//Keeps all the data for the job. Used to communicate through SignalR var dataCollection = []; //Possible task statusses var taskStatus = { "Offline": "bar-off", "Waiting": "bar-wait", "Transferring": "bar-trans", "Calculating": "bar-calc", "Paused": "bar-paus", "Finished": "bar-fin", "Aborted": "bar-abo", "Failed": "bar-fail" } function initSaveData(id, coll, name) {//initial data save var temp = dataConversion(coll, name); temp.unshift(id); //add ID in front of array dataCollection.push(temp);// [id,timearr, piearr] // console.log("#CREATION: " + id); } //Saves updated info in dataCollection function saveData(id, coll, name) { var temp = dataConversion(coll, name); for (var i = 0; i < dataCollection.length; i++) { if (dataCollection[i][0] == id) { dataCollection[i][1] = temp[0]; // [data,layout] dataCollection[i][2] = temp[1]; // data dataCollection[i][3] = temp[2]; // [tasks, name] } } redrawGraph(id); } //Returns data for line graph //DISABLED FOR GANTT CHART /* function getData(id) { for (var i = 0; i < dataCollection.length; i++) { if (dataCollection[i][0] == id) { return dataCollection[i][1]; } } }*/ //Returns data needed for Pie chart function getDataPie(id) { for (var i = 0; i < dataCollection.length; i++) { if (dataCollection[i][0] == id) { return dataCollection[i][2]; } } } //Returns data needed for Gantt chart function getDataGantt(id) { for (var i = 0; i < dataCollection.length; i++) { if (dataCollection[i][0] == id) { return dataCollection[i][3]; } } } //Converts received data from server to data needed for the graphs function dataConversion(coll, name) { //var line = dataConversionLine(coll, name); var pie = dataConversionPie(coll); var gantt = dataConversionGantt(coll, name); return [null, pie, gantt]; } //Creates all data needed for drawing a single Gantt chart for one task function dataConversionGantt(coll, nam) { var tasks = []; for (var v = 0; v < coll.length; v++) { var temp = {}; temp.startDate = Date.parse(coll[v].DateTime); if (v < coll.length - 1) temp.endDate = Date.parse(coll[v + 1].DateTime); else { var dat = Date.parse(coll[v].DateTime); //console.log(dat); temp.endDate = dat + 600000; temp.last = true; } temp.taskName = nam; if (coll[v].State == 0) temp.status = "Offline"; else if (coll[v].State == 1) temp.status = "Waiting"; else if (coll[v].State == 2) temp.status = "Transferring"; else if (coll[v].State == 3) temp.status = "Calculating"; else if (coll[v].State == 4) temp.status = "Paused"; else if (coll[v].State == 5) temp.status = "Finished"; else if (coll[v].State == 6) temp.status = "Aborted"; else if (coll[v].State == 7) temp.status = "Failed"; tasks.push(temp); } return [tasks, nam]; } /* DISABLED FOR GANTT CHART function dataConversionLine(coll, nam) { var xarr = []; var yarr = []; for (var v = 0; v < coll.length; v++) { xarr.push(Date.parse(coll[v].DateTime)); // console.log(xarr[v]); // xarr[v] = xarr[v] - 3600000; if (coll[v].State == 1) yarr.push("Waiting"); else if (coll[v].State == 2) yarr.push("Transferring"); else if (coll[v].State == 3) yarr.push("Calculating"); else if (coll[v].State == 5) yarr.push("Finished"); else if (coll[v].State == 7) yarr.push("Failed"); } var data = [{//Time graph x: xarr, y: yarr, type: 'scatter', mode: 'lines', name: nam, connectgaps: true, line: { shape: 'hvh' } }]; layout = { "showlegend": true, "width": "100%", "xaxis": { "autorange": true, "range": [ Date.parse(coll[0].DateTime), Date.parse(coll[coll.length - 1].DateTime) ], "title": "Time", "type": "date" } } return [data, layout]; }*/ //Calculates data necessary for drawing a pie chart for a single task. function dataConversionPie(coll) { var waiting = 0; var transfer = 0; var calc = 0; for (var v = 0; v < coll.length - 1; v++) { if (coll[v].State == 1) waiting += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime); else if (coll[v].State == 2) transfer += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime); else if (coll[v].State == 3) calc += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime); } var datap = [{//Pie graph values: [ Math.round(waiting / 1000 / 60), Math.round(transfer / 1000 / 60), Math.round(calc / 1000 / 60)], labels: [ 'Minutes waiting', 'Minutes transferring', 'Minutes calculating'], type: 'pie', marker: { colors: ['#f0a742', '#80d4ff', '#2f6fa6'] } }]; return datap; } //Draws and redraws a graph from a single task function redrawGraph(val) { document.getElementById("graph" + val).style.width = "100%"; document.getElementById("graph" + val).style.height = "400px"; document.getElementById("graph" + val).innerHTML = ""; document.getElementById("graph" + val).style.marginLeft = "0px"; if (document.getElementById("graphtoggle" + val).checked) {//Redraws a Gantt chart setTimeout(function () { var temp = getDataGantt(val); var w = $("#graph" + val).parent().width() - 30; document.getElementById("graph" + val).style.height = "300px"; var gantt = d3.gantt().selector('#graph' + val).height('200').width(w).margin({ top: 20, right: 40, bottom: 20, left: 20 }).drawytitles(false).taskTypes([temp[1]]).taskStatus(taskStatus); gantt(temp[0]); document.getElementById("legend" + val).style.display = ""; }, 100); /* DISABLED FOR GANTT CHART setTimeout(function () { Plotly.newPlot('graph' + val, getData(val)[0], getData(val)[1]); }, 100);*/ } else {//Redraws a pie chart document.getElementById("legend" + val).style.display = "none"; setTimeout(function () { Plotly.newPlot('graph' + val, getDataPie(val)); }, 100); } } //Draws and redraws the main Gantt chart. Taking info from the single task charts //And combining these into one big chart function redrawMain() { document.getElementById("graphMain").innerHTML = ""; var tempdata = []; var tempnames = []; for (var i = 0; i < dataCollection.length; i++) { var t = dataCollection[i][3][0].slice(); var name = t[0].taskName.substring(0, 5) + " | " + (i+1); for (var v = 0; v < t.length; v++) { t[v].taskName = name; } tempdata = tempdata.concat(t); tempnames = tempnames.concat(name) } var h = (tempnames.length * 20) + 100; document.getElementById("graphMain").style.height = h + "px"; var w = $("#graphMain").parent().width() - 100; var gantt = d3.gantt().selector("#graphMain").height(h - 50).width(w).taskTypes(tempnames).taskStatus(taskStatus); document.getElementById("graphMain").style.marginLeft = "20px"; gantt(tempdata); /* LINE VERSION var temp = []; var min = dataCollection[0][1][0][0].x[0]; var max = min; for (var i = 0; i < dataCollection.length; i++) { temp.push(dataCollection[i][1][0][0]); if (dataCollection[i][1][0][0].x[dataCollection[i][1][0][0].x.length - 1] > max) max = dataCollection[i][1][0][0].x[dataCollection[i][1][0][0].x.length - 1]; if (dataCollection[i][1][0][0].x[0] < min) min = dataCollection[i][1][0][0].x[0]; } layout = { "showlegend": true, "title": new Date(min).toUTCString() + " to " + new Date(max).toUTCString(), "xaxis": { "autorange": true, "range": [ min, max ], "title": "Time", "type": "date" } } Plotly.newPlot('graphMain', temp, layout); */ }