{% extends "lava_scheduler_app/_content.html" %}

{% block content %}

<h2>Health Job Summary</h2>
<div style="display:inline-block; padding-left:20px;">

<h3>By Day</h3>
<div id="placeholder-daily" style="width:300px;height:200px;"></div>
<script type="text/javascript">
$(document).ready(function() {
var dpass = [];
var dfail = [];
var ddates= [];
{% for day in health_day_report %}
  dpass.push([{{forloop.counter0}}, {{day.pass}}]);
  dfail.push([{{forloop.counter0}}, {{day.fail}}]);
  ddates.push([{{forloop.counter0}}, "{{day.date}}<br/>Pass: {{day.pass}}<br/>Fail: {{day.fail}}"]);
{% endfor %}

  var ddata = [
    {'label': 'Fail', 'data': dfail, 'color': '#FF0000'},
    {'label': 'Pass', 'data': dpass, 'color': '#00FF00'},
  ];

  $.plot($("#placeholder-daily"), ddata, {
    series: {
      stack: true,
      bars: { show: true, barWidth: 0.6 },
    },
    xaxis: {
      ticks: ddates,
    },
  });
}
);
</script>
</div>

<div style="display:inline-block; padding-left:40px;">

<h3>By Week</h3>
<div id="placeholder-weekly" style="width:500px;height:200px;"></div>
<script type="text/javascript">
$(document).ready(function() {
var wpass = [];
var wfail = [];
var wdates= [];
{% for week in health_week_report %}
  wpass.push([{{forloop.counter0}}, {{week.pass}}]);
  wfail.push([{{forloop.counter0}}, {{week.fail}}]);
  wdates.push([{{forloop.counter0}}, "{{week.date}}<br/>Pass: {{week.pass}}<br/>Fail: {{week.fail}}"]);
{% endfor %}

  var wdata = [
    {'label': 'Fail', 'data': wfail, 'color': '#FF0000'},
    {'label': 'Pass', 'data': wpass, 'color': '#00FF00'},
  ];

  $.plot($("#placeholder-weekly"), wdata, {
    series: {
      stack: true,
      //lines: { show: true, fill: true, steps: false },
      bars: { show: true, barWidth: 0.6 },
    },
    xaxis: {
      ticks: wdates,
    },
  });
}
);
</script>
</div>

<h2>Test Job Summary</h2>
<div style="display:inline-block; padding-left:20px;">

<h3>By Day</h3>
<div id="placeholder-job-daily" style="width:300px;height:200px;"></div>
<script type="text/javascript">
$(document).ready(function() {
var jdpass = [];
var jdfail = [];
var jddates= [];
{% for day in job_day_report %}
  jdpass.push([{{forloop.counter0}}, {{day.pass}}]);
  jdfail.push([{{forloop.counter0}}, {{day.fail}}]);
  jddates.push([{{forloop.counter0}}, "{{day.date}}<br/>Pass: {{day.pass}}<br/>Fail: {{day.fail}}"]);
{% endfor %}

  var jddata = [
    {'label': 'Fail', 'data': jdfail, 'color': '#FF0000'},
    {'label': 'Pass', 'data': jdpass, 'color': '#00FF00'},
  ];

  $.plot($("#placeholder-job-daily"), jddata, {
    series: {
      stack: true,
      bars: { show: true, barWidth: 0.6 },
    },
    xaxis: {
      ticks: jddates,
    },
  });
}
);
</script>
</div>

<div style="display:inline-block; padding-left:40px;">

<h3>By Week</h3>
<div id="placeholder-job-weekly" style="width:500px;height:200px;"></div>
<script type="text/javascript">
$(document).ready(function() {
var jwpass = [];
var jwfail = [];
var jwdates= [];
{% for week in job_week_report %}
  jwpass.push([{{forloop.counter0}}, {{week.pass}}]);
  jwfail.push([{{forloop.counter0}}, {{week.fail}}]);
  jwdates.push([{{forloop.counter0}}, "{{week.date}}<br/>Pass: {{week.pass}}<br/>Fail: {{week.fail}}"]);
{% endfor %}

  var jwdata = [
    {'label': 'Fail', 'data': jwfail, 'color': '#FF0000'},
    {'label': 'Pass', 'data': jwpass, 'color': '#00FF00'},
  ];

  $.plot($("#placeholder-job-weekly"), jwdata, {
    series: {
      stack: true,
      //lines: { show: true, fill: true, steps: false },
      bars: { show: true, barWidth: 0.6 },
    },
    xaxis: {
      ticks: jwdates,
    },
  });
}
);
</script>
</div>

{% endblock %}