Display multiple charts per row, reduce overall chart size

WebHostLib/static/styles/stats.css

@@ -0,0 +1,15 @@
+#charts-wrapper{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.chart-container{
+    display: flex;
+    flex-direction: column;
+    width: calc(50% - 15px);
+    min-width: 400px;
+    margin-bottom: 30px;
+}
+

WebHostLib/stats.py

@@ -29,8 +29,8 @@ def get_db_data():
 @app.route('/stats')
 @cache.memoize(timeout=60*60)  # regen once per hour should be plenty
 def stats():
-    plot = figure(title="Games played per day", x_axis_type='datetime', x_axis_label="Date", y_axis_label="Played",
-                  sizing_mode="scale_both")
+    plot = figure(title="Games Played Per Day", x_axis_type='datetime', x_axis_label="Date",
+                  y_axis_label="Games Played", sizing_mode="scale_both", width=500, height=500)
 
     total_games, games_played = get_db_data()
     days = sorted(games_played)
@@ -45,9 +45,9 @@ def stats():
                   occurences, legend_label=game, line_width=2, color=next(cyc_palette))
 
     total = sum(total_games.values())
-    pie = figure(plot_height=350, title=f"Games played in the last 30 days. (Total: {total})", toolbar_location=None,
+    pie = figure(plot_height=350, title=f"Games Played in the Last 30 Days (Total: {total})", toolbar_location=None,
                  tools="hover", tooltips=[("Game:", "@games"), ("Played:", "@count")],
-                 sizing_mode="scale_both")
+                 sizing_mode="scale_both", width=500, height=500)
     pie.axis.visible = False
 
     data = {
@@ -73,4 +73,4 @@ def stats():
 
     script, charts = components((plot, pie))
     return render_template("stats.html", js_resources=INLINE.render_js(), css_resources=INLINE.render_css(),
-                           chart_data=script, charts=charts)
+                           chart_data=script, charts=charts, chart_count=len(charts))

WebHostLib/templates/stats.html

@@ -1,8 +1,9 @@
 {% extends 'pageWrapper.html' %}
 
 {% block head %}
-    <title>Statistics</title>
+    <title>Archipelago Game Statistics</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/markdown.css") }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename="styles/stats.css") }}" />
     {{ css_resources|indent(4)|safe }}
     {{ js_resources|indent(4)|safe }}
     {{ chart_data|indent(4)|safe }}
@@ -11,11 +12,17 @@
 {% block body %}
     {% include 'header/grassFlowersHeader.html' %}
     <div id="stats" class="markdown">
-        <h1>Stats</h1>
-        {% for chart in charts %}
-            {{ chart|indent(12)|safe }}
+        <h1>Archipelago Game Statistics</h1>
+        <h5>
+            The data on this page is updated hourly.
+        </h5>
+
+        <div id="charts-wrapper">
+        {% for index in range(chart_count) %}
+            <div class="chart-container">
+                {{ charts[index]|indent(12)|safe }}
+            </div>
         {% endfor %}
-
-
+        </div>
     </div>
 {% endblock %}