Add score-graph on player page

app/routers/score.py

@@ -41,4 +41,9 @@ def get_scores_for_deck_by_date(deck_id: int, db=Depends(get_db)):
     query = db.query(sub_query).filter(sub_query.c.row_number == 1)
     results = query.all()
 
-    return list(map(lambda x: x._asdict(), results))
+    return list(
+        map(
+            lambda x: {k: v for k, v in x._asdict().items() if k not in ["row_number"]},
+            results,
+        )
+    )

app/static/css/base.css

@@ -153,4 +153,13 @@ footer #about {
 footer #credits {
     float: right;
     margin-right: 10px;
+}
+
+/*
+ * Clearfix
+ */
+.clearfix::after {
+    content: "";
+    clear: both;
+    display: table;
 }

app/static/js/player_detail.js

@@ -0,0 +1,41 @@
+$(document).ready(function() {
+    (async () => await updateGraph())()
+});
+
+async function updateGraph() {
+    deck_info = $('ul a').map(function(idx, a) {
+        return {
+            "name": $(a).html(),
+            "id": parseInt($(a).attr('href').split('/')[2])
+        }
+    })
+
+    deck_info_and_scores = deck_info.map(function(idx, info) {
+        return fetch('/api/score/' + info['id'] + '/by_date').then(result => result.json()).then(result => {return {
+            "label": info['name'],
+            "data": result
+        }})
+    })
+
+    resolved_data = Promise.all(deck_info_and_scores)
+    window.chart = new Chart(
+        document.getElementById('graph_canvas'),
+        {
+            type: 'line',
+            data: {
+                datasets: await resolved_data
+            },
+            options: {
+                scales: {
+                    x: {
+                        type: 'time'
+                    }
+                },
+                parsing: {
+                    xAxisKey: 'date',
+                    yAxisKey: 'score'
+                }
+            }
+        }
+    )
+}

app/templates/players/detail.html

@@ -4,17 +4,30 @@
 
 {% block head %}
 {{ super() }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdn.jsdelivr.net/npm/moment@2.27.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@0.1.1"></script>
+<script src="/static/js/player_detail.js"></script>
+<link rel="stylesheet" href="/static/css/player/detail.css"/>
 {% endblock %}
 
 {% block content %}
 <h2>This is the page for player {{ player.name }} who has id {{ player.id }}</h2>
 
 {% if decks %}
-<h2>Decks</h2>
-<ul>
-{% for deck in decks %}
-<li><a href="/deck/{{ deck.id }}">{{ deck.name }}</a></li>
-{% endfor %}
-</ul>
+<div class="clearfix">
+<div style="float:left;">
+    <h2>Decks</h2>
+    <ul>
+    {% for deck in decks %}
+    <li><a href="/deck/{{ deck.id }}">{{ deck.name }}</a></li>
+    {% endfor %}
+    </ul>
+</div>
+<div style="float:left;width:80%;margin-left:10px;">
+    <canvas id="graph_canvas"></canvas>
+</div>
+</div>
+
 {% endif %}
 {% endblock %}