JSFiddle - React, Tailwind, and code Playground

by mikecmpbll

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<div class="dashboard-container incidents-per-month">
  <canvas id="ipm" width="700"></canvas>
</div>

<div class="dashboard-container attendance-info" style="width: 250px">
  <div class="dashboard-container-title">
    <h2>
      Average Attendance
    </h2>
  </div>
  <p class="dashboard-bignum attendance-figure text-center">91.0%</p>
  <table>
    <tbody>
      <tr>
        <td class="text-center"><i class="fa fa-star" aria-hidden="true"></i></td>
        <td>Beacon Primary School</td>
        <td><span class="attendance-figure">96.2%</span></td>
      </tr>
      <tr>
        <td class="text-center"><i class="fa fa-exclamation" aria-hidden="true"></i></td>
        <td>Bishop Creighton Academy</td>
        <td><span class="attendance-figure">85.7%</span></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="dashboard-container incidents-and-monitorings-by-category" style="width: 450px">
  <div class="dashboard-container-title">
    <h2>
      Incidents &amp; Monitorings by Category
    </h2>
  </div>
  <canvas id="imc" height="350"></canvas>
</div>

CSS

body {
  background-color: #F3F5F6;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" 
 }

.dashboard-container {
  float: left;
  background-color: white;
  border-radius: 3px;
  padding: 10px;
  margin: 10px;
}

.dashboard-container-title {
  border-bottom: 1px solid #eee;
  text-align: center;
}

.dashboard-container-title h2 {
  font-size: 14px;
  font-weight: lighter;
}

.dashboard-bignum {
  font-size: 5rem;
  margin-bottom: 0;
}

.attendance-info table {
  font-size: 0.9rem;
}

.attendance-info td {
  font-size: 0.9rem;
  padding: 2px 5px;
}

JavaScript

$(".attendance-figure").each(function() {
  var attendanceFigure = parseFloat($(this).html())
  var adjustedHue = Math.max(0, (10/4) * attendanceFigure - ((10/4) * 60))
  $(this).css('color', 'hsl(' + adjustedHue + ', 100%, 40%)')
})

window.chartColors = {
	red: 'rgb(255, 99, 132)',
	orange: 'rgb(255, 159, 64)',
	yellow: 'rgb(255, 205, 86)',
	green: 'rgb(75, 192, 192)',
	blue: 'rgb(54, 162, 235)',
	purple: 'rgb(153, 102, 255)',
	grey: 'rgb(201, 203, 207)'
};

var ctx = document.getElementById("ipm").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        datasets: [{
            label: 'Incidents per month',
            data: [12, 19, 3, 5, 2, 3, 14, 5, 8, 12, 9, 4],
            borderColor: "rgb(75, 192, 192)",
            lineTension: 0.1,
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

var ctx = document.getElementById("imc").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["Child Protection", "Behaviour", "Bullying", "Home Issues", "CSE"],
        datasets: [{
            label: 'Monitorings',
            data: [12, 19, 3, 5, 2],
            backgroundColor: [
                window.chartColors.red,
                window.chartColors.orange,
                window.chartColors.yellow,
                window.chartColors.green,
                window.chartColors.blue,
            ],
        },
        {
        		label: 'Incidents this A/Y',
            data: [5, 12, 1, 17, 2],
            backgroundColor: [
                window.chartColors.red,
                window.chartColors.orange,
                window.chartColors.yellow,
                window.chartColors.green,
                window.chartColors.blue,
            ],
        }],
  ...