Add ability to toggle plot lines by clicking on corresponding label in legend

db.py

@@ -508,12 +508,11 @@ class DataBase():
         vb_height *= 75 / vb_height  # Scale to 75px height
 
         # Scale estimated_1rm values for SVG plotting
-        precision = 3
+        estimated_1rm_scaled = [((value - min_e1rm) / e1rm_range) * vb_height for value in estimated_1rm]
-        estimated_1rm_scaled = [round(((value - min_e1rm) / e1rm_range) * vb_height, precision) for value in estimated_1rm]
+        repetitions_scaled = [((value - min_reps) / reps_range) * vb_height for value in repetitions]
-        repetitions_scaled = [round(((value - min_reps) / reps_range) * vb_height, precision) for value in repetitions]
+        weight_scaled = [((value - min_weight) / weight_range) * vb_height for value in weight]
-        weight_scaled = [round(((value - min_weight) / weight_range) * vb_height, precision) for value in weight]
         total_span = date_range.days or 1
-        relative_positions = [round((date - min_date).days / total_span, precision) for date in start_dates]
+        relative_positions = [(date - min_date).days / total_span for date in start_dates]
 
         # Convert relative positions and scaled estimated 1RM values to numpy arrays
         x = np.array(relative_positions)

templates/partials/sparkline.html

@@ -1,13 +1,12 @@
-{% set fill = "#2ca02c" %}
-{% set stroke = "#2ca02c" %}
 {% set stroke_width = 4 %}
 {% set margin = 2 %}
+{% set precision = 1 %}
 
 {% macro path(data_points, vb_height) %}
     {% for value, position, message in data_points %}
         {% set x = (position * vb_width)+margin %}
         {% set y = (vb_height - value)+margin %}
-        {% if loop.first %}M{{ x | round(3) }} {{ y | round(3) }}{% else %} L{{ x | round(3) }} {{ y | round(3) }}{% endif %}
+        {% if loop.first %}M{{ x | round(precision) }} {{ y | round(precision) }}{% else %} L{{ x | round(precision) }} {{ y | round(precision) }}{% endif %}
     {% endfor %}
 {% endmacro %}
 
@@ -15,7 +14,7 @@
     {% for value, position in best_fit_points %}
         {% set x = (position * vb_width)+margin %}
         {% set y = (vb_height - value)+margin %}
-        {% if loop.first %}M{{ x | round(3) }} {{ y | round(3) }}{% else %} L{{ x | round(3) }} {{ y | round(3) }}{% endif %}
+        {% if loop.first %}M{{ x | round(precision) }} {{ y | round(precision) }}{% else %} L{{ x | round(precision) }} {{ y | round(precision) }}{% endif %}
     {% endfor %}
 {% endmacro %}
 
@@ -23,8 +22,8 @@
     {% for value, position, message in data_points %}
         {% set x = (position * vb_width)+margin %}
         {% set y = (vb_height - value)+margin %}
-        <circle cx="{{ x | round(3) }}" cy="{{ y | round(3) }}" r="1" stroke="{{ color }}" fill="{{ color }}"></circle>
+        <circle cx="{{ x | round(precision) }}" cy="{{ y | round(precision) }}" r="1" stroke="{{ color }}" fill="{{ color }}"></circle>
-        <circle cx="{{ x | round(3) }}" cy="{{ y | round(3) }}" r="5" class="plot_point cursor-pointer" data-message="{{ message }}" fill-opacity="0%"></circle>
+        <circle cx="{{ x | round(precision) }}" cy="{{ y | round(precision) }}" r="5" class="plot_point cursor-pointer" data-message="{{ message }}" fill-opacity="0%"></circle>
     {% endfor %}
 {% endmacro %}
 
@@ -53,12 +52,16 @@
     <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%"/>
         {% for plot in plots %}
+        <g class="{{ plot.label }}">
         {{ plot_line(plot.points, plot.color) }}
+        </g>
         {% endfor %}
     </svg>
     <div class="flex justify-center pt-2">
         {% for plot in plots %}
-            <div class="flex items-center px-2">
+            <div class="flex items-center px-2 select-none cursor-pointer" 
+            _="on load put document.querySelector('#svg-plot-{{ unique_id }} g.{{plot.label}}') into my.plot_line
+            on click toggle .hidden on my.plot_line then toggle .line-through on me">
                 <div class="w-3 h-3 mr-1" style="background-color: {{ plot.color }};"></div>
                 <div class="text-xs">{{ plot.label }}</div>
             </div>