Add separate legends for pie charts on the dashboard. Fixes #635

Signed-off-by: DL6ER <dl6er@dl6er.de>

index.php

@@ -132,8 +132,11 @@ else
           <h3 class="box-title">Query Types (integrated)</h3>
         </div>
         <div class="box-body">
-          <div class="chart">
-            <canvas id="queryTypePieChart" width="400" height="150"></canvas>
+          <div class="float-left" style="width:50%">
+            <canvas id="queryTypePieChart" width="120" height="120"></canvas>
+          </div>
+          <div class="float-left" style="width:50%">
+            <div id="query-types-legend" class="chart-legend"></div>
           </div>
         </div>
         <div class="overlay">
@@ -148,8 +151,11 @@ else
           <h3 class="box-title">Forward Destinations (integrated)</h3>
         </div>
         <div class="box-body">
-          <div class="chart">
-            <canvas id="forwardDestinationPieChart" width="400" height="150"></canvas>
+          <div class="float-left" style="width:50%">
+            <canvas id="forwardDestinationPieChart" width="120" height="120"></canvas>
+          </div>
+          <div class="float-left" style="width:50%">
+            <div id="forward-destinations-legend" class="chart-legend"></div>
           </div>
         </div>
         <div class="overlay">

scripts/pi-hole/js/index.js

@@ -178,6 +178,16 @@ function updateQueryTypesPie() {
         queryTypePieChart.update();
         // Don't use rotation animation for further updates
         queryTypePieChart.options.animation.duration=0;
+        // Generate legend in separate div
+        $("#query-types-legend").html(queryTypePieChart.generateLegend());
+        $("#query-types-legend > ul > li").on("click",function(e){
+                $(this).toggleClass("strike");
+                var index = $(this).index();
+                var ci = e.view.queryTypePieChart;
+                var curr = ci.data.datasets[0]._meta[3].data[index];
+                curr.hidden = !curr.hidden;
+                ci.update();
+        });
     }).done(function() {
         // Reload graph after minute
         setTimeout(updateQueryTypesPie, 60000);
@@ -392,6 +402,16 @@ function updateForwardDestinationsPie() {
         forwardDestinationPieChart.update();
         // Don't use rotation animation for further updates
         forwardDestinationPieChart.options.animation.duration=0;
+        // Generate legend in separate div
+        $("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend());
+        $("#forward-destinations-legend > ul > li").on("click",function(e){
+                $(this).toggleClass("strike");
+                var index = $(this).index();
+                var ci = e.view.forwardDestinationPieChart;
+                var curr = ci.data.datasets[0]._meta[3].data[index];
+                curr.hidden = !curr.hidden;
+                ci.update();
+        });
     }).done(function() {
         // Reload graph after one minute
         setTimeout(updateForwardDestinationsPie, 60000);
@@ -960,8 +980,7 @@ $(document).ready(function() {
             },
             options: {
                 legend: {
-                    display: true,
-                    position: "right"
+                    display: false
                 },
                 tooltips: {
                     enabled: true,
@@ -998,8 +1017,7 @@ $(document).ready(function() {
             },
             options: {
                 legend: {
-                    display: true,
-                    position: "right"
+                    display: false
                 },
                 tooltips: {
                     enabled: true,

style/pi-hole.css

@@ -115,3 +115,31 @@ a.lookatme {
     -webkit-animation: fa-spin 1s infinite linear;
     animation: fa-spin 1s infinite linear;
 }
+
+.chart-legend {
+    height:250px;
+    overflow:auto;
+}
+
+.chart-legend ul {
+    list-style-type: none;
+}
+
+.chart-legend li {
+    cursor:pointer;
+}
+
+.chart-legend li span {
+    display: inline-block;
+    width: 20px;
+    height: 12px;
+    margin-right: 5px;
+}
+
+.strike {
+    text-decoration: line-through !important;
+}
+
+.float-left{
+    float:left;
+}