Show pointer only for clickable items

Signed-off-by: yubiuser <github@yubiuser.dev>

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", () => {
@@ -92,6 +93,7 @@ globalThis.htmlLegendPlugin = {
         // 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) {
@@ -99,6 +101,7 @@ globalThis.htmlLegendPlugin = {
           link.href = `queries?upstream=${encodeURIComponent(upstreams[item.text])}`;
         }
       } else {
+        // no clickable links in other charts
         link.className = "legend-label-text";
       }
 

style/pi-hole.css

@@ -270,6 +270,7 @@ td.lookatme {
 }
 
 .chart-legend li {
+  cursor: default;
   position: relative;
   line-height: 1;
   margin: 0 0 8px;
@@ -304,6 +305,10 @@ td.lookatme {
   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,