diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index 7367c987e1..390e116dc3 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -321,12 +321,6 @@ function updateQueryTypesPie() { // 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 > p").click(function () { - window.location.href = "queries.php?querytype=" + querytypeids[$(this).index()]; - }); }).done(function () { // Reload graph after minute setTimeout(updateQueryTypesPie, 60000); @@ -472,15 +466,6 @@ function updateForwardDestinationsPie() { // 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 > p").click(function (e) { - var obj = encodeURIComponent(e.target.textContent); - if (obj.length > 0) { - window.location.href = "queries.php?forwarddest=" + obj; - } - }); }).done(function () { // Reload graph after one minute setTimeout(updateForwardDestinationsPie, 60000); @@ -806,7 +791,17 @@ const htmlLegendPlugin = { li.style.display = "flex"; li.style.flexDirection = "row"; - li.addEventListener('click', () => { + // Color checkbox (toggle visibility) + const boxSpan = document.createElement("span"); + boxSpan.title = "Toggle visibility"; + boxSpan.style.color = item.fillStyle; + boxSpan.style.display = "inline-block"; + boxSpan.style.margin = "0 10px"; + boxSpan.innerHTML = item.hidden + ? '' + : ''; + + boxSpan.addEventListener("click", () => { const { type } = chart.config; if (type === "pie" || type === "doughnut") { @@ -817,30 +812,27 @@ const htmlLegendPlugin = { } chart.update(); - }; - - // Color checkbox - const boxSpan = document.createElement("span"); - boxSpan.style.color = item.fillStyle; - boxSpan.style.display = "inline-block"; - boxSpan.style.margin = "0 10px"; - boxSpan.innerHTML = item.hidden - ? '' - : ''; - - // Text - const textContainer = document.createElement("p"); - textContainer.style.color = item.fontColor; - textContainer.style.margin = 0; - textContainer.style.padding = 0; - textContainer.style.textDecoration = item.hidden ? "line-through" : ""; - textContainer.className = "legend-label-text"; + }); - const text = document.createTextNode(item.text); - textContainer.append(text); + // Text (link to query log page) + const textLink = document.createElement("p"); + textLink.title = "List " + item.text + " queries"; + textLink.style.color = item.fontColor; + textLink.style.margin = 0; + textLink.style.padding = 0; + textLink.style.textDecoration = item.hidden ? "line-through" : ""; + textLink.className = "legend-label-text"; + textLink.append(item.text); + + textLink.addEventListener("click", () => { + if (chart.canvas.id == "queryTypePieChart") { + window.location.href = "queries.php?querytype=" + querytypeids[item.index]; + } else if (chart.canvas.id == "forwardDestinationPieChart") { + window.location.href = "queries.php?forwarddest=" + encodeURIComponent(item.text); + } + }); - li.append(boxSpan); - li.append(textContainer); + li.append(boxSpan, textLink); ul.append(li); }); }, @@ -955,7 +947,6 @@ $(function () { }); // Pull in data via AJAX - updateQueriesOverTime(); // Create / load "Top Clients over Time" only if authorized