From 4cf14dfc30286bbc2090e007975534ceed6ab0c1 Mon Sep 17 00:00:00 2001
From: Rob Gill <rrobgill@protonmail.com>
Date: Fri, 10 Aug 2018 09:59:31 +1000
Subject: [PATCH] Constrain tooltips for piecharts

This stops the tooltips from disappearing beyond the pie chart's canvas.

Signed-Off-By: Rob Gill <rrobgill@protonmail.com>
---
 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("<table></table>");
+        }
+        // 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 = "<table><thead>";
+                titleLines.forEach(function(title) {
+                        innerHtml += "<tr><th>" + title + "</th></tr>";
+                });
+                innerHtml += "</thead><tbody>";
+                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 = "<span class=\"chartjs-tooltip-key\" style=\"" + style +  "\"></span>";
+                        var num = body[0].split(": ");
+                        innerHtml += "<tr><td>" + span + body + "</td></tr>";
+                        printed++;
+
+                });
+                 innerHtml += "</tbody></table>";
+                $(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";