abbreviates large spend values, increases y-axis width

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

@@ -113,7 +113,8 @@ const ModelSection = ({ modelName, metrics }: { modelName: string; metrics: Mode
             index="date"
             categories={["metrics.spend"]}
             colors={["green"]}
-            valueFormatter={(value: number) => `$${formatNumberWithCommas(value, 2)}`}
+            valueFormatter={(value: number) => `$${formatNumberWithCommas(value, 2, true)}`}
+            yAxisWidth={72}
           />
         </Card>
 

ui/litellm-dashboard/src/utils/dataUtils.ts

@@ -13,14 +13,38 @@ export function updateExistingKeys<Source extends Object>(target: Source, source
   return clonedTarget;
 }
 
-export const formatNumberWithCommas = (value: number | null | undefined, decimals: number = 0): string => {
-  if (value === null || value === undefined) {
+export const formatNumberWithCommas = (
+  value: number | null | undefined,
+  decimals: number = 0,
+  abbreviate: boolean = false,
+): string => {
+  if (value === null || value === undefined || !Number.isFinite(value)) {
     return "-";
   }
-  return value.toLocaleString("en-US", {
+
+  const opts: Intl.NumberFormatOptions = {
     minimumFractionDigits: decimals,
     maximumFractionDigits: decimals,
-  });
+  };
+
+  if (!abbreviate) {
+    return value.toLocaleString("en-US", opts);
+  }
+
+  const sign = value < 0 ? "-" : "";
+  const abs = Math.abs(value);
+  let scaled = abs;
+  let suffix = "";
+
+  if (abs >= 1_000_000) {
+    scaled = abs / 1_000_000;
+    suffix = "M";
+  } else if (abs >= 1_000) {
+    scaled = abs / 1_000;
+    suffix = "K";
+  }
+
+  return `${sign}${scaled.toLocaleString("en-US", opts)}${suffix}`;
 };
 
 export const copyToClipboard = async (