fix(ui): usage charts clip Y-axis labels at large token/request counts

[Bytechoreographer]

PR: fix(ui): usage charts clip Y-axis labels at large token/request counts

Branch: Bytechoreographer:fix/hidden_sidebar_digits
Target: BerriAI:litellm_internal_staging
PR link: https://github.com/Bytechoreographer/litellm/pull/new/fix/hidden_sidebar_digits

---

Relevant issues

Pre-Submission checklist

• No test changes required — formatter is a pure function and the chart props are visual only
• Verified manually on the Usage page with a multi-billion-token range
• Scope is isolated: two source files, three small edits
• Comment @greptileai and get Confidence Score ≥ 4/5 before requesting maintainer review

Type

🐛 Bug Fix

Changes

Root cause

On the Usage page, the Total Tokens Over Time and Total Requests Over
Time AreaCharts in activity_metrics.tsx rely on Tremor's default
yAxisWidth (≈ 56 px). At realistic production scale the formatted labels
are wider than that gutter, so the leading digits get clipped:

• valueFormatter returns strings like "4500.00M" (8 chars) once totals
  pass the billion mark — the leading 4 is hidden.
• Even at "100.00M" (7 chars) the leading 1 is already cut off in the
  reporter's screenshot.
• The Total Requests Over Time chart is worse: it used
  number.toLocaleString(), which produces "1,000,000,000" (13 chars) for
  billion-scale request counts and overflows the gutter immediately.

For comparison, every other chart in the same file (e.g. lines 86–94, 764–772)
already sets an explicit yAxisWidth={72} / {80}. These two AreaCharts were
the only ones missing it.

Reproduce:

1. Open the Usage page on a deployment with hundreds of millions of total
   tokens (or seed test data above ~1 × 10⁸).
2. Look at the Total Tokens Over Time / Total Requests Over Time charts —
   the left-hand digit of each Y-axis tick (100.00M, 4500.00M, …) is
   clipped against the chart edge.

Fix

Two complementary changes — widen the gutter and keep the label string
short — so neither alone has to carry the whole margin:

1. activity_metrics.tsx — add yAxisWidth={80} to both AreaCharts, and
   switch the requests chart from toLocaleString() to the shared
   valueFormatter so request counts also use compact k / M / B
   suffixes.

2. value_formatters.tsx — extend valueFormatter and
   valueFormatterSpend with a >= 1_000_000_000 branch that emits a B
   suffix. 4_500_000_000 now formats as "4.50B" (5 chars) instead of
   "4500.00M" (8 chars), which is shorter and more conventional.

   <AreaChart
     ...
     categories={["metrics.prompt_tokens", "metrics.completion_tokens", "metrics.total_tokens"]}
     valueFormatter={valueFormatter}
+    yAxisWidth={80}
   />

   <AreaChart
     ...
     categories={["metrics.successful_requests", "metrics.failed_requests"]}
-    valueFormatter={(number: number) => number.toLocaleString()}
+    valueFormatter={valueFormatter}
+    yAxisWidth={80}
   />

 export function valueFormatter(number: number) {
+  if (number >= 1_000_000_000) {
+    return (number / 1_000_000_000).toFixed(2) + "B";
+  }
   if (number >= 1_000_000) {
     return (number / 1_000_000).toFixed(2) + "M";
   }
   ...
 }

After the fix the longest label valueFormatter can produce is 7 chars
(999.99k, 999.99M, 999.99B), well under the new 80 px gutter.

Files changed

File	Change
ui/litellm-dashboard/src/components/activity_metrics.tsx	Add yAxisWidth={80} to both Usage-page AreaCharts; switch the requests chart to the shared valueFormatter.
ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx	Add B (billion) suffix branch to valueFormatter and valueFormatterSpend.

[greptile-apps]

Greptile Summary

This PR fixes Y-axis label clipping on the Usage page's Total Tokens Over Time and Total Requests Over Time AreaCharts by widening the gutter (yAxisWidth={80}) and shortening formatted values with a new billion (B) suffix branch in valueFormatter and valueFormatterSpend.

• activity_metrics.tsx: adds yAxisWidth={80} to both AreaCharts and replaces toLocaleString() on the requests chart with the shared valueFormatter, capping tick-label width to 7 chars max.
• value_formatters.tsx: inserts a >= 1_000_000_000 branch in both formatters and additionally applies toFixed(2) to the pre-existing million branch of valueFormatterSpend, fixing a long-standing inconsistency in that function.

Confidence Score: 5/5

Safe to merge — changes are scoped to two UI formatter/chart files with no logic regressions.

Both changes are purely presentational: widening the Y-axis gutter and capping formatter output length. The formatter logic is straightforward and only affects how numbers are displayed in charts, so the blast radius of any mistake is limited to visual rendering with no data or API impact.

No files require special attention.

Important Files Changed

Filename	Overview
ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx	Adds a billion (B) suffix branch to both valueFormatter and valueFormatterSpend, and applies toFixed(2) to the million branch of valueFormatterSpend; kilo branch in valueFormatterSpend still omits toFixed, producing variable-length output.
ui/litellm-dashboard/src/components/activity_metrics.tsx	Adds yAxisWidth={80} to the Total Tokens and Total Requests AreaCharts, and switches the requests chart from toLocaleString() to the shared valueFormatter for compact suffixed output.

_{Reviews (2): Last reviewed commit: "Update ui/litellm-dashboard/src/componen..." | Re-trigger Greptile}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[Bytechoreographer]

@greptileai

[Bytechoreographer]

@krrish-berri-2 @Sameerlite Could you take a look at this PR when you get a chance?

[Bytechoreographer]

@yassin-berriai @mateo-berri @Sameerlite gentle nudge on this one.

On the Usage page, the Total Tokens Over Time and Total Requests Over Time charts clip their Y-axis labels once the counts get large; the gutter is too narrow and big numbers overflow, so the axis becomes unreadable at exactly the scale where the chart matters most. This widens the gutter and shortens the labels so they stay legible.

It's been open since early May with no maintainer eyes yet. Could you take a look?