From cd7411eac70c3e0920ac903e6409b2f026e55842 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Sun, 22 Jan 2023 22:39:32 +1100
Subject: [PATCH] Switch to server side rendered SVG based graph library

---
 app.py                  | 14 +++++++-------
 requirements.txt        |  3 ++-
 templates/base.html     |  1 -
 templates/overview.html | 11 +----------
 4 files changed, 10 insertions(+), 19 deletions(-)

diff --git a/app.py b/app.py
index 525e91b..14199db 100644
--- a/app.py
+++ b/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__':
diff --git a/requirements.txt b/requirements.txt
index 5496384..351488c 100644
--- a/requirements.txt
+++ b/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
\ No newline at end of file
+eventlet==0.30.2
+pygal==3.0.0
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index e4911bd..fd1b2d3 100644
--- a/templates/base.html
+++ b/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>
diff --git a/templates/overview.html b/templates/overview.html
index a0ea743..329f6b3 100644
--- a/templates/overview.html
+++ b/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">