ACHOO-137: Fixed the pie charts and bar graphs for better display

[jenbreese]

READY FOR REVIEW

Summary

• Changed the charts and graphs on the main dashboard to MUI for better look. Did not change the individual page because of the different prs.
• Take a look and let me know. If you like then I'll move the individual page to the MUI for it too. Then we can remove the recharts

Review By (Date)

• When time

Criticality

• Normal

Review Tasks

Setup tasks and/or behavior to test

1. Check out this branch
2. Navigate to the dashboard.
3. review the pie and bar charts
4. Verify they look better.
5. review code.

Front End Validation

• Is the markup using the appropriate semantic tags and passes HTML validation?
• Cross-browser testing has been performed?
• Automated accessibility scans performed?
• Manual accessibility tests performed?
• Design is approved by @ user?

Backend / Functional Validation

Code

• Are the naming conventions following our standards?
• Does the code have sufficient inline comments?
• Is there anything in this code that would be hidden or hard to discover through the UI?
• Are there any code smells?
• Are tests provided? eg (unit, behat, or codeception)

Code security

• Are all forms properly sanitized?
• Any obvious security flaws or new areas for attack?

General

• Is there anything included in this PR that is not related to the problem it is trying to solve?
• Is the approach to the problem appropriate?

Affected Projects or Products

• Does this PR impact any particular projects, products, or modules?

Associated Issues and/or People

- ACHOO-137

Resources

• SiteImprove
• Accessibility Manual Test Script
• HTML Validator
• Browserstack

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
churro	Ready	Preview	Comment	Oct 23, 2025 0:52am

[jbickar]

Hm. Subjectively, I prefer the previous bar charts, and objectively there are also some readability issues with the new ones (labels on the vertical axis are cut off, and the scale of the labels on the horizontal axis is weird).
Before

After

Regarding the pie charts, subjectively I still find them hard to read without "leader lines", and objectively I think they're going to present some accessibility challenges as you have to hover over the slices to get data. I am going to get another opinion on those.

I think it's a really tough design challenge given the scale of the numbers involved (i.e., does a pie chart with slices ranging from 1,083 to 2,145,922 really convey useful information to the user?). I'm tempted to scrap the pie charts altogether.

We'll also want to think about responsive behaviors but I'll make another ticket for that. (I'm really tempted to just drop the pie and bar charts at mobile breakpoint and go with tables only, especially given we have the individual application detail pages, which have very nice responsive behaviors.)