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

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

Browse Source
This commit is contained in:
Peter Stockings
2023-12-09 13:27:19 +11:00
parent e6509f9bfc
commit bc79224cee
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
templates/partials/sparkline.html
View File

@@ -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(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="1" stroke="{{ color }}" fill="{{ color }}"></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>