<div bat-vertical-split ng-controller="PerfController" class="perf" ng-class="{disabled: !enabled}">

  <h1>Performance</h1>

  <h3 ng-hide="::lastDigestTime">Waiting for first digest cycle...</h3>

  <div class="stats">
    <div class="left">
      <div class="graph">
        <canvas></canvas>
        <div>
          <span>{{ numWatchers }} watchers</span> in <span>{{ lastDigestTime | number }}ms</span>
        </div>
      </div>
    </div>

    <div class="right averages">
      <div>The last digest cycle took {{ lastDigestTime | number }} ms and had {{ numWatchers || 0 }} watchers</div>
      <div ng-show="::last30Digests.watchers">The last 30 digest cycles averaged {{ last30Digests.time | number }} ms and averaged {{ last30Digests.watchers | number }} watchers.</div>
      <div ng-show="::last5Seconds.digests">There were {{ last5Seconds.digests | number }} digests in the last 5 seconds, averaging {{ last5Seconds.digests / 5 | number }} digests/sec</div>
      <div ng-show="::last30Seconds.digests">There were {{ last30Seconds.digests | number }} digests in the last 30 seconds, averaging {{ last30Seconds.digests / 30 | number }} digests/sec</div>
    </div>
  </div>
  <hr>
  <h2>Digest timings</h2>
  <div class="watcher-table">
    <div class="watcher-table-head watcher-table-row">
      <span class="watcher-text">Watcher text</span>
      <span class="watcher-time">Total time</span>
      <span class="watcher-count"># of Watchers</span>
      <span class="watcher-avg">Avg. time</span>
    </div>
    <div ng-repeat-start="watcher in watchTimings" class="watcher-table-row">
      <div class="watcher-text"><pre>{{ watcher.text }}</pre></div>
      <div class="watcher-time"><pre>{{ watcher.time | number }} ms</pre></div>
      <div class="watcher-count"><pre>{{ watcher.count }}</pre></div>
      <div class="watcher-avg"><pre>{{ watcher.time / watcher.count | number }} ms</pre></div>
    </div>
    <hr ng-repeat-end ng-show="::!$last">
  </div>
  <hr>
  <h2>Raw data</h2>
  <pre>{{ perf | json }}</pre>
</div>
