refactor(ui): convert caching page 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 on the caching page (screenshots to follow in a comment):

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. send a few completions so the last 7 days have spend log rows, repeating each request so cache hits show up if caching is enabled, e.g. for i in 1 2 1 2; do curl -s http://localhost:4000/v1/chat/completions -H "Authorization: Bearer sk-..." -H "Content-Type: application/json" -d "{\"model\": \"gpt-5.2\", \"messages\": [{\"role\": \"user\", \"content\": \"hi $i\"}]}"; done
3. open http://localhost:3000/caching (the two charts are on the default Cache Analytics tab; the legacy deep link http://localhost:3000/?page=caching redirects there) and compare against staging: "Cache Hits vs API Requests" and "Cached Completion Tokens vs Generated Completion Tokens" as stacked sky/teal bars grouped by call type, y axis with compact counts (1.2K style), legend on top right, tooltip on hover with the same compact formatting
4. check the two headings now render as card titles; the first chart previously relied on a plain subtitle line plus a title prop that tremor silently ignored
5. filter by virtual key, model, and date range and confirm both charts re-render with the filtered data, same as before

Before (staging, tremor BarChart) and after (this branch, recharts through the shared wrapper) should look near-identical; sky and teal resolve to the same tailwind-500 palette tremor rendered

Type

🧹 Refactoring

Changes

Stage PR for the charts track of the shadcn migration (foundation: #32668). Converts the two tremor BarCharts on the caching page's Cache Analytics tab to the shared BarChart wrapper; no wrapper changes were needed since every prop these sites pass (data/index/categories/colors/valueFormatter/stack/yAxisWidth/className) is already covered

Each chart moves into its own shadcn Card following the pilot (ScoreChart): the tremor Subtitle headings become CardTitles, which also absorbs the first chart's title prop; that prop is not part of tremor's BarChart API and rendered nothing, so the text is now actually visible as the card title. The second chart's mt-6 spacing is preserved on its Card. Everything else on the page (the outer tremor Card, the filter row, the stat mini cards, the tabs) stays tremor and converts in a later page-level phase

The uiData interface becomes a type alias so the row type satisfies the wrapper's Record<string, unknown> constraint (interfaces have no implicit index signature)

New colocated test renders the dashboard with a mocked activity fetch and asserts against the real recharts SVG: both card titles, a legend-bound mapping from each category label to its sky/teal fill (read off the legend swatches, so swapping either the categories or the colors fails the test) plus the bar stack order, one stacked column per call type, the name index on the x axis, and compact (60K style) y-axis tick formatting via valueFormatterNumbers

[greptile-apps]

Greptile Summary

Converts the two tremor BarChart + Subtitle pairs on the Cache Analytics tab to the shared shadcn/recharts BarChart wrapper wrapped in shadcn Card + CardTitle, and adds a colocated test that asserts against the real recharts SVG output.

• interface uiData becomes a type alias so its rows satisfy the wrapper's Record<string, unknown> constraint; all chart props already match the wrapper's API so no wrapper changes were needed.
• The first chart's title prop (silently ignored by tremor's BarChart) is now rendered as CardTitle, making the heading actually visible.
• The new test mocks adminGlobalCacheActivity and asserts card titles, legend color mapping, bar fill order, x-axis labels, stacked rect count, and compact-notation y-axis ticks.

Confidence Score: 5/5

Straightforward UI-layer swap with no changes to data-fetching logic, API contracts, or non-chart state; the interface-to-type conversion is correct and narrowly scoped.

Both changed files are self-contained to the caching page analytics tab. The production change replaces tremor components with shadcn equivalents without touching any data-fetching, filtering, or business logic. The type alias change is TypeScript-only with no runtime effect. No regressions are introduced.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.tsx	Converts two tremor BarCharts to the shared shadcn/recharts BarChart wrapper inside shadcn Cards; changes interface uiData to a type alias for Record<string, unknown> compatibility; no logic changes
ui/litellm-dashboard/src/app/(dashboard)/caching/_components/cache_dashboard.test.tsx	New colocated test suite covering card titles, legend-to-fill mapping, bar stack order, x-axis call_type labels, stacked column count, and compact y-axis tick formatting; some recharts SVG-internals coupling already flagged in prior thread

_{Reviews (2): Last reviewed commit: "test(ui): bind cache chart legend labels..." | Re-trigger Greptile}

[codspeed-hq]

Merging this PR will not alter performance

✅ 31 untouched benchmarks

---

_{Comparing litellm_shadcn_charts_caching (a6b0eea) with litellm_internal_staging (3d5d5e1)}

[ryan-crabbe-berri]

@greptileai re review