Better analytics layout
This commit is contained in:
parent
792173c904
commit
a1791db4db
@ -40,7 +40,9 @@ define("PAGES", [
|
|||||||
"icon" => "fas fa-chart-bar",
|
"icon" => "fas fa-chart-bar",
|
||||||
"styles" => [
|
"styles" => [
|
||||||
"static/css/tempusdominus-bootstrap-4.min.css",
|
"static/css/tempusdominus-bootstrap-4.min.css",
|
||||||
"static/css/vertline.css"
|
"static/css/vertline.css",
|
||||||
|
"static/css/sane_columns.css",
|
||||||
|
"static/css/analy_reports.css"
|
||||||
],
|
],
|
||||||
"scripts" => [
|
"scripts" => [
|
||||||
"static/js/moment.min.js",
|
"static/js/moment.min.js",
|
||||||
|
|||||||
@ -98,157 +98,151 @@ $records = $database->select("analytics", [
|
|||||||
<?php
|
<?php
|
||||||
if (count($records) > 0) {
|
if (count($records) > 0) {
|
||||||
?>
|
?>
|
||||||
<div class="row mt-3">
|
<div class="card-columns mt-4">
|
||||||
<div class="col-12 col-sm-6 col-md-6 col-lg-4 mb-4">
|
<!-- Overview -->
|
||||||
<!-- Overview -->
|
<div class="card mb-4">
|
||||||
<div class="card">
|
<div class="card-body">
|
||||||
<div class="card-body">
|
<h4 class="card-title"><?php lang("overview"); ?></h4>
|
||||||
<h4 class="card-title"><?php lang("overview"); ?></h4>
|
<?php
|
||||||
<?php
|
$uuids = [];
|
||||||
$uuids = [];
|
foreach ($records as $r) {
|
||||||
foreach ($records as $r) {
|
if (!in_array($r["uuid"], $uuids)) {
|
||||||
if (!in_array($r["uuid"], $uuids)) {
|
$uuids[] = $r["uuid"];
|
||||||
$uuids[] = $r["uuid"];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
$visits = count($uuids);
|
}
|
||||||
$views = count($records);
|
$visits = count($uuids);
|
||||||
$ratio = round($views / $visits, 1);
|
$views = count($records);
|
||||||
?>
|
$ratio = round($views / $visits, 1);
|
||||||
<h5>
|
?>
|
||||||
<i class="fas fa-users fa-fw"></i> <?php echo $visits; ?> <?php lang("visits") ?> <br />
|
<h5>
|
||||||
<i class="fas fa-eye fa-fw"></i> <?php echo $views; ?> <?php lang("page views") ?> <br />
|
<i class="fas fa-users fa-fw"></i> <?php echo $visits; ?> <?php lang("visits") ?> <br />
|
||||||
<i class="fas fa-percent fa-fw"></i> <?php echo $ratio; ?> <?php lang("views per visit") ?>
|
<i class="fas fa-eye fa-fw"></i> <?php echo $views; ?> <?php lang("page views") ?> <br />
|
||||||
</h5>
|
<i class="fas fa-percent fa-fw"></i> <?php echo $ratio; ?> <?php lang("views per visit") ?>
|
||||||
</div>
|
</h5>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Visits Over Time -->
|
|
||||||
<div class="card mt-4">
|
|
||||||
<div class="card-body">
|
|
||||||
<h4 class="card-title"><?php lang("visits over time"); ?></h4>
|
|
||||||
<?php
|
|
||||||
$format = "Y-m-00 00:00:00";
|
|
||||||
$max = $records[0];
|
|
||||||
$min = $records[count($records) - 1];
|
|
||||||
$diff = strtotime($max['time']) - strtotime($min['time']);
|
|
||||||
if ($diff < 60 * 60) { // 1 hour
|
|
||||||
$format = "Y-m-d H:i:00";
|
|
||||||
} else if ($diff < 60 * 60 * 24 * 3) { // 3 days
|
|
||||||
$format = "Y-m-d H:00:00";
|
|
||||||
} else if ($diff < 60 * 60 * 24 * 60) { // 30 days
|
|
||||||
$format = "Y-m-d 00:00:00";
|
|
||||||
}
|
|
||||||
|
|
||||||
$counted = [];
|
|
||||||
foreach ($records as $r) {
|
|
||||||
$rf = date($format, strtotime($r['time']));
|
|
||||||
if (array_key_exists($rf, $counted)) {
|
|
||||||
$counted[$rf] ++;
|
|
||||||
} else {
|
|
||||||
$counted[$rf] = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
<script nonce="<?php echo $SECURE_NONCE; ?>">
|
|
||||||
var visitsOverTimeData = [
|
|
||||||
<?php foreach ($counted as $d => $c) { ?>
|
|
||||||
{
|
|
||||||
x: "<?php echo $d; ?>",
|
|
||||||
y: <?php echo $c; ?>
|
|
||||||
},
|
|
||||||
<?php } ?>
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
<div class="w-100 position-relative">
|
|
||||||
<canvas id="visitsOverTime"></canvas>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Recent Actions -->
|
<!-- Visits Over Time -->
|
||||||
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
|
<div class="card mb-4">
|
||||||
<div class="card">
|
<div class="card-body">
|
||||||
<div class="card-body">
|
<h4 class="card-title"><?php lang("visits over time"); ?></h4>
|
||||||
<h4 class="card-title"><?php lang("recent actions"); ?></h4>
|
<?php
|
||||||
</div>
|
$format = "Y-m-00 00:00:00";
|
||||||
<div class="list-group">
|
$max = $records[0];
|
||||||
<?php
|
$min = $records[count($records) - 1];
|
||||||
$max = 10;
|
$diff = strtotime($max['time']) - strtotime($min['time']);
|
||||||
$i = 0;
|
if ($diff < 60 * 60) { // 1 hour
|
||||||
foreach ($records as $r) {
|
$format = "Y-m-d H:i:00";
|
||||||
$i++;
|
} else if ($diff < 60 * 60 * 24 * 3) { // 3 days
|
||||||
if ($i > $max) {
|
$format = "Y-m-d H:00:00";
|
||||||
break;
|
} else if ($diff < 60 * 60 * 24 * 60) { // 30 days
|
||||||
}
|
$format = "Y-m-d 00:00:00";
|
||||||
?>
|
}
|
||||||
<div class="list-group-item">
|
|
||||||
<div>
|
$counted = [];
|
||||||
<div><i class="fas fa-user fa-fw"></i> <?php echo substr($r["uuid"], 0, 8); ?></div>
|
foreach ($records as $r) {
|
||||||
</div>
|
$rf = date($format, strtotime($r['time']));
|
||||||
<div class="row justify-content-between">
|
if (array_key_exists($rf, $counted)) {
|
||||||
<div class="col-12 col-sm-6 d-flex flex-column">
|
$counted[$rf] ++;
|
||||||
<span><i class="fas fa-clock fa-fw"></i> <?php echo date("g:i A", strtotime($r["time"])); ?></span>
|
} else {
|
||||||
<span><i class="fas fa-file fa-fw"></i> <?php echo $r["pagetitle"]; ?></span>
|
$counted[$rf] = 1;
|
||||||
</div>
|
|
||||||
<div class="col-12 col-sm-6 d-flex flex-column">
|
|
||||||
<span><i class="fas fa-calendar fa-fw"></i> <?php echo date("M j Y", strtotime($r["time"])); ?></span>
|
|
||||||
<span><i class="fas fa-sitemap fa-fw"></i> <?php echo $r["sitename"]; ?></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div><i class="fas fa-globe fa-fw"></i> <?php echo $r["country"]; ?></div>
|
|
||||||
<div><i class="fas fa-map-marker fa-fw"></i> <?php echo $r["city"] . ", " . $r["region"]; ?></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<?php
|
|
||||||
}
|
}
|
||||||
?>
|
}
|
||||||
|
?>
|
||||||
|
|
||||||
|
<script nonce="<?php echo $SECURE_NONCE; ?>">
|
||||||
|
var visitsOverTimeData = [
|
||||||
|
<?php foreach ($counted as $d => $c) { ?>
|
||||||
|
{
|
||||||
|
x: "<?php echo $d; ?>",
|
||||||
|
y: <?php echo $c; ?>
|
||||||
|
},
|
||||||
|
<?php } ?>
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
<div class="w-100 position-relative">
|
||||||
|
<canvas id="visitsOverTime"></canvas>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Visitor Map -->
|
<!-- Visitor Map -->
|
||||||
<div class="col-12 col-sm-6 col-md-6 col-lg-4">
|
<div class="card mb-4">
|
||||||
<div class="card">
|
<div class="card-body">
|
||||||
<div class="card-body">
|
<h4 class="card-title"><?php lang("visitor map"); ?></h4>
|
||||||
<h4 class="card-title"><?php lang("visitor map"); ?></h4>
|
<?php
|
||||||
<?php
|
require_once __DIR__ . "/../lib/countries_2_3.php";
|
||||||
require_once __DIR__ . "/../lib/countries_2_3.php";
|
$countries = [];
|
||||||
$countries = [];
|
$states = [];
|
||||||
$states = [];
|
foreach ($records as $r) {
|
||||||
foreach ($records as $r) {
|
if (array_key_exists($COUNTRY_CODES[$r['countrycode']], $countries)) {
|
||||||
if (array_key_exists($COUNTRY_CODES[$r['countrycode']], $countries)) {
|
$countries[$COUNTRY_CODES[$r['countrycode']]] ++;
|
||||||
$countries[$COUNTRY_CODES[$r['countrycode']]] ++;
|
} else {
|
||||||
|
$countries[$COUNTRY_CODES[$r['countrycode']]] = 1;
|
||||||
|
}
|
||||||
|
if ($r['countrycode'] === "US") {
|
||||||
|
if (array_key_exists($r['regioncode'], $states)) {
|
||||||
|
$states[$r['regioncode']] ++;
|
||||||
} else {
|
} else {
|
||||||
$countries[$COUNTRY_CODES[$r['countrycode']]] = 1;
|
$states[$r['regioncode']] = 1;
|
||||||
}
|
|
||||||
if ($r['countrycode'] === "US") {
|
|
||||||
if (array_key_exists($r['regioncode'], $states)) {
|
|
||||||
$states[$r['regioncode']] ++;
|
|
||||||
} else {
|
|
||||||
$states[$r['regioncode']] = 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$countrymapdata = [];
|
}
|
||||||
foreach ($countries as $id => $count) {
|
$countrymapdata = [];
|
||||||
$countrymapdata[] = [$id, $count];
|
foreach ($countries as $id => $count) {
|
||||||
}
|
$countrymapdata[] = [$id, $count];
|
||||||
$statemapdata = [];
|
}
|
||||||
foreach ($states as $id => $count) {
|
$statemapdata = [];
|
||||||
$statemapdata[] = [$id, $count];
|
foreach ($states as $id => $count) {
|
||||||
|
$statemapdata[] = [$id, $count];
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
<script nonce="<?php echo $SECURE_NONCE; ?>">
|
||||||
|
visitorMap_Countries = <?php echo json_encode($countrymapdata); ?>;
|
||||||
|
visitorMap_States = <?php echo json_encode($statemapdata); ?>;
|
||||||
|
</script>
|
||||||
|
<div class="w-100" id="visitorMapWorld"></div>
|
||||||
|
<div class="w-100" id="visitorMapUSA"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Recent Actions -->
|
||||||
|
<div class="card mb-4">
|
||||||
|
<div class="card-body">
|
||||||
|
<h4 class="card-title"><?php lang("recent actions"); ?></h4>
|
||||||
|
</div>
|
||||||
|
<div class="list-group list-group-scrolly">
|
||||||
|
<?php
|
||||||
|
$max = 20;
|
||||||
|
$i = 0;
|
||||||
|
foreach ($records as $r) {
|
||||||
|
$i++;
|
||||||
|
if ($i > $max) {
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<script nonce="<?php echo $SECURE_NONCE; ?>">
|
<div class="list-group-item">
|
||||||
visitorMap_Countries = <?php echo json_encode($countrymapdata); ?>;
|
<div>
|
||||||
visitorMap_States = <?php echo json_encode($statemapdata); ?>;
|
<div><i class="fas fa-user fa-fw"></i> <?php echo substr($r["uuid"], 0, 8); ?></div>
|
||||||
</script>
|
</div>
|
||||||
<div class="w-100" id="visitorMapWorld"></div>
|
<div class="row justify-content-between">
|
||||||
<div class="w-100" id="visitorMapUSA"></div>
|
<div class="col-12 col-sm-6 d-flex flex-column">
|
||||||
</div>
|
<span><i class="fas fa-clock fa-fw"></i> <?php echo date("g:i A", strtotime($r["time"])); ?></span>
|
||||||
|
<span><i class="fas fa-file fa-fw"></i> <?php echo $r["pagetitle"]; ?></span>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-6 d-flex flex-column">
|
||||||
|
<span><i class="fas fa-calendar fa-fw"></i> <?php echo date("M j Y", strtotime($r["time"])); ?></span>
|
||||||
|
<span><i class="fas fa-sitemap fa-fw"></i> <?php echo $r["sitename"]; ?></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div><i class="fas fa-globe fa-fw"></i> <?php echo $r["country"]; ?></div>
|
||||||
|
<div><i class="fas fa-map-marker fa-fw"></i> <?php echo $r["city"] . ", " . $r["region"]; ?></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
?>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
11
static/css/analy_reports.css
Normal file
11
static/css/analy_reports.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
/*
|
||||||
|
This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.list-group-scrolly {
|
||||||
|
max-height: 60vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
21
static/css/sane_columns.css
Normal file
21
static/css/sane_columns.css
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
/*
|
||||||
|
This Source Code Form is subject to the terms of the Mozilla Public
|
||||||
|
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||||
|
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||||
|
*/
|
||||||
|
|
||||||
|
.card-columns {
|
||||||
|
column-count: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.card-columns {
|
||||||
|
column-count: 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 992px) {
|
||||||
|
.card-columns {
|
||||||
|
column-count: 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user