From 2111dda1223d4553a0dca91709ca82eb68477a0a Mon Sep 17 00:00:00 2001 From: Bytechoreographer Date: Fri, 8 May 2026 20:39:05 +0800 Subject: [PATCH 1/2] fix(ui): widen Y-axis gutter on Usage charts so large token/request labels aren't clipped MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Total Tokens Over Time and Total Requests Over Time AreaCharts on the Usage page used Tremor's default yAxisWidth (~56 px), which is too narrow once totals pass the hundred-million mark — leading digits of labels like "100.00M" / "4500.00M" got clipped against the chart edge. The requests chart was worse: it formatted with toLocaleString(), so billion-scale request counts produced "1,000,000,000" (13 chars) and overflowed immediately. Fix in two places so neither alone has to carry the whole margin: - activity_metrics.tsx: add yAxisWidth={80} to both AreaCharts, and switch the requests chart to the shared valueFormatter so it uses the same compact k/M/B suffixes as the tokens chart. - value_formatters.tsx: add a >= 1e9 branch to valueFormatter / valueFormatterSpend that emits a "B" suffix (4.50B, $4.50B), keeping every formatted label at most 7 chars. Co-Authored-By: Claude Opus 4 (1M context) --- .../UsagePage/utils/value_formatters.tsx | 14 ++++++++++---- .../src/components/activity_metrics.tsx | 4 +++- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx b/ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx index 4048c0f1c4a8..820201faed54 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx @@ -1,6 +1,9 @@ export function valueFormatter(number: number) { - if (number >= 1000000) { - return (number / 1000000).toFixed(2) + "M"; + 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"; } if (number >= 1000) { return number / 1000 + "k"; @@ -10,8 +13,11 @@ export function valueFormatter(number: number) { export function valueFormatterSpend(number: number) { if (number === 0) return "$0"; - if (number >= 1000000) { - return "$" + number / 1000000 + "M"; + 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 + "M"; } if (number >= 1000) { return "$" + number / 1000 + "k"; diff --git a/ui/litellm-dashboard/src/components/activity_metrics.tsx b/ui/litellm-dashboard/src/components/activity_metrics.tsx index e805eed8c8c3..7633010e76ff 100644 --- a/ui/litellm-dashboard/src/components/activity_metrics.tsx +++ b/ui/litellm-dashboard/src/components/activity_metrics.tsx @@ -297,6 +297,7 @@ export const ActivityMetrics: React.FC = ({ modelMetrics, valueFormatter={valueFormatter} customTooltip={CustomTooltip} showLegend={false} + yAxisWidth={80} /> @@ -313,9 +314,10 @@ export const ActivityMetrics: React.FC = ({ modelMetrics, index="date" categories={["metrics.successful_requests", "metrics.failed_requests"]} colors={["emerald", "red"]} - valueFormatter={(number: number) => number.toLocaleString()} + valueFormatter={valueFormatter} customTooltip={CustomTooltip} showLegend={false} + yAxisWidth={80} /> From 8ed49388eaa33642ee40c3c3aa4c4e49a60931a7 Mon Sep 17 00:00:00 2001 From: Rick <26716961+Bytechoreographer@users.noreply.github.com> Date: Fri, 8 May 2026 20:44:17 +0800 Subject: [PATCH 2/2] Update ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com> --- .../src/components/UsagePage/utils/value_formatters.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx b/ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx index 820201faed54..35cc5a43ffeb 100644 --- a/ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx +++ b/ui/litellm-dashboard/src/components/UsagePage/utils/value_formatters.tsx @@ -17,7 +17,7 @@ export function valueFormatterSpend(number: number) { return "$" + (number / 1_000_000_000).toFixed(2) + "B"; } if (number >= 1_000_000) { - return "$" + number / 1_000_000 + "M"; + return "$" + (number / 1_000_000).toFixed(2) + "M"; } if (number >= 1000) { return "$" + number / 1000 + "k";