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';
- };
+};