From 41cdc9728c848d60d0604fea0bdd53d94f33e482 Mon Sep 17 00:00:00 2001
From: yubiuser <github@yubiuser.dev>
Date: Wed, 25 Jun 2025 20:32:37 +0200
Subject: [PATCH] Show pointer only for clickable items

Signed-off-by: yubiuser <github@yubiuser.dev>
---
 scripts/js/charts.js | 3 +++
 style/pi-hole.css    | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/scripts/js/charts.js b/scripts/js/charts.js
index a3dd3c09..ecb99b61 100644
--- a/scripts/js/charts.js
+++ b/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";
       }
 
diff --git a/style/pi-hole.css b/style/pi-hole.css
index d6509a05..fc51792e 100644
--- a/style/pi-hole.css
+++ b/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,