Jay fix color discrepancy for pie chart in PeopleReport

[jayyy-s]

Description

Fixes color discrepancy for pie charts on people reports (medium priority bug)

Related PRS (if any):

Use the latest development branch of HGNRest

Main changes explained:

• Edit /components/Reports/PeopleReport/components/PeopleTasksPieChart.jsx so only the dataLegend prop changes with View All toggle
• Edit /components/common/PieChart/PieChart.jsx so there's a separate prop for chart labels called chartLegend

How to test:

1. check into current branch
2. do npm install and npm i to run this PR locally
3. Clear site data/cache
4. log as owner/admin user
5. go to dashboard→ Reports dropdown→ Reports→People→type Ilya and check Ilya Volunteer (can check any other user that has tasks completed pie chart)
6. Verify that the colors on the pie chart match when toggling all and do not change when toggling between viewing all tasks and collapsing

Screenshots or videos of changes:

PR.video.mp4

[Kavil-Jain-514]

The functionality works perfectly fine.
The UI looks beautiful!!

I have a suggestion: in dark mode, the addYourProfilePic is not readable.
This is not related to PR but a suggestion if the image could be replaced with a better one where the text is visible

[tianyangL11]

The PR meets the requirements. The colors on the pie chart remain consistent when toggling between viewing all tasks and collapsing. Everything functions as expected. Great job!

[shradac]

It matches when we collapse and expand, but noticed a discrepancy in the color in pie chart and tag for it. Check "Eat a pie 2", name tag is green and color on pie chart is pink.

[beblicarl]

The colours did not match example "Eat a pie 2", "Eat a pie 3" and "Eat a pie 4"

screencast-localhost_3000-2024.06.14-07_20_27.webm

[aaryaneil]

Some of the colors don't match on the pie chart. I've added a few to the screenshots, please look into it.

[jayyy-s]

Some of the colors don't match on the pie chart. I've added a few to the screenshots, please look into it.

The colours did not match example "Eat a pie 2", "Eat a pie 3" and "Eat a pie 4"
screencast-localhost_3000-2024.06.14-07_20_27.webm

This issue has been addressed in the latest commit and should now be fixed. Thank you for the thorough review + feedback!

[kabraambika]

I reviewed the frontend PR with the latest backend on the development branch. The colors are displaying correctly in both dark and light modes. After using the view all and collapse functions, the colors match the associated legend as shown in the video.

PR2326.mov

[ishan-miglani]

Hi, I have verified the changes in this PR. the functionality works correctly. The colors on the pie chart match when toggling all and do not change when toggling between viewing all tasks and collapsing. Thanks!

Screen.Recording.2024-07-19.at.5.52.04.PM.mov

[SrikanthChowdary495]

The PR Working as expected. The colors on the pie chart match when toggling all and do not change when toggling between viewing all tasks and collapsing.

[angelalalacheng]

Hi,
I use your branch Jay_fix_color_discrepancy_pie_chart and the latest develpent branch for backend. It all works good in both light and dark mode.

[Pranay-ai]

Hey @jayyy-s
I have reviewed the PR , the colors match fine with list items but i found some mis alignment in the components the hours column is missing in desktop view

[souravwalke]

Hi, I tested the changes in the PR and It all works as expected.

[ReinaT5678]

Looking at IIlya Volunteer and all the colors match the ones on the pie chart! I also played around with light and dark mode and changing between tasks and the colors did not change.

[SatyashanthiT]

I have tested this PR following the test instructions and have observed the features are working correctly

[varunreddy03]

I have verified this PR and viewed the report dashboard and the pie charts, the colors are consistent across both the light and dark mode. Great work with the UI and colors they are well suited for both modes

[adityasure9]

Tested the PR and verified that the colors on the pie chart are consistent across both light and dark modes. The functionality works as expected when toggling between viewing all tasks and collapsing. Great work on maintaining the UI consistency.

Before,

After,

[jayyy-s]

Hey @jayyy-s I have reviewed the PR , the colors match fine with list items but i found some mis alignment in the components the hours column is missing in desktop view

I've addressed this in the latest commits. This wasn't in the original scope of the bug, but I don't think it's worth creating a new issue for it. Thanks for catching it so we could fix it in this PR.

[Lemonnycodes]

Hi,

I have tested the changes introduced in this PR:

• Verified that the pie chart colors for tasks completed by users (e.g., Ilya Volunteer) remain consistent when toggling between viewing all tasks and collapsing the view.
• The colors on the pie chart match and do not change during toggling, as expected.
• The feature works correctly in both light and dark modes

Screenshots:

[one-community]

Thank you all, moving this to final review!

[beblicarl]

the colors match perfectly now. This functionality works as intended. Great work

[one-community]

Thank you all!