From 4cf14dfc30286bbc2090e007975534ceed6ab0c1 Mon Sep 17 00:00:00 2001 From: Rob Gill Date: Fri, 10 Aug 2018 09:59:31 +1000 Subject: [PATCH 1/4] Constrain tooltips for piecharts This stops the tooltips from disappearing beyond the pie chart's canvas. Signed-Off-By: Rob Gill --- scripts/pi-hole/js/index.js | 86 ++++++++++++++++++++++++++++++++++++- 1 file changed, 84 insertions(+), 2 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 8c28f0bf..367ee5b6 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -117,6 +117,86 @@ 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; @@ -1146,7 +1226,8 @@ $(document).ready(function() { display: false }, tooltips: { - enabled: true, + enabled: false, + custom: customPieTooltips, callbacks: { title: function(tooltipItem, data) { return "Query types"; @@ -1183,7 +1264,8 @@ $(document).ready(function() { display: false }, tooltips: { - enabled: true, + enabled: false, + custom: customPieTooltips, callbacks: { title: function(tooltipItem, data) { return "Forward destinations"; From 50f842cb9ae400e30461c23be89e96ad0d40da38 Mon Sep 17 00:00:00 2001 From: Rob Gill Date: Fri, 10 Aug 2018 10:00:47 +1000 Subject: [PATCH 2/4] Constrain pie chart tooltips Signed-Off-By: Rob Gill --- index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.php b/index.php index 37bf08c3..95d264e9 100644 --- a/index.php +++ b/index.php @@ -149,10 +149,10 @@
- +
-
+
From ad2439c46dbf5a2353796ac948efb794ea9646bb Mon Sep 17 00:00:00 2001 From: Rob Gill Date: Fri, 10 Aug 2018 13:16:46 +1000 Subject: [PATCH 3/4] Adjust customToolTips to deal with pie charts Signed-Off-By: Rob Gill --- scripts/pi-hole/js/index.js | 88 +++---------------------------------- 1 file changed, 5 insertions(+), 83 deletions(-) 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"; From ff29a440b594fb12e4c87f3540d6858a1d6df232 Mon Sep 17 00:00:00 2001 From: Rob Gill Date: Fri, 10 Aug 2018 13:39:14 +1000 Subject: [PATCH 4/4] Double quotes. i <3 codacy-bot Signed-Off-By: Rob Gill --- scripts/pi-hole/js/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index c0ac108d..5584737c 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -82,7 +82,7 @@ var customTooltips = function(tooltip) { var span = ""; var num = body[0].split(": "); // remove percent symbol from amount to allow numeric comparison - var number = num[1].replace(/%/i,''); + var number = num[1].replace(/%/i,""); if(number > 0) { innerHtml += "" + span + body + "";