Add requests per second metric

@@ -93,6 +93,13 @@
         </div>
         <canvas id="responseTimeChart" width="400" height="100"></canvas>
     </div>
+    <div class="container">
+        <div class="stats-column">
+            <h5>Requests per Second</h5>
+            <h1 id="rpsStat">-</h1>
+        </div>
+        <canvas id="rpsChart" width="400" height="100"></canvas>
+    </div>
     <div class="footer">
         <p>Made with &#9829; with Socket.io & Chart.js</p>
     </div>
@@ -135,6 +142,13 @@
         pointRadius: 0,
     }];
 
+    var rpsDataset = [{
+        label: 'Requests per Second',
+        data: [],
+        lineTension: 0.2,
+        pointRadius: 0,
+    }];
+
     var defaultOptions = {
         scales: {
             yAxes: [{
@@ -161,11 +175,13 @@
     var memStat = document.getElementById('memStat');
     var loadStat = document.getElementById('loadStat');
     var responseTimeStat = document.getElementById('responseTimeStat');
+    var rpsStat = document.getElementById('rpsStat');
 
     var cpuChartCtx = document.getElementById("cpuChart");
     var memChartCtx = document.getElementById("memChart");
     var loadChartCtx = document.getElementById("loadChart");
     var responseTimeChartCtx = document.getElementById("responseTimeChart");
+    var rpsChartCtx = document.getElementById("rpsChart");
 
     var cpuChart = new Chart(cpuChartCtx, {
         type: 'line',
@@ -203,8 +219,21 @@
         options: defaultOptions
     });
 
+    var rpsChart = new Chart(rpsChartCtx, {
+        type: 'line',
+        data: {
+            labels: labels,
+            datasets: rpsDataset,
+        },
+        options: defaultOptions
+    });
+
     socket.on('stats', function (data) {
-        console.log(data);
+        // Remove last element of Array because it contains malformed responses data.
+        // To keep consistency we also remove os data.
+        data.responses.pop();
+        data.os.pop();
+
         cpuStat.textContent = data.os[data.os.length - 1].cpu.toFixed(1) + '%';
         cpuChart.data.datasets[0].data = data.os.map(function(point) { return point.cpu; });
         cpuChart.data.labels = data.os.map(function(point) { return point.timestamp; });
@@ -224,6 +253,14 @@
         responseTimeChart.data.datasets[0].data = data.responses.map(function(point) { return point.mean; });
         responseTimeChart.data.labels = data.responses.map(function(point) { return point.timestamp; });
         responseTimeChart.update();
+
+        if (data.responses.length >= 2) {
+            var deltaTime = data.responses[data.responses.length - 1].timestamp - data.responses[data.responses.length - 2].timestamp;
+            rpsStat.textContent = (data.responses[data.responses.length - 1].count / deltaTime * 1000).toFixed(2);
+            rpsChart.data.datasets[0].data = data.responses.map(function(point) { return point.count / deltaTime * 1000; });
+            rpsChart.data.labels = data.responses.map(function(point) { return point.timestamp; });
+            rpsChart.update();
+        }
     });
 </script>
 </body>

@@ -41,7 +41,7 @@
       if (!span.responses[0] || span.responses.last().timestamp + (span.interval * 1000) < Date.now()) span.responses.push(defaultResponse);
 
       if (span.os.length >= span.retention) span.os.shift();
-      if (span.responses[0] && span.responses.length >= span.retention) span.responses.shift();
+      if (span.responses[0] && span.responses.length > span.retention) span.responses.shift();
 
       sendMetrics(io, span);
     });