sheppy/open-web-leaderboard
1
0
Fork 0
mirror of https://github.com/FAUSheppy/open-web-leaderboard.git synced 2025-12-10 00:48:32 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

implement basic chart

Browse Source
This commit is contained in:
Yannik Schmidt
2020-09-27 04:35:29 +02:00
parent ffc8f455d9
commit 25ccb083f9
5 changed files with 130 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/footer.html Normal file
View File

@@ -0,0 +1,6 @@
<div class=footer role="contentinfo">
<a class="footerLink" href="https://blog.atlantishq.de/about">Impressum/Legal</a>
<a class="footerLink mid" href="https://blog.atlantishq.de/post/insurgency-rating-1/">
How does it work?</a>
<a class="footerLink" href="https://github.com/FAUSheppy/skillbird">Star on GitHub</a>
</div>

75
templates/player.html Normal file
View File

@@ -0,0 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Leaderboard</title>
<meta name="Description" content="Player: {{ player.name }}">
<link rel="stylesheet" type="text/css" href="/static/site.css">
<link rel="shortcut icon" href="/static/defaultFavicon.ico">
<!-- needed for @media-css mofiers -->
<meta content="width=device-width, initial-scale=1" name="viewport" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="static/bootstrap/css/mdb.min.css" rel="stylesheet">
<script src="static/bootstrap/js/jquery.js"></script>
<script src="static/bootstrap/js/popper.js"></script>
<script src="static/bootstrap/js/bootstrap.js"></script>
<script src="static/bootstrap/js/mdb.min.js"></script>
</head>
<body>
<div class=top-bar role="navigation">
<button id="button-backward" type="button" href="/" class=top-button>Back</button>
</div>
<div class=leaderboard-container role="main">
<div class="player-headline">
<h1>
{{ player.name }}
</h1>
<h3>
Rating: <i>{{ player.rating }}</i> <br>
Rank: {{ player.rank }}
</h3>
</div>
<div class="plot-container">
<canvas id="lineChart">
</canvas>
</div>
</div>
{% include 'footer.html' %}
<script defer>
var canvas = document.getElementById("lineChart").getContext('2d');
var historicalRank = new Chart(canvas, {
type: 'line',
data: {
labels: [ {{ CSV_MONTH_YEAR_OF_RATINGS | safe }} ],
datasets: [{
label: "Rating",
data: [ {{ CSV_RATINGS | safe }} ],
backgroundColor: [ 'rgba(105, 0, 132, .2)' ],
borderColor: [ 'rgba(200, 99, 132, .7)' ],
borderWidth: 2
}],
options: {
scales: {
yAxes: [{
ticks : {
suggestedMin : {{ Y_MIN }},
suggestedMax : {{ Y_MAX }},
min : {{ Y_MIN }},
max : {{ Y_MAX }}
}
}]
},
responsive: true
}
}
});
</script>
</body>
</html>