Skip to content

fix: update camp funnel chart and constants

Madavarapu Sai Harshavardhan requested to merge fix/funnel-chart-constants into develop

Overview

Refactors the Camp Funnel Chart component from a D3 Sankey visualization to a simpler progress bar style with real-time Socket.IO updates, and disables the volunteer camp gating feature.

What does this MR do and why?

The original D3 Sankey chart was complex and difficult to maintain. This refactor simplifies it to a cleaner progress bar visualization that displays patient flow through each stage. Additionally, the volunteer camp gating was causing issues and needed to be disabled for testing.

Changes Made

  • src/components/CampFunnelChart.tsx - Completely refactored from D3 Sankey to progress bar style with Socket.IO real-time updates
  • src/lib/constants.ts - Changed ENABLE_VOLUNTEER_CAMP_GATING from true to false

Technical Details

  • Removed D3 Sankey dependencies (d3, d3-sankey)
  • Added Socket.IO client for real-time patient/queue updates
  • Created custom useCampSocket hook for managing WebSocket connections
  • Simplified UI to progress bars showing each stage with completion percentage
  • Added drop-off indicators between stages

Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 UI/UX improvement
  • ♻️ Refactor (no functional changes)
  • ⚡ Performance improvement
  • 🧪 Test update
  • 🔧 Configuration change
  • 🚨 Security fix

Related Issues / References

Screenshots or Screen Recordings

How to Set Up and Validate Locally

  1. Pull this branch / checkout MR

  2. Install dependencies (if any changed):

    bun install

  3. Update environment variables (if needed):

    # .env
VITE_SERVER_URL=http://localhost:8000

  4. Run development server:

    bun dev

  5. Navigate to specific pages or perform actions:

    • Visit admin dashboard with camp analytics
    • Verify funnel chart displays correctly
    • Check real-time updates when patients move through stages

  6. Expected behavior: Progress bars show patient flow, real-time updates work

Test Cases Covered:

Scenario Expected Result Status
Funnel chart loads with data Shows progress bars ✅
No data available Shows "No data available" ✅
Real-time update received UI updates automatically ✅
Volunteer camp gating disabled Can access without gate ✅

Code Standards

  • Code follows project conventions (naming, structure, formatting)

  • No console.log() or debugger statements left in code

  • No unused imports, variables, or functions

  • No duplicate code and use of existing components for reusability

  • i18n check passed with no hardcoded strings in codebase for i18n support

  • TypeScript types are properly defined (no any unless justified)

  • ESLint and Prettier checks pass

    bun run lint

React Best Practices

  • Components are properly split and single-responsibility
  • Hooks follow rules (no conditional hooks, proper dependencies)
  • State management is appropriate (local vs global state)
  • No unnecessary re-renders (memoization used where needed)
  • Event handlers are properly cleaned up

Component Patterns

  • shadcn/ui components used correctly
  • Tailwind classes follow utility-first approach
  • Responsive design considered (mobile-first if applicable)
  • Accessibility attributes included (aria-*, role, etc.)
  • Icons from lucide-react used consistently

API & Data Fetching

  • TanStack Query used for server state (if applicable)
  • Loading and error states handled
  • API types defined in src/types/api.ts
  • Axios interceptors handle auth tokens correctly
  • Use of Zod for data validations

Error Handling

  • Errors are caught and handled gracefully
  • User-friendly error messages displayed
  • Errors are being toasted properly
  • Network failures handled appropriately

Documentation

  • README.md updated (if setup steps changed)
  • .env.example updated (if new env vars added)
  • CHANGELOG.md updated (if applicable)

Known Limitations / Technical Debt

  • D3 and d3-sankey packages are still installed but unused (can be removed in cleanup)
  • Volunteer camp gating change is for testing; may need to revert for production

MR Acceptance Checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports