{% extends "layout.html" %}
{% block sidebar %}{% include "cupboard/sidebar.html" %}{% endblock %}
{% from "run_util.html" import display_result_code %}
{% block page_title %}Statistics{% endblock %}
{% block body %}
<div class="section" id="stats">
<h1>Statistics</h1>

<div name="current">
<h2>Merge Proposals by Hoster</h2>
<table class="docutils" border="1">
<thead valign="bottom">
<tr class="row-odd">
  <th class="head">Hoster</th>
  <th class="head">Open</th>
  <th class="head">Merged and applied</th>
  <th class="head">Closed</th>
</tr>
</thead>
<tbody valign="top" name="queue-table">
{% for hoster, data in by_hoster.items() %}
<tr>
    <td>{{ hoster }}</td>
    <td>{{ data.get('open', 0) }}</td>
    <td>{{ data.get('merged', 0) + data.get('applied', 0) }}</td>
    <td>{{ data.get('closed', 0) }}</td>
</tr>
{% endfor %}

</tbody>
</table>

<h2>Hoster Status</h2>

<canvas id="hoster-status-chart" width="800" height="450"></canvas>
<script>
new Chart($("#hoster-status-chart"), {
    type: 'bar',
    data: {
       labels: {{ by_hoster.keys()|list|sort|tojson }},
       datasets: [
          {% for kind, color in [('closed', 'red'), ('merged', 'green'), ('open', 'grey')] %}
           {label: '{{ kind }}', data: [
               {% for hoster in by_hoster.keys()|list|sort %}
                  {{ by_hoster[hoster][kind] }},
               {% endfor %}],
               backgroundColor: Chart.helpers.color(window.chartColors.{{ color }}).alpha(0.5).rgbString()},
          {% endfor %}
       ],
    },
    options: {
        title: { display: true, text: 'Merge proposal status per hoster' },
        scales: {
           xAxes: [{ stacked: true}], yAxes: [{ stacked: true }],
        },
    },
});
</script>

<h2>Burndown</h2>

<canvas id="burndown" width="800" height="450"></canvas>
<script>
$.getJSON("/cupboard/stats/+chart/burndown", function (json) {
new Chart($("#burndown"), {
    type: 'line',
    data: {
      datasets: [{
        label: 'Packages remaining',
        backgroundColor: window.chartColors.red,
        borderColor: window.chartColors.red,
        data: $.map(json, function(entry) { return { t: moment(entry[0]).toDate(), y: entry[1] } } ),
      }],
    },
    options: {
      title: { display: true, text: 'Package burndown' },
      scales: {
        xAxes: [{
          type: 'time',
          distribution: 'series',
          offset: true,
          ticks: {
            major: {
              enabled: true,
              fontStyle: 'bold'
            },
            source: 'data',
          },
        }],
        yAxes: [{
          display: true,
          ticks: {
              beginAtZero: true   // minimum value will be 0.
          }
        }],
      }
    },
});
});
</script>

<h2>Review Status for Successful Runs</h2>

<canvas id="review-status-chart" width="800" height="450"></canvas>
<script>
var review_status_chart;
$.getJSON("/cupboard/stats/+chart/review-status", function (json) {
review_status_chart = new Chart($("#review-status-chart"), {
    type: 'pie',
    data: {
       labels: ["rejected", "approved", "unreviewed"],
       datasets: [{
          data: [
            json['rejected'],
            json['approved'],
            json['unreviewed'],
          ],
          backgroundColor: [
             Chart.helpers.color(window.chartColors.red).alpha(0.5).rgbString(),
             Chart.helpers.color(window.chartColors.green).alpha(0.5).rgbString(),
             Chart.helpers.color(window.chartColors.grey).alpha(0.5).rgbString(),
          ],
       }],
    },
    options: {
        title: { display: true, text: 'Review Status for Successful Runs' },
    },
});
});

document.getElementById("review-status-chart").onclick = function(e) {
   var slice = review_status_chart.getElementAtEvent(e);
   if (!slice.length) return;  // not a slice they clicked on
   var label = slice[0]._model.label;
   if (label == "unreviewed") {
        window.open("/cupboard/review");
   } else if (label == "approved") {
        window.open("/cupboard/ready");
   } else if (label == "rejected") {
        window.open("/cupboard/rejected");
   } else {
        console.log("Unknown label: " + label);
   }
}


</script>


<h2>Pushes over time</h2>

<canvas id="pushes-over-time-chart" width="800" height="450"></canvas>
<script>
$.getJSON("/cupboard/stats/+chart/pushes-over-time", function (json) {
new Chart($("#pushes-over-time-chart"), {
    type: 'line',
    data: {
       labels: json['labels'].map(function(ts) { return moment(ts).toDate(); }),
       datasets: [{
         label: 'Pushes',
         borderColor: window.chartColors.green,
         backgroundColor: Chart.helpers.color(window.chartColors.green).alpha(0.5).rgbString(),
         data: json['push_count'],
       }],
    },
    options: {
       title: { text: 'Pushes over time', display: true },
       scales: {
         xAxes: [{ type: 'time' }],
       },
    },
});
});
</script>

<h2>Merges over time</h2>

<canvas id="merges-over-time-chart" width="800" height="450"></canvas>
<script>
$.getJSON("/cupboard/stats/+chart/merges-over-time", function (json) {
new Chart($("#merges-over-time-chart"), {
    type: 'line',
    data: {
       datasets: [
{% for key in ['merged', 'opened'] %}{
         {% set color = {'opened': 'blue', 'merged': 'green'}[key] %}
         label: '{{ key }}',
         borderColor: window.chartColors.{{ color }},
         backgroundColor: Chart.helpers.color(window.chartColors.{{ color }}).alpha(0.5).rgbString(),
         data: $.map(json['{{ key }}'], function(count, ts) { return { x: moment(ts).toDate(), y: count }; }),
       },
{% endfor %}
       ],
    },
    options: {
       title: { text: 'Merges over time', display: true },
       scales: {
         xAxes: [{ type: 'time' }],
       },
    },
});
});
</script>

<h2>Time to merge</h2>

<canvas id="time-to-merge" width="800" height="450"></canvas>
<script>
$.getJSON("/cupboard/stats/+chart/time-to-merge", function (json) {
new Chart.Scatter($("#time-to-merge"), {
    data: {
        datasets: [{
           label: "Days to merge",
           data: $.map(json, function(y, x) { return { x: x, y: y}; }),
           backgroundColor: Chart.helpers.color(window.chartColors.green).alpha(0.5).rgbString(),
        }],
    },
    options: {
      title: { text: "Time to Merge", display: true },
    },
});
});
</script>

<h2>Package Count per Hoster</h2>

<canvas id="package-host-chart" width="800" height="450"></canvas>
<script>
var package_host_chart;
$.getJSON("/cupboard/stats/+chart/package-hosts?min=10", function (json) {
package_host_chart = new Chart($("#package-host-chart"), {
    type: 'pie',
    data: {
       labels: $.map(json, function(a) {
            if (a[0] == null) { return "no vcs" }
            return a[0] + " (" + a[1] + ")";
       }),
       datasets: [{
	  backgroundColor: $.map(window.chartColors, function(val, key) { return val; }),
	  data: $.map(json, function(a) { return a[2]; }),
     }],
    },
    options: {
        title: { display: true, text: 'Package hosts with at least 10 repositories' },
    },
});
});
</script>

</div>
{% endblock %}
<!-- vim: expandtab -->
