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

Switch muscle distribution to a line chart

Browse Source
This commit is contained in:
Peter Stockings
2026-01-30 23:57:44 +11:00
parent d03581bff4
commit 5d2f3986bd
3 changed files with 102 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
templates/partials/workout_breakdown.html
View File

@@ -1,39 +1,44 @@
{% if muscle_distribution %}
<div class="bg-gray-50 p-2 rounded-lg border border-gray-100 flex flex-col gap-2 max-w-sm" id="muscle-breakdown"
<div class="px-4 py-3 bg-white" id="muscle-breakdown"
hx-get="{{ url_for('workout.get_workout_muscle_distribution', person_id=person_id, workout_id=workout_id) }}"
hx-trigger="topsetAdded from:body" hx-swap="outerHTML">
<div class="flex items-center gap-3">
<!-- Mini Donut SVG -->
<div class="relative w-16 h-16 flex-shrink-0">
<svg viewBox="0 0 100 100" class="w-full h-full"
style="transform: rotate(-90deg); transform-origin: center;">
<circle cx="50" cy="50" r="40" fill="transparent" stroke="#e5e7eb" stroke-width="14" />
{% for item in muscle_distribution %}
<circle cx="50" cy="50" r="40" fill="transparent" stroke="{{ item.color }}" stroke-width="14"
stroke-dasharray="{{ item.dasharray }}" stroke-dashoffset="{{ item.dashoffset }}" pathLength="100"
stroke-linecap="round" style="transform-origin: center;"
class="transition-all duration-300 segment-{{ loop.index }}" />
{% endfor %}
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-[10px] font-black text-gray-700 tracking-tighter">{{ muscle_distribution[0].percentage
}}%</span>
</div>
</div>
<div class="flex items-center justify-between mb-2">
<h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">Muscle Distribution</h4>
</div>
<!-- Mini Legend -->
<div class="flex-grow min-w-0">
<div class="flex flex-wrap gap-x-4 gap-y-2">
{% for item in muscle_distribution %}
<div class="flex items-center gap-1.5 whitespace-nowrap">
<div class="w-1.5 h-1.5 rounded-full" style="background-color: {{ item.color }}"></div>
<span class="text-[10px] font-bold text-gray-600 uppercase">{{ item.muscle_group }}</span>
<span class="text-[10px] text-gray-400 font-medium">{{ item.percentage }}%</span>
<!-- Sleek Performance Bar -->
<div class="w-full h-8 flex overflow-hidden rounded-lg bg-gray-100 shadow-inner p-0.5">
{% for item in muscle_distribution %}
<div class="h-full transition-all duration-700 ease-in-out flex items-center justify-center relative group first:rounded-l-md last:rounded-r-md"
style="width: {{ item.percentage }}%; background-color: {{ item.color }};">
<!-- Labels with optimized typography -->
<div
class="flex items-center justify-center gap-1 leading-none text-white pointer-events-none px-1 overflow-hidden">
{% if item.percentage > 15 %}
<span class="text-[9px] font-black uppercase tracking-tighter truncate drop-shadow-sm">{{
item.muscle_group }}</span>
<span class="text-[9px] font-bold opacity-90 whitespace-nowrap">{{ item.percentage }}%</span>
{% elif item.percentage > 8 %}
<span class="text-[9px] font-black drop-shadow-sm">{{ item.percentage }}%</span>
{% endif %}
</div>
<!-- Enhanced Hover State -->
<div class="absolute inset-0 bg-white/15 opacity-0 group-hover:opacity-100 transition-opacity cursor-help">
</div>
<!-- Precision Tooltip -->
<div
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900/95 backdrop-blur-sm text-white text-[9px] font-black rounded opacity-0 group-hover:opacity-100 transition-all transform translate-y-1 group-hover:translate-y-0 whitespace-nowrap z-20 pointer-events-none shadow-lg border border-white/5 uppercase tracking-wider">
{{ item.muscle_group }} <span class="mx-1 opacity-40">•</span> {{ item.percentage }}%
<div
class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900/95">
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}