Add 'Machine vs Free Weight' & 'Compound vs Isolation' breakdowns for workouts

features/exercises.py

@@ -78,18 +78,19 @@ class Exercises:
                                  
         return self.get_exercise(exercise_id)
 
-    def get_workout_muscle_group_distribution(self, workout_id):
+    def get_workout_attribute_distribution(self, workout_id, category_name):
         query = """
-            SELECT attr.name as muscle_group, COUNT(*) as count
+            SELECT attr.name as attribute_name, COUNT(*) as count
             FROM topset t
-            JOIN exercise_to_attribute eta ON t.exercise_id = eta.exercise_id
+            JOIN exercise e ON t.exercise_id = e.exercise_id
+            JOIN exercise_to_attribute eta ON e.exercise_id = eta.exercise_id
             JOIN exercise_attribute attr ON eta.attribute_id = attr.attribute_id
             JOIN exercise_attribute_category cat ON attr.category_id = cat.category_id
-            WHERE t.workout_id = %s AND cat.name = 'Muscle Group'
+            WHERE t.workout_id = %s AND cat.name = %s
             GROUP BY attr.name
             ORDER BY count DESC
         """
-        distribution = self.execute(query, [workout_id])
+        distribution = self.execute(query, [workout_id, category_name])
         
         # Calculate percentages and SVG parameters
         total_counts = sum(item['count'] for item in distribution)
@@ -105,6 +106,8 @@ class Exercises:
             "#10b981", # emerald-500
             "#6366f1", # indigo-500
             "#f43f5e", # rose-500
+            "#84cc16", # lime-500
+            "#0ea5e9", # sky-500
         ]
 
         if total_counts > 0:

routes/workout.py

@@ -124,8 +124,10 @@ def _get_workout_view_model(person_id, workout_id):
     # Sort tags alphabetically by name for consistent display
     workout_data["tags"].sort(key=lambda x: x.get('tag_name', ''))
 
-    # Add muscle group distribution
+    # Add multi-category breakdowns
-    workout_data["muscle_distribution"] = db.exercises.get_workout_muscle_group_distribution(workout_id)
+    workout_data["muscle_distribution"] = db.exercises.get_workout_attribute_distribution(workout_id, 'Muscle Group')
+    workout_data["equipment_distribution"] = db.exercises.get_workout_attribute_distribution(workout_id, 'Machine vs Free Weight')
+    workout_data["movement_distribution"] = db.exercises.get_workout_attribute_distribution(workout_id, 'Compound vs Isolation')
 
     return workout_data
 
@@ -182,13 +184,15 @@ def get_workout_start_date(person_id, workout_id):
     start_date = workout.get('start_date') if workout else None
     return render_template('partials/start_date.html', person_id=person_id, workout_id=workout_id, start_date=start_date)
 
-@workout_bp.route("/person/<int:person_id>/workout/<int:workout_id>/muscle_distribution", methods=['GET'])
+@workout_bp.route("/person/<int:person_id>/workout/<int:workout_id>/distribution", methods=['GET'])
-def get_workout_muscle_distribution(person_id, workout_id):
+def get_workout_distribution(person_id, workout_id):
-    distribution = db.exercises.get_workout_muscle_group_distribution(workout_id)
+    category = request.args.get('category', 'Muscle Group')
+    distribution = db.exercises.get_workout_attribute_distribution(workout_id, category)
     return render_template('partials/workout_breakdown.html', 
                            person_id=person_id, 
                            workout_id=workout_id, 
-                           muscle_distribution=distribution)
+                           distribution=distribution,
+                           category_name=category)
 
 @workout_bp.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>/achievements", methods=['GET'])
 @validate_topset

templates/partials/workout_breakdown.html

@@ -1,15 +1,19 @@
-{% if muscle_distribution %}
+{% set distribution = distribution or muscle_distribution %}
-<div class="px-4 py-3 bg-white relative" id="muscle-breakdown"
+{% set category_name = category_name or 'Muscle Group' %}
-    hx-get="{{ url_for('workout.get_workout_muscle_distribution', person_id=person_id, workout_id=workout_id) }}"
+{% set breakdown_id = category_name.lower().replace(' ', '-') %}
+
+{% if distribution %}
+<div class="px-4 py-3 bg-white relative" id="{{ breakdown_id }}-breakdown"
+    hx-get="{{ url_for('workout.get_workout_distribution', person_id=person_id, workout_id=workout_id, category=category_name) }}"
     hx-trigger="topsetAdded from:body" hx-swap="outerHTML">
 
     <!-- Shared Popover Container (managed by Hyperscript) -->
-    <div id="breakdown-popover"
+    <div id="popover-{{ breakdown_id }}"
         class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 hidden bg-white border border-gray-200 shadow-2xl rounded-xl p-4 min-w-[200px] animate-in fade-in zoom-in duration-200"
         _="on click from elsewhere add .hidden to me">
-        <div id="popover-content"></div>
+        <div id="content-{{ breakdown_id }}"></div>
         <button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
-            _="on click add .hidden to #breakdown-popover">
+            _="on click add .hidden to #popover-{{ breakdown_id }}">
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
             </svg>
@@ -17,31 +21,33 @@
     </div>
 
     <div class="flex items-center justify-between mb-2">
-        <h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">Session Muscle Distribution</h4>
+        <h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">{{ category_name }} Distribution
+        </h4>
     </div>
 
     <!-- Sleek Performance Bar -->
     <div class="w-full h-8 flex overflow-hidden rounded-lg bg-gray-100 shadow-inner p-0.5 cursor-pointer">
-        {% for item in muscle_distribution %}
+        {% for item in distribution %}
         <div class="h-full transition-all duration-700 ease-in-out flex items-center justify-center relative group first:rounded-l-md last:rounded-r-md"
             style="width: {{ item.percentage }}%; background-color: {{ item.color }};" _="on click 
                 halt the event 
                 put '<div class=\'flex flex-col gap-1\'>
                         <div class=\'flex items-center gap-2\'>
                             <div class=\'w-3 h-3 rounded-full\' style=\'background-color: {{ item.color }}\'></div>
-                            <span class=\'font-black text-sm uppercase\'>{{ item.muscle_group }}</span>
+                            <span class=\'font-black text-sm uppercase\'>{{ item.attribute_name }}</span>
                         </div>
                         <div class=\'text-2xl font-black text-gray-900\'>{{ item.percentage }}%</div>
                         <div class=\'text-[10px] font-bold text-gray-400 uppercase tracking-wider\'>{{ item.count }} Sets Targeted</div>
-                     </div>' into #popover-content
+                     </div>' into #content-{{ breakdown_id }}
-                remove .hidden from #breakdown-popover" title="{{ item.muscle_group }}: {{ item.percentage }}%">
+                remove .hidden from #popover-{{ breakdown_id }}"
+            title="{{ item.attribute_name }}: {{ item.percentage }}%">
 
             <!-- Labels (Name & Percentage grouped and centered) -->
             <div
                 class="flex items-center justify-center gap-1.5 leading-none text-white pointer-events-none px-1 overflow-hidden">
                 {% if item.percentage > 18 %}
                 <span class="text-[9px] font-black uppercase tracking-tighter truncate drop-shadow-sm">{{
-                    item.muscle_group }}</span>
+                    item.attribute_name }}</span>
                 <span class="text-[9px] font-bold opacity-90 whitespace-nowrap drop-shadow-sm">{{ item.percentage
                     }}%</span>
                 {% elif item.percentage > 8 %}

templates/workout.html

@@ -76,10 +76,16 @@
                 </button>
             </div>
 
-            <!-- Full-Width Breakdown Stripe -->
+            <!-- Multi-Category Breakdown Stripes -->
-            <div class="bg-gray-50/50 border-b">
+            <div class="bg-gray-50/50 border-b divide-y divide-gray-100">
                 {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id,
-                muscle_distribution=muscle_distribution) }}
+                distribution=muscle_distribution, category_name='Muscle Group') }}
+
+                {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id,
+                distribution=equipment_distribution, category_name='Machine vs Free Weight') }}
+
+                {{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id,
+                distribution=movement_distribution, category_name='Compound vs Isolation') }}
             </div>
 
             <!-- Workout Content Card -->