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

/* HeuristicLab
 * Copyright (C) 2002-2015 Heuristic and Evolutionary Algorithms Laboratory (HEAL)
 *
 * This file is part of HeuristicLab.
 *
 * HeuristicLab is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * HeuristicLab is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with HeuristicLab. If not, see <http://www.gnu.org/licenses/>.
 */


//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);
     */

}