Add points history diagram

formula10/domain/points_model.py

@@ -1,4 +1,5 @@
-from typing import Callable, Dict, List, Tuple, overload
+import json
+from typing import Any, Callable, Dict, List, Tuple, overload
 import numpy as np
 
 from formula10.domain.domain_model import Model
@@ -466,3 +467,25 @@ class PointsModel(Model):
                 return True
 
         return False
+
+    #
+    # Diagram queries
+    #
+
+    def cumulative_points_data(self) -> str:
+        data: Dict[Any, Any] = dict()
+
+        data["labels"] = [0] + [
+            race.name for race in sorted(self.all_races(), key=lambda race: race.number)
+        ]
+
+        data["datasets"] = [
+            {
+                "data": [0] + self.points_per_step_cumulative()[user.name],
+                "label": user.name,
+                "fill": False
+            }
+            for user in self.all_users()
+        ]
+
+        return json.dumps(data)

formula10/templates/base.jinja

@@ -176,8 +176,11 @@
     <link href="../static/style/bootstrap.css" rel="stylesheet">
     <script src="../static/script/bootstrap.bundle.js"></script>
 
-    <link href="../static/style/grid.css" rel="stylesheet">
+    <!-- ChartJS -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 
+    <!-- Custom -->
+    <link href="../static/style/grid.css" rel="stylesheet">
     <script defer>
         {# Initialize Bootstrap Tooltips #}
         let tooltipTriggerList = document.querySelectorAll("[data-bs-toggle='tooltip']")

formula10/templates/leaderboard.jinja

@@ -55,13 +55,43 @@
         </div>
     </div>
 
-    {#    <div class="card mt-2">#}
-    {#        <div class="card-body">#}
-    {#            <h5 class="card-title">History</h5>#}
+    <div class="card mt-2">
+        <div class="card-header">
+            History
+        </div>
 
-    {# Line chart of point history with a line per user #}
-    {#        </div>#}
-    {#    </div>#}
+        <div class="card-body">
+            <div class="chart-container" style="width: 100%; height: 40vh;">
+                <canvas id="line-chart"></canvas>
+            </div>
+
+            <script>
+                function cumulative_points(data) {
+                    return new Chart(document.getElementById("line-chart"), {
+                        type: 'line',
+                        data: data,
+                        options: {
+                            title: {
+                                display: true,
+                                text: 'History'
+                            },
+                            {#tension: 0,#}
+                            responsive: true,
+                            maintainAspectRatio: false,
+                            scales: {
+                                y: {
+                                    min: 0,
+                                    {#max: 100#}
+                                }
+                            }
+                        }
+                    });
+                }
+
+                cumulative_points({{ points.cumulative_points_data() | safe }})
+            </script>
+        </div>
+    </div>
 
     {#    <div class="card mt-2">#}
     {#        <div class="card-body">#}