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

ui - fix analytics tab

Browse source
This commit is contained in:
Ishaan Jaff 2024-05-29 08:58:06 -07:00
parent dc8480a5e9
commit 34819549c4
1 changed files with 23 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -162,6 +162,17 @@ const UsagePage: React.FC<UsagePageProps> = ({
console.log("keys in usage", keys); console.log("keys in usage", keys);
console.log("premium user in usage", premiumUser); console.log("premium user in usage", premiumUser);
function valueFormatterNumbers(number) {
const formatter = new Intl.NumberFormat('en-US', {
maximumFractionDigits: 0,
notation: 'compact',
compactDisplay: 'short',
});
return formatter.format(number);
}
const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined, uiSelectedKey: string | null) => { const updateEndUserData = async (startTime: Date | undefined, endTime: Date | undefined, uiSelectedKey: string | null) => {
if (!startTime || !endTime || !accessToken) { if (!startTime || !endTime || !accessToken) {
return; return;
@ -482,10 +493,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Title>All Up</Title> <Title>All Up</Title>
<Grid numItems={2}> <Grid numItems={2}>
<Col> <Col>
<Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests {globalActivity.sum_api_requests}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests { valueFormatterNumbers(globalActivity.sum_api_requests)}</Subtitle>
<AreaChart <AreaChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
valueFormatter={valueFormatterNumbers}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['api_requests']} categories={['api_requests']}
@ -494,10 +506,11 @@ const UsagePage: React.FC<UsagePageProps> = ({
</Col> </Col>
<Col> <Col>
<Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens {globalActivity.sum_total_tokens}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens { valueFormatterNumbers(globalActivity.sum_total_tokens)}</Subtitle>
<BarChart <BarChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
valueFormatter={valueFormatterNumbers}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['total_tokens']} categories={['total_tokens']}
@ -517,24 +530,26 @@ const UsagePage: React.FC<UsagePageProps> = ({
<Title>{globalActivity.model}</Title> <Title>{globalActivity.model}</Title>
<Grid numItems={2}> <Grid numItems={2}>
<Col> <Col>
<Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests {globalActivity.sum_api_requests}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>API Requests {valueFormatterNumbers(globalActivity.sum_api_requests)}</Subtitle>
<AreaChart <AreaChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['api_requests']} categories={['api_requests']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)} onValueChange={(v) => console.log(v)}
/> />
</Col> </Col>
<Col> <Col>
<Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens {globalActivity.sum_total_tokens}</Subtitle> <Subtitle style={{ fontSize: "15px", fontWeight: "normal", color: "#535452"}}>Tokens {valueFormatterNumbers(globalActivity.sum_total_tokens)}</Subtitle>
<BarChart <BarChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['total_tokens']} categories={['total_tokens']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)} onValueChange={(v) => console.log(v)}
/> />
</Col> </Col>
@ -565,7 +580,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
color: "#535452", color: "#535452",
}} }}
> >
API Requests {globalActivity.sum_api_requests} API Requests {valueFormatterNumbers(globalActivity.sum_api_requests)}
</Subtitle> </Subtitle>
<AreaChart <AreaChart
className="h-40" className="h-40"
@ -573,6 +588,7 @@ const UsagePage: React.FC<UsagePageProps> = ({
index="date" index="date"
colors={['cyan']} colors={['cyan']}
categories={['api_requests']} categories={['api_requests']}
valueFormatter={valueFormatterNumbers}
onValueChange={(v) => console.log(v)} onValueChange={(v) => console.log(v)}
/> />
</Col> </Col>
@ -584,13 +600,14 @@ const UsagePage: React.FC<UsagePageProps> = ({
color: "#535452", color: "#535452",
}} }}
> >
Tokens {globalActivity.sum_total_tokens} Tokens {valueFormatterNumbers(globalActivity.sum_total_tokens)}
</Subtitle> </Subtitle>
<BarChart <BarChart
className="h-40" className="h-40"
data={globalActivity.daily_data} data={globalActivity.daily_data}
index="date" index="date"
colors={['cyan']} colors={['cyan']}
valueFormatter={valueFormatterNumbers}
categories={['total_tokens']} categories={['total_tokens']}
onValueChange={(v) => console.log(v)} onValueChange={(v) => console.log(v)}
/> />