From 052cfeb81030da27e4b1ea97f6622f03f902cbf5 Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaanjaffer0324@gmail.com>
Date: Mon, 13 May 2024 17:31:18 -0700
Subject: [PATCH] ui - how spend per tag in bar chart

---
 ui/litellm-dashboard/src/components/usage.tsx | 45 ++++++-------------
 1 file changed, 13 insertions(+), 32 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/usage.tsx b/ui/litellm-dashboard/src/components/usage.tsx
index 6e298a76e..6f03c2960 100644
--- a/ui/litellm-dashboard/src/components/usage.tsx
+++ b/ui/litellm-dashboard/src/components/usage.tsx
@@ -161,7 +161,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
     }
 
     let top_tags = await tagsSpendLogsCall(accessToken, startTime.toISOString(), endTime.toISOString());
-    setTopTagsData(top_tags.top_10_tags);
+    setTopTagsData(top_tags.spend_per_tag);
     console.log("Tag spend data updated successfully");
 
 
@@ -232,7 +232,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
 
             //get top tags
             const top_tags = await tagsSpendLogsCall(accessToken, dateValue.from?.toISOString(), dateValue.to?.toISOString());
-            setTopTagsData(top_tags.top_10_tags);
+            setTopTagsData(top_tags.spend_per_tag);
 
             // get spend per end-user
             let spend_user_call = await adminTopEndUsersCall(accessToken, null, undefined, undefined);
@@ -483,36 +483,17 @@ const UsagePage: React.FC<UsagePageProps> = ({
               />
 
               <Card>
-              <Title>Spend Per Tag - Last 30 Days</Title>
-              <Text>Get Started Tracking cost per tag <a href="https://docs.litellm.ai/docs/proxy/enterprise#tracking-spend-for-custom-tags" target="_blank">here</a></Text>
-              <Table>
-                <TableHead>
-                  <TableRow>
-                    <TableHeaderCell>Tag</TableHeaderCell>
-                    <TableHeaderCell>Spend</TableHeaderCell>
-                    <TableHeaderCell>Requests</TableHeaderCell>
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {topTagsData.map((tag) => (
-                    <TableRow key={tag.name}>
-                      <TableCell>{tag.name}</TableCell>
-                      <TableCell>{tag.value}</TableCell>
-                      <TableCell>{tag.log_count}</TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
-                {/* <BarChart
-                  className="h-72"
-                  data={teamSpendData}
-                  showLegend={true}
-                  index="date"
-                  categories={uniqueTeamIds}
-                  yAxisWidth={80}
-                  
-                  stack={true}
-                /> */}
+              <Title>Spend Per Tag</Title>
+              <Text>Get Started Tracking cost per tag <a className="text-blue-500" href="https://docs.litellm.ai/docs/proxy/enterprise#tracking-spend-for-custom-tags" target="_blank">here</a></Text>
+             <BarChart
+              className="h-72"
+              data={topTagsData}
+              index="name"
+              categories={["spend"]}
+              colors={["blue"]}
+             >
+
+             </BarChart>
               </Card>
               </Col>
               <Col numColSpan={2}>