index.js: assorted simplifications

Signed-off-by: XhmikosR <xhmikosr@gmail.com>

* rename `colors` variable to avoid shadowing and be more clear
* remove function used only once
* simplify a couple of for loops

scripts/pi-hole/js/index.js

@@ -11,7 +11,7 @@
 var timeLineChart, clientsChart;
 var queryTypePieChart, forwardDestinationPieChart;
 
-var colors = [
+var THEME_COLORS = [
   "#3c8dbc",
   "#f56954",
   "#00a65a",
@@ -62,14 +62,12 @@ var customTooltips = function (tooltip) {
   tooltipEl.classList.remove("left", "right", "center", "top", "bottom");
   tooltipEl.classList.add(tooltip.xAlign, tooltip.yAlign);
 
-  function getBody(bodyItem) {
-    return bodyItem.lines;
-  }
-
   // Set Text
   if (tooltip.body) {
     var titleLines = tooltip.title || [];
-    var bodyLines = tooltip.body.map(getBody);
+    var bodyLines = tooltip.body.map(function (bodyItem) {
+      return bodyItem.lines;
+    });
     var innerHtml = "<thead>";
 
     titleLines.forEach(function (title) {
@@ -80,9 +78,9 @@ var customTooltips = function (tooltip) {
 
     var devicePixel = (1 / window.devicePixelRatio).toFixed(1);
     bodyLines.forEach(function (body, i) {
-      var colors = tooltip.labelColors[i];
-      var style = "background: " + colors.backgroundColor;
-      style += "; outline: 1px solid " + colors.backgroundColor;
+      var labelColors = tooltip.labelColors[i];
+      var style = "background-color: " + labelColors.backgroundColor;
+      style += "; outline: 1px solid " + labelColors.backgroundColor;
       style += "; border: " + devicePixel + "px solid #fff";
       var span = "<span class='chartjs-tooltip-key' style='" + style + "'></span>";
 
@@ -291,7 +289,7 @@ function updateQueryTypesPie() {
 
     Object.keys(iter).forEach(function (key) {
       v.push(iter[key]);
-      c.push(colors[i++ % colors.length]);
+      c.push(THEME_COLORS[i++ % THEME_COLORS.length]);
       k.push(key);
     });
 
@@ -355,19 +353,12 @@ function updateClientsOverTime() {
     var plotdata = data.over_time[1];
     var labels = [];
     var key, i, j;
+
     for (key in data.clients) {
-      if (!Object.prototype.hasOwnProperty.call(data.clients, key)) {
-        continue;
+      if (Object.prototype.hasOwnProperty.call(data.clients, key)) {
+        var client = data.clients[key];
+        labels.push(client.name.length > 0 ? client.name : client.ip);
       }
-
-      var clientname;
-      if (data.clients[key].name.length > 0) {
-        clientname = data.clients[key].name;
-      } else {
-        clientname = data.clients[key].ip;
-      }
-
-      labels.push(clientname);
     }
 
     // Remove possibly already existing data
@@ -378,7 +369,7 @@ function updateClientsOverTime() {
     }
 
     // Collect values and colors, and labels
-    clientsChart.data.datasets[0].backgroundColor = colors[0];
+    clientsChart.data.datasets[0].backgroundColor = THEME_COLORS[0];
     clientsChart.data.datasets[0].pointRadius = 0;
     clientsChart.data.datasets[0].pointHitRadius = 5;
     clientsChart.data.datasets[0].pointHoverRadius = 5;
@@ -389,8 +380,8 @@ function updateClientsOverTime() {
         data: [],
         // If we ran out of colors, make a random one
         backgroundColor:
-          i < colors.length
-            ? colors[i]
+          i < THEME_COLORS.length
+            ? THEME_COLORS[i]
             : "#" + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6),
         pointRadius: 0,
         pointHitRadius: 5,
@@ -407,11 +398,9 @@ function updateClientsOverTime() {
       }
 
       for (key in plotdata[j]) {
-        if (!Object.prototype.hasOwnProperty.call(plotdata[j], key)) {
-          continue;
+        if (Object.prototype.hasOwnProperty.call(plotdata[j], key)) {
+          clientsChart.data.datasets[key].data.push(plotdata[j][key]);
         }
-
-        clientsChart.data.datasets[key].data.push(plotdata[j][key]);
       }
 
       var d = new Date(1000 * parseInt(timestamps[j]));
@@ -456,7 +445,7 @@ function updateForwardDestinationsPie() {
         key = key.substr(0, key.indexOf("|"));
       }
 
-      values.push([key, value, colors[i++ % colors.length]]);
+      values.push([key, value, THEME_COLORS[i++ % THEME_COLORS.length]]);
     });
 
     // Split data into individual arrays for the graphs
@@ -770,7 +759,7 @@ function updateSummaryData(runOnce) {
       );
     }
 
-    window.setTimeout(function () {
+    setTimeout(function () {
       $("span.glow").removeClass("glow");
     }, 500);
   })