JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<link rel="stylesheet" href="https://cpprod1.catchpoint.com/ui/App_Themes/NewUI/css/all-min.css">
<div id="Chart2">

</div>

CSS

table.kpi-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: Verdana, Geneva, Tahoma, sans-serif
}

table.kpi-table.dark {
  background-color: #222;
}

table.kpi-table td {
  border: 3px solid #ccc;
  padding: 0.7vw 0%;
}

table.kpi-table.dark td {
  border: 3px solid #161616;
}

table.kpi-table td div {
  margin-left: 10%;
}

table.kpi-table td .name {
  font-size: 1vw;
}

table.kpi-table.dark td .name {
  color: #808080;
}

table.kpi-table td .base {
  font-size: 2vw;
}

table.kpi-table.dark td .base {
  color: #bbb;
}

table.kpi-table td .comp {
  font-size: 1.2vw;
}

table.kpi-table.dark td .comp {
  color: #808080;
}

table.kpi-table td .increase,
table.kpi-table.dark td .increase {
  color: #d83313;
}

table.kpi-table td .decrease,
table.kpi-table.dark td .decrease {
  color: #06850c;
}

JavaScript

document.addEventListener('DOMContentLoaded', function(event) {
  /******************** ADD CODE HERE *************************
  // uncomment to see example visualization
  
  var maxInRow = 4;
  var upChar = "&utrif;";
  var downChar = "&dtrif;";
  var na = "NA";

  var selector = CPVisualization.getContainerSelector();
  var summary = CPVisualization.getSummaryData();
  var data = summary.data;
  var headers = summary.headers;

  if (data.length != 2) {
    d3.select(selector).text("Please select one Comparative Time");
    return;
  }

  var arr = [];
  var base = data[0];
  var comp = data[1];

  var b, c, change, curr;
  for (var i = 0; i < base.metrics.length; i++) {
    if (i % maxInRow == 0) {
      arr.push([]);
      curr = arr[arr.length - 1];
    }

    b = base.metrics[i];
    c = comp.metrics[i];

    if (b != null && (parseFloat(b) != 0)) {
      b = Math.round(b * 100) / 100;
      change = ((b - c) / c) * 100
      change = Math.round(change * 100) / 100;
    } else {
      b = na;
      change = na;
    }

    curr.push({
      name: headers.metrics[i],
      base: b,
      change: change
    });
  }

  var isDarkTheme = CPVisualization.getTheme() == "dark";
  var table = d3.select(selector).append("table").attr("class", isDarkTheme ? "kpi-table dark" : "kpi-table");

  var tr = table.selectAll("tr").data(arr);
  tr.enter().append("tr").html(function(d) {
    var html = "";

    for (var i = 0; i < d.length; i++) {
      html += getHtml(d[i]);
    }

    return html;
  });

  function getHtml(d) {
    var html = "<td><div class='name'>" + d.name + "</div>";
    html += "<div class='base'>" + d.base + "</div>";

    var change = d.change;
    if (change == na) {
      html += "<div class='comp'>" + d.change + "</div></td>";
    } else if (change < 0) {
      html += "<div class='comp decrease'>" + d.change + "%" + downChar + "</div></td>";
    } else if (change > 0) {
      html += "<div class='comp increase'>" + "+" + d.change + "%" + upChar +...