diff --git a/ui/litellm-dashboard/src/components/activity_metrics.tsx b/ui/litellm-dashboard/src/components/activity_metrics.tsx index b0c942af83..1878e1364d 100644 --- a/ui/litellm-dashboard/src/components/activity_metrics.tsx +++ b/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} /> diff --git a/ui/litellm-dashboard/src/utils/dataUtils.ts b/ui/litellm-dashboard/src/utils/dataUtils.ts index fd5943d914..e314130756 100644 --- a/ui/litellm-dashboard/src/utils/dataUtils.ts +++ b/ui/litellm-dashboard/src/utils/dataUtils.ts @@ -13,14 +13,38 @@ export function updateExistingKeys(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 (