Handle pie chart item style conditionally (#3532)

Author: PromoFaux

scripts/js/charts.js

@@ -67,6 +67,7 @@ globalThis.htmlLegendPlugin = {
       const boxSpan = document.createElement("span");
       boxSpan.title = "Toggle visibility";
       boxSpan.style.color = item.fillStyle;
+      boxSpan.style.cursor = "pointer";
       boxSpan.innerHTML = `<i class="colorBoxWrapper fa ${item.hidden ? "fa-square" : "fa-check-square"}"></i>`;
 
       boxSpan.addEventListener("click", () => {
@@ -91,17 +92,20 @@ globalThis.htmlLegendPlugin = {
       if (isQueryTypeChart || isForwardDestinationChart) {
         // Text (link to query log page)
         link.title = `List ${item.text} queries`;
+        link.className = "legend-label-text clickable";
 
         if (isQueryTypeChart) {
           link.href = `queries?type=${item.text}`;
         } else if (isForwardDestinationChart) {
           // Encode the forward destination as it may contain an "#" character
           link.href = `queries?upstream=${encodeURIComponent(upstreams[item.text])}`;
         }
+      } else {
+        // no clickable links in other charts
+        link.className = "legend-label-text";
       }
 
       link.style.textDecoration = item.hidden ? "line-through" : "";
-      link.className = "legend-label-text";
       link.textContent = item.text;
 
       li.append(boxSpan, link);

style/pi-hole.css

@@ -270,6 +270,7 @@ td.lookatme {
 }
 
 .chart-legend li {
+  cursor: default;
   position: relative;
   line-height: 1;
   margin: 0 0 8px;
@@ -300,10 +301,14 @@ td.lookatme {
   word-break: break-word;
 }
 
-.chart-legend li a.legend-label-text:hover {
+.chart-legend li a.legend-label-text.clickable:hover {
   text-decoration: underline;
 }
 
+.chart-legend li a.legend-label-text.clickable {
+  cursor: pointer; /* Pointer cursor only for clickable items */
+}
+
 /* These are needed because AdmintLTE 2.x doesn't support Font Awesome 5.x */
 .sidebar-menu > li > a > .fab,
 .sidebar-menu > li > a > .far,