Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2025-12-24 12:48:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix tooltip percentage computation. While we're at it, also put the blocked queries under permitted ones and show them in gray instead of blue.

Browse Source 
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
2020-01-01 15:57:33 +00:00
committed by XhmikosR
parent 0a16b94ca6
commit 0ee3c06c77
1 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
scripts/pi-hole/js/index.js
View File

@@ -160,8 +160,8 @@ function updateQueriesOverTime() {
timeLineChart.data.labels.push(d);
var blocked = data.ads_over_time[1][hour];
var permitted = data.domains_over_time[1][hour] - blocked;
timeLineChart.data.datasets[0].data.push(permitted);
timeLineChart.data.datasets[1].data.push(blocked);
timeLineChart.data.datasets[0].data.push(blocked);
timeLineChart.data.datasets[1].data.push(permitted);
}
}
@@ -764,6 +764,9 @@ $(document).ready(function() {
updateSummaryData();
var blockedColor = "#999999";
var permittedColor = "#00a65a";
var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
timeLineChart = new Chart(ctx, {
type: "bar",
@@ -771,22 +774,22 @@ $(document).ready(function() {
labels: [],
datasets: [
{
label: "Permitted DNS Queries",
label: "Blocked DNS Queries",
fill: true,
backgroundColor: "rgba(0, 166, 90,.8)",
borderColor: "rgba(0, 166, 90,.8)",
pointBorderColor: "rgba(0, 166, 90,.8)",
backgroundColor: blockedColor,
borderColor: blockedColor,
pointBorderColor: blockedColor,
pointRadius: 1,
pointHoverRadius: 5,
data: [],
pointHitRadius: 5
},
{
label: "Blocked DNS Queries",
label: "Permitted DNS Queries",
fill: true,
backgroundColor: "rgba(0,192,239,1)",
borderColor: "rgba(0,192,239,1)",
pointBorderColor: "rgba(0,192,239,1)",
backgroundColor: permittedColor,
borderColor: permittedColor,
pointBorderColor: permittedColor,
pointRadius: 1,
pointHoverRadius: 5,
data: [],
@@ -798,6 +801,9 @@ $(document).ready(function() {
tooltips: {
enabled: true,
mode: "x-axis",
itemSort: function(a, b) {
return b.datasetIndex - a.datasetIndex;
},
callbacks: {
title: function(tooltipItem) {
var label = tooltipItem[0].xLabel;
@@ -806,15 +812,15 @@ $(document).ready(function() {
var m = parseInt(time[2], 10) || 0;
var from = padNumber(h) + ":" + padNumber(m - 5) + ":00";
var to = padNumber(h) + ":" + padNumber(m + 4) + ":59";
return "Upstreams from " + from + " to " + to;
return "Queries from " + from + " to " + to;
},
label: function(tooltipItems, data) {
if (tooltipItems.datasetIndex === 1) {
if (tooltipItems.datasetIndex === 0) {
var percentage = 0.0;
var total = parseInt(data.datasets[0].data[tooltipItems.index]);
var blocked = parseInt(data.datasets[1].data[tooltipItems.index]);
if (total > 0) {
percentage = (100.0 * blocked) / total;
var permitted = parseInt(data.datasets[1].data[tooltipItems.index]);
var blocked = parseInt(data.datasets[0].data[tooltipItems.index]);
if (permitted + blocked > 0) {
percentage = (100.0 * blocked) / (permitted + blocked);
}
return (