implement basic chart

.gitignore

@@ -10,3 +10,4 @@ __pychache__/
 *.pyc
 build/
 configparse_wrapper/
+static/bootstrap/

database.py

@@ -59,15 +59,15 @@ class DatabaseConnection:
         '''Get a player by his id'''
 
         cursor = self.connPlayers.cursor()
-        cursor.execute("SELECT * FROM players where playerId = ?", (playerId,))
+        cursor.execute("SELECT * FROM players where id = ?", (playerId,))
         row = cursor.fetchone()
 
         if(row):
-            playerInLeaderboard = player.PlayerInLeaderboard(playerRow)
+            playerInLeaderboard = player.PlayerInLeaderboard(row)
         else:
             playerInLeaderboard = None
 
-        return row
+        return playerInLeaderboard
 
     def getRankRange(self, start, end):
         '''Get a range of players by rank'''
@@ -106,8 +106,8 @@ class DatabaseConnection:
         '''Calculate player rank - a player rank may change rapidly and 
             can't and shouldn't be used to identify a player'''
     
-        cursor = connPlayers.cursor()
+        cursor = self.connPlayers.cursor()
         cursor.execute("SELECT COUNT(*) from players where (mu-2*sigma) > (?-2*?);",
-                            (playerInLeaderboard.mu, playerInLeaderboard.sigma))
+                            (player.mu, player.sigma))
         rank = cursor.fetchone()[0]
         return rank

server.py

@@ -2,6 +2,7 @@
 import flask
 import requests
 import argparse
+import datetime
 import flask_caching as fcache
 import json
 import os
@@ -19,26 +20,58 @@ cache.init_app(app)
 
 SEGMENT=100
 
-@app.route('/playerdata')
-def playerInfo():
-    '''API-Endpoint for Canvas Query'''
 
-    playerId = flask.request.args.get("id")
 
-    db = DatabaseConnection(app.config["DB_PATH"])
-    data = db.getHistoricalForPlayerId(playerId)
-
-    return json.dumps(data)
+def prettifyMinMaxY(computedMin, computedMax):
+    if computedMax > 0 and computedMin > 0:
+        return (0, 4000)
+    else:
+        return (computedMin - 100, 4000)
 
 @app.route("/player")
 def player():
     '''Show Info about Player'''
 
+    playerId = flask.request.args.get("id")
+    if(not playerId):
+        return ("", 404)
+
     db = DatabaseConnection(app.config["DB_PATH"])
     player = db.getPlayerById(playerId)
-    player.rank = db.getPlayerRank(player)
 
-    return flask.render_template("player.html", player=player)
+    if(not player):
+        return ("", 404)
+
+    player.rank = db.getPlayerRank(player)
+    histData = db.getHistoricalForPlayerId(playerId)
+
+    csv_month_year = []
+    csv_ratings = []
+
+    minRating = 3000
+    maxRating = 0
+
+    if histData:
+        datapoints = histData[playerId]
+        if datapoints:
+            for dpk in datapoints.keys():
+                
+                ratingString = str(int(datapoints[dpk]["mu"]) - 2*int(datapoints[dpk]["sigma"]))
+                ratingAmored = '"' + ratingString + '"'
+                csv_ratings += [ratingAmored]
+                t = datetime.datetime.fromtimestamp(int(float(dpk)))
+                tString = t.strftime("%m %Y")
+                tStringAmored = '"' + tString + '"'
+                csv_month_year += [tStringAmored]
+
+                minRating = min(minRating, int(ratingString))
+                maxRating = max(maxRating, int(ratingString))
+
+    yMin, yMax = prettifyMinMaxY(minRating, maxRating)
+
+    return flask.render_template("player.html", player=player, CSV_RATINGS=",".join(csv_ratings), 
+                                    CSV_MONTH_YEAR_OF_RATINGS=",".join(csv_month_year),
+                                    Y_MIN=yMin, Y_MAX=yMax)
 
 @app.route('/leaderboard')
 @app.route('/')

templates/footer.html

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

templates/player.html

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