diff --git a/api_FTL.php b/api_FTL.php index a4fcb766..0e0a2637 100644 --- a/api_FTL.php +++ b/api_FTL.php @@ -267,5 +267,21 @@ if (isset($_GET['getForwardDestinationNames']) && $auth) $data = array_merge($data, $result); } +if (isset($_GET['overTimeDataQueryTypes']) && $auth) +{ + sendRequestFTL("QueryTypesoverTime"); + $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(); ?> diff --git a/index.php b/index.php index a40f0576..bbe0a06b 100644 --- a/index.php +++ b/index.php @@ -68,7 +68,7 @@
-

Queries over time

+

Queries over Time

@@ -92,7 +92,7 @@
-

Query Types

+

Query Types over Time

diff --git a/scripts/pi-hole/js/index.js b/scripts/pi-hole/js/index.js index d773aefc..fc408fb6 100644 --- a/scripts/pi-hole/js/index.js +++ b/scripts/pi-hole/js/index.js @@ -86,6 +86,66 @@ function updateQueriesOverTime() { }); } +function updateQueryTypesOverTime() { + $.getJSON("api.php?overTimeDataQueryTypes", function(data) { + + if("FTLnotrunning" in data) + { + return; + } + + // convert received objects to arrays + data.over_time = objectToArray(data.over_time); + var timestamps = data.over_time[0]; + var plotdata = data.over_time[1]; + // Remove possibly already existing data + queryTypeChart.data.labels = []; + queryTypeChart.data.datasets[0].data = []; + queryTypeChart.data.datasets[1].data = []; + + var colors = []; + $.each($.AdminLTE.options.colors, function(key, value) { colors.push(value); }); + queryTypeChart.data.datasets[0].backgroundColor = colors[0]; + queryTypeChart.data.datasets[1].backgroundColor = colors[1]; + + // Add data for each hour that is available + for (var j in timestamps) { + if ({}.hasOwnProperty.call(timestamps, j)) { + var d,h; + h = parseInt(timestamps[j]); + // New style: Get Unix timestamps + d = new Date(1000*h); + + var sum = plotdata[j][0] + plotdata[j][1]; + var A = 0, AAAA = 0; + if(sum > 0) + { + A = plotdata[j][0]/sum; + AAAA = plotdata[j][1]/sum; + } + + queryTypeChart.data.labels.push(d); + queryTypeChart.data.datasets[0].data.push(A); + queryTypeChart.data.datasets[1].data.push(AAAA); + } + } + $("#query-types .overlay").hide(); + queryTypeChart.update(); + }).done(function() { + // Reload graph after 10 minutes + failures = 0; + setTimeout(updateQueryTypesOverTime, 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(updateQueryTypesOverTime, 60000); + } + }); +} + function updateForwardedOverTime() { $.getJSON("api.php?overTimeDataForwards&getForwardDestinationNames", function(data) { @@ -176,48 +236,6 @@ function updateForwardedOverTime() { }); } -function updateQueryTypes() { - $.getJSON("api.php?getQueryTypes", function(data) { - - if("FTLnotrunning" in data) - { - return; - } - - 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, and labels - if(data.hasOwnProperty("querytypes")) - { - iter = data.querytypes; - } - else - { - iter = data; - } - $.each(iter, function(key , value) { - v.push(value); - c.push(colors.shift()); - k.push(key); - }); - // Build a single dataset with the data to be pushed - var dd = {data: v, backgroundColor: c}; - // and push it at once - queryTypeChart.data.datasets[0] = dd; - queryTypeChart.data.labels = k; - $("#query-types .overlay").hide(); - queryTypeChart.update(); - queryTypeChart.chart.config.options.cutoutPercentage=50; - queryTypeChart.update(); - // Don't use rotation animation for further updates - queryTypeChart.options.animation.duration=0; - // Update query types data every 10 seconds - setTimeout(updateQueryTypes, 10000); - }); -} - // Credit: http://stackoverflow.com/questions/1787322/htmlspecialchars-equivalent-in-javascript/4835406#4835406 function escapeHtml(text) { var map = { @@ -545,7 +563,10 @@ $(document).ready(function() { ticks: { mix: 0.0, max: 1.0, - beginAtZero: true + beginAtZero: true, + callback: function(value, index, values) { + return Math.round(value*100) + " %"; + } }, stacked: true }] @@ -559,27 +580,55 @@ $(document).ready(function() { updateForwardedOverTime(); // Create / load "Query Types" only if authorized - if(document.getElementById("queryTypeChart")) - { - ctx = document.getElementById("queryTypeChart").getContext("2d"); - queryTypeChart = new Chart(ctx, { - type: "doughnut", - data: { - labels: [], - datasets: [{ data: [] }] + ctx = document.getElementById("queryTypeChart").getContext("2d"); + queryTypeChart = new Chart(ctx, { + type: "line", + data: { + labels: [], + datasets: [ + { + label: "A: IPv4 queries", + pointRadius: 0, + data: [] + }, + { + label: "AAAA: IPv6 queries", + pointRadius: 0, + data: [] + } + ] + }, + options: { + scales: { + xAxes: [{ + type: "time", + time: { + unit: "hour", + displayFormats: { + hour: "HH:mm" + }, + tooltipFormat: "HH:mm" + } + }], + yAxes: [{ + ticks: { + mix: 0.0, + max: 1.0, + beginAtZero: true, + callback: function(value, index, values) { + return Math.round(value*100) + " %"; + } + }, + stacked: true + }] }, - options: { - legend: { - display: false - }, - animation: { - duration: 2000 - }, - cutoutPercentage: 0 - } - }); - updateQueryTypes(); - } + maintainAspectRatio: true + } + }); + + // Pull in data via AJAX + + updateQueryTypesOverTime(); // Create / load "Top Domains" and "Top Advertisers" only if authorized if(document.getElementById("domain-frequency")