From 45b56030dec9e5758bf44719432dd289ddae9573 Mon Sep 17 00:00:00 2001
From: ishaan-jaff <ishaanjaffer0324@gmail.com>
Date: Thu, 29 Feb 2024 18:19:24 -0800
Subject: [PATCH] (ui) use daily spend for a key

---
 .../src/components/networking.tsx             |  2 +-
 .../src/components/view_key_spend_report.tsx  | 84 +------------------
 2 files changed, 4 insertions(+), 82 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/networking.tsx b/ui/litellm-dashboard/src/components/networking.tsx
index 0588ba34b7..5a1058d95d 100644
--- a/ui/litellm-dashboard/src/components/networking.tsx
+++ b/ui/litellm-dashboard/src/components/networking.tsx
@@ -280,7 +280,7 @@ export const modelAvailableCall = async (
 
 export const keySpendLogsCall = async (accessToken: String, token: String) => {
   try {
-    const url = proxyBaseUrl ? `${proxyBaseUrl}/spend/logs` : `/spend/logs`;
+    const url = proxyBaseUrl ? `${proxyBaseUrl}/global/spend/logs` : `/global/spend/logs`;
     console.log("in keySpendLogsCall:", url);
     const response = await fetch(`${url}/?api_key=${token}`, {
       method: "GET",
diff --git a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
index f9c7bbfac5..9d4c950912 100644
--- a/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
+++ b/ui/litellm-dashboard/src/components/view_key_spend_report.tsx
@@ -78,85 +78,12 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
         (token = token)
       );
       console.log("Response:", response);
-      // loop through response
-      // get spend, startTime for each element, place in new array
-
-      const pricePerDay: Record<string, number> = (
-        Object.values(response) as ResponseValueType[]
-      ).reduce((acc: Record<string, number>, value) => {
-        const startTime = new Date(value.startTime);
-        const day = new Intl.DateTimeFormat("en-US", {
-          day: "2-digit",
-          month: "short",
-        }).format(startTime);
-
-        acc[day] = (acc[day] || 0) + value.spend;
-
-        return acc;
-      }, {});
-
-      // sort pricePerDay by day
-      // Convert object to array of key-value pairs
-      const pricePerDayArray = Object.entries(pricePerDay);
-
-      // Sort the array based on the date (key)
-      pricePerDayArray.sort(([aKey], [bKey]) => {
-        const dateA = new Date(aKey);
-        const dateB = new Date(bKey);
-        return dateA.getTime() - dateB.getTime();
-      });
-
-      // Convert the sorted array back to an object
-      const sortedPricePerDay = Object.fromEntries(pricePerDayArray);
-
-      console.log(sortedPricePerDay);
-
-      const pricePerUser: Record<string, number> = (
-        Object.values(response) as ResponseValueType[]
-      ).reduce((acc: Record<string, number>, value) => {
-        const user = value.user;
-        acc[user] = (acc[user] || 0) + value.spend;
-
-        return acc;
-      }, {});
-
-      console.log(pricePerDay);
-      console.log(pricePerUser);
-
-      const arrayBarChart = [];
-      // [
-      // {
-      //     "day": "02 Feb",
-      //     "spend": pricePerDay["02 Feb"],
-      // }
-      // ]
-      for (const [key, value] of Object.entries(sortedPricePerDay)) {
-        arrayBarChart.push({ day: key, spend: value });
-      }
-
-      // get 5 most expensive users
-      const sortedUsers = Object.entries(pricePerUser).sort(
-        (a, b) => b[1] - a[1]
-      );
-      const top5Users = sortedUsers.slice(0, 5);
-      const userChart = top5Users.map(([key, value]) => ({
-        name: key,
-        value: value,
-      }));
-
-      setData(arrayBarChart);
-      setUserData(userChart);
-      console.log("arrayBarChart:", arrayBarChart);
+      setData(response);
     } catch (error) {
       console.error("There was an error fetching the data", error);
-      // Optionally, update your UI to reflect the error state here as well
     }
   };
 
-  // useEffect(() => {
-  //   // Fetch data only when the token changes
-  //   fetchData();
-  // }, [token]); // Dependency array containing the 'token' variable
 
   if (!token) {
     return null;
@@ -184,18 +111,13 @@ const ViewKeySpendReport: React.FC<ViewKeySpendReportProps> = ({
               className="mt-6"
               data={data}
               colors={["blue"]}
-              index="day"
+              index="date"
               categories={["spend"]}
               yAxisWidth={48}
             />
           )}
         </Card>
-        <Title className="mt-6">Top 5 Users Spend (USD)</Title>
-        <Card className="mb-6">
-          {userData && (
-            <BarList className="mt-6" data={userData} color="blue" />
-          )}
-        </Card>
+  
       </Modal>
     </div>
   );