peterstockings/cardio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch to server side rendered SVG based graph library

Browse Source
This commit is contained in:
Peter Stockings
2023-01-22 22:39:32 +11:00
parent 0a93eb7507
commit cd7411eac7
4 changed files with 10 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app.py
View File

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

3
requirements.txt
View File

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

1
templates/base.html
View File

@@ -7,7 +7,6 @@
<title>Cardio</title> <title>Cardio</title>
<script src="https://cdn.tailwindcss.com"></script> <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/htmx.org"></script>
<script src="https://unpkg.com/hyperscript.org"></script> <script src="https://unpkg.com/hyperscript.org"></script>
</head> </head>

11
templates/overview.html
View File

@@ -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"> 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> {{last_cadence}} rpm</h1>
<div id="overview-plot" class="w-full mt-2 aspect-video"></div> <embed type="image/svg+xml" src={{graph_data|safe}} class="w-full h-1/4" />
<script>
Plotly.newPlot(document.getElementById("overview-plot"), [
{{ plot | tojson}}
], {
margin: { t: 0 }, xaxis: { showgrid: false, showticklabels: false }, yaxis: {
showgrid: false
}
});
</script>
<div class="relative overflow-x-auto"> <div class="relative overflow-x-auto">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400"> <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">