sigmasternchen/mobmash.click
1
0
Fork 0
mirror of https://github.com/sigmasternchen/mobmash.click synced 2025-03-15 08:09:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add trend graphs to result page

Browse source
This commit is contained in:
overflowerror 2024-08-03 20:24:09 +02:00
parent a4c2c3876b
commit 7c588b97ef
8 changed files with 87 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
html/results/index.php
View file

@ -4,9 +4,10 @@ require_once __DIR__ . '/../../core.php';
require_once __DIR__ . '/../../lib/rating.php';
$mobs = getMobsWithMetaData();
$trends = getRatingTrends();
$title = "MobMash - Results";
$content = function () use ($mobs) {
$content = function () use ($mobs, $trends) {
require __DIR__ . '/../../view/pages/results.php';
};

4
html/styles/main.css
View file

@ -104,6 +104,6 @@ h1 {
margin-left: 2.5vw;
}
.results-list img {
max-height: 25px;
.results-list img, .results-list canvas {
height: 100px;
}

23
lib/rating.php
View file

@ -53,3 +53,26 @@ function getMobsWithMetaData($orderBy = "rating", $direction = "DESC"): array {
$query->execute();
return $query->fetchAll(PDO::FETCH_ASSOC);
}
function getRatingTrends(): array {
global $pdo;
$query = $pdo->prepare(<<<EOF
SELECT * FROM mm_rating_trends
ORDER BY date ASC;
EOF
);
$query->execute();
$results = $query->fetchAll(PDO::FETCH_ASSOC);
$trends = [];
foreach ($results as $result) {
$trendsForMob = [];
if (isset($trends[$result['mob']])) {
$trendsForMob = $trends[$result['mob']];
}
$trendsForMob[] = $result;
$trends[$result['mob']] = $trendsForMob;
}
return $trends;
}

3
resources/js/index.js
View file

@ -2,3 +2,6 @@ import './htmx';
import './img-preload.ext';
import './spinner';
import {Chart} from 'chart.js/auto';
window.Chart = Chart;

17
resources/js/package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "0.0.1",
"license": "MIT",
"dependencies": {
"chart.js": "^4.4.3",
"htmx.org": "^2.0.1"
},
"devDependencies": {
@ -399,6 +400,22 @@
"node": ">=18"
}
},
"node_modules/@kurkle/color": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
},
"node_modules/chart.js": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.3.tgz",
"integrity": "sha512-qK1gkGSRYcJzqrrzdR6a+I0vQ4/R+SoODXyAjscQ/4mzuNzySaMCd+hyVxitSY1+L2fjPD1Gbn+ibNqRmwQeLw==",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/esbuild": {
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.23.0.tgz",

1
resources/js/package.json
View file

@ -10,6 +10,7 @@
"author": "",
"license": "MIT",
"dependencies": {
"chart.js": "^4.4.3",
"htmx.org": "^2.0.1"
},
"devDependencies": {

2
resources/js/spinner.js
View file

@ -24,7 +24,7 @@ window.stopSpinner = () => {
window.addEventListener("load", () => {
document.querySelector(".middle .spinner img")
.addEventListener("animationend", () => {
?.addEventListener("animationend", () => {
endAnimation();
if (spinnerActive) {
triggerAnimation();

36
view/fragments/mobListItem.php
View file

@ -1,5 +1,6 @@
<?php
$mob ??= [];
$trends ??= [];
?>
<tr>
<td>
@ -23,4 +24,39 @@
<td>
<?= $mob["losses"] ?>
</td>
<td>
<canvas id="trend-<?= $mob["id"] ?>"></canvas>
<script>
(function() {
const dates = JSON.parse('<?=
json_encode(array_map(fn($datapoint) => $datapoint["date"], $trends[$mob["id"]]))
?>');
const ratings = JSON.parse('<?=
json_encode(array_map(fn($datapoint) => doubleval($datapoint["rating"]), $trends[$mob["id"]]))
?>');
new Chart("trend-<?= $mob["id"] ?>", {
type: "line",
data: {
labels: dates,
datasets: [
{
fill: false,
data: ratings,
}
]
},
options: {
plugins: {
legend: {
display: false,
},
},
aspectRatio: 5,
animation: false,
}
});
})();
</script>
<noscript>Trend graphs need JavaScript, unfortunately. : (</noscript>
</td>
</tr>