fix(ui): widen Y-axis gutter on Usage charts so large token/request labels aren't clipped

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) <noreply@anthropic.com>

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";

ui/litellm-dashboard/src/components/activity_metrics.tsx

@@ -297,6 +297,7 @@ export const ActivityMetrics: React.FC<ActivityMetricsProps> = ({ modelMetrics,
               valueFormatter={valueFormatter}
               customTooltip={CustomTooltip}
               showLegend={false}
+              yAxisWidth={80}
             />
           </Card>
           <Card>
@@ -313,9 +314,10 @@ export const ActivityMetrics: React.FC<ActivityMetricsProps> = ({ 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}
             />
           </Card>
         </Grid>