Add form to create user overview graphs

app.py

@@ -216,6 +216,11 @@ def create_workout(user_id):
 
 @app.route('/user/<int:user_id>/workouts/graph', methods=['GET'])
 def graph_user_workouts(user_id):
+    if htmx:
+        return f"""
+        <img src="{request.full_path}"
+        loading="lazy" alt="No image" class="mx-auto">
+        """
     user = User.query.get(user_id)
     workouts = user.workouts
 
@@ -464,7 +469,11 @@ def generate_user_data(user, workouts=[]):
         'workouts_count': len(workouts),
         'workouts': workouts,
         'daily_duration_sparkline': generate_daily_duration_sparkline(workouts),
-        'calendar_month': generate_calendar_monthly_view(workouts, datetime.now().date())
+        'calendar_month': generate_calendar_monthly_view(workouts, datetime.now().date()),
+        'attributes': [('workout_count', 'Workout count'), ('duration', 'Duration'), ('average_rpm', 'Average RPM'), ('average_bpm', 'Average BPM'), ('distance', 'Distance'), ('calories', 'Calories')],
+        'periods': ['day', 'week', 'month'],
+        'first_workout_date': workouts[-1]['start_time_date'] if workouts else None,
+        'last_workout_date': workouts[0]['start_time_date'] if workouts else None,
     }
 
 
@@ -513,7 +522,7 @@ def format_workout_data(workout, user):
         'user_id': user.id,
         'user_name': user.name,
         'start_time': format_date_with_ordinal(workout.started_at, '%#H:%M %B %dth %Y'),
-        'start_time_date': workout.started_at,
+        'start_time_date': workout.started_at.date(),
         'start_time_ago': humanize.naturaltime(workout.started_at),
         'duration': humanize.naturaldelta(duration),
         'duration_minutes': duration.total_seconds() / 60,
@@ -613,8 +622,8 @@ def generate_calendar_monthly_view(workouts, selected_date):
     start_date, end_date = get_month_bounds(selected_date)
 
     # Build a lookup dictionary for faster access
-    workout_lookup = {w['start_time_date'].date(
+    workout_lookup = {w['start_time_date']
-    ): w for w in workouts if start_date <= w['start_time_date'].date() <= end_date}
+        : w for w in workouts if start_date <= w['start_time_date'] <= end_date}
 
     current_date = datetime.now().date()
     days_of_month = [
@@ -655,11 +664,11 @@ def generate_daily_duration_sparkline(workouts):
         return ''
 
     # Determine date range based on workouts data
-    start_date = workouts[-1]['start_time_date'].date()
+    start_date = workouts[-1]['start_time_date']
-    end_date = workouts[0]['start_time_date'].date()
+    end_date = workouts[0]['start_time_date']
 
     # Build a mapping of dates to their respective durations for easier lookup
-    workouts_by_date = {w['start_time_date'].date(): int(
+    workouts_by_date = {w['start_time_date']: int(
         w['duration_minutes']) for w in workouts}
 
     daily_durations = [workouts_by_date.get(

templates/partials/user_workouts_graphs.html

@@ -0,0 +1,88 @@
+<div class="flex flex-wrap mb-1">
+    <div class="w-full md:w-1/4 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">
+                Attributes
+            </label>
+            <select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="attributes"
+                class="bg-gray-50 border border-gray-300 " multiple
+                hx-get="{{ url_for('graph_user_workouts', user_id=user.id) }}"
+                hx-include="[name='start_date'],[name='end_date'],[name='period']"
+                hx-target="#user-workouts-overview-graphs-{{ user.id }}" hx-swap="innerHTML" _="init js(me)
+                        te.Select.getOrCreateInstance(me).setValue({{ ['workout_count'] }})
+                    end">
+                {% for val,name in user.attributes %}
+                <option value="{{ val }}">{{ name }}</option>
+                {% endfor %}
+            </select>
+        </div>
+    </div>
+    <div class="w-full md:w-1/4 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">
+            Start date
+        </label>
+        <div class="relative">
+            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
+                    viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd"
+                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                        clip-rule="evenodd"></path>
+                </svg>
+            </div>
+            <input type="date"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
+                name="start_date" value="{{ user.first_workout_date }}"
+                hx-get="{{ url_for('graph_user_workouts', user_id=user.id) }}"
+                hx-include="[name='attributes'],[name='end_date'],[name='period']"
+                hx-target="#user-workouts-overview-graphs-{{ user.id }}" hx-swap="innerHTML" hx-trigger="change">
+        </div>
+    </div>
+    <div class="w-full md:w-1/4 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">
+            End date
+        </label>
+        <div class="relative">
+            <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+                <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
+                    viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd"
+                        d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
+                        clip-rule="evenodd"></path>
+                </svg>
+            </div>
+            <input type="date"
+                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
+                name="end_date" value="{{ user.last_workout_date }}"
+                hx-get="{{ url_for('graph_user_workouts', user_id=user.id) }}"
+                hx-include="[name='start_date'],[name='attributes'],[name='period']"
+                hx-target="#user-workouts-overview-graphs-{{ user.id }}" hx-swap="innerHTML" hx-trigger="change">
+        </div>
+    </div>
+    <div class="w-full md:w-1/4 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">
+                Period
+            </label>
+            <select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="period"
+                class="bg-gray-50 border border-gray-300 "
+                hx-get="{{ url_for('graph_user_workouts', user_id=user.id) }}"
+                hx-include="[name='start_date'],[name='end_date'],[name='attributes']"
+                hx-target="#user-workouts-overview-graphs-{{ user.id }}" hx-swap="innerHTML" _="init js(me)
+                        te.Select.getOrCreateInstance(me).setValue({{ ['week'] }})
+                    end">
+
+                {% for p in user.periods %}
+                <option value="{{ p }}">{{ p }}</option>
+                {% endfor %}
+            </select>
+        </div>
+    </div>
+</div>
+
+<div id="user-workouts-overview-graphs-{{ user.id }}">
+    <img src="{{ url_for('graph_user_workouts', user_id=user.id, period='week', attributes=['workout_count']) }}"
+        loading="lazy" alt="No image" class="mx-auto">
+    <img src="{{ url_for('graph_user_workouts', user_id=user.id, period='month', attributes=['duration']) }}"
+        loading="lazy" alt="No image" class="mx-auto">
+</div>

templates/workouts_list.html

@@ -75,12 +75,7 @@
     <div class="!visible collapse p-4 hidden" id="workouts-list-accordion-{{ user.id }}">
         {{ render_partial('partials/calendar.html', calendar_month=user.calendar_month, user_id = user.id) }}
 
-        <img src="{{ url_for('graph_user_workouts', user_id=user.id, period='week', attributes=['workout_count']) }}"
+        {{ render_partial('partials/user_workouts_graphs.html', user=user) }}
-            loading="lazy" alt="No image" class="mx-auto">
-        <img src="{{ url_for('graph_user_workouts', user_id=user.id, period='month', attributes=['duration']) }}"
-            loading="lazy" alt="No image" class="mx-auto">
-
-
 
         <div id="workouts-list-wrapper-for-user-{{ user.id }}" class="mt-5 pl-2">{{
             render_partial('partials/workouts_list_fragment.html',