diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 607e9679b..e778c3380 100644 --- a/scripts/pi-hole/js/index.js +++ b/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 = ""; 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 = ""; @@ -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; - } - var clientname; - if (data.clients[key].name.length > 0) { - clientname = data.clients[key].name; - } else { - clientname = data.clients[key].ip; + for (key in data.clients) { + if (Object.prototype.hasOwnProperty.call(data.clients, key)) { + var client = data.clients[key]; + labels.push(client.name.length > 0 ? client.name : client.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); })