49:98a080b1eb9a
Anton Shestakov <av6@dwimlabs.net>, Sun, 07 Feb 2016 22:32:30 +0800
viewer: add a bit fancier results page with c3.js diagrams
next change 50:c074bc38b66a

templates/fancy.html

Permissions: -rw-r--r--

File Latest Revisions Annotate Diff Comparison
Other formats:
JSON Raw
Feeds:
Atom RSS 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hgperfcheck{% if changesets %} (rev {{ changesets[0]['rev'] }} and earlier){% end %}</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" type="text/css">
    <style type="text/css">
      * {
        font-family: monospace;
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
  </head>
  <body>
    <header>
      <p>
        <a href="{{ setrev() }}">back to tip</a>
        {% set prevrev = changesets[0]['rev'] + 120 if changesets else None %}
        {% if prevrev %}<a href="{{ setrev(prevrev) }}">prev page</a>{% end %}
        {% set nextrev = changesets[-1]['rev'] - 1 if changesets else None %}
        {% if nextrev > -1 %}<a href="{{ setrev(nextrev) }}">next page</a>{% end %}
        <span style="color: #777;">
          hover things for a tooltip; red means slow, green means fast; first
          color and time means without .hg/cache, second means with .hg/cache.
        </span>
      </p>
      <p>
        timings:
        {% for mark, desc in marks.items() %}
          -<a href="{{ setmarks(remove=mark) }}" title="{{ desc }}">{{ mark }}</a>
        {% end %}
        {% for mark, desc in moremarks.items() %}
          +<a href="{{ setmarks(add=mark) }}" title="{{ desc }}">{{ mark }}</a>
        {% end %}
        *<a href="{{ setmarks() }}">all</a>
      </p>
    </header>
    <div id="chart"></div>
    <footer>
      <p>
        <a href="{{ setrev() }}">back to tip</a>
        {% if prevrev %}<a href="{{ setrev(prevrev) }}">prev page</a>{% end %}
        {% if nextrev > -1 %}<a href="{{ setrev(nextrev) }}">next page</a>{% end %}
      </p>
    </footer>
    <script type="application/json" id="data">{% raw json_encode(data) %}</script>
    <script>
      var chart = c3.generate({
        bindto: '#chart',
        size: {height: 500},
        tooltip: {format: {title: function(x) { return x; }}},
        data: JSON.parse(document.getElementById('data').firstChild.nodeValue)
      });
    </script>
  </body>
</html>