[13754] | 1 | //Keeps all the data for the job. Used to communicate through SignalR
|
---|
| 2 | var dataCollection = [];
|
---|
| 3 | //Possible task statusses
|
---|
| 4 | var 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 |
|
---|
| 16 | function 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
|
---|
| 23 | function 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 | /*
|
---|
| 37 | function 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
|
---|
| 45 | function 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
|
---|
| 53 | function 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
|
---|
| 61 | function 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
|
---|
| 68 | function 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
|
---|
| 106 | function 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.
|
---|
| 155 | function 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
|
---|
| 185 | function 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
|
---|
| 225 | function 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 | } |
---|