<%inherit file="master.html"/>

<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <h2 class="centered">Bodhi Metrics</h2>
    <h3>Fedora</h3>
    <div id="placeholder" class="centered" style="height: 350px; width: 650px;"></div>

    <h3>EPEL</h3>
    <div id="placeholder_epel" class="centered" style="height: 350px; width: 650px;"></div>
  </div>
</div>

<script type="text/javascript">
  $(document).ready(function(){
      $("<div id='tooltip'></div>").css({
        position: "absolute",
        display: "none",
        border: "1px solid #ddd",
        padding: "2px",
        "background-color": "#eee",
        opacity: 0.80
      }).appendTo("body");

      function render_plothovers(event, pos, item) {
          if (item) {
            var numberofupdates = item.datapoint[1]-item.datapoint[2];

            $("#tooltip").html(numberofupdates+" "+item.series.label + " ")
              .css({top: item.pageY-30, left: item.pageX})
              .fadeIn(200);
          } else {
            $("#tooltip").hide();
          }
      }

      var stack = 0,
          bars = true,
          lines = false,
          steps = false;

      $.plot("#placeholder", ${data | n}, {
          xaxis: {
              ticks: ${ticks | n},
              mode: "categories",
              tickLength: 0
          },
          series: {
              stack: stack,
              lines: {
                  show: lines,
                  fill: true,
                  steps: steps,
              },
              bars: {
                  show: bars,
                  barWidth: 0.6,
                  align: "center"
              },
          },
          legend: {
              position: 'nw'
          },
          grid: {
            hoverable: true,
          }
      });

      $("#placeholder").bind("plothover", render_plothovers);

      var stack = 0,
          bars = true,
          lines = false,
          steps = false;

      $.plot("#placeholder_epel", ${eldata | n}, {
          xaxis: {
              ticks: ${elticks | n},
              mode: "categories",
              tickLength: 0
          },
          series: {
              stack: stack,
              lines: {
                  show: lines,
                  fill: true,
                  steps: steps
              },
              bars: {
                  show: bars,
                  barWidth: 0.6,
                  align: "center"
              }
          },
          legend: {
              position: 'nw'
          },
          grid: {
            hoverable: true,
          }
      });

      $("#placeholder_epel").bind("plothover", render_plothovers);

  });
</script>
