Fix doughnut tooltip and legend

Signed-off-by: Christian König <ckoenig@posteo.de>
pi-hole · Sep 29, 2022 · 0f6e044 · 0f6e044
1 parent 28f67cd
commit 0f6e044
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 50 deletions.
diff --git a/index.php b/index.php
@@ -116,12 +116,9 @@
                 <h3 class="box-title">Query Types</h3>
             </div>
             <div class="box-body">
-                <div class="pull-left" style="width:60%">
+                <div class="pull-left" style="width:100%">
                     <canvas id="queryTypePieChart"></canvas>
                 </div>
-                <div class="pull-left" style="width:40%">
-                    <div id="query-types-legend" class="chart-legend"></div>
-                </div>
             </div>
             <div class="overlay">
                 <i class="fa fa-sync fa-spin"></i>
@@ -135,12 +132,9 @@
                 <h3 class="box-title">Upstream servers</h3>
             </div>
             <div class="box-body">
-                <div class="pull-left" style="width:60%">
+                <div class="pull-left" style="width:100%">
                     <canvas id="forwardDestinationPieChart" class="extratooltipcanvas no-user-select"></canvas>
                 </div>
-                <div class="pull-left" style="width:40%">
-                    <div id="forward-destinations-legend" class="chart-legend extratooltipcanvas no-user-select"></div>
-                </div>
             </div>
             <div class="overlay">
                 <i class="fa fa-sync fa-spin"></i>

diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js
@@ -390,7 +390,12 @@ $("#querytime").on("apply.daterangepicker", function (ev, picker) {
 });
 
 $("#queryOverTimeChart").click(function (evt) {
-  var activePoints = timeLineChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, false);
+  var activePoints = timeLineChart.getElementsAtEventForMode(
+    evt,
+    "nearest",
+    { intersect: true },
+    false
+  );
   if (activePoints.length > 0) {
     //get the internal index in the chart
     var clickedElementindex = activePoints[0].index;

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js
@@ -323,7 +323,7 @@ function updateQueryTypesPie() {
     queryTypePieChart.options.legendCallback = customLegend;
 
     // Generate legend in separate div
-    $("#query-types-legend").html(queryTypePieChart.generateLegend());
+    // $("#query-types-legend").html(queryTypePieChart.generateLegend());
     $("#query-types-legend > ul > li").click(function (e) {
       if (iscolorBox(e.target)) {
         return false;
@@ -568,7 +568,7 @@ function updateForwardDestinationsPie() {
     forwardDestinationPieChart.options.legendCallback = customLegend;
 
     // Generate legend in separate div
-    $("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend());
+    // $("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend());
     $("#forward-destinations-legend > ul > li").click(function (e) {
       if (iscolorBox(e.target)) {
         return false;
@@ -839,32 +839,23 @@ function updateSummaryData(runOnce) {
     });
 }
 
-function doughnutTooltip(tooltipItems, data) {
-  var dataset = data.datasets[tooltipItems.datasetIndex];
-  var label = " " + data.labels[tooltipItems.index];
-  // Compute share of total and of displayed
-  var scale = 0,
-    total = 0;
-  var metas = Object.keys(dataset._meta).map(function (e) {
-    return dataset._meta[e];
-  });
-  metas.forEach(function (meta) {
-    meta.data.forEach(function (val, i) {
-      if (val.hidden) scale += dataset.data[i];
-      total += dataset.data[i];
-    });
-  });
-  if (scale === 0)
+function doughnutTooltip(tooltipLabel) {
+  var percentageTotalShown = tooltipLabel.chart._metasets[0].total;
+  var label = " " + tooltipLabel.label;
+
+  if (percentageTotalShown >= 100) {
     // All items shown
-    return label + ": " + dataset.data[tooltipItems.index].toFixed(1) + "%";
-  return (
-    label +
-    ":<br>&bull; " +
-    dataset.data[tooltipItems.index].toFixed(1) +
-    "% of all queries<br>&bull; " +
-    ((dataset.data[tooltipItems.index] * 100) / (total - scale)).toFixed(1) +
-    "% of shown items"
-  );
+    return label + ": " + tooltipLabel.parsed.toFixed(1) + "%";
+  } else {
+    return (
+      label +
+      ":<br>&bull; " +
+      tooltipLabel.parsed.toFixed(1) +
+      "% of all queries<br>&bull; " +
+      ((tooltipLabel.parsed * 100) / percentageTotalShown).toFixed(1) +
+      "% of shown items"
+    );
+  }
 }
 
 var maxlogage = "24";
@@ -1096,7 +1087,12 @@ $(function () {
   }
 
   $("#queryOverTimeChart").click(function (evt) {
-    var activePoints = timeLineChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, false);
+    var activePoints = timeLineChart.getElementsAtEventForMode(
+      evt,
+      "nearest",
+      { intersect: true },
+      false
+    );
     if (activePoints.length > 0) {
       //get the internal index
       var clickedElementindex = activePoints[0].index;
@@ -1113,7 +1109,12 @@ $(function () {
   });
 
   $("#clientsChart").click(function (evt) {
-    var activePoints = clientsChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, false);
+    var activePoints = clientsChart.getElementsAtEventForMode(
+      evt,
+      "nearest",
+      { intersect: true },
+      false
+    );
     if (activePoints.length > 0) {
       //get the internal index
       var clickedElementindex = activePoints[0].index;
@@ -1148,18 +1149,23 @@ $(function () {
         },
         plugins: {
           legend: {
-            display: false,
+            display: true,
+            position: "right",
+            align: "start",
+            labels: {
+              boxWidth: 13,
+              color: ticksColor,
+            },
           },
           tooltip: {
+            // Disable the on-canvas tooltip
             enabled: false,
-            custom: customTooltips,
+            external: customTooltips,
             callbacks: {
               title: function () {
-                return "Query types";
-              },
-              label: function (tooltipItems, data) {
-                return doughnutTooltip(tooltipItems, data);
+                return "Query type";
               },
+              label: doughnutTooltip,
             },
           },
         },
@@ -1192,18 +1198,23 @@ $(function () {
         },
         plugins: {
           legend: {
-            display: false,
+            display: true,
+            position: "right",
+            align: "start",
+            labels: {
+              boxWidth: 13,
+              color: ticksColor,
+            },
           },
           tooltip: {
+            // Disable the on-canvas tooltip
             enabled: false,
-            custom: customTooltips,
+            external: customTooltips,
             callbacks: {
               title: function () {
-                return "Forward destinations";
-              },
-              label: function (tooltipItems, data) {
-                return doughnutTooltip(tooltipItems, data);
+                return "Upstream server";
               },
+              label: doughnutTooltip,
             },
           },
         },