Feat/camp analytics funnel
Overview
This Merge Request (MR) addresses an issue in the Camp Analytics Dashboard where the Patient Journey Funnel was rendering in the UI but not displaying the actual data from the backend APIs. Patients registered in the selected medical camp were not being reflected in the funnel stages, causing all counts to show 0 and status to appear as PENDING.
The MR fixes the data parsing and integration for the funnel chart so that each stage displays real-time patient counts as expected.
What does this MR do and why?
This MR ensures that the funnel chart in the Analytics Dashboard correctly reflects the backend data for each stage of the patient journey. Previously, while the UI displayed the funnel component correctly, the counts were not populated, causing discrepancies between the analytics cards and the funnel chart.
Motivation: Provide accurate visualization of patient journey stages for medical camp analytics, improving reliability and actionable insights for camp administrators.
Approach: The MR updates the funnel chart component to properly parse the API response and map patient counts to the correct stages. Data is normalized to match the funnel chart structure and status is updated dynamically based on real counts.
Trade-offs: No breaking changes; existing analytics cards continue to work as before. The funnel chart now relies on correctly structured API data.
Changes Made
- Updated
FunnelChartcomponent to correctly parse API response for patient stages. - Added mapping logic to convert backend stage counts to funnel chart data.
- Replaced hardcoded stage counts with dynamic data from API.
- Updated statuses of stages based on actual patient count.
- Minor styling adjustments to handle dynamic labels and counts.
Technical Details
- Architecture: The funnel chart now receives an array of stages with counts directly from the API and maps them to the D3-Sankey chart nodes.
- State Management: Uses React state to store API response and derived funnel data.
- Data Flow: API → Response parsing → State update → Funnel chart rendering.
- i18n: All UI labels replaced with internationalization keys for consistency.
- Error Handling: Added fallback to 0 counts if API returns empty data.
Type of Change
-
✨ New feature (non-breaking change that adds functionality) -
🐛 Bug fix (non-breaking change that fixes an issue) -
💥 Breaking change -
📝 Documentation update -
🎨 UI/UX improvement -
♻ ️ Refactor -
⚡ Performance improvement -
🧪 Test update -
🔧 Configuration change -
🚨 Security fix
Related Issues / References
- Closes #196 (closed)
Screenshots or Screen Recordings
How to Validate Locally
Checkout the feature branch for this MR.
Run the frontend application.
Navigate to the Camp Analytics Dashboard.
Select a medical camp with registered patients.
Verify that:
The Patient Journey Funnel displays patient counts correctly.
Counts match the backend analytics data.
Stage statuses update dynamically based on patient counts.
Testing Done
Unit tests added/updated
API endpoint tests passing
Test Cases Covered
Scenario Expected Result Status
Funnel chart loads successfully Funnel stages render correctly
Run frontend tests
npm test
Run coverage
npm run test:coverage Code Quality Checklist
Code follows project conventions.
No unused imports or variables.
TypeScript types are properly defined.
API response handling implemented safely.
Error handling implemented for invalid API responses.
Documentation
API usage comments updated where needed.
Code comments added for funnel data transformation logic.
Known Limitations / Technical Debt
Funnel chart currently depends on the backend response format.
Future improvements may include stronger validation and fallback states for malformed API responses.
Additional Notes
This change improves the reliability of the Camp Analytics Dashboard by ensuring that the Patient Journey Funnel visualization accurately reflects real patient data, enabling better monitoring and decision-making during medical camp operations.