️Change indents, refactor defaults

@@ -119,39 +119,12 @@
   var socket = io('http://localhost:41338');
   var socket = io('http://localhost:41338');
   var labels = [];
   var labels = [];
   var defaultSpan = 0;
   var defaultSpan = 0;
-    var cpuDataset = [{
-        label: 'CPU Usage in %',
-        data: [],
-        lineTension: 0.3,
-        pointRadius: 0,
-    }];
-
-    var memDataset = [{
-        label: 'Memory Usage in MB',
-        data: [],
-        lineTension: 0.2,
-        pointRadius: 0,
-    }];
 
 
-    var loadDataset = [{
-        label: '1 Minute Load',
+  var defaultDataset = [{
+    label: '',
     data: [],
     data: [],
     lineTension: 0.2,
     lineTension: 0.2,
-        pointRadius: 0,
-    }];
-
-    var responseTimeDataset = [{
-        label: 'Response Time',
-        data: [],
-        lineTension: 0.2,
-        pointRadius: 0,
-    }];
-
-    var rpsDataset = [{
-        label: 'Requests per Second',
-        data: [],
-        lineTension: 0.2,
-        pointRadius: 0,
+    pointRadius: 0
   }];
   }];
 
 
   var defaultOptions = {
   var defaultOptions = {
@@ -176,6 +149,23 @@
     }
     }
   };
   };
 
 
+  var createChart = function (ctx, dataset) {
+    return new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: [],
+        datasets: dataset
+      },
+      options: defaultOptions
+    })
+  };
+
+  var cpuDataset = Object.create(defaultDataset);
+  var memDataset = Object.create(defaultDataset);
+  var loadDataset = Object.create(defaultDataset);
+  var responseTimeDataset = Object.create(defaultDataset);
+  var rpsDataset = Object.create(defaultDataset);
+
   var cpuStat = document.getElementById('cpuStat');
   var cpuStat = document.getElementById('cpuStat');
   var memStat = document.getElementById('memStat');
   var memStat = document.getElementById('memStat');
   var loadStat = document.getElementById('loadStat');
   var loadStat = document.getElementById('loadStat');
@@ -188,52 +178,13 @@
   var responseTimeChartCtx = document.getElementById("responseTimeChart");
   var responseTimeChartCtx = document.getElementById("responseTimeChart");
   var rpsChartCtx = document.getElementById("rpsChart");
   var rpsChartCtx = document.getElementById("rpsChart");
 
 
-    var cpuChart = new Chart(cpuChartCtx, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: cpuDataset,
-        },
-        options: defaultOptions
-    });
-
-    var memChart = new Chart(memChartCtx, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: memDataset,
-        },
-        options: defaultOptions
-    });
-
-    var loadChart = new Chart(loadChartCtx, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: loadDataset,
-        },
-        options: defaultOptions
-    });
-
-    var responseTimeChart = new Chart(responseTimeChartCtx, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: responseTimeDataset,
-        },
-        options: defaultOptions
-    });
-
-    var rpsChart = new Chart(rpsChartCtx, {
-        type: 'line',
-        data: {
-            labels: labels,
-            datasets: rpsDataset,
-        },
-        options: defaultOptions
-    });
+  var cpuChart = createChart(cpuChartCtx, cpuDataset);
+  var memChart = createChart(memChartCtx, memDataset);
+  var loadChart = createChart(loadChartCtx, loadDataset);
+  var responseTimeChart = createChart(responseTimeChartCtx, responseTimeDataset);
+  var rpsChart = createChart(rpsChartCtx, rpsDataset);
 
 
-    var onSpanChange = function(e) {
+  var onSpanChange = function (e) {
     e.target.classList.add('active');
     e.target.classList.add('active');
     defaultSpan = Integer.parseInt(e.target.id);
     defaultSpan = Integer.parseInt(e.target.id);
 
 
@@ -243,42 +194,62 @@
     }
     }
   };
   };
 
 
-    socket.on('start', function(data) {
+  socket.on('start', function (data) {
     // Remove last element of Array because it contains malformed responses data.
     // Remove last element of Array because it contains malformed responses data.
     // To keep consistency we also remove os data.
     // To keep consistency we also remove os data.
     data[defaultSpan].responses.pop();
     data[defaultSpan].responses.pop();
     data[defaultSpan].os.pop();
     data[defaultSpan].os.pop();
 
 
     cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
     cpuStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].cpu.toFixed(1) + '%';
-        cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.cpu; });
-        cpuChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
+    cpuChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
+      return point.cpu;
+    });
+    cpuChart.data.labels = data[defaultSpan].os.map(function (point) {
+      return point.timestamp;
+    });
     cpuChart.update();
     cpuChart.update();
 
 
     memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
     memStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].memory.toFixed(1) + 'MB';
-        memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.memory; });
-        memChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
+    memChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
+      return point.memory;
+    });
+    memChart.data.labels = data[defaultSpan].os.map(function (point) {
+      return point.timestamp;
+    });
     memChart.update();
     memChart.update();
 
 
     loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
     loadStat.textContent = data[defaultSpan].os[data[defaultSpan].os.length - 1].load[defaultSpan].toFixed(2);
-        loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function(point) { return point.load[defaultSpan]; });
-        loadChart.data.labels = data[defaultSpan].os.map(function(point) { return point.timestamp; });
+    loadChart.data.datasets[defaultSpan].data = data[defaultSpan].os.map(function (point) {
+      return point.load[defaultSpan];
+    });
+    loadChart.data.labels = data[defaultSpan].os.map(function (point) {
+      return point.timestamp;
+    });
     loadChart.update();
     loadChart.update();
 
 
     responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
     responseTimeStat.textContent = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].mean.toFixed(2) + 'ms';
-        responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function(point) { return point.mean; });
-        responseTimeChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; });
+    responseTimeChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
+      return point.mean;
+    });
+    responseTimeChart.data.labels = data[defaultSpan].responses.map(function (point) {
+      return point.timestamp;
+    });
     responseTimeChart.update();
     responseTimeChart.update();
 
 
     if (data[defaultSpan].responses.length >= 2) {
     if (data[defaultSpan].responses.length >= 2) {
       var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
       var deltaTime = data[defaultSpan].responses[data[defaultSpan].responses.length - 1].timestamp - data[defaultSpan].responses[data[defaultSpan].responses.length - 2].timestamp;
       rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
       rpsStat.textContent = (data[defaultSpan].responses[data[defaultSpan].responses.length - 1].count / deltaTime * 1000).toFixed(2);
-            rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function(point) { return point.count / deltaTime * 1000; });
-            rpsChart.data.labels = data[defaultSpan].responses.map(function(point) { return point.timestamp; });
+      rpsChart.data.datasets[defaultSpan].data = data[defaultSpan].responses.map(function (point) {
+        return point.count / deltaTime * 1000;
+      });
+      rpsChart.data.labels = data[defaultSpan].responses.map(function (point) {
+        return point.timestamp;
+      });
       rpsChart.update();
       rpsChart.update();
     }
     }
 
 
     var spanControls = document.getElementById('span-controls');
     var spanControls = document.getElementById('span-controls');
-        data.forEach(function(span, index) {
+    data.forEach(function (span, index) {
       var spanNode = document.createElement('span');
       var spanNode = document.createElement('span');
       var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
       var textNode = document.createTextNode((span.retention * span.interval) / 60 + "M");
       spanNode.appendChild(textNode);
       spanNode.appendChild(textNode);