JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/botify/1.0.0-beta4/botify-sdk.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="root">
  <table id="analyses-table" class="table">
    <thead>
      <tr>
        <td>Id</td>
        <td>Date</td>
        <td>Nb URLs</td>
      </tr>
    </thead>
  </table>
  <div id="analysis-data" class="row hide">
    <div class="col-md-6">
      <div>
        <label>Compliant URLs:</label>
        <span id="compliant-urls"></span>
      </div>
      <div>
        <label>Percentage Compliant URLs:</label>
        <span id="percentage-compliant-urls"></span>
      </div>
      <div>
        <label>Average Load Time:</label>
        <span id="average-load-time"></span>
      </div>
    </div>
    <div id="http-code-distribution" class="col-md-6"></div>
    <div class="col-md-12">
      <label id="sample-urls-label"></label>
      <table id="sample-urls-table" class="table table-condensed">
        <thead>
          <tr>
            <td>URL</td>
            <td>Depth</td>
          </tr>
        </thead>
      </table>
    </div>
  </div>
</div>

CSS

#analyses-table tr:not(.active) {
  cursor: pointer;
}

JavaScript

// Token with only reading right on a demo project
var token = '5200a30fb41f179e6dadab3b4e2d40f83a0a8ccd';
var username = 'adam_warlock';
var projectSlug = 'demo-project';

var $analysesTable = $('#analyses-table');
var $analysisData = $('#analysis-data');
var $compliantURLs = $('#compliant-urls');
var $percentageCompliantURLs = $('#percentage-compliant-urls');
var $averageLoadTime = $('#average-load-time');
var $httpCodeDistribution = $('#http-code-distribution');
var $sampleURLsLabel = $('#sample-urls-label');
var $sampleURLsTable = $('#sample-urls-table');

BotifySDK.authToken(token);

// Fetch last 5 analyses and populate table
function displayAnalyses() {
  BotifySDK.AnalysisController.getAnalyses({
    username: username,
    projectSlug: projectSlug,
    size: 5,
  }, function(err, response) {
    response.results.forEach(function (analysis) {
      var slug = analysis.slug;
      var date = new Date(analysis.date_finished).toDateString();
      var nbUrls = analysis.urls_done;

      $analysesTable.append(
        $('<tr>')
          .addClass('slug-' + slug)
          .on('click', function(e) {
            displayAnalysisData(slug);
          })
          .append($('<td>').text(slug))
        	.append($('<td>').text(date))
      		.append($('<td>').text(nbUrls))
      );
    });
    
    var lastAnalysisSlug = response.results[0].slug;
    displayAnalysisData(lastAnalysisSlug);
  });
}

// Fetch analysis data and display metrics and chart.
function displayAnalysisData(analysisSlug) {
  $analysisData.addClass('hide');
  $analysesTable.find('tr').removeClass('active');
  $analysesTable.find('tr.slug-' + analysisSlug).addClass('active');

  BotifySDK.AnalysisController.getUrlsAggs({
    username: username,
    projectSlug: projectSlug,
    analysisSlug: analysisSlug,
    urlsAggsQueries: [
      // Total URLs
      new BotifySDK.Query(),
      // Compliant URLs
      new BotifySDK.Query().setFilters({
        field: 'compliant.is_compliant',
       ...