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

(ui) show top team spend

Browse source
This commit is contained in:
Ishaan Jaff 2024-03-30 14:01:05 -07:00
parent 1bbdbcad7d
commit b76d31f9fe
1 changed files with 23 additions and 14 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, Card, Title } from "@tremor/react"; import { BarChart, BarList, Card, Title } from "@tremor/react";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab } from "@tremor/react"; import { Grid, Col, Text, LineChart, TabPanel, TabPanels, TabGroup, TabList, Tab } from "@tremor/react";
@ -204,7 +204,17 @@ const UsagePage: React.FC<UsagePageProps> = ({
console.log("teamSpend", teamSpend); console.log("teamSpend", teamSpend);
setTeamSpendData(teamSpend.daily_spend); setTeamSpendData(teamSpend.daily_spend);
setUniqueTeamIds(teamSpend.teams) setUniqueTeamIds(teamSpend.teams)
setTotalSpendPerTeam(teamSpend.total_spend_per_team);
let total_spend_per_team = teamSpend.total_spend_per_team;
// in total_spend_per_team, replace null team_id with "" and replace null total_spend with 0
total_spend_per_team = total_spend_per_team.map((tspt: any) => {
tspt["name"] = tspt["team_id"] || "";
tspt["value"] = tspt["total_spend"] || 0;
return tspt;
})
setTotalSpendPerTeam(total_spend_per_team);
} else if (userRole == "App Owner") { } else if (userRole == "App Owner") {
await userSpendLogsCall( await userSpendLogsCall(
accessToken, accessToken,
@ -328,31 +338,30 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Grid> </Grid>
</TabPanel> </TabPanel>
<TabPanel> <TabPanel>
<Grid numItems={2} className="gap-2 p-10 h-[75vh] w-full"> <Grid numItems={2} className="gap-2 h-[75vh] w-full">
<Col numColSpan={2}> <Col numColSpan={2}>
<Card className="mb-2">
<Title>Total Spend Per Team</Title>
<BarList
data={totalSpendPerTeam}
/>
</Card>
<Card> <Card>
<Title>Daily Spend Per Team</Title> <Title>Daily Spend Per Team</Title>
<BarChart <BarChart
className="h-72" className="h-72"
data={teamSpendData} data={teamSpendData}
showLegend={true}
index="date" index="date"
categories={uniqueTeamIds} categories={uniqueTeamIds}
yAxisWidth={30} yAxisWidth={80}
stack={true} stack={true}
/> />
</Card> </Card>
</Col> </Col>
<Col numColSpan={2}> <Col numColSpan={2}>
<Card>
<Title>Total Spend Per Team</Title>
<BarChart
className="h-72"
data={totalSpendPerTeam}
index="team_id"
categories={["total_spend"]}
yAxisWidth={30}
/>
</Card>
</Col> </Col>
</Grid> </Grid>
</TabPanel> </TabPanel>