mirror of
https://github.com/pi-hole/web.git
synced 2024-12-06 19:36:21 +01:00
New Forwarded over Time graph
This commit is contained in:
DL6ER
+16
@@ -229,5 +229,21 @@ if(isset($_GET["recentBlocked"]))
|
||||
unset($data);
|
||||
}
|
||||
|
||||
if (isset($_GET['overTimeDataForwards']))
|
||||
{
|
||||
sendRequestFTL("ForwardedoverTime");
|
||||
$return = getResponseFTL();
|
||||
|
||||
foreach($return as $line)
|
||||
{
|
||||
$tmp = explode(" ",$line);
|
||||
for ($i=0; $i < count($tmp)-1; $i++) {
|
||||
$over_time[intval($tmp[0])][$i] = intval($tmp[$i+1]);
|
||||
}
|
||||
}
|
||||
$result = array('over_time' => $over_time);
|
||||
$data = array_merge($data, $result);
|
||||
}
|
||||
|
||||
disconnectFTL();
|
||||
?>
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
<div class="col-md-6">
|
||||
<div class="box" id="forward-destinations">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Forward Destinations</h3>
|
||||
<h3 class="box-title">Forward Destinations over Time</h3>
|
||||
</div>
|
||||
<div class="box-body">
|
||||
<div class="chart">
|
||||
|
||||
+113
-66
@@ -110,6 +110,81 @@ function updateQueriesOverTime() {
|
||||
});
|
||||
}
|
||||
|
||||
function updateForwardedOverTime() {
|
||||
$.getJSON("api.php?overTimeDataForwards&getForwardDestinations", function(data) {
|
||||
// convert received objects to arrays
|
||||
data.over_time = objectToArray(data.over_time);
|
||||
var timestamps = data.over_time[0];
|
||||
var plotdata = data.over_time[1];
|
||||
var labels = [];
|
||||
for (var key in data.forward_destinations)
|
||||
{
|
||||
if(key.indexOf("|") > -1)
|
||||
{
|
||||
var idx = key.indexOf("|");
|
||||
key = key.substr(0, idx)+" ("+key.substr(idx+1, key.length-idx)+")";
|
||||
}
|
||||
labels.push(key);
|
||||
}
|
||||
// Get colors from AdminLTE
|
||||
var colors = [];
|
||||
$.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); });
|
||||
var v = [], c = [], k = [];
|
||||
|
||||
// Collect values and colors, and labels
|
||||
|
||||
forwardDestinationChart.data.datasets[0].backgroundColor = colors.shift();
|
||||
forwardDestinationChart.data.datasets[0].pointRadius = 0;
|
||||
forwardDestinationChart.data.datasets[0].label = labels.shift();
|
||||
|
||||
console.log(labels);
|
||||
for (i = 1; i < plotdata[0].length; i++)
|
||||
{
|
||||
forwardDestinationChart.data.datasets.push({data: [], backgroundColor: colors.shift(), pointRadius: 0, label: labels});
|
||||
}
|
||||
|
||||
// Add data for each dataset that is available
|
||||
console.log(timestamps);
|
||||
for (var j in timestamps)
|
||||
{
|
||||
var sum = 0.0;
|
||||
for (var i in plotdata[j])
|
||||
{
|
||||
sum += plotdata[j][i];
|
||||
}
|
||||
var dd = [];
|
||||
for (var i in plotdata[j])
|
||||
{
|
||||
var singlepoint = plotdata[j][i];
|
||||
console.log([timestamps[j],singlepoint]);
|
||||
if(singlepoint == 0)
|
||||
{
|
||||
// Don't plot this line
|
||||
singlepoint = NaN;
|
||||
}
|
||||
forwardDestinationChart.data.datasets[i].data.push(singlepoint/sum);
|
||||
}
|
||||
|
||||
var d = new Date(1000*parseInt(timestamps[j]));
|
||||
forwardDestinationChart.data.labels.push(d);
|
||||
}
|
||||
$("#forward-destinations .overlay").remove();
|
||||
forwardDestinationChart.update();
|
||||
}).done(function() {
|
||||
// Reload graph after 10 minutes
|
||||
failures = 0;
|
||||
setTimeout(updateForwardedOverTime, 600000);
|
||||
}).fail(function() {
|
||||
failures++;
|
||||
if(failures < 5)
|
||||
{
|
||||
// Try again after 1 minute only if this has not failed more
|
||||
// than five times in a row
|
||||
setTimeout(updateForwardedOverTime, 60000);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateQueryTypes() {
|
||||
$.getJSON("api.php?getQueryTypes", function(data) {
|
||||
var colors = [];
|
||||
@@ -197,47 +272,6 @@ function updateTopClientsChart() {
|
||||
});
|
||||
}
|
||||
|
||||
function updateForwardDestinations() {
|
||||
$.getJSON("api.php?getForwardDestinations", function(data) {
|
||||
var colors = [];
|
||||
// Get colors from AdminLTE
|
||||
$.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); });
|
||||
var v = [], c = [], k = [], iter;
|
||||
// Collect values and colors, immediately push individual labels
|
||||
if(data.hasOwnProperty("forward_destinations"))
|
||||
{
|
||||
iter = data.forward_destinations;
|
||||
}
|
||||
else
|
||||
{
|
||||
iter = data;
|
||||
}
|
||||
$.each(iter, function(key , value) {
|
||||
v.push(value);
|
||||
c.push(colors.shift());
|
||||
if(key.indexOf("|") > -1)
|
||||
{
|
||||
var idx = key.indexOf("|");
|
||||
key = key.substr(0, idx)+" ("+key.substr(idx+1, key.length-idx)+")";
|
||||
}
|
||||
k.push(key);
|
||||
});
|
||||
// Build a single dataset with the data to be pushed
|
||||
var dd = {data: v, backgroundColor: c};
|
||||
// and push it at once
|
||||
forwardDestinationChart.data.datasets[0] = dd;
|
||||
forwardDestinationChart.data.labels = k;
|
||||
$("#forward-destinations .overlay").remove();
|
||||
forwardDestinationChart.update();
|
||||
forwardDestinationChart.chart.config.options.cutoutPercentage=50;
|
||||
forwardDestinationChart.update();
|
||||
// Don't use rotation animation for further updates
|
||||
forwardDestinationChart.options.animation.duration=0;
|
||||
// Update forward destinations data every 10 seconds
|
||||
setTimeout(updateForwardDestinations, 10000);
|
||||
});
|
||||
}
|
||||
|
||||
function updateTopLists() {
|
||||
$.getJSON("api.php?summaryRaw&topItems", function(data) {
|
||||
// Clear tables before filling them with data
|
||||
@@ -309,6 +343,10 @@ $(document).ready(function() {
|
||||
}
|
||||
};
|
||||
|
||||
// Pull in data via AJAX
|
||||
|
||||
updateSummaryData();
|
||||
|
||||
var ctx = document.getElementById("queryOverTimeChart").getContext("2d");
|
||||
timeLineChart = new Chart(ctx, {
|
||||
type: "line",
|
||||
@@ -400,10 +438,42 @@ $(document).ready(function() {
|
||||
|
||||
// Pull in data via AJAX
|
||||
|
||||
updateSummaryData();
|
||||
|
||||
updateQueriesOverTime();
|
||||
|
||||
var ctx = document.getElementById("forwardDestinationChart").getContext("2d");
|
||||
forwardDestinationChart = new Chart(ctx, {
|
||||
type: "line",
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{ data: [] }]
|
||||
},
|
||||
options: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: "time",
|
||||
time: {
|
||||
unit: "hour",
|
||||
displayFormats: {
|
||||
hour: "HH:mm"
|
||||
},
|
||||
tooltipFormat: "HH:mm"
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
stacked: true
|
||||
}]
|
||||
},
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
});
|
||||
|
||||
// Pull in data via AJAX
|
||||
|
||||
updateForwardedOverTime();
|
||||
|
||||
// Create / load "Query Types" only if authorized
|
||||
if(document.getElementById("queryTypeChart"))
|
||||
{
|
||||
@@ -427,29 +497,6 @@ $(document).ready(function() {
|
||||
updateQueryTypes();
|
||||
}
|
||||
|
||||
// Create / load "Forward Destinations" only if authorized
|
||||
if(document.getElementById("forwardDestinationChart"))
|
||||
{
|
||||
ctx = document.getElementById("forwardDestinationChart").getContext("2d");
|
||||
forwardDestinationChart = new Chart(ctx, {
|
||||
type: "doughnut",
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{ data: [] }]
|
||||
},
|
||||
options: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
animation: {
|
||||
duration: 2000
|
||||
},
|
||||
cutoutPercentage: 0
|
||||
}
|
||||
});
|
||||
updateForwardDestinations();
|
||||
}
|
||||
|
||||
// Create / load "Top Domains" and "Top Advertisers" only if authorized
|
||||
if(document.getElementById("domain-frequency")
|
||||
&& document.getElementById("ad-frequency"))
|
||||
|
||||
Reference in New Issue
Block a user