Roshini Seelamsetty : Fix Blue Square Stats Chart Interactivity and Data Display (Total Org Summary)

[roshini1212]

Description

Main changes explained:

• Updated DonutChart.jsx to filter zero-value categories from both chart slices and legend dynamically, with color index kept in sync after filtering
• Updated DonutChart.jsx to move datalabels outside the arc so small segments (e.g. 1%) remain visible without being suppressed
• Updated DonutChart.jsx to add text stroke halo on labels for legibility over any slice color in both light and dark mode
• Updated DonutChart.jsx to fix legend text being invisible in light mode by driving color from the darkMode prop instead of var(--text-primary)
• Updated DonutChart.module.css to increase canvas size to accommodate external labels and remove hardcoded color declarations that broke light mode

How to test:

1. Check out branch Roshini-Fix-Blue-Square-Stats-Chart-Interactivity-and-Data-Display
2. Run npm install and npm start to run locally
3. Clear site data/cache
4. Log in as admin user
5. Go to Dashboard → Total Org Summary → Blue Square Stats chart
6. Verify that categories with zero values do not appear in the chart slices or the legend
7. Verify that all segment labels are visible outside the arc, including small slices like Missing Summary (1%) and Missing Hours (6%)
8. Hover over each slice and verify the tooltip shows the correct label, count, and percentage

Screenshots or videos of changes:

Before:

After:

Screen.Recording.2026-05-07.at.11.44.18.mov

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	757ac62
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69fcb6ab212f8800087e64b3
😎 Deploy Preview	https://deploy-preview-5236--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
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

[DeepighaJ]

• The chart renders right data. No 0 values shown as expected. Minor UI suggestion, the values 440 and (6%) are very close together at the top, and overlapping the line.
• The tooltip additionally includes a legend color marker beside the repeated label, making the duplication more noticeable

[amaresh2001]

Tested locally on Roshini-Fix-Blue-Square-Stats-Chart-Interactivity-and-Data-Display.

Testing:

• Zero-value categories (e.g., Vacation Time, Other) are correctly hidden from both the chart slices and the legend.
• Data labels are placed outside the arc, and small segments (1%) are clearly visible without being clipped or overlapping.
• Hover tooltip works correctly on all slices, showing the correct label, count, and percentage.
• Legend text is readable in light mode.
• Dark mode is fully supported. Labels and legend remain readable.

[beblicarl]

This feature works as intended, and the code is great

[Mahitha-pasupuleti]

Tested locally, chart is not displaying as intended. Tried using multiple date ranges