phoenix/litellm
1
0
Fork 0
forked from phoenix/litellm-mirror
Code Pull requests Activity

ui - how spend per tag in bar chart

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-13 17:31:18 -07:00
parent 5dfa0ed196
commit 052cfeb810
1 changed files with 13 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

43
ui/litellm-dashboard/src/components/usage.tsx
View file

@ -161,7 +161,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
} }
let top_tags = await tagsSpendLogsCall(accessToken, startTime.toISOString(), endTime.toISOString()); 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"); console.log("Tag spend data updated successfully");
@ -232,7 +232,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
//get top tags //get top tags
const top_tags = await tagsSpendLogsCall(accessToken, dateValue.from?.toISOString(), dateValue.to?.toISOString()); 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 // get spend per end-user
let spend_user_call = await adminTopEndUsersCall(accessToken, null, undefined, undefined); let spend_user_call = await adminTopEndUsersCall(accessToken, null, undefined, undefined);
@ -483,36 +483,17 @@ const UsagePage: React.FC<UsagePageProps> = ({
/> />
<Card> <Card>
<Title>Spend Per Tag - Last 30 Days</Title> <Title>Spend Per Tag</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> <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>
<Table> <BarChart
<TableHead> className="h-72"
<TableRow> data={topTagsData}
<TableHeaderCell>Tag</TableHeaderCell> index="name"
<TableHeaderCell>Spend</TableHeaderCell> categories={["spend"]}
<TableHeaderCell>Requests</TableHeaderCell> colors={["blue"]}
</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} </BarChart>
/> */}
</Card> </Card>
</Col> </Col>
<Col numColSpan={2}> <Col numColSpan={2}>