phoenix/litellm-mirror
0
0
Fork 1
mirror of https://github.com/BerriAI/litellm.git synced 2025-04-27 19:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

show cost per tag on ui

Browse source
This commit is contained in:
Ishaan Jaff 2024-04-04 17:20:23 -07:00
parent f1ea4dc0e5
commit 95680317e0
1 changed files with 25 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { BarChart, BarList, Card, Title } from "@tremor/react";
import { BarChart, BarList, Card, Title, Table, TableHead, TableHeaderCell, TableRow, TableCell, TableBody, Metric } from "@tremor/react";
import React, { useState, useEffect } from "react";
@ -379,18 +379,31 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Grid>
</TabPanel>
<TabPanel>
<Grid numItems={2} className="gap-2 h-[75vh] w-full">
<Grid numItems={2} className="gap-2 h-[75vh] w-full mb-4">
<Col numColSpan={2}>
<Card className="mb-2">
<Title>Total Spend Per Tag</Title>
<BarList
data={topTagsData}
/>
</Card>
<Card>
<Title>Daily Spend Per Tag</Title>
<BarChart
<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">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}
@ -399,7 +412,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
yAxisWidth={80}
stack={true}
/>
/> */}
</Card>
</Col>
<Col numColSpan={2}>