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

Apply the same changes to the long-term graph page.

Browse Source 
Signed-off-by: DL6ER <dl6er@dl6er.de>
This commit is contained in:
DL6ER
2020-01-01 18:20:42 +00:00
committed by XhmikosR
parent 0ee3c06c77
commit ac1e68acde
1 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
scripts/pi-hole/js/db_graph.js
View File

@@ -160,23 +160,23 @@ function updateQueriesOverTime() {
for (hour in dates) { for (hour in dates) {
if (Object.prototype.hasOwnProperty.call(dates, hour)) { if (Object.prototype.hasOwnProperty.call(dates, hour)) {
var date, var date,
dom = 0, total = 0,
ads = 0; blocked = 0;
date = new Date(1000 * dates[hour]); date = new Date(1000 * dates[hour]);
var idx = data.domains_over_time[0].indexOf(dates[hour].toString()); var idx = data.domains_over_time[0].indexOf(dates[hour].toString());
if (idx > -1) { if (idx > -1) {
dom = data.domains_over_time[1][idx]; total = data.domains_over_time[1][idx];
} }
idx = data.ads_over_time[0].indexOf(dates[hour].toString()); idx = data.ads_over_time[0].indexOf(dates[hour].toString());
if (idx > -1) { if (idx > -1) {
ads = data.ads_over_time[1][idx]; blocked = data.ads_over_time[1][idx];
} }
timeLineChart.data.labels.push(date); timeLineChart.data.labels.push(date);
timeLineChart.data.datasets[0].data.push(dom - ads); timeLineChart.data.datasets[0].data.push(blocked);
timeLineChart.data.datasets[1].data.push(ads); timeLineChart.data.datasets[1].data.push(total - blocked);
} }
} }
@@ -190,28 +190,30 @@ function updateQueriesOverTime() {
$(document).ready(function() { $(document).ready(function() {
var ctx = document.getElementById("queryOverTimeChart").getContext("2d"); var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
var blockedColor = "#999999";
var permittedColor = "#00a65a";
timeLineChart = new Chart(ctx, { timeLineChart = new Chart(ctx, {
type: "bar", type: "bar",
data: { data: {
labels: [], labels: [],
datasets: [ datasets: [
{ {
label: "Permitted DNS Queries", label: "Blocked DNS Queries",
fill: true, fill: true,
backgroundColor: "rgba(0, 166, 90,.8)", backgroundColor: blockedColor,
borderColor: "rgba(0, 166, 90,.8)", borderColor: blockedColor,
pointBorderColor: "rgba(0, 166, 90,.8)", pointBorderColor: blockedColor,
pointRadius: 1, pointRadius: 1,
pointHoverRadius: 5, pointHoverRadius: 5,
data: [], data: [],
pointHitRadius: 5 pointHitRadius: 5
}, },
{ {
label: "Blocked DNS Queries", label: "Permitted DNS Queries",
fill: true, fill: true,
backgroundColor: "rgba(0,192,239,1)", backgroundColor: permittedColor,
borderColor: "rgba(0,192,239,1)", borderColor: permittedColor,
pointBorderColor: "rgba(0,192,239,1)", pointBorderColor: permittedColor,
pointRadius: 1, pointRadius: 1,
pointHoverRadius: 5, pointHoverRadius: 5,
data: [], data: [],
@@ -222,6 +224,9 @@ $(document).ready(function() {
options: { options: {
tooltips: { tooltips: {
enabled: true, enabled: true,
itemSort: function(a, b) {
return b.datasetIndex - a.datasetIndex;
},
mode: "x-axis", mode: "x-axis",
callbacks: { callbacks: {
title: function(tooltipItem) { title: function(tooltipItem) {
@@ -232,8 +237,8 @@ $(document).ready(function() {
"-" + "-" +
padNumber(time.getMonth() + 1) + padNumber(time.getMonth() + 1) +
"-" + "-" +
padNumber(time.getDate()) + padNumber(time.getDate());
" " + var from_time =
padNumber(time.getHours()) + padNumber(time.getHours()) +
":" + ":" +
padNumber(time.getMinutes()) + padNumber(time.getMinutes()) +
@@ -245,22 +250,28 @@ $(document).ready(function() {
"-" + "-" +
padNumber(time.getMonth() + 1) + padNumber(time.getMonth() + 1) +
"-" + "-" +
padNumber(time.getDate()) + padNumber(time.getDate());
" " + var until_time =
padNumber(time.getHours()) + padNumber(time.getHours()) +
":" + ":" +
padNumber(time.getMinutes()) + padNumber(time.getMinutes()) +
":" + ":" +
padNumber(time.getSeconds()); padNumber(time.getSeconds());
return "Queries from " + from_date + " to " + until_date; if (from_date === until_date) {
return "Queries from " + from_time + " to " + until_time;
} else {
return (
"Queries from " + from_date + " " + from_time + " to " + until_date + " " + until_time
);
}
}, },
label: function(tooltipItems, data) { label: function(tooltipItems, data) {
if (tooltipItems.datasetIndex === 1) { if (tooltipItems.datasetIndex === 0) {
var percentage = 0.0; var percentage = 0.0;
var total = parseInt(data.datasets[0].data[tooltipItems.index]); var permitted = parseInt(data.datasets[1].data[tooltipItems.index]);
var blocked = parseInt(data.datasets[1].data[tooltipItems.index]); var blocked = parseInt(data.datasets[0].data[tooltipItems.index]);
if (total > 0) { if (permitted + blocked > 0) {
percentage = (100.0 * blocked) / total; percentage = (100.0 * blocked) / (permitted + blocked);
} }
return ( return (