On hover of exercise progress sparkline on new workout modal, show estimated 1rm and date of workout as a popover

app.py

@@ -434,7 +434,7 @@ def calculate_relative_positions(start_dates):
 def get_exercise_progress_for_user(person_id, exercise_id):
     width = request.args.get('width', 300, type=int)
     height = request.args.get('height', 100, type=int)
-    (estimated_1rm, start_dates) = db.get_exercise_progress_for_user(person_id, exercise_id)
+    (estimated_1rm, start_dates, messages) = db.get_exercise_progress_for_user(person_id, exercise_id)
 
     # Calculate vb_width
     min_date = min(start_dates)
@@ -460,7 +460,7 @@ def get_exercise_progress_for_user(person_id, exercise_id):
     estimated_1rm = [((value - min_value) / value_range) * vb_height for value in estimated_1rm]
 
     relative_positions = calculate_relative_positions(start_dates)
-    data_points = list(zip(estimated_1rm, relative_positions))
+    data_points = list(zip(estimated_1rm, relative_positions, messages))
 
     return render_template('partials/sparkline.html', title="GHR", vb_width=vb_width, vb_height=vb_height, data_points=data_points)
 

db.py

@@ -489,4 +489,7 @@ class DataBase():
         estimated_1rm = [t['estimated_1rm'] for t in topsets]
         # Get a list of all start_dates
         start_dates = [t['start_date'] for t in topsets]
-        return (estimated_1rm, start_dates)
+        # Create a list of messages with the structure 'estimated_1rm kg on start_date' with start_date formatted as 'dd/mm/yyyy'
+        messages = [f'{t["estimated_1rm"]}kg on {t["start_date"].strftime("%d/%m/%Y")}' for t in topsets]
+
+        return (estimated_1rm, start_dates, messages)

templates/partials/sparkline.html

@@ -4,7 +4,7 @@
 {% set margin = 0 %} {# space allocated for axis labels and ticks #}
 
 {% macro path(data_points, vb_height) %}
-    {% for value, position in data_points %}
+    {% for value, position, message in data_points %}
         {% set x = position * vb_width %}
         {% set y = vb_height - value %}
         {% if loop.first %}M{{ x }} {{ y }}{% else %} L{{ x }} {{ y }}{% endif %}
@@ -12,10 +12,10 @@
 {% endmacro %}
 
 {% macro circles(data_points, vb_height) %}
-    {% for value, position in data_points %}
+    {% for value, position, message in data_points %}
         {% set x = position * vb_width %}
         {% set y = vb_height - value %}
-        <circle cx="{{ x }}" cy="{{ y }}" r="5" class="cursor-pointer" data-message="{{ position }} - {{ value }}" fill-opacity="0%"
+        <circle cx="{{ x }}" cy="{{ y }}" r="5" class="cursor-pointer" data-message="{{ message }}" fill-opacity="0%"
                 _="on mouseover
                    put my @data-message into #popover
                    then remove .hidden from #popover
@@ -29,14 +29,16 @@
     {{ path(points, vb_width, vb_height) }} L {{ vb_width + 2*margin }} {{ vb_height + 2*margin }} L {{ 2*margin }} {{ vb_height + 2*margin }} Z
 {% endmacro %}
 
-
+<div class="relative">
+<div id="popover" class="absolute t-0 r-0 hidden bg-white border border-gray-300 p-2 z-10">
+    <!-- Popover content will be dynamically inserted here -->
+</div>
 <svg viewBox="0 0 {{ vb_width }} {{ vb_height }}" preserveAspectRatio="none">
 
     <path d="{{ path(data_points, vb_height) }}" stroke="blue" fill="none" />
 
     {{ circles(data_points, vb_height) }}
 </svg>
+</div>
+
 
-<div id="popover" class="hidden bg-white border border-gray-300 p-2 z-10">
-    <!-- Popover content will be dynamically inserted here -->
-</div>