Merge branch 'devel' into FTLDNS

scripts/pi-hole/js/index.js

@@ -29,6 +29,83 @@ 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";
+                document.body.appendChild(tooltipEl);
+                $(tooltipEl).html("<table></table>");
+        }
+        // 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 = "<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(": ");
+                        if(num[1] > 0)
+                        {
+                            innerHtml += "<tr><td>" + span + body + "</td></tr>";
+                            printed++;
+                        }
+                });
+                if(printed < 1)
+                {
+                    innerHtml += "<tr><td>No activity recorded</td></tr>";
+                }
+                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 + "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;
@@ -842,8 +919,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;