Skip to content

Alisha - feature: Create a pie chart showing breakdown of applicants by reason of volunteering#3910

Open
alishawalunj wants to merge 6 commits intodevelopmentfrom
Alisha-Implement-OPT-status-breakdown-piechart
Open

Alisha - feature: Create a pie chart showing breakdown of applicants by reason of volunteering#3910
alishawalunj wants to merge 6 commits intodevelopmentfrom
Alisha-Implement-OPT-status-breakdown-piechart

Conversation

@alishawalunj
Copy link
Contributor

@alishawalunj alishawalunj commented Aug 16, 2025

Description

A88B5ED6-6275-465B-89C9-3ECCA0ED1AA2

Related PRS (if any):

This frontend PR is related to the #1663 backend PR.

Main changes explained:

  • Added a new route to the page for pie chart showing applicants by reason of volunteering
  • The "OptStatusPieChart" page displays a pie chart generated using Chart.js, showing the breakdown of applicants by volunteering status (OPT started, CPT not eligible, OPT not yet started, Citizen, N/A), with the ability to filter by all roles.
  • Displays distinct colors for each category

How to test:

  1. check into current branch
  2. do npm install and ... to run this PR locally
  3. Clear site data/cache
  4. log as admin user
  5. go to http://localhost:5173/analytics/opt-status
  6. make sure pie chart is updated dynamically on changing filters
  7. Check for date range : 2024-06-15 to 2024-07-14
  8. Verify for all roles and test the reset button for date

Screenshots or videos of changes:

REC-20250816153129.mp4

@netlify
Copy link

netlify bot commented Aug 16, 2025 •
edited
Loading

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit a6c6b22
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68a0dd968a594700081e5e46
😎 Deploy Preview https://deploy-preview-3910--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@alishawalunj alishawalunj mentioned this pull request Aug 16, 2025
Open
harshavarma29
harshavarma29 requested changes Aug 17, 2025
View reviewed changes
Copy link
Contributor

@harshavarma29 harshavarma29 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have tested the PR locally using the admin account. The pie chart is working as expected, UI is responsive for different screen sizes, and data labels are displayed correctly. However, I have noticed the following issues:

  1. No message is shown when the start date and end date overlap:
date_overlaps
  1. When no data is available for certain filter selections, no warning message is displayed:
no_warning_message
  1. The UI does not change in dark mode:
dark_mode_issue
  1. The role filter overflows the parent div:
overflow

@one-community one-community changed the title feature: Create a pie chart showing breakdown of applicants by reason of volunteering Alisha - feature: Create a pie chart showing breakdown of applicants by reason of volunteering Sep 10, 2025
@Anusha-Gali Anusha-Gali added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Nov 22, 2025
Anusha-Gali
Anusha-Gali requested changes Nov 29, 2025
View reviewed changes
Copy link

@Anusha-Gali Anusha-Gali left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Alisha,

I have reviewed your PR locally, though the graph load as per functionality. I have identified the below error:
1 - The dark mode is not enabled for the whole page
2 - Upon selecting of random date's in filters(other than the one's mentioned in the decription), the graph does not load - some kind of popup message would have helped
3 - Allows date overlap, yet no message displayed
4 - The elements in the filters div overflow
Screenshot 2025-11-29 at 1 33 02 AM
Screenshot 2025-11-29 at 1 21 22 AM
Screenshot 2025-11-29 at 1 21 39 AM

rohanrastogi311
rohanrastogi311 requested changes Dec 20, 2025
View reviewed changes
Copy link

@rohanrastogi311 rohanrastogi311 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lots of changes to make. Graph doesn't show when "random" dates are selected. Dark mode doesn't function.
PR 3910 Screenshot
PR 3910 Screenshot 2

@alishawalunj alishawalunj force-pushed the Alisha-Implement-OPT-status-breakdown-piechart branch from a6c6b22 to 4aae82d Compare January 31, 2026 00:48
@netlify
Copy link

netlify bot commented Jan 31, 2026 •
edited
Loading

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 860cc76
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69ad04db61deaf00088c9f68
😎 Deploy Preview https://deploy-preview-3910--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@alishawalunj alishawalunj force-pushed the Alisha-Implement-OPT-status-breakdown-piechart branch from 4aae82d to 8e60aae Compare January 31, 2026 06:00
@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 31, 2026

Quality Gate Passed Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@alishawalunj alishawalunj force-pushed the Alisha-Implement-OPT-status-breakdown-piechart branch from 4c17f4f to 87ba96f Compare March 7, 2026 21:34
@alishawalunj alishawalunj force-pushed the Alisha-Implement-OPT-status-breakdown-piechart branch from 87ba96f to d1c89db Compare March 8, 2026 05:01
@sonarqubecloud
Copy link

sonarqubecloud bot commented Mar 8, 2026

Quality Gate Passed Quality Gate passed

Issues
2 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@harshavarma29 harshavarma29 harshavarma29 requested changes

@rohanrastogi311 rohanrastogi311 rohanrastogi311 requested changes

@Anusha-Gali Anusha-Gali Anusha-Gali requested changes

Requested changes must be addressed to merge this pull request.

Assignees

No one assigned

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@alishawalunj @harshavarma29 @rohanrastogi311 @Anusha-Gali