Files
web/db_graph.php
DL6ER 40ae7fb0ca Add long-term graph page (#542)
* Add api_db.php?getGraphData

Signed-off-by: DL6ER <dl6er@dl6er.de>

* Add new DB Graph page

Signed-off-by: DL6ER <dl6er@dl6er.de>

* Adjust x-axis format

Signed-off-by: DL6ER <dl6er@dl6er.de>

* Tweaks to long term stats (#543)

* add maxDate to Datepicker

* remove `GO` Button from datepicker input, instead hook into the apply event to update the graphs/charts when the date range is selected

* :codacy:

Signed-off-by: DL6ER <dl6er@dl6er.de>

* Fix comment + another :codacy:

* Remove duplicated code

* Add click callback to DB graph that sends the user to the DB query log page. This required some re-write of the DB queries page.

* Remove uneeded global variable

* Remove minDate and MaxDate as it is causing issues on fresh installs

* Oh :codacy: ...
2017-07-08 23:42:21 +02:00

68 lines
1.9 KiB
PHP

<?php /*
* Pi-hole: A black hole for Internet advertisements
* (c) 2017 Pi-hole, LLC (https://pi-hole.net)
* Network-wide ad blocking via your own hardware.
*
* This file is copyright under the latest version of the EUPL.
* Please see LICENSE file for your rights under this license. */
require "scripts/pi-hole/php/header.php";
// Generate CSRF token
if(empty($_SESSION['token'])) {
$_SESSION['token'] = base64_encode(openssl_random_pseudo_bytes(32));
}
$token = $_SESSION['token'];
?>
<!-- Send PHP info to JS -->
<div id="token" hidden><?php echo $token ?></div>
<!-- Title -->
<div class="page-header">
<h1>Compute graphical statistics from the Pi-hole query database</h1>
</div>
<div class="row">
<div class="col-md-12">
<!-- Date Input -->
<div class="form-group">
<label>Date and time range:</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input type="text" class="form-control pull-right" id="querytime">
</div>
<!-- /.input group -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box" id="queries-over-time">
<div class="box-header with-border">
<h3 class="box-title">Queries over the selected time period</h3>
</div>
<div class="box-body">
<div class="chart">
<canvas id="queryOverTimeChart" width="800" height="250"></canvas>
</div>
</div>
<div class="overlay" hidden="true">
<i class="fa fa-refresh fa-spin"></i>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<?php
require "scripts/pi-hole/php/footer.php";
?>
<script src="scripts/vendor/moment.min.js"></script>
<script src="scripts/vendor/daterangepicker.js"></script>
<script src="scripts/pi-hole/js/db_graph.js"></script>