volodia / VoR Pro Mode

// ==UserScript==
// @name         VoR Pro Mode
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add more graph to the tracker
// @author       You
// @match        http://www.volvooceanrace.com/static/tracker/leg1/en.html
// @grant        none
// @require      https://cdn.plot.ly/plotly-latest.min.js
// ==/UserScript==

(function() {
    'use strict';
    document.body.innerHTML += '<div id="configPro" style="width:100%;height:10%;opacity:1;z-index:100;background:#000;"><select id="ProSelect"><option value="1" selected="selected">Speed</option><option value="2" >VMG</option><option value="3">TWA</option><option value="4">TWS</option></select></div>';
    document.body.innerHTML += '<div id="tester" style="position:absolute;width:100%;height:100%;opacity:1;z-index:100;background:#000;"></div>';
    var UInt8Array = Uint8Array;
    var text ="";
    var filename ="";
    var Speeds = [];
    var VMGs = [];
    var TWAs = [];
    var TWSs = [];
    var boatIDs = [51,53,57,54,56,55,58];
    for ( var id in boatIDs)
    {

        Speeds[boatIDs[id]] = [];
        VMGs[boatIDs[id]] = [];
        TWAs[boatIDs[id]]= [];
        TWSs[boatIDs[id]] = [];
    }
   
    var TESTER = document.getElementById('tester');
    var Dates = [];

    var Graphdata ="";
    var layout = "";
    ยต.loadHwxFile("http://www.volvooceanrace.com/static/tracker/leg1/data/race/leg1.tracker.reports.hwx?v=20171026140108","json",
   function(data){
        for (var i = 0; i < data.reports.history.length; i++) {
            text += data.reports.history[i].date;
            Dates.push(data.reports.history[i].date);
            text += JSON.stringify(data.reports.history[i].lines);
            for (var j=0;j< data.reports.history[i].lines.length;j++)
            {
              Speeds[parseInt(data.reports.history[i].lines[j][0])].push(data.reports.history[i].lines[j][8]);
              VMGs[parseInt(data.reports.history[i].lines[j][0])].push(data.reports.history[i].lines[j][9]);
              TWAs[parseInt(data.reports.history[i].lines[j][0])].push(data.reports.history[i].lines[j][14]);
              TWSs[parseInt(data.reports.history[i].lines[j][0])].push(data.reports.history[i].lines[j][12]);

            }

            text +="\n";
            filename = "report_"+data.reports.history[i].date+".txt";
        }
        var a = document.createElement("a");
        //a.href = "data:text,"+encodeURI(text);   //content
        //a.download = filename;            //file name
        //a.click();

        layout = {margin: { t: 0 }, paper_bgcolor : '#000',plot_bgcolor :'#000000',legend: {traceorder: 'normal',font: {color: '#FFFFFF'}},xaxis: {showticklabels: true,tickfont: {color: '#FFF'}},yaxis: {showticklabels: true,tickfont: {color: '#FFF'}}};
        Graphdata =[{x: Dates,y: Speeds[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: Speeds[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: Speeds[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: Speeds[54],name: 'Vestas',
    line: {color: '#EF7622',width: 2}},{x: Dates,y: Speeds[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: Speeds[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: Speeds[58],name: 'Akzo Nobel',line: {color: '#724DCB',
    width: 2}}];
	Plotly.plot( TESTER,Graphdata, layout );
    });


    $('#ProSelect').on('change', function() {

        switch(this.value){
            case "1":
                Graphdata = [{x: Dates,y: Speeds[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: Speeds[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: Speeds[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: Speeds[54],name: 'Vestas',
    line: {color: '#EF7622',width: 2}},{x: Dates,y: Speeds[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: Speeds[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: Speeds[58],name: 'Akzo Nobel',line: {color: '#724DCB',
    width: 2}}];
                Plotly.purge(TESTER);
                Plotly.plot( TESTER,Graphdata, layout );
                break;
            case "2":
            Graphdata = [{x: Dates,y: VMGs[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: VMGs[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: VMGs[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: VMGs[54],name: 'Vestas',
    line: {color: '#EF7622',width: 2}},{x: Dates,y: VMGs[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: VMGs[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: VMGs[58],name: 'Akzo Nobel',line: {color: '#724DCB',
    width: 2}}];
                Plotly.purge(TESTER);
              Plotly.plot( TESTER,Graphdata, layout );

                                      break;
            case "3":
                 Graphdata = [{x: Dates,y: TWAs[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: TWAs[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: TWAs[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: TWAs[54],name: 'Vestas',
    line: {color: '#EF7622',width: 2}},{x: Dates,y: TWAs[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: TWAs[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: TWAs[58],name: 'Akzo Nobel',line: {color: '#724DCB',
    width: 2}}];
                Plotly.purge(TESTER);
                 Plotly.plot( TESTER,Graphdata, layout );

                                      break;
             case "4":
                 Graphdata = [{x: Dates,y: TWSs[51],name: 'DFRT',line: {color: '#DB3E3E',width: 2}},{x: Dates,y: TWSs[53],name: 'Brunel',line: {color: '#F6E700',width: 2}},{x: Dates,y: TWSs[57],name: 'Mapfre',line: {color: '#FFFFFF',width: 2}},{x: Dates,y: TWSs[54],name: 'Vestas',
    line: {color: '#EF7622',width: 2}},{x: Dates,y: TWSs[56],name: 'Turn the Tide',line: {color: '#7D99CF',width: 2}},{x: Dates,y: TWSs[55],name: 'Sacllywag',line: {color: '#919090',width: 2}},{x: Dates,y: TWSs[58],name: 'Akzo Nobel',line: {color: '#724DCB',
    width: 2}}];
                Plotly.purge(TESTER);
                 Plotly.plot( TESTER,Graphdata, layout );

                                      break;

        }
        Plotly.redraw(TESTER);

});

        //console.log(data.reports.history);});


    // Your code here...
})();