refactor(ui): convert user agent and per-user usage charts to shadcn/recharts

[ryan-crabbe-berri]

Relevant issues

Linear ticket

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have added meaningful tests
• My PR passes all CI/CD checks (e.g., lint, format, unit tests)
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review (Greptile reviews automatically once the PR is opened; only comment @greptileai to re-request a review after pushing changes)

Delays in PR merge?

If you're seeing a delay in your PR being merged, ping the LiteLLM Team on Slack (#pr-review).

Screenshots / Proof of Fix

QA steps to run against the live dev servers (screenshots to follow in a comment after QA):

1. run the proxy (python litellm/proxy/proxy_cli.py --config litellm/proxy/dev_config.yaml) and the dashboard dev server (npm run dev in ui/litellm-dashboard)
2. seed user agent data by sending completions with a couple of distinct User-Agent headers, e.g. for ua in "litellm-qa-cli/1.0" "litellm-qa-sdk/2.0"; do for i in 1 2 3; do curl -s http://localhost:4000/v1/chat/completions -H "Authorization: Bearer sk-..." -H "User-Agent: $ua" -H "Content-Type: application/json" -d '{"model": "gpt-5.2", "messages": [{"role": "user", "content": "hi"}]}'; done; done
3. open http://localhost:3000/usage and pick "User Agent Activity" in the Usage view dropdown
4. on the default "DAU/WAU/MAU" tab, step through the DAU, WAU and MAU sub-tabs and compare each chart to staging: stacked bars in the default blue/cyan/sky cycle, legend top right, K/M abbreviated y axis ticks, 7 fixed date/week/month buckets even where data is empty, tooltip on hover with the same abbreviated values
5. switch to the "Per User Usage (Last 30 Days)" tab, then its "Usage Distribution" sub-tab, and compare the histogram to staging: 6 fixed request-count buckets on the x axis, stacked bars in the explicit blue/green/orange/red/purple/yellow/pink/indigo palette, y axis and tooltip formatted as "N users"

Type

🧹 Refactoring

Changes

Stage of the charts track of the shadcn migration (foundation landed in #32668). Converts the four tremor BarCharts on the User Agent Activity view to the shared shadcn/recharts BarChart wrapper: the DAU, WAU and MAU charts in user_agent_activity.tsx and the usage distribution histogram in per_user_usage.tsx

This is a pure import swap; every chart keeps its exact prop set (data/index/categories/valueFormatter/yAxisWidth/showLegend/stack, plus the explicit 8-color palette on the distribution chart) and the wrapper's defaults match tremor's, so the rendered output is visually identical. No wrapper changes were needed. The surrounding tremor Card/Title/Tab layout is deliberately left alone; page-level layout converts in a later phase

Tests now assert on the real recharts SVG the charts render in jsdom (the scoped ResizeObserver mock from #32668 fires for shadcn ChartContainer subtrees): bar series per category, stacked rectangles sharing an x position, resolved fill colors that distinguish the explicit palette from the default cycle, axis bucket labels, legend text and formatter output on the value axis ticks. Since all tab panels stay mounted, the assertions are scoped to each chart's panel. per_user_usage.tsx gets its first test file; user_agent_activity.test.tsx drops its now dead local ResizeObserver polyfill, which also lowers the no-explicit-any count in eslint-metrics.json by one

[greptile-apps]

Greptile Summary

This PR completes the next phase of the shadcn/recharts migration by swapping the Tremor BarChart import for the shared @/components/shared/charts wrapper in per_user_usage.tsx and user_agent_activity.tsx. All four charts (DAU, WAU, MAU, and usage-distribution histogram) keep their exact prop sets; no wrapper changes were needed.

• per_user_usage.tsx and user_agent_activity.tsx each change only one import line; the rest of each file is untouched.
• per_user_usage.test.tsx is added as a new file with two tests; user_agent_activity.test.tsx drops the now-superseded local ResizeObserver polyfill and gains three chart-rendering assertions for the DAU/WAU/MAU panels.
• eslint-metrics.json decrements no-explicit-any by 1, matching the removed as any ResizeObserver cast.

Confidence Score: 5/5

Safe to merge — the production change is a two-line import swap with no logic modifications.

Both component files change only a single import line; the chart props, data transformation logic, and surrounding Tremor layout are completely unchanged. The new and updated tests verify the recharts SVG output and have been noted to pass CI. No new logic was introduced that could alter runtime behaviour.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/per_user_usage.tsx	Single import swap: BarChart moved from @tremor/react to the shared shadcn/recharts wrapper; all other code unchanged
ui/litellm-dashboard/src/components/user_agent_activity.tsx	Single import swap: BarChart moved from @tremor/react to the shared shadcn/recharts wrapper; all chart props and surrounding Tremor layout unchanged
ui/litellm-dashboard/src/components/per_user_usage.test.tsx	New test file: asserts recharts SVG output for the usage distribution chart; test anchors rely on Tremor DOM depth and recharts zero-value bar rendering behaviour
ui/litellm-dashboard/src/components/user_agent_activity.test.tsx	Drops the now-superseded local ResizeObserver polyfill and adds DAU/WAU/MAU chart rendering assertions; same DOM-traversal and path-parsing patterns noted in previous review threads
ui/litellm-dashboard/eslint-metrics.json	no-explicit-any count decremented by 1, matching the removal of the as any ResizeObserver polyfill cast

_{Reviews (2): Last reviewed commit: "Merge remote-tracking branch 'origin/lit..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_shadcn_charts_user_agent_per_user (a018241) with litellm_internal_staging (f9ed4f8)¹}

Footnotes

1. No successful run was found on litellm_internal_staging (7d1e48d) during the generation of this report, so dd3315e was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[ryan-crabbe-berri]

@greptileai re review

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!