The permitted column in the main graph was actually the sum of forwarded and other queries. As cache is arguably somehow permitted, too, make the difference between them clear

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

scripts/pi-hole/js/index.js

@@ -34,11 +34,17 @@ function updateQueriesOverTime() {
     timeLineChart.data.labels = [];
     timeLineChart.data.datasets = [];
 
-    var labels = ["Blocked DNS Queries", "Cached DNS Queries", "Forwarded DNS Queries"];
+    var labels = [
+      "Other DNS Queries",
+      "Blocked DNS Queries",
+      "Cached DNS Queries",
+      "Forwarded DNS Queries",
+    ];
     var cachedColor = utils.getCSSval("queries-cached", "background-color");
     var blockedColor = utils.getCSSval("queries-blocked", "background-color");
     var permittedColor = utils.getCSSval("queries-permitted", "background-color");
-    var colors = [blockedColor, cachedColor, permittedColor];
+    var otherColor = utils.getCSSval("queries-other", "background-color");
+    var colors = [otherColor, blockedColor, cachedColor, permittedColor];
 
     // Collect values and colors, and labels
     for (var i = 0; i < labels.length; i++) {
@@ -59,12 +65,11 @@ function updateQueriesOverTime() {
       var timestamp = new Date(1000 * parseInt(item.timestamp, 10));
 
       timeLineChart.data.labels.push(timestamp);
-      var blocked = item.blocked;
-      var cached = item.cached;
-      var permitted = item.total - (blocked + cached);
-      timeLineChart.data.datasets[0].data.push(blocked);
-      timeLineChart.data.datasets[1].data.push(cached);
-      timeLineChart.data.datasets[2].data.push(permitted);
+      var other = item.total - (item.blocked + item.cached + item.forwarded);
+      timeLineChart.data.datasets[0].data.push(other);
+      timeLineChart.data.datasets[1].data.push(item.blocked);
+      timeLineChart.data.datasets[2].data.push(item.cached);
+      timeLineChart.data.datasets[3].data.push(item.forwarded);
     });
 
     $("#queries-over-time .overlay").hide();
@@ -527,20 +532,23 @@ $(function () {
             },
             label: function (tooltipLabel) {
               var label = tooltipLabel.dataset.label;
-              // Add percentage only for blocked queries
-              if (tooltipLabel.datasetIndex === 0) {
-                var percentage = 0;
-                var permitted = parseInt(tooltipLabel.parsed._stacks.y[1], 10);
-                var blocked = parseInt(tooltipLabel.parsed._stacks.y[0], 10);
-                if (permitted + blocked > 0) {
-                  percentage = (100 * blocked) / (permitted + blocked);
-                }
-
-                label += ": " + tooltipLabel.parsed.y + " (" + percentage.toFixed(1) + "%)";
-              } else {
-                label += ": " + tooltipLabel.parsed.y;
+              // Sum all queries for the current time
+              let sum = 0;
+              for (let i = 0; i < tooltipLabel.parsed._stacks.y._top; i++) {
+                sum += parseInt(tooltipLabel.parsed._stacks.y[i], 10);
               }
 
+              let percentage = 0;
+              const blocked = parseInt(
+                tooltipLabel.parsed._stacks.y[tooltipLabel.datasetIndex],
+                10
+              );
+              if (sum > 0) {
+                percentage = (100 * blocked) / sum;
+              }
+
+              label += ": " + tooltipLabel.parsed.y + " (" + percentage.toFixed(1) + "%)";
+
               return label;
             },
           },

style/themes/default-dark.css

@@ -368,6 +368,9 @@ h4 {
 .queries-permitted {
   background-color: #00a65a;
 }
+.queries-other {
+  background-color: #0077a6;
+}
 .queries-blocked {
   background-color: #999;
 }

style/themes/default-darker.css

@@ -5617,6 +5617,9 @@ link-muted {
 .queries-permitted {
   background-color: rgb(0, 133, 72);
 }
+.queries-other {
+  background-color: #0077a6;
+}
 .queries-blocked {
   background-color: rgb(82, 88, 92);
 }

style/themes/default-light.css

@@ -194,6 +194,9 @@
 .queries-permitted {
   background-color: #00a65a;
 }
+.queries-other {
+  background-color: #0077a6;
+}
 .queries-blocked {
   background-color: #999;
 }

style/themes/high-contrast-dark.css

@@ -27,6 +27,8 @@
 
   --allowed-color: var(--primary-color);
   --blocked-color: var(--danger-color);
+  --cached-color: #a86600;
+  --other-color: #0077a6;
 
   --datatable-bgcolor: rgba(18, 44, 68, 0.3);
   --overlay-bgcolor: rgba(24, 28, 32, 0.8);
@@ -450,6 +452,9 @@ div.dataTables_wrapper div.dataTables_length select {
 .queries-cached {
   background-color: var(--cached-color);
 }
+.queries-other {
+  background-color: var(--other-color);
+}
 
 code,
 pre {

style/themes/high-contrast.css

@@ -25,6 +25,8 @@
 
   --allowed-color: #3c7;
   --blocked-color: var(--danger-color);
+  --cached-color: var(--primary-color);
+  --other-color: #0077a6;
 
   --overlay-bgcolor: rgba(255, 255, 255, 0.8);
 }
@@ -239,7 +241,10 @@ a:hover {
   background-color: var(--blocked-color);
 }
 .queries-cached {
-  background-color: var(--primary-color);
+  background-color: var(--cached-color);
+}
+.queries-other {
+  background-color: var(--other-color);
 }
 .progress {
   background-color: #eee;

style/themes/lcars.css

@@ -1999,6 +1999,10 @@ input[type="password"]::-webkit-caps-lock-indicator {
   background-color: rgb(37, 88, 64);
 }
 
+.queries-other {
+  background-color: #0077a6;
+}
+
 /*--- Used in the Query Log table ---*/
 .text-black {
   color: #000 !important;