From 63032c8f6c08de5b823368dae5cc5917affa16af Mon Sep 17 00:00:00 2001
From: rdwebdesign <github@rdwebdesign.com.br>
Date: Tue, 28 Dec 2021 19:45:55 -0300
Subject: [PATCH] Better pie chart legend

New icon and function names for pie legends
Minor adjustments to pie chart tooltips

Signed-off-by: rdwebdesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/index.js | 93 ++++++++++++++++++++++++++-----------
 style/pi-hole.css           | 43 ++++++++++++++---
 2 files changed, 103 insertions(+), 33 deletions(-)

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
index 47b7f08a..3ffc8d06 100644
--- a/scripts/pi-hole/js/index.js
+++ b/scripts/pi-hole/js/index.js
@@ -319,24 +319,71 @@ function updateQueryTypesPie() {
     queryTypePieChart.update();
     // Don't use rotation animation for further updates
     queryTypePieChart.options.animation.duration = 0;
+    queryTypePieChart.options.legendCallback = customLegend;
+
     // Generate legend in separate div
     $("#query-types-legend").html(queryTypePieChart.generateLegend());
-    $("#query-types-legend > ul > li").prepend(createEyeConElement());
     $("#query-types-legend > ul > li").click(function (e) {
-      if (isEyeCon(e.target)) {
+      if (iscolorBox(e.target)) {
         return false;
       }
 
       window.location.href = "queries.php?querytype=" + querytypeids[$(this).index()];
     });
+    $("#query-types-legend .colorBoxWrapper").click(function (e) {
+      hidePieSlice(e);
+    });
   }).done(function () {
     // Reload graph after minute
     setTimeout(updateQueryTypesPie, 60000);
   });
 }
 
+function customLegend(chart) {
+  var text = [];
+  var data = chart.data;
+  var datasets = data.datasets;
+  var labels = data.labels;
+
+  text.push('<ul class="' + chart.id + '-legend">');
+
+  if (datasets.length > 0) {
+    for (var i = 0; i < datasets[0].data.length; ++i) {
+      var color = datasets[0].backgroundColor[i];
+
+      var txt = "";
+
+      // legend box icon
+      txt =
+        '<span class="colorBoxWrapper" style="color: ' +
+        color +
+        '" title="Toggle visibility">' +
+        '<i class="fa fa-check-square"></i>' +
+        "</span>";
+
+      // color block
+      txt += '<span class="legend-color-box" style="background-color:' + color + '"></span>';
+
+      // label
+      if (labels[i]) {
+        txt +=
+          '<span class="legend-label-text" title="List ' +
+          labels[i] +
+          ' queries">' +
+          labels[i] +
+          "</span>";
+      }
+
+      text.push("<li>" + txt + "</li>");
+    }
+  }
+
+  text.push("</ul>");
+  return text.join("");
+}
+
 function hidePieSlice(event) {
-  toggleEyeCon(event.target);
+  togglecolorBox(event.target);
 
   var legendID = $(event.target).closest(".chart-legend").attr("id");
   var ci =
@@ -360,19 +407,19 @@ function hidePieSlice(event) {
   ci.update();
 }
 
-function toggleEyeCon(target) {
+function togglecolorBox(target) {
   var parentListItem = $(target).closest("li");
-  var eyeCon = $(parentListItem).find(".fa-eye, .fa-eye-slash");
+  var colorBox = $(parentListItem).find(".fa-check-square, .fa-square");
 
-  if (eyeCon) {
-    $(eyeCon).toggleClass("fa-eye");
-    $(eyeCon).toggleClass("fa-eye-slash");
+  if (colorBox) {
+    $(colorBox).toggleClass("fa-check-square");
+    $(colorBox).toggleClass("fa-square");
   }
 }
 
-function isEyeCon(target) {
-  // See if click happened on eyeConWrapper or child SVG
-  if ($(target).closest(".eyeConWrapper")[0]) {
+function iscolorBox(target) {
+  // See if click happened on colorBoxWrapper or child SVG
+  if ($(target).closest(".colorBoxWrapper")[0]) {
     return true;
   }
 
@@ -468,16 +515,6 @@ function updateClientsOverTime() {
     });
 }
 
-function createEyeConElement() {
-  var eyeConWrapper = $("<span></span>")
-    .addClass("eyeConWrapper")
-    .click(function (e) {
-      hidePieSlice(e);
-    });
-  eyeConWrapper.append($("<i class='fa fa-eye'></i>"));
-  return eyeConWrapper;
-}
-
 function updateForwardDestinationsPie() {
   $.getJSON("api.php?getForwardDestinations", function (data) {
     if ("FTLnotrunning" in data) {
@@ -519,11 +556,12 @@ function updateForwardDestinationsPie() {
     forwardDestinationPieChart.update();
     // Don't use rotation animation for further updates
     forwardDestinationPieChart.options.animation.duration = 0;
+    forwardDestinationPieChart.options.legendCallback = customLegend;
+
     // Generate legend in separate div
     $("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend());
-    $("#forward-destinations-legend > ul > li").prepend(createEyeConElement());
     $("#forward-destinations-legend > ul > li").click(function (e) {
-      if (isEyeCon(e.target)) {
+      if (iscolorBox(e.target)) {
         return false;
       }
 
@@ -532,6 +570,9 @@ function updateForwardDestinationsPie() {
         window.location.href = "queries.php?forwarddest=" + obj;
       }
     });
+    $("#forward-destinations-legend .colorBoxWrapper").click(function (e) {
+      hidePieSlice(e);
+    });
   }).done(function () {
     // Reload graph after one minute
     setTimeout(updateForwardDestinationsPie, 60000);
@@ -798,7 +839,7 @@ function updateSummaryData(runOnce) {
 
 function doughnutTooltip(tooltipItems, data) {
   var dataset = data.datasets[tooltipItems.datasetIndex];
-  var label = data.labels[tooltipItems.index];
+  var label = " " + data.labels[tooltipItems.index];
   // Compute share of total and of displayed
   var scale = 0,
     total = 0;
@@ -816,9 +857,9 @@ function doughnutTooltip(tooltipItems, data) {
     return label + ": " + dataset.data[tooltipItems.index].toFixed(1) + "%";
   return (
     label +
-    ":<br>- " +
+    ":<br>&bull; " +
     dataset.data[tooltipItems.index].toFixed(1) +
-    "% of all queries<br>- " +
+    "% of all queries<br>&bull; " +
     ((dataset.data[tooltipItems.index] * 100) / (total - scale)).toFixed(1) +
     "% of shown items"
   );
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 97ddd594..828d701a 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -215,21 +215,54 @@
 
 .chart-legend ul {
   list-style-type: none;
+  padding-left: 45px;
 }
 
 .chart-legend li {
   cursor: pointer;
-  word-break: break-all;
+  position: relative;
+  line-height: 1;
+  margin: 0 0 6px;
 }
 
 .chart-legend li span {
   display: inline-block;
-  width: 20px;
   height: 12px;
+}
+
+.colorBoxWrapper {
+  font-size: 14px;
+}
+
+.colorBoxWrapper:hover {
+  transform: scale(1.15);
+}
+
+.chart-legend li .colorBoxWrapper {
+  position: absolute;
+  width: 20px;
+  left: -20px;
+  top: 0;
+  line-height: 1;
+}
+
+.chart-legend li .legend-color-box {
+  display: none;
+  width: 12px;
   margin-right: 5px;
 }
 
-.strike {
+.chart-legend li .legend-label-text {
+  line-height: 1;
+  word-break: break-word;
+}
+
+.chart-legend li .legend-label-text:hover {
+  text-decoration: underline;
+}
+
+.strike,
+.strike span {
   text-decoration: line-through !important;
 }
 
@@ -442,10 +475,6 @@ td.details-control {
   height: 50px;
 }
 
-.eyeConWrapper {
-  font-size: 14px;
-}
-
 #apiTokenIframe {
   width: 100%;
   border: 0;