Merge pull request #700 from pi-hole/tweak/custom-tooltips

Add custom tooltip for Clients over Time graph

index.php

@@ -114,7 +114,7 @@ else
         </div>
         <div class="box-body">
           <div class="chart">
-            <canvas id="clientsChart" width="800" height="140"></canvas>
+            <canvas id="clientsChart" width="800" height="140" class="extratooltipcanvas"></canvas>
           </div>
         </div>
         <div class="overlay">

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;
@@ -826,8 +903,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;

style/pi-hole.css

@@ -116,6 +116,32 @@ a.lookatme {
     animation: fa-spin 1s infinite linear;
 }
 
+.extratooltipcanvas{
+    -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;
+}
+
 .chart-legend {
     height:250px;
     overflow:auto;