website/views/core.py (1)

1494-1494: Consider adding error handling for potential division by zero.

While the code checks if users["total"] > 0 before division, I'd recommend extracting the percentage calculation logic into a helper function for better maintainability and consistency across all metrics.

+ def calculate_percentage(numerator, denominator):
+     """Calculate percentage with zero division protection"""
+     return round((numerator / denominator * 100) if denominator > 0 else 0)
+
  # Then in the stats dictionary:
- "active_percentage": round((users["active"] / users["total"] * 100) if users["total"] > 0 else 0),
+ "active_percentage": calculate_percentage(users["active"], users["total"]),

website/templates/stats_dashboard.html (4)

251-256: Consider adding feedback mechanism for sync operation.

The sync button should provide visual feedback after the operation completes, indicating success or failure.

  <button id="syncProjectsBtn"
          type="button"
          class="mt-1 inline-flex items-center px-2 py-1 bg-[#e74c3c] hover:bg-red-600 text-white text-xs rounded">
      <i class="fas fa-sync-alt mr-1"></i> Sync Now
  </button>
+ {% if messages %}
+     {% for message in messages %}
+         <div class="text-xs mt-1 {% if message.tags == 'success' %}text-green-600{% else %}text-red-600{% endif %}">
+             {{ message }}
+         </div>
+     {% endfor %}
+ {% endif %}

---

423-424: Use dynamic date ranges for the activity chart.

The x-axis categories are hard-coded to months instead of being dynamically generated based on the selected time period.

Pass date labels from the backend and use them in the chart configuration:

  xaxis: {
-     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+     categories: {{ date_labels|safe }},
      labels: {
          style: {
              colors: '#9ca3af'
          }
      },

---

496-496: Consider using a more diverse color palette for better accessibility.

Using variations of red for all chart elements may make it difficult for users with color vision deficiencies to distinguish between different data points.

Use a more diverse and accessible color palette:

- colors: ['#e74c3c', '#e76c3c', '#e74c6c', '#e7463c'],
+ colors: ['#e74c3c', '#3498db', '#2ecc71', '#f39c12'],

---

287-349: Add error handling for JavaScript libraries.

There's no error handling for cases where the external libraries (ApexCharts or CountUp.js) fail to load.

Add error handling to gracefully degrade functionality when libraries are unavailable:

  document.addEventListener('DOMContentLoaded', function() {
+     // Check if required libraries are available
+     if (typeof CountUp === 'undefined' || typeof ApexCharts === 'undefined') {
+         console.error('Required libraries not loaded. Some dashboard features will be disabled.');
+         document.querySelectorAll('.requires-js').forEach(el => {
+             el.innerHTML = 'Chart unavailable (JavaScript library not loaded)';
+             el.classList.add('bg-gray-100', 'text-gray-500', 'p-4', 'text-center');
+         });
+         return;
+     }
      
      // Rest of the initialization code...

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

website/templates/stats_dashboard.html (3)

362-366: Ensure time series data aligns with selected time period.

The chart uses a static 12-month display regardless of the selected time period. Consider dynamically adjusting the chart's x-axis labels based on the selected period for improved accuracy.

series: [{
    name: 'Issues',
    data: {{ issues_time_series|safe|default:'[0,0,0,0,0,0,0,0,0,0,0,0]' }}
}, {
    name: 'Users',
    data: {{ users_time_series|safe|default:'[0,0,0,0,0,0,0,0,0,0,0,0]' }}
}],

Additionally, pass the actual time period labels from the backend:

xaxis: {
-   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+   categories: {{ time_period_labels|safe|default:"['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']" }},

---

352-356: Add error handling for the sync projects operation.

The button is correctly disabled during the sync operation, but there's no mechanism to re-enable it or show an error message if the operation fails.

document.getElementById('syncProjectsBtn').addEventListener('click', function() {
+   const button = this;
    document.getElementById('syncProjectsForm').submit();
    this.disabled = true;
    this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Syncing...';
+   
+   // Add listener for form submission result
+   window.addEventListener('load', function() {
+       button.disabled = false;
+       button.innerHTML = '<i class="fas fa-sync-alt mr-1"></i> Sync Now';
+       
+       // Check for Django messages to display success/error
+       const messages = document.querySelectorAll('.django-messages .alert');
+       if (messages.length > 0) {
+           // Handle messages accordingly
+       }
+   }, { once: true });
});

---

498-499: Improve color differentiation in the issue status pie chart.

The current colors are all similar shades of red, which might make it difficult to distinguish between different statuses.

-colors: ['#e74c3c', '#e76c3c', '#e74c6c', '#e7463c'],
+colors: ['#e74c3c', '#3498db', '#2ecc71', '#f39c12'],

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

website/templates/stats_dashboard.html (5)

188-213: Charts & Secondary Metrics Section

The integration of the "Activity Over Time" area chart and the "Issue Status Breakdown" pie chart enhances data visualization. One suggestion: for the activity chart, both data series currently use the same color (#e74c3c) which may reduce clarity. Consider assigning distinct colors to differentiate between “Issues” and “Users” data.

---

281-287: Sync Projects Form Integration

The hidden sync projects form and the associated button are correctly implemented. For increased robustness, consider adding error handling (and perhaps re-enabling the button) if the form submission fails.

---

330-350: Animated Counters Initialization

The function initializeCounters() efficiently iterates over the counter elements—retrieving the starting values from data attributes and initializing the CountUp animations. For future maintainability, you might consider encapsulating this logic into a module if similar functionality is needed elsewhere.

---

355-360: Sync Projects Button Event Handling

The event listener for the “Sync Projects” button disables the button and updates its inner HTML to indicate a loading state. It works as intended, though adding error handling for failed submissions could further improve user feedback.

---

362-394: Activity Over Time Chart Configuration

The configuration for the Activity Over Time chart correctly sets up dynamic series data and responsive styling. However, both the “Issues” and “Users” series are assigned the same color (#e74c3c), which might lead to visual confusion. Consider using a distinct color (for example, a blue tone for one series) to enhance clarity.

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro