From a5ca08c84d94299ecbd07b050d02365b77624c54 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 20 Mar 2018 00:20:09 +0100 Subject: [PATCH 01/13] Add custom tooltip as suggested by user @kh0505 here: https://github.com/pi-hole/AdminLTE/issues/603#issuecomment-373933097 Signed-off-by: DL6ER --- index.php | 25 +++++++++++++++ scripts/pi-hole/js/index.js | 64 ++++++++++++++++++++++++++++++++++++- 2 files changed, 88 insertions(+), 1 deletion(-) diff --git a/index.php b/index.php index c56266a4..416261ac 100644 --- a/index.php +++ b/index.php @@ -115,6 +115,31 @@ else
+
diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 9f8cb8c6..5dd9e853 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -792,8 +792,12 @@ $(document).ready(function() { }, options: { tooltips: { - enabled: true, + enabled: false, mode: "x-axis", + custom: customTooltips, + itemSort: function(a, b) { + return b.yLabel - a.yLabel + }, callbacks: { title: function(tooltipItem, data) { var label = tooltipItem[0].xLabel; @@ -1025,3 +1029,61 @@ $(document).ready(function() { updateForwardDestinationsPie(); } }); + +var customTooltips = function(tooltip) { + // Tooltip Element + var tooltipEl = document.getElementById('chartjs-tooltip'); + if (!tooltipEl) { + tooltipEl = document.createElement('div'); + tooltipEl.id = 'chartjs-tooltip'; + tooltipEl.innerHTML = '
'; + document.body.appendChild(tooltipEl); + } + // Hide if no tooltip + if (tooltip.opacity === 0) { + tooltipEl.style.opacity = 0; + return; + } + // 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 += '' + title + ''; + }); + innerHtml += ''; + 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 = ''; + innerHtml += '' + span + body + ''; + }); + innerHtml += ''; + var tableRoot = tooltipEl.querySelector('table'); + tableRoot.innerHTML = innerHtml; + } + + // Display, position, and set styles for font + var position = this._chart.canvas.getBoundingClientRect(); + tooltipEl.style.opacity = 1; + tooltipEl.style.left = position.left + tooltip.caretX + "px"; + tooltipEl.style.top = position.top + tooltip.caretY + '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'; + + }; From 5e7caa0f0bef566f0f6caea0de12c70805e1c3f7 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 20 Mar 2018 00:22:16 +0100 Subject: [PATCH 02/13] Move style definition into correct file Signed-off-by: DL6ER --- index.php | 25 ------------------------- style/pi-hole.css | 24 ++++++++++++++++++++++++ 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/index.php b/index.php index 416261ac..c56266a4 100644 --- a/index.php +++ b/index.php @@ -115,31 +115,6 @@ else
-
diff --git a/style/pi-hole.css b/style/pi-hole.css index 541d5c6e..6a0279f5 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -115,3 +115,27 @@ a.lookatme { -webkit-animation: fa-spin 1s infinite linear; animation: fa-spin 1s infinite linear; } + +canvas{ + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} +#chartjs-tooltip { + opacity: 1; + position: absolute; + background: rgba(0, 0, 0, .7); + color: white; + border-radius: 3px; + -webkit-transition: all .1s ease; + transition: all .1s ease; + pointer-events: none; + -webkit-transform: translate(-50%, 0); + transform: translate(-50%, 0); +} +.chartjs-tooltip-key { + display: inline-block; + width: 20px; + height: 10px; + margin-right: 10px; +} From b6be5629ac25fb0ea6bb827a85dafe67fa86d84c Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 20 Mar 2018 00:28:39 +0100 Subject: [PATCH 03/13] Show only non-zero entries Signed-off-by: DL6ER --- scripts/pi-hole/js/index.js | 116 ++++++++++++++++++++---------------- 1 file changed, 63 insertions(+), 53 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 5dd9e853..7ec8a9c4 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -1031,59 +1031,69 @@ $(document).ready(function() { }); var customTooltips = function(tooltip) { - // Tooltip Element - var tooltipEl = document.getElementById('chartjs-tooltip'); - if (!tooltipEl) { - tooltipEl = document.createElement('div'); - tooltipEl.id = 'chartjs-tooltip'; - tooltipEl.innerHTML = '
'; - document.body.appendChild(tooltipEl); - } - // Hide if no tooltip - if (tooltip.opacity === 0) { - tooltipEl.style.opacity = 0; - return; - } - // 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 += '' + title + ''; - }); - innerHtml += ''; - 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 = ''; - innerHtml += '' + span + body + ''; - }); - innerHtml += ''; - var tableRoot = tooltipEl.querySelector('table'); - tableRoot.innerHTML = innerHtml; + // Tooltip Element + var tooltipEl = document.getElementById('chartjs-tooltip'); + if (!tooltipEl) { + tooltipEl = document.createElement('div'); + tooltipEl.id = 'chartjs-tooltip'; + tooltipEl.innerHTML = '
'; + document.body.appendChild(tooltipEl); + } + // Hide if no tooltip + if (tooltip.opacity === 0) { + tooltipEl.style.opacity = 0; + return; + } + // 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 += '' + title + ''; + }); + 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(':'); + if(num[1] > 0) + { + innerHtml += '' + span + body + ''; + printed++; } + }); + if(printed < 1) + { + innerHtml += 'No activity recorded'; + } + innerHtml += ''; + var tableRoot = tooltipEl.querySelector('table'); + tableRoot.innerHTML = innerHtml; + } - // Display, position, and set styles for font - var position = this._chart.canvas.getBoundingClientRect(); - tooltipEl.style.opacity = 1; - tooltipEl.style.left = position.left + tooltip.caretX + "px"; - tooltipEl.style.top = position.top + tooltip.caretY + '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'; + // Display, position, and set styles for font + var position = this._chart.canvas.getBoundingClientRect(); + tooltipEl.style.opacity = 1; + tooltipEl.style.left = position.left + tooltip.caretX + "px"; + tooltipEl.style.top = position.top + tooltip.caretY + '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'; - }; +}; From e3cd76ad7d931c04294758399e07ef187368c396 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 20 Mar 2018 00:50:53 +0100 Subject: [PATCH 04/13] Add simple measure to prevent compression of the tooltip at the right edge of the screen (may be improved, not tested on mobile screens) Signed-off-by: DL6ER --- scripts/pi-hole/js/index.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 7ec8a9c4..5e722325 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -1088,12 +1088,17 @@ var customTooltips = function(tooltip) { // 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; + } tooltipEl.style.opacity = 1; - tooltipEl.style.left = position.left + tooltip.caretX + "px"; + tooltipEl.style.left = position.left + width + "px"; tooltipEl.style.top = position.top + tooltip.caretY + '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'; - }; From f6b2887b90deba0ef0bf11bca124b078bc936840 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Tue, 20 Mar 2018 19:29:11 +0100 Subject: [PATCH 05/13] Slight improvement to CSS Signed-off-by: DL6ER --- index.php | 2 +- style/pi-hole.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/index.php b/index.php index c56266a4..9207cda7 100644 --- a/index.php +++ b/index.php @@ -114,7 +114,7 @@ else
- +
diff --git a/style/pi-hole.css b/style/pi-hole.css index 6a0279f5..14fdb8aa 100644 --- a/style/pi-hole.css +++ b/style/pi-hole.css @@ -116,7 +116,7 @@ a.lookatme { animation: fa-spin 1s infinite linear; } -canvas{ +.extratooltipcanvas{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; From 44774d914c40cf4fae9ebd6af6dcf899a1c7abe2 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 25 Mar 2018 10:20:26 +0200 Subject: [PATCH 06/13] We should split the string at ": " instead of at ":" to be fully compatible with IPv6 addresses Signed-off-by: DL6ER --- 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 5e722325..4212cbb6 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -1070,7 +1070,7 @@ var customTooltips = function(tooltip) { style += '; border-color:' + colors.borderColor; style += '; border-width: 2px'; var span = ''; - var num = body[0].split(':'); + var num = body[0].split(': '); if(num[1] > 0) { innerHtml += '' + span + body + ''; From 062ba5141bb5e17a679d611c224664bd7a448631 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 25 Mar 2018 11:32:36 +0200 Subject: [PATCH 07/13] Strings must use doublequote Signed-off-by: DL6ER --- scripts/pi-hole/js/index.js | 42 ++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 4212cbb6..1c52a18f 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -1032,11 +1032,11 @@ $(document).ready(function() { var customTooltips = function(tooltip) { // Tooltip Element - var tooltipEl = document.getElementById('chartjs-tooltip'); + var tooltipEl = document.getElementById("chartjs-tooltip"); if (!tooltipEl) { - tooltipEl = document.createElement('div'); - tooltipEl.id = 'chartjs-tooltip'; - tooltipEl.innerHTML = '
'; + tooltipEl = document.createElement("div"); + tooltipEl.id = "chartjs-tooltip"; + tooltipEl.innerHTML = "
"; document.body.appendChild(tooltipEl); } // Hide if no tooltip @@ -1045,11 +1045,11 @@ var customTooltips = function(tooltip) { return; } // Set caret Position - tooltipEl.classList.remove('above', 'below', 'no-transform'); + tooltipEl.classList.remove("above", "below", "no-transform"); if (tooltip.yAlign) { tooltipEl.classList.add(tooltip.yAlign); } else { - tooltipEl.classList.add('above'); + tooltipEl.classList.add("above"); } function getBody(bodyItem) { return bodyItem.lines; @@ -1058,31 +1058,31 @@ var customTooltips = function(tooltip) { if (tooltip.body) { var titleLines = tooltip.title || []; var bodyLines = tooltip.body.map(getBody); - var innerHtml = ''; + var innerHtml = ""; titleLines.forEach(function(title) { - innerHtml += '' + title + ''; + innerHtml += "" + 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(': '); + var style = "background:" + colors.backgroundColor; + style += "; border-color:" + colors.borderColor; + style += "; border-width: 2px"; + var span = ""; + var num = body[0].split(": "); if(num[1] > 0) { - innerHtml += '' + span + body + ''; + innerHtml += "" + span + body + ""; printed++; } }); if(printed < 1) { - innerHtml += 'No activity recorded'; + innerHtml += "No activity recorded"; } - innerHtml += ''; - var tableRoot = tooltipEl.querySelector('table'); + innerHtml += ""; + var tableRoot = tooltipEl.querySelector("table"); tableRoot.innerHTML = innerHtml; } @@ -1096,9 +1096,9 @@ var customTooltips = function(tooltip) { } tooltipEl.style.opacity = 1; tooltipEl.style.left = position.left + width + "px"; - tooltipEl.style.top = position.top + tooltip.caretY + 'px'; + tooltipEl.style.top = position.top + tooltip.caretY + "px"; tooltipEl.style.fontFamily = tooltip._bodyFontFamily; - tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px'; + tooltipEl.style.fontSize = tooltip.bodyFontSize + "px"; tooltipEl.style.fontStyle = tooltip._bodyFontStyle; - tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; + tooltipEl.style.padding = tooltip.yPadding + "px " + tooltip.xPadding + "px"; }; From 2aca7bf7642b2c7c1513e27801bb4044c61b6a0d Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 25 Mar 2018 14:00:02 +0200 Subject: [PATCH 08/13] customTooltips must be defined before used Signed-off-by: DL6ER --- scripts/pi-hole/js/index.js | 146 ++++++++++++++++++------------------ 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 1c52a18f..385c3da3 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -29,6 +29,79 @@ function objectToArray(p){ return [idx,arr]; } +var customTooltips = function(tooltip) { + // Tooltip Element + var tooltipEl = document.getElementById("chartjs-tooltip"); + if (!tooltipEl) { + tooltipEl = document.createElement("div"); + tooltipEl.id = "chartjs-tooltip"; + tooltipEl.innerHTML = "
"; + document.body.appendChild(tooltipEl); + } + // Hide if no tooltip + if (tooltip.opacity === 0) { + tooltipEl.style.opacity = 0; + return; + } + // 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 += "" + title + ""; + }); + 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(": "); + if(num[1] > 0) + { + innerHtml += "" + span + body + ""; + printed++; + } + }); + if(printed < 1) + { + innerHtml += "No activity recorded"; + } + innerHtml += ""; + var tableRoot = tooltipEl.querySelector("table"); + tableRoot.innerHTML = 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; + } + tooltipEl.style.opacity = 1; + tooltipEl.style.left = position.left + width + "px"; + tooltipEl.style.top = position.top + tooltip.caretY + "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; @@ -1029,76 +1102,3 @@ $(document).ready(function() { updateForwardDestinationsPie(); } }); - -var customTooltips = function(tooltip) { - // Tooltip Element - var tooltipEl = document.getElementById("chartjs-tooltip"); - if (!tooltipEl) { - tooltipEl = document.createElement("div"); - tooltipEl.id = "chartjs-tooltip"; - tooltipEl.innerHTML = "
"; - document.body.appendChild(tooltipEl); - } - // Hide if no tooltip - if (tooltip.opacity === 0) { - tooltipEl.style.opacity = 0; - return; - } - // 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 += "" + title + ""; - }); - 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(": "); - if(num[1] > 0) - { - innerHtml += "" + span + body + ""; - printed++; - } - }); - if(printed < 1) - { - innerHtml += "No activity recorded"; - } - innerHtml += ""; - var tableRoot = tooltipEl.querySelector("table"); - tableRoot.innerHTML = 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; - } - tooltipEl.style.opacity = 1; - tooltipEl.style.left = position.left + width + "px"; - tooltipEl.style.top = position.top + tooltip.caretY + "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"; -}; From 7bf5207e060445df7796c794c3174dec1b61ea79 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 25 Mar 2018 18:39:03 +0200 Subject: [PATCH 09/13] Fix JS error Signed-off-by: DL6ER --- 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 385c3da3..b52aeaa4 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -68,7 +68,7 @@ var customTooltips = function(tooltip) { var style = "background:" + colors.backgroundColor; style += "; border-color:" + colors.borderColor; style += "; border-width: 2px"; - var span = ""; + var span = ""; var num = body[0].split(": "); if(num[1] > 0) { From 27d40465cdb05f9a4c817ca240624aabf991f346 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 25 Mar 2018 18:48:23 +0200 Subject: [PATCH 10/13] Use jQuery's .html() routine to overwrite element's content Signed-off-by: DL6ER --- scripts/pi-hole/js/index.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index b52aeaa4..ae7f52d9 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -35,8 +35,8 @@ var customTooltips = function(tooltip) { if (!tooltipEl) { tooltipEl = document.createElement("div"); tooltipEl.id = "chartjs-tooltip"; - tooltipEl.innerHTML = "
"; document.body.appendChild(tooltipEl); + $("#chartjs-tooltip").html("
"); } // Hide if no tooltip if (tooltip.opacity === 0) { @@ -57,7 +57,7 @@ var customTooltips = function(tooltip) { if (tooltip.body) { var titleLines = tooltip.title || []; var bodyLines = tooltip.body.map(getBody); - var innerHtml = ""; + var innerHtml = ""; titleLines.forEach(function(title) { innerHtml += ""; }); @@ -80,9 +80,8 @@ var customTooltips = function(tooltip) { { innerHtml += ""; } - innerHtml += ""; - var tableRoot = tooltipEl.querySelector("table"); - tableRoot.innerHTML = innerHtml; + innerHtml += "
" + title + "
No activity recorded
"; + $("#chartjs-tooltip").html(innerHtml); } // Display, position, and set styles for font From 5aba5a1314a251a6cc0dd339c0ea45c3e43a08e5 Mon Sep 17 00:00:00 2001 From: DL6ER Date: Sun, 25 Mar 2018 18:49:15 +0200 Subject: [PATCH 11/13] Add missing semicolon Signed-off-by: DL6ER --- 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 ae7f52d9..cfd51726 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -868,7 +868,7 @@ $(document).ready(function() { mode: "x-axis", custom: customTooltips, itemSort: function(a, b) { - return b.yLabel - a.yLabel + return b.yLabel - a.yLabel; }, callbacks: { title: function(tooltipItem, data) { From 7244e3a9e0db9add9240498246399b6a4aa3c945 Mon Sep 17 00:00:00 2001 From: Mcat12 Date: Mon, 2 Apr 2018 17:43:19 -0400 Subject: [PATCH 12/13] Don't search for the element by ID when we already have it Signed-off-by: Mcat12 --- scripts/pi-hole/js/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index cfd51726..98376e79 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -36,7 +36,7 @@ var customTooltips = function(tooltip) { tooltipEl = document.createElement("div"); tooltipEl.id = "chartjs-tooltip"; document.body.appendChild(tooltipEl); - $("#chartjs-tooltip").html("
"); + $(tooltipEl).html("
"); } // Hide if no tooltip if (tooltip.opacity === 0) { @@ -81,7 +81,7 @@ var customTooltips = function(tooltip) { innerHtml += "No activity recorded"; } innerHtml += ""; - $("#chartjs-tooltip").html(innerHtml); + $(tooltipEl).html(innerHtml); } // Display, position, and set styles for font From 2be54bc17acb8e48083b782d59c9b043fc707944 Mon Sep 17 00:00:00 2001 From: Adam Warner Date: Fri, 13 Apr 2018 20:33:11 +0100 Subject: [PATCH 13/13] Prevent tooltip from being hidden by sidebar --- scripts/pi-hole/js/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 98376e79..c918dc2e 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -92,6 +92,11 @@ var customTooltips = function(tooltip) { { 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 + "px";