From bbdc4c3d6bac33d0f280cff36dbadb6ee53d8bbd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Christian=20K=C3=B6nig?= Date: Wed, 28 Sep 2022 14:44:35 +0200 Subject: [PATCH] Fix doughnut tooltip and legend MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Christian König --- index.php | 10 +--- scripts/pi-hole/js/db_graph.js | 7 ++- scripts/pi-hole/js/index.js | 93 +++++++++++++++++++--------------- 3 files changed, 60 insertions(+), 50 deletions(-) diff --git a/index.php b/index.php index b6838570..1127eec7 100644 --- a/index.php +++ b/index.php @@ -116,12 +116,9 @@ require_once 'scripts/pi-hole/php/gravity.php';

Query Types

-
+
-
-
-
@@ -135,12 +132,9 @@ require_once 'scripts/pi-hole/php/gravity.php';

Upstream servers

-
+
-
-
-
diff --git a/scripts/pi-hole/js/db_graph.js b/scripts/pi-hole/js/db_graph.js index f29099f6..67ed32fb 100644 --- a/scripts/pi-hole/js/db_graph.js +++ b/scripts/pi-hole/js/db_graph.js @@ -390,7 +390,12 @@ $("#querytime").on("apply.daterangepicker", function (ev, picker) { }); $("#queryOverTimeChart").click(function (evt) { - var activePoints = timeLineChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, false); + var activePoints = timeLineChart.getElementsAtEventForMode( + evt, + "nearest", + { intersect: true }, + false + ); if (activePoints.length > 0) { //get the internal index in the chart var clickedElementindex = activePoints[0].index; diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index e5d1f1ec..2d77c6b4 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -323,7 +323,7 @@ function updateQueryTypesPie() { queryTypePieChart.options.legendCallback = customLegend; // Generate legend in separate div - $("#query-types-legend").html(queryTypePieChart.generateLegend()); + // $("#query-types-legend").html(queryTypePieChart.generateLegend()); $("#query-types-legend > ul > li").click(function (e) { if (iscolorBox(e.target)) { return false; @@ -568,7 +568,7 @@ function updateForwardDestinationsPie() { forwardDestinationPieChart.options.legendCallback = customLegend; // Generate legend in separate div - $("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend()); + // $("#forward-destinations-legend").html(forwardDestinationPieChart.generateLegend()); $("#forward-destinations-legend > ul > li").click(function (e) { if (iscolorBox(e.target)) { return false; @@ -839,32 +839,23 @@ function updateSummaryData(runOnce) { }); } -function doughnutTooltip(tooltipItems, data) { - var dataset = data.datasets[tooltipItems.datasetIndex]; - var label = " " + data.labels[tooltipItems.index]; - // Compute share of total and of displayed - var scale = 0, - total = 0; - var metas = Object.keys(dataset._meta).map(function (e) { - return dataset._meta[e]; - }); - metas.forEach(function (meta) { - meta.data.forEach(function (val, i) { - if (val.hidden) scale += dataset.data[i]; - total += dataset.data[i]; - }); - }); - if (scale === 0) +function doughnutTooltip(tooltipLabel) { + var percentageTotalShown = tooltipLabel.chart._metasets[0].total; + var label = " " + tooltipLabel.label; + + if (percentageTotalShown >= 100) { // All items shown - return label + ": " + dataset.data[tooltipItems.index].toFixed(1) + "%"; - return ( - label + - ":
• " + - dataset.data[tooltipItems.index].toFixed(1) + - "% of all queries
• " + - ((dataset.data[tooltipItems.index] * 100) / (total - scale)).toFixed(1) + - "% of shown items" - ); + return label + ": " + tooltipLabel.parsed.toFixed(1) + "%"; + } else { + return ( + label + + ":
• " + + tooltipLabel.parsed.toFixed(1) + + "% of all queries
• " + + ((tooltipLabel.parsed * 100) / percentageTotalShown).toFixed(1) + + "% of shown items" + ); + } } var maxlogage = "24"; @@ -1096,7 +1087,12 @@ $(function () { } $("#queryOverTimeChart").click(function (evt) { - var activePoints = timeLineChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, false); + var activePoints = timeLineChart.getElementsAtEventForMode( + evt, + "nearest", + { intersect: true }, + false + ); if (activePoints.length > 0) { //get the internal index var clickedElementindex = activePoints[0].index; @@ -1113,7 +1109,12 @@ $(function () { }); $("#clientsChart").click(function (evt) { - var activePoints = clientsChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, false); + var activePoints = clientsChart.getElementsAtEventForMode( + evt, + "nearest", + { intersect: true }, + false + ); if (activePoints.length > 0) { //get the internal index var clickedElementindex = activePoints[0].index; @@ -1148,18 +1149,23 @@ $(function () { }, plugins: { legend: { - display: false, + display: true, + position: "right", + align: "start", + labels: { + boxWidth: 13, + color: ticksColor, + }, }, tooltip: { + // Disable the on-canvas tooltip enabled: false, - custom: customTooltips, + external: customTooltips, callbacks: { title: function () { - return "Query types"; - }, - label: function (tooltipItems, data) { - return doughnutTooltip(tooltipItems, data); + return "Query type"; }, + label: doughnutTooltip, }, }, }, @@ -1192,18 +1198,23 @@ $(function () { }, plugins: { legend: { - display: false, + display: true, + position: "right", + align: "start", + labels: { + boxWidth: 13, + color: ticksColor, + }, }, tooltip: { + // Disable the on-canvas tooltip enabled: false, - custom: customTooltips, + external: customTooltips, callbacks: { title: function () { - return "Forward destinations"; - }, - label: function (tooltipItems, data) { - return doughnutTooltip(tooltipItems, data); + return "Upstream server"; }, + label: doughnutTooltip, }, }, },