Only fetch last 100 cadence readings and display as sparklines graph

app.py

@@ -10,7 +10,7 @@ import minify_html
 from urllib.parse import urlparse
 
 from db import DataBase
-from graph import generate_graph
+from graph import generate_graph, generate_sparkline_graph
 
 app = Flask(__name__)
 # TODO CHANGE SECRET KEY TO ENVIRONMENT VARIABLE
@@ -57,8 +57,7 @@ def overview(device_id):
     cadences = db.get_all_cadences(device_id)
     last_cadence = cadences[-1]['rpm'] if cadences else 0
 
-    graph_data = generate_graph([c['logged_at'] for c in cadences[::2]], [
-                                ("RPM", [c['rpm'] for c in cadences[::2]])])
+    graph_data = generate_sparkline_graph([c['rpm'] for c in cadences])
 
     return render_template('overview.html', last_cadence=last_cadence, cadences=cadences[-15:], graph_data=graph_data)
 

db.py

@@ -41,7 +41,7 @@ class DataBase():
                      [rpm, device_id], commit=True)
 
     def get_all_cadences(self, device_id):
-        return self.execute("""SELECT LOGGED_AT, RPM FROM cadence WHERE device_id = %s AND (NOW() < (LOGGED_AT + (INTERVAL '3 hour')))""", [device_id])
+        return self.execute("""SELECT LOGGED_AT, RPM FROM cadence WHERE device_id = %s AND (NOW() < (LOGGED_AT + (INTERVAL '3 hour'))) LIMIT 100""", [device_id])
 
     def get_devices(self):
         return self.execute("""

graph.py

@@ -26,3 +26,11 @@ def generate_graph(x_labels, data, style=custom_style):
         graph.add(title, values)
     graph_data = graph.render_data_uri()
     return graph_data
+
+
+def generate_sparkline_graph(data, style=custom_style):
+    chart = pygal.Line(show_y_guides=False,
+                       show_legend=False, style=style)
+    chart.add('', data)
+
+    return chart.render_sparkline(disable_xml_declaration=True)

templates/overview.html

@@ -2,8 +2,11 @@
     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 class="lg:flex">
-    <img type="image/svg+xml" src={{graph_data|safe}} class="lg:w-3/4 sm:w-full h-1/4" />
+<div class="flex flex-col items-center">
+    
+    <div>
+    {{graph_data|safe}}
+    </div>
 
     <div class="relative overflow-x-auto">
         <table class="lg:w-1/4 sm:w-full text-sm text-left text-gray-500 dark:text-gray-400">