source: branches/WebJobManager/HeuristicLab.Clients.Hive.WebJobManager/wwwroot/js/Scripts/Graphs/GraphDataCollector.js @ 13733

var dataCollection = [];
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);
}
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]
        }
    }
    //console.log("#SAVEDATA: " + id);
    redrawGraph(id);
}
function getData(id) {
    for (var i = 0; i < dataCollection.length; i++) {
        if (dataCollection[i][0] == id) {
            return dataCollection[i][1];
        }
    }
}
function getDataPie(id) {
    for (var i = 0; i < dataCollection.length; i++) {
        if (dataCollection[i][0] == id) {
            return dataCollection[i][2];
        }
    }
}
function getDataGantt(id) {
    for (var i = 0; i < dataCollection.length; i++) {
        if (dataCollection[i][0] == id) {
            return dataCollection[i][3];
        }
    }
}
function dataConversion(coll, name) {
    var line = dataConversionLine(coll, name);
    var pie = dataConversionPie(coll);
    var gantt = dataConversionGantt(coll, name);
    return [line, pie, gantt];
}
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];
}
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];
}

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'
    }];
    return datap;
}

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) {
        setTimeout(function () {

            var temp = getDataGantt(val);
            var w = $("#graph" + val).parent().width() - 30;
            document.getElementById("graph" + val).style.height = "200px";
            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);
            //    document.getElementById("graph" + val).style.marginLeft = "-40px";
            gantt(temp[0]);
        }, 100);


        /* setTimeout(function () {
            Plotly.newPlot('graph' + val, getData(val)[0], getData(val)[1]);
        }, 100);*/
        // console.log("#REDRAWN LINE: " + val);
    } else {
        setTimeout(function () {
            Plotly.newPlot('graph' + val, getDataPie(val));
        }, 100);
        //console.log("#REDRAWN PIE: " + val);
    }


}
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 + ":";

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

}