Better analytics layout

master
Skylar Ittner 6 years ago
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> </div>
</div>
<!-- Visits Over Time --> <!-- Visits Over Time -->
<div class="card mt-4"> <div class="card mb-4">
<div class="card-body"> <div class="card-body">
<h4 class="card-title"><?php lang("visits over time"); ?></h4> <h4 class="card-title"><?php lang("visits over time"); ?></h4>
<?php <?php
$format = "Y-m-00 00:00:00"; $format = "Y-m-00 00:00:00";
$max = $records[0]; $max = $records[0];
$min = $records[count($records) - 1]; $min = $records[count($records) - 1];
$diff = strtotime($max['time']) - strtotime($min['time']); $diff = strtotime($max['time']) - strtotime($min['time']);
if ($diff < 60 * 60) { // 1 hour if ($diff < 60 * 60) { // 1 hour
$format = "Y-m-d H:i:00"; $format = "Y-m-d H:i:00";
} else if ($diff < 60 * 60 * 24 * 3) { // 3 days } else if ($diff < 60 * 60 * 24 * 3) { // 3 days
$format = "Y-m-d H:00:00"; $format = "Y-m-d H:00:00";
} else if ($diff < 60 * 60 * 24 * 60) { // 30 days } else if ($diff < 60 * 60 * 24 * 60) { // 30 days
$format = "Y-m-d 00:00:00"; $format = "Y-m-d 00:00:00";
} }
$counted = []; $counted = [];
foreach ($records as $r) { foreach ($records as $r) {
$rf = date($format, strtotime($r['time'])); $rf = date($format, strtotime($r['time']));
if (array_key_exists($rf, $counted)) { if (array_key_exists($rf, $counted)) {
$counted[$rf] ++; $counted[$rf] ++;
} else { } else {
$counted[$rf] = 1; $counted[$rf] = 1;
}
} }
?> }
?>
<script nonce="<?php echo $SECURE_NONCE; ?>"> <script nonce="<?php echo $SECURE_NONCE; ?>">
var visitsOverTimeData = [ var visitsOverTimeData = [
<?php foreach ($counted as $d => $c) { ?> <?php foreach ($counted as $d => $c) { ?>
{ {
x: "<?php echo $d; ?>", x: "<?php echo $d; ?>",
y: <?php echo $c; ?> y: <?php echo $c; ?>
}, },
<?php } ?> <?php } ?>
]; ];
</script> </script>
<div class="w-100 position-relative"> <div class="w-100 position-relative">
<canvas id="visitsOverTime"></canvas> <canvas id="visitsOverTime"></canvas>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- Recent Actions --> <!-- 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("recent actions"); ?></h4> <?php
</div> require_once __DIR__ . "/../lib/countries_2_3.php";
<div class="list-group"> $countries = [];
<?php $states = [];
$max = 10; foreach ($records as $r) {
$i = 0; if (array_key_exists($COUNTRY_CODES[$r['countrycode']], $countries)) {
foreach ($records as $r) { $countries[$COUNTRY_CODES[$r['countrycode']]] ++;
$i++; } else {
if ($i > $max) { $countries[$COUNTRY_CODES[$r['countrycode']]] = 1;
break; }
if ($r['countrycode'] === "US") {
if (array_key_exists($r['regioncode'], $states)) {
$states[$r['regioncode']] ++;
} else {
$states[$r['regioncode']] = 1;
} }
?>
<div class="list-group-item">
<div>
<div><i class="fas fa-user fa-fw"></i> <?php echo substr($r["uuid"], 0, 8); ?></div>
</div>
<div class="row justify-content-between">
<div class="col-12 col-sm-6 d-flex flex-column">
<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> $countrymapdata = [];
foreach ($countries as $id => $count) {
$countrymapdata[] = [$id, $count];
}
$statemapdata = [];
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>
</div> </div>
<!-- Visitor Map --> <!-- Recent Actions -->
<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("recent actions"); ?></h4>
<h4 class="card-title"><?php lang("visitor map"); ?></h4> </div>
<?php <div class="list-group list-group-scrolly">
require_once __DIR__ . "/../lib/countries_2_3.php"; <?php
$countries = []; $max = 20;
$states = []; $i = 0;
foreach ($records as $r) { foreach ($records as $r) {
if (array_key_exists($COUNTRY_CODES[$r['countrycode']], $countries)) { $i++;
$countries[$COUNTRY_CODES[$r['countrycode']]] ++; if ($i > $max) {
} else { break;
$countries[$COUNTRY_CODES[$r['countrycode']]] = 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[] = [$id, $count];
}
$statemapdata = [];
foreach ($states as $id => $count) {
$statemapdata[] = [$id, $count];
} }
?> ?>
<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>

@ -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;
}

@ -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…
Cancel
Save