Add points history diagram

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">#}