From ae2bc08f0b78948695154fc9bbb12c6c5335d127 Mon Sep 17 00:00:00 2001
From: DL6ER <derigs@ph1.uni-koeln.de>
Date: Fri, 9 Dec 2016 17:56:13 +0100
Subject: [PATCH 1/2] Show percentage when placing mouse on progress bars

---
 js/pihole/index.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/js/pihole/index.js b/js/pihole/index.js
index be6f9487..9a95a291 100644
--- a/js/pihole/index.js
+++ b/js/pihole/index.js
@@ -332,7 +332,7 @@ function updateTopLists() {
     $.getJSON("api.php?summaryRaw&topItems", function(data) {
         var domaintable = $('#domain-frequency').find('tbody:last');
         var adtable = $('#ad-frequency').find('tbody:last');
-        var url, domain;
+        var url, domain, percentage;
 
         for (domain in data.top_queries) {
             // Sanitize domain
@@ -345,17 +345,19 @@ function updateTopLists() {
             {
                 url = domain;
             }
+            percentage = data.top_queries[domain] / data.dns_queries_today * 100;
             domaintable.append("<tr> <td>" + url +
-                '</td> <td>' + data.top_queries[domain] + '</td> <td> <div class="progress progress-sm"> <div class="progress-bar progress-bar-green" style="width: ' +
-                data.top_queries[domain] / data.dns_queries_today * 100 + '%"></div> </div> </td> </tr> ');
+                '</td> <td>' + data.top_queries[domain] + '</td> <td> <div class="progress progress-sm" title="'+percentage.toFixed(1)+'%"> <div class="progress-bar progress-bar-green" style="width: ' +
+                percentage + '%"></div> </div> </td> </tr> ');
         }
         for (domain in data.top_ads) {
             // Sanitize domain
             domain = escapeHtml(domain);
             url = "<a href=\"queries.php?domain="+domain+"\">"+domain+"</a>";
+            percentage = data.top_ads[domain] / data.ads_blocked_today * 100;
             adtable.append("<tr> <td>" + url +
-                '</td> <td>' + data.top_ads[domain] + '</td> <td> <div class="progress progress-sm"> <div class="progress-bar progress-bar-yellow" style="width: ' +
-                data.top_ads[domain] / data.ads_blocked_today * 100 + '%"></div> </div> </td> </tr> ');
+                '</td> <td>' + data.top_ads[domain] + '</td> <td> <div class="progress progress-sm" title="'+percentage.toFixed(1)+'%"> <div class="progress-bar progress-bar-yellow" style="width: ' +
+                 percentage + '%"></div> </div> </td> </tr> ');
         }
 
         $('#domain-frequency .overlay').remove();

From 6247960580cd1436af9cac07874b0493485ccda1 Mon Sep 17 00:00:00 2001
From: DL6ER <derigs@ph1.uni-koeln.de>
Date: Fri, 9 Dec 2016 18:05:04 +0100
Subject: [PATCH 2/2] Strings must use doublequote.

---
 js/pihole/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/js/pihole/index.js b/js/pihole/index.js
index 9a95a291..944062c0 100644
--- a/js/pihole/index.js
+++ b/js/pihole/index.js
@@ -347,8 +347,8 @@ function updateTopLists() {
             }
             percentage = data.top_queries[domain] / data.dns_queries_today * 100;
             domaintable.append("<tr> <td>" + url +
-                '</td> <td>' + data.top_queries[domain] + '</td> <td> <div class="progress progress-sm" title="'+percentage.toFixed(1)+'%"> <div class="progress-bar progress-bar-green" style="width: ' +
-                percentage + '%"></div> </div> </td> </tr> ');
+                "</td> <td>" + data.top_queries[domain] + "</td> <td> <div class=\"progress progress-sm\" title=\""+percentage.toFixed(1)+"%\"> <div class=\"progress-bar progress-bar-green\" style=\"width: " +
+                percentage + "%\"></div> </div> </td> </tr> ");
         }
         for (domain in data.top_ads) {
             // Sanitize domain
@@ -356,8 +356,8 @@ function updateTopLists() {
             url = "<a href=\"queries.php?domain="+domain+"\">"+domain+"</a>";
             percentage = data.top_ads[domain] / data.ads_blocked_today * 100;
             adtable.append("<tr> <td>" + url +
-                '</td> <td>' + data.top_ads[domain] + '</td> <td> <div class="progress progress-sm" title="'+percentage.toFixed(1)+'%"> <div class="progress-bar progress-bar-yellow" style="width: ' +
-                 percentage + '%"></div> </div> </td> </tr> ');
+                "</td> <td>" + data.top_ads[domain] + "</td> <td> <div class=\"progress progress-sm\" title=\""+percentage.toFixed(1)+"%\"> <div class=\"progress-bar progress-bar-yellow\" style=\"width: " +
+                 percentage + "%\"></div> </div> </td> </tr> ");
         }
 
         $('#domain-frequency .overlay').remove();