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

            if (item) {
              plot.highlight(item.series, item.datapoint);
              buildid = ids[item.datapoint[0]];
              window.location = "/build/"+buildid;
            }
          });
        });
      </script>
      <h3>Store path size history (in MB)</h3>
      <div id="placeholder-size" style="width:800px;height:400px;"></div>
      <div id="overview-size" style="margin-left:50px;margin-top:20px;width:600px;height:50px"></div>
      <script type="text/javascript">
        $(function() {
          var d = [];
          var ids = [];
          [% FOREACH prevbuild IN prevBuilds; IF prevbuild.size != 0 %]
            d.push([[% prevbuild.starttime * 1000 %],[% prevbuild.size / (1024*1024.0) %]]);
            ids[[% prevbuild.starttime * 1000 %]] = [% prevbuild.id %] ;
          [% END; END %]
          var options = {
            xaxis: { mode: "time" },
            selection: { mode: "x" },
            points: { show: true },
            lines: { show: true },
            grid: {
              clickable: true,
              hoverable: true,
              hoverFill: '#444',
              hoverRadius: 4,
            },
          };
          var plot = $.plot($("#placeholder-size"), [d], options);
          var overview = $.plot($("#overview-size"), [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-size").bind("plotselected", function (event, ranges) {
            // do the zooming
            plot = $.plot($("#placeholder-size"), [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-size").bind("plotselected", function (event, ranges) {
            plot.setSelection(ranges);
          });
          $("#placeholder-size").bind("plotclick", function (e, pos, item) {

BLOCK createChart %]

  <div id="[%id%]-chart" style="width: 1000px; height: 400px;"></div>
  <div id="[%id%]-overview" style="margin-top: 20px; margin-left: 50px; margin-right: 50px; width: 900px; height: 100px"></div>

  <script type="text/javascript">
    $(function() {
      requestJSON({
        url: "[%dataUrl%]",
        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($("#[%id%]-chart"), [d], options);
          var overview = $.plot($("#[%id%]-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
          $("#[%id%]-chart").bind("plotselected", function (event, ranges) {
            // do the zooming
            plot = $.plot($("#[%id%]-chart"), [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);
          });
          $("#[%id%]-overview").bind("plotselected", function (event, ranges) {
            plot.setSelection(ranges);
          });
          $("#[%id%]-chart").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>
[% END;

    <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);
            });

    [% INCLUDE createChart id="closure-size" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'closure-sizes') %]

            $("#placeholder").bind("plotclick", function (e, pos, item) {
              if (item) {
                plot.highlight(item.series, item.datapoint);
                buildid = data[item.dataIndex].id;
                window.location = "/build/"+buildid;
              }
            });

    <h3>Output size (in MiB)</h3>

            // Zoom in to the last two months by default.
            plot.setSelection({ xaxis: { from: max - 60 * 24 * 60 * 60 * 1000, to: max } });
          }
        });
      });
    </script>

    [% INCLUDE createChart id="output-size" dataUrl=c.uri_for('/job' project.name jobset.name job.name 'output-sizes') %]