peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Peter Stockings
2023-12-09 12:42:27 +11:00
parent dd093e3819
commit cc44591eea
2 changed files with 63 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
templates/partials/sparkline.html
View File

@@ -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%"
_="on mouseover
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>
<circle cx="{{ x | round(3) }}" cy="{{ y | round(3) }}" 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>
{% 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" />
{{ circles(data_points, vb_height) }}
{% for plot in plots %}
{{ 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>