Switch to server side rendered SVG based graph library

app.py

@@ -3,12 +3,13 @@ import json
 from urllib import response
 from dateutil.relativedelta import relativedelta
 import os
-from flask import Flask, render_template, redirect, request, url_for, jsonify, Response
+from flask import Flask, render_template
 import jinja_partials
 from flask_htmx import HTMX
 import minify_html
 from urllib.parse import urlparse
 from flask_socketio import SocketIO
+import pygal
 
 from db import DataBase
 
@@ -54,13 +55,12 @@ def overview():
     cadences = db.get_all_cadences()
     last_cadence = cadences[-1]['rpm']
 
-    plot = {
-        "x": [c['logged_at'] for c in cadences],
-        "y": [c['rpm'] for c in cadences],
-        "type": 'scatter'
-    }
+    graph = pygal.Line(show_y_guides=False, show_legend=False)
+    graph.x_labels = [c['logged_at'] for c in cadences]
+    graph.add('RPM',  [c['rpm'] for c in cadences])
+    graph_data = graph.render_data_uri()
 
-    return render_template('overview.html', last_cadence=last_cadence, plot=plot, cadences=cadences)
+    return render_template('overview.html', last_cadence=last_cadence, cadences=cadences, graph_data=graph_data)
 
 
 if __name__ == '__main__':

requirements.txt

@@ -10,4 +10,5 @@ bidict==0.22.1
 flask-socketio==5.3.2
 python-engineio==4.3.4
 python-socketio==5.7.2
-eventlet==0.30.2
+eventlet==0.30.2
+pygal==3.0.0

templates/base.html

@@ -7,7 +7,6 @@
 
     <title>Cardio</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
     <script src="https://unpkg.com/htmx.org"></script>
     <script src="https://unpkg.com/hyperscript.org"></script>
 </head>

templates/overview.html

@@ -2,16 +2,7 @@
     class="mb-4 text-4xl font-extrabold leading-none tracking-tight text-gray-900 md:text-5xl lg:text-6xl dark:text-white text-center">
     {{last_cadence}} rpm</h1>
 
-<div id="overview-plot" class="w-full mt-2 aspect-video"></div>
-<script>
-    Plotly.newPlot(document.getElementById("overview-plot"), [
-        {{ plot | tojson}}
-    ], {
-        margin: { t: 0 }, xaxis: { showgrid: false, showticklabels: false }, yaxis: {
-            showgrid: false
-        }
-    });
-</script>
+<embed type="image/svg+xml" src={{graph_data|safe}} class="w-full h-1/4" />
 
 <div class="relative overflow-x-auto">
     <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">