Changeset 13719 for branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs

Timestamp:

03/18/16 16:30:39 (9 years ago)

Author:

jlodewyc

Message:

#2582 Livefeed graph data, main unified graph + bugfixing refresh overload

Location:

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs

Files:

• GraphDataCollector.js (modified) (5 diffs)
• GraphHubber.js (modified) (4 diffs)

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphDataCollector.js

@@ -15 +15 @@
         }
     }
-    console.log("#SAVEDATA: " + id);
+    //console.log("#SAVEDATA: " + id);
     redrawGraph(id);
 }
@@ -34 +34 @@
 }
 function dataConversion(coll) {
+    
+    
+    return [dataConversionLine(coll),dataConversionPie(coll)];
+}
+function dataConversionLine(coll) {
     var xarr = [];
     var yarr = [];
-    var waiting = 0;
-    var transfer = 0;
-    var calc = 0;
+    for (var v = 0; v < coll.length; v++) {
+        xarr.push(Date.parse(coll[v].DateTime));
+        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: 'Task ' ,
+        connectgaps:true,
+        line:{shape:'hv'}
+    }];
+    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];
+}
+function dataConversionHBar(coll) {
+    var xarr = [];
+    var yarr = [];
     for (var v = 0; v < coll.length; v++) {
         xarr.push(coll[v].DateTime.substr(11, 8));
-        if (coll[v].State == 1) {
+        if (coll[v].State == 1)
             yarr.push("Waiting");
-            if (v < (coll.length - 1))
-                waiting += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
-        }
-        else if (coll[v].State == 2) {
+        else if (coll[v].State == 2) 
             yarr.push("Transferring");
-            if (v < (coll.length - 1))
-                transfer += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
-        }
-        else if (coll[v].State == 3) {
+        else if (coll[v].State == 3) 
             yarr.push("Calculating");
-            if (v < (coll.length - 1))
-                calc += Date.parse(coll[v + 1].DateTime) - Date.parse(coll[v].DateTime);
-        }
         else if (coll[v].State == 5)
             yarr.push("Finished");
@@ -66 +101 @@
         type: 'scatter'
     }];
+    
+    return data;
+}
+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: [
@@ -77 +127 @@
         type: 'pie'
     }];
-    return [data, datap];
+    return datap;
 }
 
 function redrawGraph(val) {
+    document.getElementById("graph" + val).style.width = "100%";
+    document.getElementById("graph" + val).style.height = "400px";
     if (document.getElementById("graphtoggle" + val).checked) {
         setTimeout(function () {
-            Plotly.newPlot('graph' + val, getData(val));
+            Plotly.newPlot('graph' + val, getData(val)[0], getData(val)[1]);
         }, 100);
         console.log("#REDRAWN LINE: " + val);
@@ -90 +142 @@
             Plotly.newPlot('graph' + val, getDataPie(val));
         }, 100);
-        console.log("#REDRAWN PIE: " + val);
+        //console.log("#REDRAWN PIE: " + val);
     }
+    
 
 }
+function redrawMain() {
+    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);
+
+
+}

branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphHubber.js

@@ -6 +6 @@
         hubber.server.initConnection();
         hubber.server.updateAll();
-        
+        redrawMain();
     });
     hubber.client.processData = function (id, data) {
@@ -13 +13 @@
         saveData(id, obj.StateLog);
     }
-    hubber.client.requestDone = function(){
+    hubber.client.requestDone = function () {
+        
         setTimeout(function () {
             hubber.server.updateAll();
+            console.log("#REFRESH ALL");
+            
         }, 5000);
     }
@@ -22 +25 @@
 
 function editTaskData(id, task) {
-    console.log(task);
     //lastupdate
     var dat = new Date(task.LastHeartbeat);
@@ -54 +56 @@
         });
         $("#statepar" + id).html("State: Finished");
-        console.log(task.DateFinished);
         var datf = new Date(task.StateLog[task.StateLog.length -1].DateTime);
         $("#lastupdpar" + id).html("Finished: " + datf.toUTCString());