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

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

Browse Source
This commit is contained in:
Peter Stockings
2023-12-07 20:50:59 +11:00
parent 469054048e
commit 3fca116d1c
3 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
templates/partials/sparkline.html
View File

@@ -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>