src/tools/benchmark/webapp/index.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="draw_chart.js"></script>
    <style type="text/css">
      span {
        cursor: pointer;
      }
      #bar {
        text-align:center;
        font-weight:bold;
        font-size:30px;
      }
    </style>
    <title>Continuous Build Performance Benchmark</title>
  </head>
  <body>
    <div>
      <p>Note:</p>
      <p>Click the legend (eg. "Full clean build", "Incremental build") to hide or show corresponding line.</p>
      <p>Drag the control buttons under the charts to filter data.</p>
      <p>This benchmark is generated by the code in <a href="https://github.com/bazelbuild/bazel/tree/master/src/tools/benchmark">bazel/src/tools/benchmark</a>. You can also try it locally.</p>
      <p>Our <a href="http://ci.bazel.io">CI system</a> automatically builds Bazel at each Git commit. The performance of each version is then assessed by building various kinds of <a href="https://github.com/bazelbuild/bazel/tree/master/src/tools/benchmark/java/com/google/devtools/build/benchmark/codegenerator">generated Java code</a> (e.g. Java libraries with few files, with many files, with many parallel deps, with a long chain of deps). The time it took to build each kind of code is measured and used to generate these charts.</p>
    </div>
    <div id="bar">
      <span onclick="showChartDiv('java');">Java</span> | <span onclick="showChartDiv('cpp');">C++</span></div>
    <div id="content">
      <div id="java">
        <div id="target0" style="width: 100%; height: 600px"></div>
        <div id="control0" style="width: 100%; height: 100px"></div>
        <div id="target1" style="width: 100%; height: 600px"></div>
        <div id="control1" style="width: 100%; height: 100px"></div>
        <div id="target2" style="width: 100%; height: 600px"></div>
        <div id="control2" style="width: 100%; height: 100px"></div>
        <div id="target3" style="width: 100%; height: 600px"></div>
        <div id="control3" style="width: 100%; height: 100px"></div>
      </div>
      <div id="cpp">
        <div id="target4" style="width: 100%; height: 600px"></div>
        <div id="control4" style="width: 100%; height: 100px"></div>
        <div id="target5" style="width: 100%; height: 600px"></div>
        <div id="control5" style="width: 100%; height: 100px"></div>
        <div id="target6" style="width: 100%; height: 600px"></div>
        <div id="control6" style="width: 100%; height: 100px"></div>
        <div id="target7" style="width: 100%; height: 600px"></div>
        <div id="control7" style="width: 100%; height: 100px"></div>
      </div>
    </div>
  </body>
</html>