Render svg graphs in initial response rather then requesting each graph individually. Initial load file size of dashboard will be larger, unsure if I will rollback this change

This commit is contained in:
Peter Stockings
2023-12-09 23:10:13 +11:00
parent c5e825f4df
commit d0afd92126
4 changed files with 90 additions and 71 deletions

67
db.py
View File

@@ -7,7 +7,7 @@ from urllib.parse import urlparse
from flask import g
from utils import get_all_exercises_from_topsets, get_stats_from_topsets, get_workouts
from utils import get_all_exercises_from_topsets, get_exercise_graph_model, get_stats_from_topsets, get_workouts
class DataBase():
@@ -476,69 +476,8 @@ class DataBase():
repetitions = [t['repetitions'] for t in topsets]
weight = [t['weight'] for t in topsets]
start_dates = [t['start_date'] for t in topsets]
min_date, max_date = min(start_dates), max(start_dates)
min_e1rm, max_e1rm = min(estimated_1rm), max(estimated_1rm)
min_reps, max_reps = min(repetitions), max(repetitions)
min_weight, max_weight = min(weight), max(weight)
# Calculate viewBox dimensions
date_range = max_date - min_date
total_span = date_range.days or 1
e1rm_range = (max_e1rm - min_e1rm) or 1
reps_range = (max_reps - min_reps) or 1
weight_range = (max_weight - min_weight) or 1
vb_width, vb_height = total_span, e1rm_range
vb_width *= 200 / vb_width # Scale to 200px width
vb_height *= 75 / vb_height # Scale to 75px height
# Scale estimated_1rm values for SVG plotting
estimated_1rm_scaled = [((value - min_e1rm) / e1rm_range) * vb_height for value in estimated_1rm]
repetitions_scaled = [((value - min_reps) / reps_range) * vb_height for value in repetitions]
weight_scaled = [((value - min_weight) / weight_range) * vb_height for value in weight]
relative_positions = [(date - min_date).days / total_span for date in start_dates]
# Convert relative positions and scaled estimated 1RM values to numpy arrays
x = np.array(relative_positions)
y = np.array(estimated_1rm_scaled)
# Calculate the slope (m) and y-intercept (b) of the line of best fit
m, b = np.polyfit(x, y, 1)
# Generate points along the line of best fit
y_best_fit = [m * xi + b for xi in x]
best_fit_points = zip(y_best_fit, relative_positions)
# Create messages and zip data for SVG plotting
messages = [f'{t["repetitions"]} x {t["weight"]}kg ({t["estimated_1rm"]}kg E1RM) on {t["start_date"].strftime("%d %b %y")}' for t in topsets]
estimated_1rm_points = zip(estimated_1rm_scaled, relative_positions, messages)
repetitions_points = zip(repetitions_scaled, relative_positions, messages)
weight_points = zip(weight_scaled, relative_positions, messages)
repetitions = {
'label': 'Reps',
'color': '#388fed',
'points': list(repetitions_points)
}
weight = {
'label': 'Weight',
'color': '#bd3178',
'points': list(weight_points)
}
estimated_1rm = {
'label': 'E1RM',
'color': '#2ca02c',
'points': list(estimated_1rm_points)
}
exercise_progress = get_exercise_graph_model(topsets[0]['exercise_name'], estimated_1rm, repetitions, weight, start_dates, messages)
plot_labels = zip(relative_positions, messages)
# Return exercise data with SVG dimensions and data points
return {
'title': topsets[0]['exercise_name'],
'vb_width': vb_width,
'vb_height': vb_height,
'plots': [repetitions, weight, estimated_1rm],
'best_fit_points': list(best_fit_points),
'plot_labels': plot_labels
}
return exercise_progress

View File

@@ -133,10 +133,7 @@
<div class="align-middle inline-block min-w-full">
<div class="shadow overflow-hidden sm:rounded-lg">
<div class="w-full mt-2 pb-2 aspect-video">
<div class="hidden"
hx-get="{{ url_for('get_exercise_progress_for_user', person_id=p['PersonId'], exercise_id=e['ExerciseId'], min_date=min_date, max_date=max_date) }}"
hx-trigger="load" hx-target="this" hx-swap="outerHTML">
</div>
{{ render_partial('partials/sparkline.html', **e['ExerciseProgressGraph']) }}
</div>
<table class="min-w-full divide-y divide-gray-200">

View File

@@ -2,7 +2,7 @@
{% set margin = 2 %}
{% macro path(data_points, vb_height) %}
{% for value, position, message in data_points %}
{% for value, position in data_points %}
{% set x = (position * vb_width)+margin %}
{% set y = (vb_height - value)+margin %}
{% if loop.first %}M{{ x | int }} {{ y | int }}{% else %} L{{ x | int }} {{ y | int }}{% endif %}
@@ -18,7 +18,7 @@
{% endmacro %}
{% macro circles(data_points, color) %}
{% for value, position, message in data_points %}
{% for value, position in data_points %}
{% set x = (position * vb_width)+margin %}
{% set y = (vb_height - value)+margin %}
<circle cx="{{ x | int }}" cy="{{ y | int }}" r="1"></circle>

View File

@@ -1,4 +1,5 @@
from datetime import datetime, date, timedelta
import numpy as np
import json
@@ -44,10 +45,20 @@ def get_topsets_for_person(person_topsets):
# Sort topsets by StartDate in descending order
sorted_topsets = sorted(exercise_topsets, key=lambda x: x['StartDate'], reverse=True)
# Extracting values and calculating value ranges for SVG dimensions
estimated_1rm = [t['Estimated1RM'] for t in exercise_topsets]
repetitions = [t['Repetitions'] for t in exercise_topsets]
weight = [t['Weight'] for t in exercise_topsets]
start_dates = [t['StartDate'] for t in exercise_topsets]
messages = [f'{t["Repetitions"]} x {t["Weight"]}kg ({t["Estimated1RM"]}kg E1RM) on {t["StartDate"].strftime("%d %b %y")}' for t in exercise_topsets]
exercise_progress = get_exercise_graph_model(exercise_topsets[0]['ExerciseName'], estimated_1rm, repetitions, weight, start_dates, messages)
exercises_topsets.append({
'ExerciseId': e['ExerciseId'],
'ExerciseName': e['ExerciseName'],
'Topsets': sorted_topsets
'Topsets': sorted_topsets,
'ExerciseProgressGraph': exercise_progress
})
return exercises_topsets
@@ -223,3 +234,75 @@ def get_date_info(input_date, selected_view):
'start_date': first_day_of_year,
'end_date': last_day_of_year,
}
def get_exercise_graph_model(title, estimated_1rm, repetitions, weight, start_dates, messages):
min_date, max_date = min(start_dates), max(start_dates)
min_e1rm, max_e1rm = min(estimated_1rm), max(estimated_1rm)
min_reps, max_reps = min(repetitions), max(repetitions)
min_weight, max_weight = min(weight), max(weight)
# Calculate viewBox dimensions
date_range = max_date - min_date
total_span = date_range.days or 1
e1rm_range = (max_e1rm - min_e1rm) or 1
reps_range = (max_reps - min_reps) or 1
weight_range = (max_weight - min_weight) or 1
vb_width, vb_height = total_span, e1rm_range
vb_width *= 200 / vb_width # Scale to 200px width
vb_height *= 75 / vb_height # Scale to 75px height
# Scale estimated_1rm values for SVG plotting
estimated_1rm_scaled = [((value - min_e1rm) / e1rm_range) * vb_height for value in estimated_1rm]
repetitions_scaled = [((value - min_reps) / reps_range) * vb_height for value in repetitions]
weight_scaled = [((value - min_weight) / weight_range) * vb_height for value in weight]
relative_positions = [(date - min_date).days / total_span for date in start_dates]
best_fit_points = []
# trry catch LinAlgError
try:
# Convert relative positions and scaled estimated 1RM values to numpy arrays
x = np.array(relative_positions)
y = np.array(estimated_1rm_scaled)
# Calculate the slope (m) and y-intercept (b) of the line of best fit
m, b = np.polyfit(x, y, 1)
# Generate points along the line of best fit
y_best_fit = [m * xi + b for xi in x]
best_fit_points = list(zip(y_best_fit, relative_positions))
except np.linalg.LinAlgError:
pass
# Create messages and zip data for SVG plotting
estimated_1rm_points = zip(estimated_1rm_scaled, relative_positions)
repetitions_points = zip(repetitions_scaled, relative_positions)
weight_points = zip(weight_scaled, relative_positions)
repetitions = {
'label': 'Reps',
'color': '#388fed',
'points': list(repetitions_points)
}
weight = {
'label': 'Weight',
'color': '#bd3178',
'points': list(weight_points)
}
estimated_1rm = {
'label': 'E1RM',
'color': '#2ca02c',
'points': list(estimated_1rm_points)
}
plot_labels = zip(relative_positions, messages)
# Return exercise data with SVG dimensions and data points
return {
'title': title,
'vb_width': vb_width,
'vb_height': vb_height,
'plots': [repetitions, weight, estimated_1rm],
'best_fit_points': best_fit_points,
'plot_labels': plot_labels
}