WIP: When selecting an exercise on new workout view, render a graph of exercise progress for the active user

templates/partials/new_set_form.html

@@ -67,4 +67,11 @@
             class="py-2 px-3 mb-3 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:scale-[1.02] transition-transform">Delete
             workout</button>
     </div>
-</form>
+</form>
+
+{% if has_value==True %}
+<div class="hidden"
+    hx-get="{{ url_for('get_exercise_progress_for_user', person_id=person_id, exercise_id=exercise_id) }}"
+    hx-trigger="load" hx-target="#exercise-progress-{{ person_id }}" hx-swap="innerHTML">
+</div>
+{% endif %}

templates/partials/sparkline.html

@@ -0,0 +1,42 @@
+{% set fill = "#dcfce7" %}
+{% set stroke = "#bbf7d0" %}
+{% set stroke_width = 4 %}
+{% set margin = 0 %} {# space allocated for axis labels and ticks #}
+
+{% macro path(data_points, vb_height) %}
+    {% for value, position in data_points %}
+        {% set x = position * vb_width %}
+        {% set y = vb_height - value %}
+        {% if loop.first %}M{{ x }} {{ y }}{% else %} L{{ x }} {{ y }}{% endif %}
+    {% endfor %}
+{% endmacro %}
+
+{% macro circles(data_points, vb_height) %}
+    {% for value, position 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%"
+                _="on mouseover
+                   put my @data-message into #popover
+                   then remove .hidden from #popover
+                   on mouseout
+                   add .hidden to #popover">
+        </circle>
+    {% endfor %}
+{% endmacro %}
+
+{% macro closed_path(points, vb_width, vb_height) %}
+    {{ path(points, vb_width, vb_height) }} L {{ vb_width + 2*margin }} {{ vb_height + 2*margin }} L {{ 2*margin }} {{ vb_height + 2*margin }} Z
+{% endmacro %}
+
+
+<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 id="popover" class="hidden bg-white border border-gray-300 p-2 z-10">
+    <!-- Popover content will be dynamically inserted here -->
+</div>

templates/partials/workout_modal.html

@@ -100,6 +100,9 @@
                 exercises=exercises,
                 has_value=False) }}
             </div>
+            <div id="exercise-progress-{{ workout['PersonId'] }}" class="mx-5">
+
+            </div>
         </div>
     </div>
 </div>