sub closure_sizes : Chained('job') PathPart('closure-sizes') Args(0) {
    my ($self, $c) = @_;
    my @res = $c->stash->{job}->builds->search(
        { finished => 1, buildstatus => 0, closuresize => { '!=', 0 } },
        { order_by => "id", columns => [ "id", "timestamp", "closuresize" ] });
    $self->status_ok($c, entity => [ map { { id => $_->id, timestamp => $_ ->timestamp, value => $_->closuresize } } @res ]);
}

[% END;
BLOCK includeFlot %]
  <script src="[% c.uri_for("/static/js/flot/jquery.flot.js") %]" type="text/javascript"></script>
  <script src="[% c.uri_for("/static/js/flot/jquery.flot.selection.js") %]" type="text/javascript"></script>

[% INCLUDE includeFlot %]

  <li><a href="#tabs-charts" data-toggle="tab">Charts</a></li>

  <div id="tabs-charts" class="tab-pane">

    <h3>Closure size (in MiB)</h3>
    <div id="placeholder" style="width: 1000px; height: 400px;"></div>
    <div id="overview" style="margin-top: 20px; margin-left: 50px; margin-right: 50px; width: 900px; height: 100px"></div>
    <script type="text/javascript">
      $(function() {
        requestJSON({
          url: "[%c.uri_for('/job' project.name jobset.name job.name 'closure-sizes')%]",
          success: function(data) {
            var ids = [];
            var d = [];
            var max = 0;
            data.forEach(function(x) {
              var t = x.timestamp * 1000;
              ids[t] = x.id;
              d.push([t, x.value / (1024.0 * 1024.0)]);
              max = Math.max(t, max);
            });
            var options = {
              xaxis: { mode: "time" },
              yaxis: { min: 0 },
              selection: { mode: "x" },
              points: { show: true },
              lines: { show: true },
              grid: {
                clickable: true,
                hoverable: true,
                hoverFill: '#444',
                hoverRadius: 4,
              },
            };
            var plot = $.plot($("#placeholder"), [d], options);
            var overview = $.plot($("#overview"), [d], {
              series: {
                lines: { show: true, lineWidth: 1 },
                shadowSize: 0
              },
              xaxis: { ticks: [], mode: "time" },
              yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
              selection: { mode: "x" }
            });
            // now connect the two
            $("#placeholder").bind("plotselected", function (event, ranges) {
              // do the zooming
              plot = $.plot($("#placeholder"), [d],
                $.extend(true, {}, options, {
                  xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
                }));
              // don't fire event on the overview to prevent eternal loop
              overview.setSelection(ranges, true);
            });
            $("#overview").bind("plotselected", function (event, ranges) {
              plot.setSelection(ranges);
            });
            $("#placeholder").bind("plotclick", function (e, pos, item) {
              if (item) {
                plot.highlight(item.series, item.datapoint);
                buildid = data[item.dataIndex].id;
                window.location = "/build/"+buildid;
              }
            });
            // Zoom in to the last two months by default.
            plot.setSelection({ xaxis: { from: max - 60 * 24 * 60 * 60 * 1000, to: max } });
          }
        });
      });
    </script>
  </div>