<html>
<head>
  <title></title>
  <!--<script src="./jquery-2.2.4.min.js"></script>-->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script>-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
  <script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" type="text/css" />
  <style>
    .container {
  width: 95%;
  margin: 10px auto;
}
</style>
</head>

<body>

  <div class="container">
    <h5>
    <div><form>
      Date : <input type="text" name="dateFrom" id="dateFrom" /> ~ <input type="text" name="dateTo" id="dateTo" />
    </form></div>
    <div><form>Package : <input id="TextPackage"></form></div>
    <!--
    <div><form>Package : <select id="SelectPackage"><option value="All">All</option></select></form></div>
    -->
    <div><form>Profile : <select id="SelectProfile"><option value="All">All</option></select></form></div>
    <div><form>Branch : <select id="SelectBranch"><option value="All">All</option></select></form></div>
    </h5>
    <h3>Success Ratio</h3>
    <div id="divSuccessRatio">
      <canvas id="SuccessRatio" height="150"></canvas>
    </div>
    <h3>Build Requests</h3>
    <div id="divBuildCount">
      <canvas id="BuildCount"></canvas>
    </div>
    <h3>Git Repository Size Growth (KB)</h3>
    <div id="divGitRepoSize">
      <canvas id="GitRepoSize"></canvas>
    </div>
  </div>

  <script type="text/javascript">
    var raw_data = RAW_DATA_FROM_BACKEND;
  </script>

  <script type="text/javascript">
    dateStart = null; dateEnd = null; setPackage = null; setProfile = null; setBranch = null;
    $( function() {
      $( "#dateFrom" ).datepicker({
        changeMonth: true, changeYear: true, dateFormat: "yymmdd",
        onSelect: function (dateText, inst) { dateStart = dateText; reloadPage(); }
      });
    });
    $( function() {
      $( "#dateTo" ).datepicker({
        changeMonth: true, changeYear: true, dateFormat: "yymmdd",
        onSelect: function (dateText, inst) { dateEnd = dateText; reloadPage(); }
      });
    });
    /*
    $( "#SelectPackage" ).change(function() {
      $( "#SelectPackage option:selected" ).each(function() {
        setPackage = $( this ).text(); reloadPage();
      });
    });
    */
    $( "#SelectProfile" ).change(function() {
      $( "#SelectProfile option:selected" ).each(function() {
        setProfile = $( this ).text(); reloadPage();
      });
    });
    $( "#SelectBranch" ).change(function() {
      $( "#SelectBranch option:selected" ).each(function() {
        setBranch = $( this ).text(); reloadPage();
      });
    });
    var availablePackages = [];
    $("#TextPackage").autocomplete({ 
      source: availablePackages,
      change: function() {
        setPackage = $(this).val(); reloadPage();
      }
    });
    var BuildCountCtx;
    var GitRepoSizeCtx;
    var sizeData;
    function eventClickCount(evt) {
      setPackage = BuildCountCtx.getElementAtEvent(evt)[0]._model.datasetLabel;
      $("#TextPackage").val(setPackage);
      reloadPage();
    }
    function eventClickGit(evt) {
      _dIdx = GitRepoSizeCtx.getElementAtEvent(evt)[0]._datasetIndex;
      _idx = GitRepoSizeCtx.getElementAtEvent(evt)[0]._index;
      setPackage = sizeData.datasets[_dIdx].label;
      $("#TextPackage").val(setPackage);
      reloadPage();
    }
    
    Colors = [
      {_hash: null, _color: "#006400", _name: "dark green"},
      {_hash: null, _color: "#FF4500", _name: "orange red"},
      {_hash: null, _color: "#2F4F4F", _name: "dark slate gray"},
      {_hash: null, _color: "#4682B4", _name: "steel blue"},
      {_hash: null, _color: "#00008B", _name: "dark blue"},
      {_hash: null, _color: "#8B008B", _name: "dark magenta"},
      {_hash: null, _color: "#FF00FF", _name: "magenta / fuchsia"},
      {_hash: null, _color: "#8B4513", _name: "saddle brown"},
      {_hash: null, _color: "#000000", _name: "black"},
      {_hash: null, _color: "#708090", _name: "slate gray"},
      {_hash: null, _color: "#00CED1", _name: "dark turquoise"},
      {_hash: null, _color: "#228B22", _name: "forest green"},
      {_hash: null, _color: "#FFD700", _name: "gold"},
      {_hash: null, _color: "#FF0000", _name: "red"},
      {_hash: null, _color: "#FFFF00", _name: "yellow"},
      {_hash: null, _color: "#800000", _name: "maroon"},
      {_hash: null, _color: "#A0522D", _name: "sienna"},
      {_hash: null, _color: "#2E8B57", _name: "sea green"},
      {_hash: null, _color: "#8A2BE2", _name: "blue violet"},
      {_hash: null, _color: "#00FFFF", _name: "aqua"},
      {_hash: null, _color: "#C71585", _name: "medium violet red"},
      {_hash: null, _color: "#0000FF", _name: "blue"},
      {_hash: null, _color: "#32CD32", _name: "lime green"},
      {_hash: null, _color: "#B8860B", _name: "dark golden rod"},
      {_hash: null, _color: "#A52A2A", _name: "brown"},
      {_hash: null, _color: "#3CB371", _name: "medium sea green"},
      {_hash: null, _color: "#1E90FF", _name: "dodger blue"},
      {_hash: null, _color: "#9932CC", _name: "dark orchid"},
      {_hash: null, _color: "#D2691E", _name: "chocolate"},
      {_hash: null, _color: "#696969", _name: "dim gray / dim grey"},
      {_hash: null, _color: "#4169E1", _name: "royal blue"},
      {_hash: null, _color: "#008B8B", _name: "dark cyan"},
      {_hash: null, _color: "#FF6347", _name: "tomato"},
      {_hash: null, _color: "#808000", _name: "olive"},
      {_hash: null, _color: "#00FF00", _name: "lime"},
      {_hash: null, _color: "#6A5ACD", _name: "slate blue"},
      {_hash: null, _color: "#BC8F8F", _name: "rosy brown"},
      {_hash: null, _color: "#7CFC00", _name: "lawn green"},
      {_hash: null, _color: "#556B2F", _name: "dark olive green"},
      {_hash: null, _color: "#0000CD", _name: "medium blue"},
      {_hash: null, _color: "#9400D3", _name: "dark violet"},
      {_hash: null, _color: "#DC143C", _name: "crimson"},
      {_hash: null, _color: "#FFA500", _name: "orange"},
      {_hash: null, _color: "#008000", _name: "green"},
      {_hash: null, _color: "#6495ED", _name: "corn flower blue"},
      {_hash: null, _color: "#EE82EE", _name: "violet"},
      {_hash: null, _color: "#778899", _name: "light slate gray"},
      {_hash: null, _color: "#20B2AA", _name: "light sea green"},
      {_hash: null, _color: "#BDB76B", _name: "dark khaki"},
      {_hash: null, _color: "#CD5C5C", _name: "indian red"},
      {_hash: null, _color: "#FF8C00", _name: "dark orange"},
      {_hash: null, _color: "#9ACD32", _name: "yellow green"},
      {_hash: null, _color: "#8FBC8F", _name: "dark sea green"},
      {_hash: null, _color: "#4B0082", _name: "indigo"},
      {_hash: null, _color: "#FF1493", _name: "deep pink"},
      {_hash: null, _color: "#CD853F", _name: "peru"},
      {_hash: null, _color: "#B0C4DE", _name: "light steel blue"},
      {_hash: null, _color: "#DA70D6", _name: "orchid"},
      {_hash: null, _color: "#808080", _name: "gray / grey"},
      {_hash: null, _color: "#DEB887", _name: "burly wood"},
      {_hash: null, _color: "#FFB6C1", _name: "light pink"},
      {_hash: null, _color: "#7B68EE", _name: "medium slate blue"},
      {_hash: null, _color: "#87CEEB", _name: "sky blue"},
      {_hash: null, _color: "#008080", _name: "teal"},
      {_hash: null, _color: "#7FFF00", _name: "chart reuse"},
      {_hash: null, _color: "#FF7F50", _name: "coral"},
      {_hash: null, _color: "#00BFFF", _name: "deep sky blue"},
      {_hash: null, _color: "#BA55D3", _name: "medium orchid"},
      {_hash: null, _color: "#A9A9A9", _name: "dark gray / dark grey"},
      {_hash: null, _color: "#FFDAB9", _name: "peach puff"},
      {_hash: null, _color: "#DB7093", _name: "pale violet red"},
      {_hash: null, _color: "#191970", _name: "midnight blue"},
      {_hash: null, _color: "#40E0D0", _name: "turquoise"},
      {_hash: null, _color: "#ADFF2F", _name: "green yellow"},
      {_hash: null, _color: "#DAA520", _name: "golden rod"},
      {_hash: null, _color: "#F08080", _name: "light coral"},
      {_hash: null, _color: "#8B0000", _name: "dark red"},
      {_hash: null, _color: "#90EE90", _name: "light green"},
      {_hash: null, _color: "#483D8B", _name: "dark slate blue"},
      {_hash: null, _color: "#DDA0DD", _name: "plum"},
      {_hash: null, _color: "#F4A460", _name: "sandy brown"},
      {_hash: null, _color: "#C0C0C0", _name: "silver"},
      {_hash: null, _color: "#FFC0CB", _name: "pink"},
      {_hash: null, _color: "#48D1CC", _name: "medium turquoise"},
      {_hash: null, _color: "#F0E68C", _name: "khaki"},
      {_hash: null, _color: "#FA8072", _name: "salmon"},
      {_hash: null, _color: "#00FF7F", _name: "spring green"},
      {_hash: null, _color: "#000080", _name: "navy"},
      {_hash: null, _color: "#FF69B4", _name: "hot pink"},
      {_hash: null, _color: "#5F9EA0", _name: "cadet blue"},
      {_hash: null, _color: "#6B8E23", _name: "olive drab"},
      {_hash: null, _color: "#EEE8AA", _name: "pale golden rod"},
      {_hash: null, _color: "#9370DB", _name: "medium purple"},
      {_hash: null, _color: "#B0E0E6", _name: "powder blue"},
      {_hash: null, _color: "#800080", _name: "purple"},
      {_hash: null, _color: "#F5DEB3", _name: "wheat"},
      {_hash: null, _color: "#D8BFD8", _name: "thistle"},
      {_hash: null, _color: "#00FA9A", _name: "medium spring green"},
      {_hash: null, _color: "#87CEFA", _name: "light sky blue"},
      {_hash: null, _color: "#B22222", _name: "firebrick"},
    ];
    function hexToRgb(hex, a) {
        // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
        var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
        hex = hex.replace(shorthandRegex, function(m, r, g, b) {
            return r + r + g + g + b + b;
        });
        var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
        return result ? "rgba(" 
            + parseInt(result[1], 16) + ','
            + parseInt(result[2], 16) + ','
            + parseInt(result[3], 16) + ','
            + a + ")"
        : null;
    }
    function getColor(_package, a) {
      for (var i=0; i<Colors.length; i++) {
        if (Colors[i]._hash == _package) { return hexToRgb(Colors[i]._color, a); }
        if (Colors[i]._hash == null) { 
          Colors[i]._hash = _package; 
          $('#SelectPackage').append($('<option>', { value : _package }).text(_package)); 
          availablePackages.push(_package);
          return hexToRgb(Colors[i]._color, a); 
        }
      }
    }
    
    var one_time_init_done = false;
    var filteredData = [];
    function filterData(_from, _to, _package, _profile, _branch) {
      filteredData = [];
      for (var i=0; i<raw_data.length; i++) {
        if (one_time_init_done == false) {
          var __prof = raw_data[i].package.split('/')[1];
          var __bran = raw_data[i].tag.split('/')[3];
          $('#SelectProfile').append($('<option>', { value : __prof }).text(__prof)); 
          $('#SelectBranch').append($('<option>', { value : __bran }).text(__bran)); 
        }
        if (_package != null && raw_data[i].package != _package) { continue; }
        if (_profile != null && raw_data[i].package.indexOf('/'+_profile+'/') == -1) { continue; }
        if (_branch != null && raw_data[i].tag.indexOf('/'+_branch+'/') == -1) { continue; }
        if (_to != null && raw_data[i].date.substring(0,8) > _to) { continue; }
        if (_from != null && raw_data[i].date.substring(0,8) < _from) { continue; }
        filteredData.push(raw_data[i]);
      }
      if (one_time_init_done == false) { 
        one_time_init_done = true; 
        var found = [];
        $("#SelectProfile option").each(function() {
          if($.inArray(this.value, found) != -1) $(this).remove();
          found.push(this.value);
        });
        found2 = [];
        $("#SelectBranch option").each(function() {
          if($.inArray(this.value, found2) != -1) $(this).remove();
          found2.push(this.value);
        });
      }
    }
  </script>
  
  <!-- SUCCESS RATIO -->
  <script type="text/javascript">
    function createSuccessRatioChart() {
      document.getElementById("divSuccessRatio").innerHTML = '<canvas id="SuccessRatio" height="150"></canvas>';
      var successData = { labels : [],  datasets : [] };
      // Find lables
      for (var i=0; i<filteredData.length; i++) {
        if (filteredData[i].result != "SUCCESS") { continue; }
        if ($.inArray(filteredData[i].date.substring(0,8), successData.labels) === -1) {
          successData.labels.push(filteredData[i].date.substring(0,8));
        }
      }
      successData.labels.sort();
      // Initial values
      successData.datasets.push({label: 'SUCCESS',
                                data: new Array(successData.labels.length).fill(0),
                                backgroundColor: "rgba(75, 192, 192, 1)"
                              });
      successData.datasets.push({label: 'FAILURE',
                                data: new Array(successData.labels.length).fill(0),
                                backgroundColor: "rgba(255,99,132,1)"
                              });
      // Fill data
      for (var j=0; j<filteredData.length; j++) {
        data_index = successData.labels.indexOf(filteredData[j].date.substring(0,8));
        if (filteredData[j].result == "SUCCESS") {
          successData.datasets[0].data[data_index] += 1;
        }
        else {
          successData.datasets[1].data[data_index] += 1;
        }
      }
      
      var ctx = document.getElementById('SuccessRatio').getContext('2d');
      SuccessRatioCtx = new Chart(ctx, {
        type: 'line', data: successData,
        options: {
          maintainAspectRatio: false,
          legend: { display: false },
          scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
          },
          //onClick: eventClickSuccess,
        }
      });
    }
  </script>

  <!-- BUILD COUNT -->
  <script type="text/javascript">
    function createBuildCountChart() {
      document.getElementById("divBuildCount").innerHTML = '<canvas id="BuildCount"></canvas>';
      var countData = { labels : [],  datasets : [] };
      // Find lables
      for (var i=0; i<filteredData.length; i++) {
        if (filteredData[i].result != "SUCCESS") { continue; }
        if ($.inArray(filteredData[i].date.substring(0,8), countData.labels) === -1) {
          countData.labels.push(filteredData[i].date.substring(0,8));
        }
      }
      countData.labels.sort();
      // Initial values
      for (var i=0; i<filteredData.length; i++) {
        if (filteredData[i].result != 'SUCCESS') { continue; }
        found = false;
        for (var j=0; j<countData.datasets.length; j++) {
          if (countData.datasets[j].label == filteredData[i].package) { found = true; break; }
        }
        if (found == false) {
          countData.datasets.push({label: filteredData[i].package,
                                  data: new Array(countData.labels.length).fill(0),
                                  pass: new Array(countData.labels.length).fill(0),
                                  fail: new Array(countData.labels.length).fill(0),
                                  backgroundColor: getColor(filteredData[i].package, 0.1),
                                  borderWidth: 1,
                                  borderColor: getColor(filteredData[i].package, 1)
                                 });
        }
      }
      // Fill data
      for (var i=0; i<countData.datasets.length; i++) {
        for (var j=0; j<filteredData.length; j++) {
          if (filteredData[j].package != countData.datasets[i].label) { continue; }
          data_index = countData.labels.indexOf(filteredData[j].date.substring(0,8));
          countData.datasets[i].data[data_index] += 1;
          if (filteredData[j].result == 'SUCCESS') {
            countData.datasets[i].pass[data_index] += 1;
          } else {
            countData.datasets[i].fail[data_index] += 1;
          }
        }
      }
      
      var ctx = document.getElementById('BuildCount').getContext('2d');
      BuildCountCtx = new Chart(ctx, {
        type: 'bar', data: countData,
        options: {
          legend: { display: false },
          scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
          },
          tooltips: { enabled: true, mode: 'single',
            callbacks: {
              title: function(tooltipItems, data) {
                return (data.datasets[tooltipItems[0].datasetIndex].label);
              },
              label: function(tooltipItems, data) {
                return "PASS: " + data.datasets[tooltipItems.datasetIndex].pass[tooltipItems.index]
                       + ", FAIL: " + data.datasets[tooltipItems.datasetIndex].fail[tooltipItems.index];
              }
            },
          },
          onClick: eventClickCount,
        }
      });
    }
    
  </script>

  <!-- GIT REPOSITORY SIZE -->
  <script type="text/javascript">
    function createGitSizeChart() {
      document.getElementById("divGitRepoSize").innerHTML = '<canvas id="GitRepoSize"></canvas>';
      sizeData = { labels : [],  datasets : [] };
      // Find lables
      for (var i=0; i<filteredData.length; i++) {
        if (filteredData[i].result != "SUCCESS" || filteredData[i].sizein == "0") { continue; }
        if ($.inArray(filteredData[i].date.substring(0,8), sizeData.labels) === -1) {
          sizeData.labels.push(filteredData[i].date.substring(0,8));
        }
      }
      sizeData.labels.sort();
      // Initial values
      for (var i=0; i<filteredData.length; i++) {
        if (filteredData[i].result != 'SUCCESS' || filteredData[i].sizein == '0') { continue; }
        found = false;
        for (var j=0; j<sizeData.datasets.length; j++) {
          if (sizeData.datasets[j].label == filteredData[i].package) { found = true; break; }
        }
        if (found == false) {
          sizeData.datasets.push({label: filteredData[i].package,
                                  data: new Array(sizeData.labels.length),
                                  backgroundColor: getColor(filteredData[i].package, 0.1),
                                  borderWidth: 1,
                                  borderColor: getColor(filteredData[i].package, 1),
                                  pointRadius: 2,
                                  fill: false,
                                  spanGaps: true,
                                 });
        }
      }
      // Fill data
      for (var i=0; i<sizeData.datasets.length; i++) {
        for (var j=0; j<filteredData.length; j++) {
          if (filteredData[j].package != sizeData.datasets[i].label) { continue; }
          if (filteredData[j].sizein == '0') { continue; }
          data_index = sizeData.labels.indexOf(filteredData[j].date.substring(0,8));
          if (sizeData.datasets[i].data[data_index] == null) {
            sizeData.datasets[i].data[data_index] = filteredData[j].sizein;
          }
        }
      }
      
      var ctx = document.getElementById('GitRepoSize').getContext('2d');
      GitRepoSizeCtx = new Chart(ctx, {
        type: 'line', data: sizeData,
        options: {
          legend: { display: false },
          tooltips: { enabled: true, mode: 'single',
            callbacks: {
              title: function(tooltipItems, data) {
                return (data.datasets[tooltipItems[0].datasetIndex].label);
              },
              label: function(tooltipItems, data) {
                return (tooltipItems.yLabel / 1024).toFixed(2) + " MB";
              }
            },
          },
          onClick: eventClickGit,
        }
      });
    }
  </script>
  
  <script type="text/javascript">
  </script>
  
  <script type="text/javascript">
    function reloadPage() {
      if (setPackage == 'All') { setPackage = null; }
      if (setProfile == 'All') { setProfile = null; }
      if (setBranch == 'All') { setBranch = null; }
      console.log(setPackage, setProfile, setBranch);
      filterData(dateStart, dateEnd, setPackage, setProfile, setBranch);
      createGitSizeChart();
      createBuildCountChart();
      createSuccessRatioChart();
    }
    reloadPage();
  </script>
  
  </body>
</html>

