add variant elo progression charts

src/render_site.py

@@ -529,6 +529,42 @@ def get_player_list() -> List[Dict]:
     return res
 
 
+@dataclass
+class VariantELORow:
+    value_after: float
+    datetime_finished: datetime.datetime
+
+
+def get_variant_rating_progression():
+    cur = conn_manager.get_new_cursor()
+    cur.execute(
+        "SELECT "
+        "  variants.rating_type,"
+        "  variants.name,"
+        "  variant_ratings.num_players,"
+        "  variant_ratings.value_after,"
+        "  games.datetime_finished "
+        "FROM variants "
+        "INNER JOIN variant_ratings"
+        "  ON variants.id = variant_ratings.variant_id "
+        "INNER JOIN games "
+        "  ON variant_ratings.league_id = games.league_id"
+    )
+    ret = {}
+    for (rating_type, name, num_players, value_after, datetime_finished) in cur.fetchall():
+        if rating_type not in ret.keys():
+            ret[rating_type] = {}
+        if name not in ret[rating_type].keys():
+            ret[rating_type][name] = {}
+        if num_players not in ret[rating_type][name].keys():
+            ret[rating_type][name][num_players] = []
+        ret[rating_type][name][num_players].append({
+            "value_after": value_after,
+            "datetime_finished": datetime_finished.astimezone(datetime.timezone.utc).isoformat()
+        })
+    return ret
+
+
 def get_total_games():
     cur = conn_manager.get_new_cursor()
     cur.execute("SELECT COUNT(league_id) FROM games")
@@ -590,6 +626,8 @@ def render_main_site(env: jinja2.Environment, out_dir: Path):
 
     games = get_games()
 
+    variant_ratings = get_variant_rating_progression()
+
     template = env.get_template('main.html')
     rendered_html = template.render(
         leaders=leaders,
@@ -601,7 +639,8 @@ def render_main_site(env: jinja2.Environment, out_dir: Path):
         unique_variants=build_unique_variants(variant_rows),
         players=players,
         games=[dataclasses.asdict(game) for game in games],
-        variant_stats=var_stats
+        variant_stats=var_stats,
+        variant_ratings=variant_ratings
     )
 
     output_file = out_dir / 'index.html'

templates/layout.html

@@ -20,6 +20,11 @@
     <!-- Luxon JS dependency. Needed for some tabulator formatters. -->
     <script type="text/javascript" src="/js/luxon.min.js"></script>
 
+    <!-- ChartJS dependency -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>
+
+
     {% block navbar %}{% endblock %}
     {% block content %}{% endblock %}
 

templates/main.html

@@ -124,6 +124,9 @@
             <h3>List of played games</h3>
             <div id="table-{{rating_type}}"></div>
 
+            <h3>ELO progression</h3>
+            <canvas id="chart-{{rating_type}}"></canvas>
+
         </div>
     </div>
     {% endfor %}
@@ -189,4 +192,42 @@
     {% endfor %}
 </script>
 
+<!-- Tables for rating progression-->
+<script>
+    let chart_data = {{ variant_ratings }};
+
+    {% for rating_type, r_data in variant_ratings.items() %}
+        let datasets_{{rating_type}} = [];
+        {% for name, n_data in r_data.items() %}
+            {% for num_players, data in n_data.items() %}
+                datasets_{{rating_type}}.push({
+                    data: chart_data[{{rating_type}}]["{{name}}"][{{num_players}}],
+                    label: "{{name}} - {{num_players}} players"
+                });
+            {% endfor %}
+        {% endfor %}
+
+        const config_{{rating_type}} = {
+            type: 'line',
+            data: {
+                    datasets: datasets_{{rating_type}}
+            },
+            options: {
+                parsing: {
+                    xAxisKey: "datetime_finished",
+                    yAxisKey: "value_after"
+                },
+                scales: {
+                    x: {
+                        type: 'time'
+                    }
+                }
+            }
+        };
+        const ctx_{{rating_type}} = document.getElementById('chart-{{rating_type}}');
+        new Chart(ctx_{{rating_type}}, config_{{rating_type}});
+    {% endfor %}
+
+</script>
+
 {% endblock %}

templates/variant.html

@@ -44,6 +44,8 @@
             {% else %}
             <div id="table-overview"></div>
             {% endif %}
+            <h3>Chart</h3>
+            <canvas id="chart"></canvas>
         </div>
     </div>