Enhance management commands activity visualization and tracking

- Improved activity bar visualization with grid background and dynamic height
- Added hover tooltips for activity bars with formatted date and execution count
- Enhanced daily stats tracking for management commands
- Implemented max value calculation for activity bars
- Added more detailed and consistent data representation for command statistics

Author: DonnieBLT

website/templates/management_commands.html

@@ -84,16 +84,27 @@ <h1 class="text-2xl font-bold mb-6">Management Commands</h1>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ command.run_count|default:"0" }}</td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                     {% if command.stats_data %}
-                                        <div class="flex items-end h-[30px] w-[100px] gap-[1px]"
-                                             title="30-day activity">
-                                            {% for data in command.stats_data %}
-                                                <div class="flex-1 bg-[#e74c3c] min-w-[2px] rounded-t-[1px]"
-                                                     style="height: {% widthratio data.value 100 30 %}px"
-                                                     title="{{ data.date }}: {{ data.value }}"></div>
-                                            {% endfor %}
+                                        <div class="relative">
+                                            <!-- Grid background -->
+                                            <div class="absolute inset-0 grid grid-rows-4 w-[120px] h-[30px] pointer-events-none">
+                                                <div class="border-t border-gray-200"></div>
+                                                <div class="border-t border-gray-200"></div>
+                                                <div class="border-t border-gray-200"></div>
+                                                <div class="border-t border-gray-200"></div>
+                                            </div>
+                                            <!-- Bars -->
+                                            <div class="flex items-end h-[30px] w-[120px] gap-[1px] relative"
+                                                 title="30-day activity">
+                                                {% for data in command.stats_data %}
+                                                    <div class="flex-1 {% if data.value > 0 %}bg-[#e74c3c] hover:bg-red-700{% else %}bg-gray-200 hover:bg-gray-300{% endif %} min-w-[2px] rounded-t-sm transition-all duration-200"
+                                                         style="height: {% if data.value > 0 %}{{ data.height_percent|floatformat:0 }}{% else %}1{% endif %}%"
+                                                         title="{{ data.date }}: {{ data.value }}"></div>
+                                                {% endfor %}
+                                            </div>
                                         </div>
+                                        <div class="text-xs text-gray-500 mt-1">Max: {{ command.max_value }}</div>
                                     {% else %}
-                                        <div class="flex items-center justify-center h-[30px] w-[100px] text-gray-400 text-[10px]">No data</div>
+                                        <div class="flex items-center justify-center h-[30px] w-[120px] text-gray-400 text-[10px]">No data</div>
                                     {% endif %}
                                 </td>
                                 <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
@@ -276,6 +287,64 @@ <h4 class="text-lg font-medium text-gray-900 mb-2">Command Results</h4>
                     submitCommandForm(this);
                 });
             }
+
+            // Enhanced tooltips for activity bars
+            const activityBars = document.querySelectorAll('.flex-1[title]');
+            activityBars.forEach(bar => {
+                bar.addEventListener('mouseenter', function() {
+                    const title = this.getAttribute('title');
+                    if (!title) return;
+                    
+                    // Parse the title to get date and value
+                    const [date, valueStr] = title.split(': ');
+                    const value = parseInt(valueStr) || 0;
+                    
+                    // Format the date
+                    const formattedDate = new Date(date).toLocaleDateString('en-US', {
+                        month: 'short',
+                        day: 'numeric',
+                        year: 'numeric'
+                    });
+                    
+                    // Create tooltip
+                    const tooltip = document.createElement('div');
+                    tooltip.className = 'absolute z-10 bg-gray-900 text-white text-xs rounded py-1 px-2 pointer-events-none';
+                    tooltip.innerHTML = `
+                        <div class="font-bold">${formattedDate}</div>
+                        <div class="flex justify-between gap-2">
+                            <span>Executions:</span>
+                            <span class="font-bold">${value}</span>
+                        </div>
+                    `;
+                    tooltip.style.bottom = '40px';
+                    tooltip.style.left = '50%';
+                    tooltip.style.transform = 'translateX(-50%)';
+                    tooltip.style.whiteSpace = 'nowrap';
+                    
+                    // Position tooltip
+                    this.style.position = 'relative';
+                    this.appendChild(tooltip);
+                    
+                    // Remove title to prevent default tooltip
+                    this.setAttribute('data-original-title', title);
+                    this.removeAttribute('title');
+                });
+                
+                bar.addEventListener('mouseleave', function() {
+                    // Restore title
+                    const originalTitle = this.getAttribute('data-original-title');
+                    if (originalTitle) {
+                        this.setAttribute('title', originalTitle);
+                        this.removeAttribute('data-original-title');
+                    }
+                    
+                    // Remove tooltip
+                    const tooltip = this.querySelector('div');
+                    if (tooltip) {
+                        this.removeChild(tooltip);
+                    }
+                });
+            });
         });
 
         // Command modal functions

website/views/core.py

@@ -1671,17 +1671,45 @@ def management_commands(request):
 
             # Get stats data for the past 30 days if it exists
             stats_data = []
+
+            # Create a dictionary to store values for each day in the 30-day period
+            date_range = []
+            date_values = {}
+
+            # Generate all dates in the 30-day range
+            for i in range(30):
+                date = (timezone.now() - timezone.timedelta(days=29 - i)).date()
+                date_range.append(date)
+                date_values[date.isoformat()] = 0
+
+            # Get actual stats data
             daily_stats = DailyStats.objects.filter(name=name, created__gte=thirty_days_ago).order_by("created")
 
-            if daily_stats.exists():
-                for stat in daily_stats:
-                    try:
-                        value = int(stat.value)
-                    except (ValueError, TypeError):
-                        value = 0
-                    stats_data.append({"date": stat.created.date().isoformat(), "value": value})
+            # Fill in the values we have
+            max_value = 1  # Minimum value to avoid division by zero
+            for stat in daily_stats:
+                try:
+                    value = int(stat.value)
+                    date_key = stat.created.date().isoformat()
+                    date_values[date_key] = value
+                    if value > max_value:
+                        max_value = value
+                except (ValueError, TypeError, KeyError):
+                    pass
+
+            # Convert to list format for the template
+            for date in date_range:
+                date_key = date.isoformat()
+                stats_data.append(
+                    {
+                        "date": date_key,
+                        "value": date_values.get(date_key, 0),
+                        "height_percent": (date_values.get(date_key, 0) / max_value) * 100 if max_value > 0 else 0,
+                    }
+                )
 
             command_info["stats_data"] = stats_data
+            command_info["max_value"] = max_value
             available_commands.append(command_info)
 
     commands = sorted(available_commands, key=lambda x: x["name"])
@@ -1785,6 +1813,31 @@ def run_management_command(request):
                 log_entry.success = True
                 log_entry.save()
 
+                # Record execution in DailyStats
+                try:
+                    # Get existing stats for today
+                    today = timezone.now().date()
+                    daily_stat, created = DailyStats.objects.get_or_create(
+                        name=command,
+                        created__date=today,
+                        defaults={"value": "1", "created": timezone.now(), "modified": timezone.now()},
+                    )
+
+                    if not created:
+                        # Increment the value
+                        try:
+                            current_value = int(daily_stat.value)
+                            daily_stat.value = str(current_value + 1)
+                            daily_stat.modified = timezone.now()
+                            daily_stat.save()
+                        except (ValueError, TypeError):
+                            # If value is not an integer, set it to 1
+                            daily_stat.value = "1"
+                            daily_stat.modified = timezone.now()
+                            daily_stat.save()
+                except Exception as stats_error:
+                    logging.error(f"Error updating DailyStats: {str(stats_error)}")
+
                 if request.headers.get("X-Requested-With") == "XMLHttpRequest":
                     return JsonResponse({"success": True, "output": output})