From 38154b6e953083017ecfa21c24dc65b64ae4902c Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Sat, 10 Feb 2024 16:10:48 -0800
Subject: [PATCH] fix(usage.tsx): do cost breakdown by model

---
 .../src/components/networking.tsx             |  2 ++
 ui/litellm-dashboard/src/components/usage.tsx | 24 ++++++++-----------
 2 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 7026f394a..56c5f6db1 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -178,6 +178,7 @@ export const userSpendLogsCall = async (
     } else {
       url = `${url}/?start_date=${startTime}&end_date=${endTime}`;
     }
+    message.info("Making spend logs request");
     const response = await fetch(url, {
       method: "GET",
       headers: {
@@ -193,6 +194,7 @@ export const userSpendLogsCall = async (
 
     const data = await response.json();
     console.log(data);
+    message.success("Spend Logs received");
     return data;
   } catch (error) {
     console.error("Failed to create key:", error);
diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index 4b80332a7..91cd57bcf 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -24,17 +24,11 @@ const customTooltip = (props: CustomTooltipTypeBar) => {
 
   const value = payload[0].payload;
   const date = value["startTime"];
-
+  const model_values = value["models"];
   // Convert the object into an array of key-value pairs
-  const entries: [string, number][] = Object.entries(value)
-    .filter(
-      ([key]) =>
-        key !== "spend" &&
-        key !== "startTime" &&
-        key !== "models" &&
-        key !== "users"
-    )
-    .map(([key, value]) => [key, value as number]); // Type assertion to specify the value as number
+  const entries: [string, number][] = Object.entries(model_values).map(
+    ([key, value]) => [key, value as number]
+  ); // Type assertion to specify the value as number
 
   // Sort the array based on the float value in descending order
   entries.sort((a, b) => b[1] - a[1]);
@@ -48,10 +42,12 @@ const customTooltip = (props: CustomTooltipTypeBar) => {
       {topEntries.map(([key, value]) => (
         <div key={key} className="flex flex-1 space-x-10">
           <div className="p-2">
-            <p className="text-tremor-content">
-              Token: {key.substring(0, 4)}{" "}
-              <span className="font-medium text-tremor-content-emphasis">
-                Spend: {value}
+            <p className="text-tremor-content text-xs">
+              {key}
+              {":"}
+              <span className="text-xs text-tremor-content-emphasis">
+                {" "}
+                {value ? (value < 0.01 ? "<$0.01" : value.toFixed(2)) : ""}
               </span>
             </p>
           </div>