diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 367ee5b6..c0ac108d 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -81,7 +81,9 @@ var customTooltips = function(tooltip) { style += "; border-width: 2px"; var span = ""; var num = body[0].split(": "); - if(num[1] > 0) + // remove percent symbol from amount to allow numeric comparison + var number = num[1].replace(/%/i,''); + if(number > 0) { innerHtml += "" + span + body + ""; printed++; @@ -117,86 +119,6 @@ var customTooltips = function(tooltip) { tooltipEl.style.padding = tooltip.yPadding + "px " + tooltip.xPadding + "px"; }; -var customPieTooltips = function(tooltip) { - // Tooltip Element - var tooltipEl = document.getElementById("chartjs-tooltip"); - if (!tooltipEl) { - tooltipEl = document.createElement("div"); - tooltipEl.id = "chartjs-tooltip"; - document.body.appendChild(tooltipEl); - $(tooltipEl).html("
"); - } - // Hide if no tooltip - if (tooltip.opacity === 0) { - tooltipEl.style.opacity = 0; - return; - } - - // Limit rendering to once every 50ms. This gives the DOM time to react, - // and avoids "lag" caused by not giving the DOM time to reapply CSS. - var now = Date.now(); - if(now - lastTooltipTime < 50) { - return; - } - lastTooltipTime = now; - - // Set caret Position - tooltipEl.classList.remove("above", "below", "no-transform"); - if (tooltip.yAlign) { - tooltipEl.classList.add(tooltip.yAlign); - } else { - tooltipEl.classList.add("above"); - } - function getBody(bodyItem) { - return bodyItem.lines; - } - // Set Text - if (tooltip.body) { - var titleLines = tooltip.title || []; - var bodyLines = tooltip.body.map(getBody); - var innerHtml = ""; - titleLines.forEach(function(title) { - innerHtml += ""; - }); - innerHtml += ""; - var printed = 0; - bodyLines.forEach(function(body, i) { - var colors = tooltip.labelColors[i]; - var style = "background:" + colors.backgroundColor; - style += "; border-color:" + colors.borderColor; - style += "; border-width: 2px"; - var span = ""; - var num = body[0].split(": "); - innerHtml += ""; - printed++; - - }); - innerHtml += "
" + title + "
" + span + body + "
"; - $(tooltipEl).html(innerHtml); - } - - // Display, position, and set styles for font - var position = this._chart.canvas.getBoundingClientRect(); - var width = tooltip.caretX; - // Prevent compression of the tooltip at the right edge of the screen - if($(document).width() - tooltip.caretX < 400) - { - width = $(document).width()-400; - } - // Prevent tooltip disapearing behind the sidebar - if(tooltip.caretX < 100) - { - width = 100; - } - tooltipEl.style.opacity = 1; - tooltipEl.style.left = position.left + width + "px"; - tooltipEl.style.top = position.top + tooltip.caretY + window.scrollY + "px"; - tooltipEl.style.fontFamily = tooltip._bodyFontFamily; - tooltipEl.style.fontSize = tooltip.bodyFontSize + "px"; - tooltipEl.style.fontStyle = tooltip._bodyFontStyle; - tooltipEl.style.padding = tooltip.yPadding + "px " + tooltip.xPadding + "px"; -}; - // Functions to update data in page var failures = 0; @@ -1227,7 +1149,7 @@ $(document).ready(function() { }, tooltips: { enabled: false, - custom: customPieTooltips, + custom: customTooltips, callbacks: { title: function(tooltipItem, data) { return "Query types"; @@ -1265,7 +1187,7 @@ $(document).ready(function() { }, tooltips: { enabled: false, - custom: customPieTooltips, + custom: customTooltips, callbacks: { title: function(tooltipItem, data) { return "Forward destinations";