Switch to using custom svg sparkline for exercise graphs on person view, this isnt a proper implementation as it separate requests for each exercise selected (Want to get rid of dependency on plotly)
This commit is contained in:
Peter Stockings
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap mb-1">
|
||||
<div class="w-full md:w-1/4 px-2 md:px-3 mb-6 md:mb-0">
|
||||
<div class="w-full md:w-1/3 px-2 md:px-3 mb-6 md:mb-0">
|
||||
<div class="mb-1 w-full">
|
||||
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
|
||||
Exercises
|
||||
@@ -60,7 +60,7 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4 px-2 md:px-3 mb-6 md:mb-0">
|
||||
<div class="w-full md:w-1/3 px-2 md:px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
|
||||
Min date
|
||||
</label>
|
||||
@@ -81,7 +81,7 @@
|
||||
hx-target="#container" hx-push-url="true" hx-trigger="change">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4 px-2 md:px-3 mb-6 md:mb-0">
|
||||
<div class="w-full md:w-1/3 px-2 md:px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
|
||||
Max date
|
||||
</label>
|
||||
@@ -102,22 +102,6 @@
|
||||
hx-target="#container" hx-push-url="true" hx-trigger="change">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/4 px-2 md:px-3 mb-6 md:mb-0">
|
||||
<div class="mb-1 w-full">
|
||||
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
|
||||
Graph Axis
|
||||
</label>
|
||||
<select name="graph_axis" class="bg-gray-50 border border-gray-300 " multiple
|
||||
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
|
||||
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']"
|
||||
hx-target="#container" hx-push-url="true"
|
||||
_="init js(me) tail.select(me, { multiple: true, placeholder: 'Select graphs' }) end">
|
||||
<option value="repetitions" {% if "repetitions" in graph_axis %}selected{% endif %}>Repetitions</option>
|
||||
<option value="weight" {% if "weight" in graph_axis %}selected{% endif %}>Weigh</option>
|
||||
<option value="estimated1rm" {% if "estimated1rm" in graph_axis %}selected{% endif %}>Estimated 1RM</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% with person_id=person['PersonId'], tags=tags %}
|
||||
@@ -186,95 +170,16 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if graph_axis %}
|
||||
<div class="mt-4 mb-4 w-full grid grid-cols-1 2xl:grid-cols-2 gap-4">
|
||||
{% for exercise_graph in person['ExerciseGraphs'] %}
|
||||
{% for exercise_id in selected_exercise_ids %}
|
||||
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="flex-shrink-0">
|
||||
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{
|
||||
exercise_graph['ExerciseName'] }}</span>
|
||||
</div>
|
||||
<div id="e-{{ exercise_graph['ExerciseId'] }}" class="w-full mt-2 aspect-video"></div>
|
||||
<script>
|
||||
Plotly.newPlot("e-{{ exercise_graph['ExerciseId'] }}", [
|
||||
{% if 'repetitions' in graph_axis %}
|
||||
{
|
||||
x: {{ exercise_graph['StartDates'] | replace('"', "'") | safe }},
|
||||
y: {{ exercise_graph['Repetitions'] | replace('"', "'") | safe }},
|
||||
name: 'Reps',
|
||||
type: 'scatter'
|
||||
},
|
||||
{% endif %}
|
||||
{% if 'weight' in graph_axis %}
|
||||
{
|
||||
x: {{ exercise_graph['StartDates'] | replace('"', "'") | safe }},
|
||||
y: {{ exercise_graph['Weights'] | replace('"', "'") | safe }},
|
||||
name: 'Weight',
|
||||
yaxis: 'y2',
|
||||
type: 'scatter'
|
||||
},
|
||||
{% endif %}
|
||||
{% if 'estimated1rm' in graph_axis %}
|
||||
{
|
||||
x: {{ exercise_graph['StartDates'] | replace('"', "'") | safe }},
|
||||
y: {{ exercise_graph['Estimated1RM'] | replace('"', "'") | safe }},
|
||||
name: 'Estimated 1RM',
|
||||
yaxis: 'y3',
|
||||
type: 'scatter'
|
||||
},
|
||||
{% endif %}
|
||||
],
|
||||
{
|
||||
margin: {
|
||||
t: 20, // Increase top margin to move the graph downwards
|
||||
l: 50, // Increase left margin if the graph is too far to the right
|
||||
r: 50, // Increase right margin for the same reason
|
||||
b: 40 // Bottom margin for better layout
|
||||
},
|
||||
xaxis: { type: 'date', showgrid: false },
|
||||
yaxis: { title: 'Reps', showgrid: false },
|
||||
yaxis2: {
|
||||
title: 'Weight',
|
||||
overlaying: 'y',
|
||||
side: 'right',
|
||||
showgrid: false,
|
||||
position: 0.94
|
||||
},
|
||||
yaxis3: {
|
||||
title: 'Estimated 1RM',
|
||||
overlaying: 'y',
|
||||
side: 'right',
|
||||
showgrid: false,
|
||||
position: 1.00
|
||||
},
|
||||
showlegend: false,
|
||||
legend: {
|
||||
|
||||
font: {
|
||||
size: 10 // Adjust the font size of the legend to make it smaller
|
||||
},
|
||||
"orientation": "h"
|
||||
}
|
||||
}, {
|
||||
responsive: true,
|
||||
displayModeBar: false,
|
||||
//staticPlot: true,
|
||||
displaylogo: false,
|
||||
modeBarButtonsToRemove: ['toImage', 'sendDataToCloud', 'zoom2d', 'pan2d', 'select2d', 'lasso2d',
|
||||
'zoomIn2d', 'zoomOut2d', 'autoScale2d', 'resetScale2d', 'hoverClosestCartesian',
|
||||
'hoverCompareCartesian', 'zoom3d', 'pan3d', 'orbitRotation', 'tableRotation',
|
||||
'resetCameraDefault3d', 'resetCameraLastSave3d', 'hoverClosest3d', 'zoomInGeo',
|
||||
'zoomOutGeo', 'resetGeo', 'hoverClosestGeo', 'hoverClosestGl2d', 'hoverClosestPie',
|
||||
'toggleHover', 'resetViews', 'toggleSpikelines', 'resetViewMapbox'
|
||||
]
|
||||
});
|
||||
</script>
|
||||
<div class="hidden"
|
||||
hx-get="{{ url_for('get_exercise_progress_for_user', person_id=person['PersonId'], exercise_id=exercise_id, min_date=min_date, max_date=max_date) }}"
|
||||
hx-trigger="load" hx-target="this" hx-swap="outerHTML">
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ render_partial('partials/stats.html', stats=person['Stats']) }}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user