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

Plot estimated 1 rep max progression for each exercise on dashboard

Browse Source
This commit is contained in:
Peter Stockings
2022-09-17 16:08:06 +10:00
parent c6be837f72
commit f22def08a2
4 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
templates/base.html
View File

@@ -7,6 +7,12 @@
<title>Workout Tracker</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
<script>
window.addEventListener('resize', function () {
window.dispatchEvent(new Event('resize'));
})
</script>
</head>
<body>

21
templates/index.html
View File

@@ -2,6 +2,17 @@
{% block content %}
<script>
let layout = {
margin: { t: 0 }, xaxis: { type: 'date', showgrid: false }, yaxis: {
title: 'Estimated 1RM (kg)',
showgrid: false
}
};
let config = { responsive: true, displayModeBar: false };
let hovertemplate = '<i>Estimated 1RM</i>: <b>%{y}kg</b><br><i>Topset</i>:<b>%{text}</b><br><i>Date</i>: <b>%{x}</b>';
</script>
<div class="w-full grid grid-cols-1 xl:grid-cols-3 2xl:grid-cols-3 gap-4">
{% for p in model %}
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
@@ -23,6 +34,16 @@
<div class="align-middle inline-block min-w-full">
<div class="shadow overflow-hidden sm:rounded-lg">
<h4 class="text-l font-semibold text-blue-400 mb-2 text-center">{{ e['ExerciseName'] }}</h4>
<div id="person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"
class="w-full mt-2 aspect-video"></div>
<script>
Plotly.newPlot(document.getElementById("person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"), [{
x: {{ e['EstimatedOneRepMaxProgressions']['StartDates'] | replace('"', "'") | safe }},
y: {{ e['EstimatedOneRepMaxProgressions']['Estimated1RMs'] | replace('"', "'") | safe }},
text: {{ e['EstimatedOneRepMaxProgressions']['TopSets'] | replace('"', "'") | safe }},
hovertemplate
}], layout, config);
</script>
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>