Add duration sparkline on user workouts accordion

app.py

@@ -222,6 +222,8 @@ def render_users_and_workouts():
         start_date = workouts[-1]['start_time_date'].date()
         # get end date from first workout
         end_date = workouts[0]['start_time_date'].date()
+        # get difference in days between start and end date
+        num_days = (end_date - start_date).days + 1
         # calculate number of weeks between start and end date
         num_weeks = (end_date - start_date).days // 7 + 1
 
@@ -241,7 +243,8 @@ def render_users_and_workouts():
 
         workout_counts_sparkline = sparklines.sparklines(
             workout_counts_by_week)
-        duration_sparkline = sparklines.sparklines(duration_by_week)
+        duration_sparkline = sparklines.sparklines(
+            [int(w['duration_minutes']) for w in workouts])[0]
 
         user_data = {
             'id': user.id,
@@ -250,7 +253,10 @@ def render_users_and_workouts():
             'workouts_count': len(workouts),
             'workouts': workouts,
             'workout_counts_by_week': workout_counts_by_week,
-            'duration_by_week': duration_by_week
+            'duration_by_week': duration_by_week,
+            'num_days': num_days,
+            'workout_counts_sparkline': workout_counts_sparkline,
+            'duration_sparkline': duration_sparkline
         }
         users_data.append(user_data)
 

templates/workouts_list.html

@@ -49,9 +49,9 @@
             class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
             type="button">
             <div>
-                <h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts</h2>
+                <h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts <span
-                <p class="text-sm text-gray-500">Duration: 35 days | Weekly average workouts: 25 mins|
+                        class="text-sm text-gray-700 ml-0 md:ml-4">{{ user.duration_sparkline }}</span></h2>
-                    Calories: 84 | Distance: 17</p>
+
             </div>
             <span
                 class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">