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

41
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());
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
<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={teamSpendData}
showLegend={true}
index="date"
categories={uniqueTeamIds}
yAxisWidth={80}
data={topTagsData}
index="name"
categories={["spend"]}
colors={["blue"]}
>
stack={true}
/> */}
</BarChart>
</Card>
</Col>
<Col numColSpan={2}>