mirror of
https://github.com/pi-hole/web.git
synced 2025-12-22 19:58:27 +00:00
@@ -1031,59 +1031,69 @@ $(document).ready(function() {
|
|||||||
});
|
});
|
||||||
|
|
||||||
var customTooltips = function(tooltip) {
|
var customTooltips = function(tooltip) {
|
||||||
// Tooltip Element
|
// Tooltip Element
|
||||||
var tooltipEl = document.getElementById('chartjs-tooltip');
|
var tooltipEl = document.getElementById('chartjs-tooltip');
|
||||||
if (!tooltipEl) {
|
if (!tooltipEl) {
|
||||||
tooltipEl = document.createElement('div');
|
tooltipEl = document.createElement('div');
|
||||||
tooltipEl.id = 'chartjs-tooltip';
|
tooltipEl.id = 'chartjs-tooltip';
|
||||||
tooltipEl.innerHTML = '<table></table>';
|
tooltipEl.innerHTML = '<table></table>';
|
||||||
document.body.appendChild(tooltipEl);
|
document.body.appendChild(tooltipEl);
|
||||||
}
|
}
|
||||||
// Hide if no tooltip
|
// Hide if no tooltip
|
||||||
if (tooltip.opacity === 0) {
|
if (tooltip.opacity === 0) {
|
||||||
tooltipEl.style.opacity = 0;
|
tooltipEl.style.opacity = 0;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// Set caret Position
|
// Set caret Position
|
||||||
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
tooltipEl.classList.remove('above', 'below', 'no-transform');
|
||||||
if (tooltip.yAlign) {
|
if (tooltip.yAlign) {
|
||||||
tooltipEl.classList.add(tooltip.yAlign);
|
tooltipEl.classList.add(tooltip.yAlign);
|
||||||
} else {
|
} else {
|
||||||
tooltipEl.classList.add('above');
|
tooltipEl.classList.add('above');
|
||||||
}
|
}
|
||||||
function getBody(bodyItem) {
|
function getBody(bodyItem) {
|
||||||
return bodyItem.lines;
|
return bodyItem.lines;
|
||||||
}
|
}
|
||||||
// Set Text
|
// Set Text
|
||||||
if (tooltip.body) {
|
if (tooltip.body) {
|
||||||
var titleLines = tooltip.title || [];
|
var titleLines = tooltip.title || [];
|
||||||
var bodyLines = tooltip.body.map(getBody);
|
var bodyLines = tooltip.body.map(getBody);
|
||||||
var innerHtml = '<thead>';
|
var innerHtml = '<thead>';
|
||||||
titleLines.forEach(function(title) {
|
titleLines.forEach(function(title) {
|
||||||
innerHtml += '<tr><th>' + title + '</th></tr>';
|
innerHtml += '<tr><th>' + title + '</th></tr>';
|
||||||
});
|
});
|
||||||
innerHtml += '</thead><tbody>';
|
innerHtml += '</thead><tbody>';
|
||||||
bodyLines.forEach(function(body, i) {
|
var printed = 0;
|
||||||
var colors = tooltip.labelColors[i];
|
bodyLines.forEach(function(body, i) {
|
||||||
var style = 'background:' + colors.backgroundColor;
|
var colors = tooltip.labelColors[i];
|
||||||
style += '; border-color:' + colors.borderColor;
|
var style = 'background:' + colors.backgroundColor;
|
||||||
style += '; border-width: 2px';
|
style += '; border-color:' + colors.borderColor;
|
||||||
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
style += '; border-width: 2px';
|
||||||
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
|
||||||
});
|
var num = body[0].split(':');
|
||||||
innerHtml += '</tbody>';
|
if(num[1] > 0)
|
||||||
var tableRoot = tooltipEl.querySelector('table');
|
{
|
||||||
tableRoot.innerHTML = innerHtml;
|
innerHtml += '<tr><td>' + span + body + '</td></tr>';
|
||||||
|
printed++;
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
if(printed < 1)
|
||||||
|
{
|
||||||
|
innerHtml += '<tr><td>No activity recorded</td></tr>';
|
||||||
|
}
|
||||||
|
innerHtml += '</tbody>';
|
||||||
|
var tableRoot = tooltipEl.querySelector('table');
|
||||||
|
tableRoot.innerHTML = innerHtml;
|
||||||
|
}
|
||||||
|
|
||||||
// Display, position, and set styles for font
|
// Display, position, and set styles for font
|
||||||
var position = this._chart.canvas.getBoundingClientRect();
|
var position = this._chart.canvas.getBoundingClientRect();
|
||||||
tooltipEl.style.opacity = 1;
|
tooltipEl.style.opacity = 1;
|
||||||
tooltipEl.style.left = position.left + tooltip.caretX + "px";
|
tooltipEl.style.left = position.left + tooltip.caretX + "px";
|
||||||
tooltipEl.style.top = position.top + tooltip.caretY + 'px';
|
tooltipEl.style.top = position.top + tooltip.caretY + 'px';
|
||||||
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
tooltipEl.style.fontFamily = tooltip._bodyFontFamily;
|
||||||
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px';
|
||||||
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
tooltipEl.style.fontStyle = tooltip._bodyFontStyle;
|
||||||
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px';
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user