Implement charts for health metrics

backend/apps/owasp/graphql/nodes/project_health_metrics.py

@@ -1,5 +1,7 @@
 """OWASP Project Health Metrics Node."""
 
+from datetime import datetime
+
 import strawberry
 import strawberry_django
 
@@ -30,11 +32,21 @@ def age_days(self) -> int:
         """Resolve project age in days."""
         return self.age_days
 
+    @strawberry.field
+    def created_at(self) -> datetime:
+        """Resolve metrics creation date."""
+        return self.nest_created_at
+
     @strawberry.field
     def last_commit_days(self) -> int:
         """Resolve last commit age in days."""
         return self.last_commit_days
 
+    @strawberry.field
+    def last_commit_days_requirement(self) -> int:
+        """Resolve last commit age requirement in days."""
+        return self.last_commit_days_requirement
+
     @strawberry.field
     def last_pull_request_days(self) -> int:
         """Resolve last pull request age in days."""
@@ -45,6 +57,11 @@ def last_release_days(self) -> int:
         """Resolve last release age in days."""
         return self.last_release_days
 
+    @strawberry.field
+    def last_release_days_requirement(self) -> int:
+        """Resolve last release age requirement in days."""
+        return self.last_release_days_requirement
+
     @strawberry.field
     def owasp_page_last_update_days(self) -> int:
         """Resolve OWASP page last update age in days."""

backend/apps/owasp/models/project_health_metrics.py

@@ -6,6 +6,7 @@
 from django.utils import timezone
 
 from apps.common.models import BulkSaveModel, TimestampedModel
+from apps.owasp.models.project_health_requirements import ProjectHealthRequirements
 
 
 class ProjectHealthMetrics(BulkSaveModel, TimestampedModel):
@@ -87,6 +88,11 @@ def last_commit_days(self) -> int:
         """Calculate days since last commit."""
         return (timezone.now() - self.last_committed_at).days if self.last_committed_at else 0
 
+    @property
+    def last_commit_days_requirement(self) -> int:
+        """Get the last commit requirement for the project."""
+        return self.project_requirements.last_commit_days
+
     @property
     def last_pull_request_days(self) -> int:
         """Calculate days since last pull request."""
@@ -101,6 +107,11 @@ def last_release_days(self) -> int:
         """Calculate days since last release."""
         return (timezone.now() - self.last_released_at).days if self.last_released_at else 0
 
+    @property
+    def last_release_days_requirement(self) -> int:
+        """Get the last release requirement for the project."""
+        return self.project_requirements.last_release_days
+
     @property
     def owasp_page_last_update_days(self) -> int:
         """Calculate days since OWASP page last update."""
@@ -110,6 +121,11 @@ def owasp_page_last_update_days(self) -> int:
             else 0
         )
 
+    @property
+    def project_requirements(self) -> ProjectHealthRequirements:
+        """Get the project health requirements for the project's level."""
+        return ProjectHealthRequirements.objects.get(level=self.project.level)
+
     @staticmethod
     def bulk_save(metrics: list, fields: list | None = None) -> None:  # type: ignore[override]
         """Bulk save method for ProjectHealthMetrics.

backend/tests/apps/owasp/graphql/nodes/project_health_metrics_test.py

@@ -1,5 +1,7 @@
 """Test cases for ProjectHealthMetricsNode."""
 
+from datetime import datetime
+
 import pytest
 
 from apps.owasp.graphql.nodes.project_health_metrics import ProjectHealthMetricsNode
@@ -15,13 +17,16 @@ def test_meta_configuration(self):
         }
         expected_field_names = {
             "age_days",
+            "created_at",
             "contributors_count",
             "forks_count",
             "is_funding_requirements_compliant",
             "is_leader_requirements_compliant",
             "last_commit_days",
+            "last_commit_days_requirement",
             "last_pull_request_days",
             "last_release_days",
+            "last_release_days_requirement",
             "open_issues_count",
             "open_pull_requests_count",
             "owasp_page_last_update_days",
@@ -47,13 +52,16 @@ def _get_field_by_name(self, name):
         ("field_name", "expected_type"),
         [
             ("age_days", int),
+            ("created_at", datetime),
             ("contributors_count", int),
             ("forks_count", int),
             ("is_funding_requirements_compliant", bool),
             ("is_leader_requirements_compliant", bool),
             ("last_commit_days", int),
+            ("last_commit_days_requirement", int),
             ("last_pull_request_days", int),
             ("last_release_days", int),
+            ("last_release_days_requirement", int),
             ("open_issues_count", int),
             ("open_pull_requests_count", int),
             ("owasp_page_last_update_days", int),

cspell/custom-dict.txt

@@ -31,6 +31,7 @@ a2eeef
 ahmedxgouda
 algoliasearch
 ansa
+apexcharts
 apk
 arithmatex
 arkid15r

frontend/__tests__/e2e/pages/ProjectDetails.spec.ts

@@ -117,4 +117,13 @@ test.describe('Project Details Page', () => {
     await page.getByText('Repo One').click()
     await expect(page).toHaveURL('organizations/OWASP/repositories/repo-1')
   })
+
+  test('should display health metrics section', async ({ page }) => {
+    await expect(page.getByText('Issues Trend')).toBeVisible()
+    await expect(page.getByText('Pull Requests Trend')).toBeVisible()
+    await expect(page.getByText('Stars Trend')).toBeVisible()
+    await expect(page.getByText('Forks Trend')).toBeVisible()
+    await expect(page.getByText('Days Since Last Commit')).toBeVisible()
+    await expect(page.getByText('Days Since Last Release')).toBeVisible()
+  })
 })

frontend/__tests__/unit/data/mockProjectDetailsData.ts

@@ -2,6 +2,19 @@ export const mockProjectDetailsData = {
   project: {
     contributorsCount: 1200,
     forksCount: 10,
+    healthMetrics: [
+      {
+        openIssuesCount: 5,
+        unassignedIssuesCount: 2,
+        unansweredIssuesCount: 1,
+        openPullRequestsCount: 3,
+        starsCount: 20,
+        forksCount: 10,
+        lastCommitDays: 5,
+        lastReleaseDays: 10,
+        score: 85,
+      },
+    ],
     isActive: true,
     issuesCount: 10,
     key: 'example-project',

frontend/__tests__/unit/pages/ProjectDetails.test.tsx

@@ -18,6 +18,15 @@ jest.mock('@fortawesome/react-fontawesome', () => ({
   FontAwesomeIcon: () => <span data-testid="mock-icon" />,
 }))
 
+jest.mock('react-apexcharts', () => {
+  return {
+    __esModule: true,
+    default: () => {
+      return <div data-testid="mock-apexcharts">Mock ApexChart</div>
+    },
+  }
+})
+
 const mockRouter = {
   push: jest.fn(),
 }
@@ -142,6 +151,22 @@ describe('ProjectDetailsPage', () => {
     })
   })
 
+  test('Displays health metrics section', async () => {
+    ;(useQuery as jest.Mock).mockReturnValue({
+      data: mockProjectDetailsData,
+      error: null,
+    })
+    render(<ProjectDetailsPage />)
+    await waitFor(() => {
+      expect(screen.getByText('Issues Trend')).toBeInTheDocument()
+      expect(screen.getByText('Pull Requests Trend')).toBeInTheDocument()
+      expect(screen.getByText('Stars Trend')).toBeInTheDocument()
+      expect(screen.getByText('Forks Trend')).toBeInTheDocument()
+      expect(screen.getByText('Days Since Last Commit')).toBeInTheDocument()
+      expect(screen.getByText('Days Since Last Release')).toBeInTheDocument()
+    })
+  })
+
   test('Handles case when no data is available', async () => {
     ;(useQuery as jest.Mock).mockReturnValue({
       data: { repository: null },

frontend/package.json

@@ -36,6 +36,7 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/leaflet.markercluster": "^1.5.5",
     "@types/lodash": "^4.17.18",
+    "apexcharts": "^4.7.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "core-js": "^3.43.0",
@@ -55,6 +56,7 @@
     "next-auth": "^4.24.11",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
+    "react-apexcharts": "^1.7.0",
     "react-dom": "^19.1.0",
     "react-icons": "^5.5.0",
     "react-router-dom": "^7.6.2",

frontend/src/app/projects/[projectKey]/page.tsx

@@ -88,9 +88,11 @@ const ProjectDetailsPage = () => {
       pluralizedName: 'Repositories',
     },
   ]
+
   return (
     <DetailsCard
       details={projectDetails}
+      healthMetricsData={project.healthMetrics}
       isActive={project.isActive}
       languages={project.languages}
       pullRequests={project.recentPullRequests}