259 lines
7.4 KiB
HTML
259 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<title>Shikigrid: Statistics</title>
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="/static/css/main.css">
|
|
|
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
|
|
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
|
|
</script>
|
|
|
|
<script>
|
|
// This is where most scripting will happen to get chart data and headers
|
|
// Client side will do most of the formatting of data where the server will only do updates to its data every 10 minutes, this will decrease the work of the server - this doesnt actually happen it updates each refresh
|
|
$(document).ready(function () {
|
|
let regionNames = new Intl.DisplayNames(['en'], {
|
|
type: 'region'
|
|
});
|
|
$.get(`https://grid-api.toshiki.dev/api/statistics/apsByDay?days=356`, function (data) {
|
|
const APsChart = document.getElementById('APsChart');
|
|
//FORMAT DATA
|
|
days = []
|
|
amount = []
|
|
|
|
data.forEach(element => {
|
|
days.push(element.day)
|
|
amount.push(element.reported)
|
|
});
|
|
|
|
new Chart(APsChart, {
|
|
type: 'line',
|
|
data: {
|
|
labels: days,
|
|
datasets: [{
|
|
label: '# of APs reported per day',
|
|
data: amount,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
$.get(`https://grid-api.toshiki.dev/api/statistics/messagesByDay?days=356`, function (data) {
|
|
const messagesChart = document.getElementById('messagesChart');
|
|
//FORMAT DATA
|
|
days = []
|
|
amount = []
|
|
|
|
data.forEach(element => {
|
|
days.push(element.day)
|
|
amount.push(element.messages)
|
|
});
|
|
|
|
new Chart(messagesChart, {
|
|
type: 'line',
|
|
data: {
|
|
labels: days,
|
|
datasets: [{
|
|
label: '# of messages sent per day',
|
|
data: amount,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
|
|
$.get(`https://grid-api.toshiki.dev/api/statistics/unitsByDay?days=356`, function (data) {
|
|
const unitsChart = document.getElementById('unitsChart');
|
|
//FORMAT DATA
|
|
days = []
|
|
amount = []
|
|
|
|
data.forEach(element => {
|
|
days.push(element.day)
|
|
amount.push(element.units)
|
|
});
|
|
|
|
new Chart(unitsChart, {
|
|
type: 'line',
|
|
data: {
|
|
labels: days,
|
|
datasets: [{
|
|
label: '# of units created per day',
|
|
data: amount,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
})
|
|
|
|
$.get(`https://grid-api.toshiki.dev/api/statistics/unitsByCountry`, function (data) {
|
|
const countryChart = document.getElementById('countryChart');
|
|
//FORMAT DATA
|
|
Ucountry = []
|
|
Uamount = []
|
|
|
|
data.forEach(element => {
|
|
countryS = regionNames.of(element.country);
|
|
Ucountry.push(countryS);
|
|
Uamount.push(element.units);
|
|
});
|
|
|
|
new Chart(countryChart, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: Ucountry,
|
|
datasets: [{
|
|
label: '# of units created per country',
|
|
data: Uamount,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
});
|
|
|
|
})
|
|
|
|
|
|
})
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Top navbar -->
|
|
<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Shikigrid</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/convert">Convert</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/search/">Search</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="/leaderboard">Leaderboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/statistics">Statistics</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<form id="search-form" class="form-inline" style="margin-block-end: 0em;">
|
|
<div class="input-group">
|
|
<input type="text" id="search-input" class="form-control" placeholder="Search by fingerprint...">
|
|
<button type="button" id="search-button" class="btn btn-primary">Search</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Main content container -->
|
|
<div class="container">
|
|
<!-- First row, just a warning/heads-up -->
|
|
<div class="row">
|
|
<div class="col">
|
|
<p class="text-danger">
|
|
At the moment this page is a work in progress. But it will start to have statics per build, versions and
|
|
plugins most used and hopefully more user suggested information.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Now the rows that contain charts, they have pretty descriptive IDs so I wont bother myself with writing them in comments aswell -->
|
|
<div class="row">
|
|
<div class="col">
|
|
<canvas id="APsChart"></canvas>
|
|
<span style="padding: 10px;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<canvas id="messagesChart"></canvas>
|
|
<span style="padding: 10px;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<canvas id="unitsChart"></canvas>
|
|
<span style="padding: 10px;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col">
|
|
<canvas id="countryChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</body>
|
|
|
|
<footer>
|
|
<script>
|
|
// Get references to the input and button elements
|
|
const searchInput = document.getElementById('search-input');
|
|
const searchButton = document.getElementById('search-button');
|
|
|
|
// Add a click event listener to the button
|
|
searchButton.addEventListener('click', function () {
|
|
// Get the text from the input
|
|
const searchText = searchInput.value.trim();
|
|
|
|
// Check if the input is not empty
|
|
if (searchText) {
|
|
// Redirect to /search/ with the search query appended
|
|
window.location.href = `/search/${encodeURIComponent(searchText)}`;
|
|
}
|
|
});
|
|
</script>
|
|
</footer>
|
|
|
|
</html> |