Pranav- donut chart for experience break down

[pranavgovi]

Description

Related PRS (if any):

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

…

Main changes explained:

• Created file Experience Breakdown chart component
• Updated route.jsx to create a route for the chart

…

How to test:

1. check into current branch
2. Simultaneously run the back end branch PR#1606
3. do npm install and ... to run this PR locally
4. Clear site data/cache
5. log as admin/volunteer
6. go to http://localhost:5173/experience-breakdown
7. Verify filtering data by start date, end date and by different role

Screenshots or videos of changes:

Note:

Should work on dark mode

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	f5c56b0
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68c6536b1861a000086558ee
😎 Deploy Preview	https://deploy-preview-3840--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[Namitha7070]

When verifying filtering data by start date, end date and by different role, no roles are popping up. It says no options to select in Roles and there is no pie chart data on the first page either.

[pranavgovi]

When verifying filtering data by start date, end date and by different role, no roles are popping up. It says no options to select in Roles and there is no pie chart data on the first page either.

@Namitha7070 hey namitha, thanks for ur comments. Did you run the backend branch(PR 1606) as well?

[ujjwalbPipKcK]

Works as per the required guidelines on medium-large screens. However, on smaller/mobile screens labels for the pie-chart is cut-off by the screen. (Example Device: Galaxy Z Fold 5)

Perhaps on smaller/mobile screens, the labels can be inside the piechart with a dynamic fontsize?

[pranavgovi]

Works as per the required guidelines on medium-large screens. However, on smaller/mobile screens labels for the pie-chart is cut-off by the screen. (Example Device: Galaxy Z Fold 5)

Perhaps on smaller/mobile screens, the labels can be inside the piechart with a dynamic fontsize?

@PipKcK Hey thanks for the comments. I have updated the UI such a way that the labels will be adjusted based on the screen size. Kindly check out the changes. If it works please approve the PR

[beblicarl]

This feature works as intended and the code is great

https://www.loom.com/share/e12f41b9382c459aaef464fd96cd9050

Fixed and asked for re-review