Plot E1RM, reps, & weight on user progress sparkline, also reduced generated svg size by half

db.py

@@ -490,21 +490,30 @@ class DataBase():
 
         # Extracting values and calculating value ranges for SVG dimensions
         estimated_1rm = [t['estimated_1rm'] for t in topsets]
+        repetitions = [t['repetitions'] for t in topsets]
+        weight = [t['weight'] for t in topsets]
         start_dates = [t['start_date'] for t in topsets]
         min_date, max_date = min(start_dates), max(start_dates)
-        min_value, max_value = min(estimated_1rm), max(estimated_1rm)
+        min_e1rm, max_e1rm = min(estimated_1rm), max(estimated_1rm)
+        min_reps, max_reps = min(repetitions), max(repetitions)
+        min_weight, max_weight = min(weight), max(weight)
         
         # Calculate viewBox dimensions
         date_range = max_date - min_date
-        value_range = max_value - min_value
+        e1rm_range = max_e1rm - min_e1rm
-        vb_width, vb_height = date_range.days, value_range
+        reps_range = max_reps - min_reps
+        weight_range = max_weight - min_weight
+        vb_width, vb_height = date_range.days, e1rm_range
         vb_width *= 200 / vb_width  # Scale to 200px width
         vb_height *= 75 / vb_height  # Scale to 75px height
 
         # Scale estimated_1rm values for SVG plotting
-        estimated_1rm_scaled = [((value - min_value) / value_range) * vb_height for value in estimated_1rm]
+        precision = 3
+        estimated_1rm_scaled = [round(((value - min_e1rm) / e1rm_range) * vb_height, precision) for value in estimated_1rm]
+        repetitions_scaled = [round(((value - min_reps) / reps_range) * vb_height, precision) for value in repetitions]
+        weight_scaled = [round(((value - min_weight) / weight_range) * vb_height, precision) for value in weight]
         total_span = date_range.days or 1
-        relative_positions = [(date - min_date).days / total_span for date in start_dates]
+        relative_positions = [round((date - min_date).days / total_span, precision) for date in start_dates]
 
         # Convert relative positions and scaled estimated 1RM values to numpy arrays
         x = np.array(relative_positions)
@@ -519,13 +528,31 @@ class DataBase():
 
         # Create messages and zip data for SVG plotting
         messages = [f'{t["repetitions"]} x {t["weight"]}kg ({t["estimated_1rm"]}kg E1RM) on {t["start_date"].strftime("%d %b %y")}' for t in topsets]
-        data_points = zip(estimated_1rm_scaled, relative_positions, messages)
+        estimated_1rm_points = zip(estimated_1rm_scaled, relative_positions, messages)
+        repetitions_points = zip(repetitions_scaled, relative_positions, messages)
+        weight_points = zip(weight_scaled, relative_positions, messages)
+
+        estimated_1rm = {
+            'label': 'E1RM',
+            'color': '#2ca02c',
+            'points': list(estimated_1rm_points)
+        }
+        repetitions = {
+            'label': 'Reps',
+            'color': '#388fed',
+            'points': list(repetitions_points)
+        }
+        weight = {
+            'label': 'Weight',
+            'color': '#bd3178',
+            'points': list(weight_points)
+        }
 
         # Return exercise data with SVG dimensions and data points
         return {
             'exercise_name': topsets[0]['exercise_name'],
             'vb_width': vb_width,
             'vb_height': vb_height,
-            'data_points': list(data_points),
+            'plots': [estimated_1rm, repetitions, weight],
             'best_fit_points': list(best_fit_points),
         }

templates/partials/sparkline.html

@@ -7,7 +7,7 @@
     {% for value, position, message in data_points %}
         {% set x = (position * vb_width)+margin %}
         {% set y = (vb_height - value)+margin %}
-        {% if loop.first %}M{{ x }} {{ y }}{% else %} L{{ x }} {{ y }}{% endif %}
+        {% if loop.first %}M{{ x | round(3) }} {{ y | round(3) }}{% else %} L{{ x | round(3) }} {{ y | round(3) }}{% endif %}
     {% endfor %}
 {% endmacro %}
 
@@ -15,25 +15,24 @@
     {% for value, position in best_fit_points %}
         {% set x = (position * vb_width)+margin %}
         {% set y = (vb_height - value)+margin %}
-        {% if loop.first %}M{{ x }} {{ y }}{% else %} L{{ x }} {{ y }}{% endif %}
+        {% if loop.first %}M{{ x | round(3) }} {{ y | round(3) }}{% else %} L{{ x | round(3) }} {{ y | round(3) }}{% endif %}
     {% endfor %}
 {% endmacro %}
 
-{% macro circles(data_points, vb_height) %}
+{% macro circles(data_points, color) %}
     {% for value, position, message in data_points %}
         {% set x = (position * vb_width)+margin %}
         {% set y = (vb_height - value)+margin %}
-        <circle cx="{{ x }}" cy="{{ y }}" r="5" class="cursor-pointer" data-message="{{ message }}" fill-opacity="0%"
+        <circle cx="{{ x | round(3) }}" cy="{{ y | round(3) }}" r="1" stroke="{{ color }}" fill="{{ color }}"></circle>
-                _="on mouseover
+        <circle cx="{{ x | round(3) }}" cy="{{ y | round(3) }}" r="5" class="plot_point cursor-pointer" data-message="{{ message }}" fill-opacity="0%"></circle>
-                   put my @data-message into #popover-{{ unique_id }}
-                   then remove .hidden from #popover-{{ unique_id }}
-                   on mouseout
-                   add .hidden to #popover-{{ unique_id }}">
-        </circle>
-        <circle cx="{{ x }}" cy="{{ y }}" r="1" stroke="{{ stroke }}" fill="{{ fill }}"></circle>
     {% endfor %}
 {% endmacro %}
 
+{% macro plot_line(points, color) %}
+    <path d="{{ path(points, vb_height) }}" stroke="{{ color }}" fill="none" />
+    {{ circles(points, color) }}
+{% endmacro %}
+
 <!-- HubSpot doesn't escape whitespace. -->
 {% macro random_int() %}{% for n in [0,1,2,3,4,5] %}{{ [0,1,2,3,4,5,6,7,8,9]|random }}{% endfor %}{% endmacro %}
 
@@ -41,15 +40,31 @@
 {% set parts = [random_int()] %}
 {% set unique_id = parts|join('-') %}
 
-<div class="relative">
+<div class="relative" id="svg-plot-{{ unique_id }}" _="
+    on mouseover from .plot_point
+        put event.target @data-message into #popover-{{ unique_id }}
+        then remove .hidden from #popover-{{ unique_id }}
+    on mouseout from .plot_point
+        add .hidden to #popover-{{ unique_id }}">
     <div id="popover-{{ unique_id }}" 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>
+    <h4 class="text-l font-semibold text-blue-400 mb-2 text-center">{{ exercise_name }}</h4>
     <svg viewBox="0 0 {{ vb_width + 4 }} {{ vb_height + 4 }}" preserveAspectRatio="none">
         <path d="{{ path_best_fit(best_fit_points, vb_height) }}" stroke="gray" stroke-dasharray="2,1" fill="none" stroke-opacity="40%"/>
-        <path d="{{ path(data_points, vb_height) }}" stroke="{{ stroke }}" fill="none" />
+        {% for plot in plots %}
-        {{ circles(data_points, vb_height) }}
+        {{ plot_line(plot.points, plot.color) }}
+        {% endfor %}
     </svg>
+    <div class="flex justify-center pt-2">
+        {% for plot in plots %}
+            <div class="flex items-center px-2">
+                <div class="w-4 h-4 mr-1" style="background-color: {{ plot.color }};"></div>
+                <div>{{ plot.label }}</div>
+            </div>
+        {% endfor %}
+    </div>
+
 </div>