Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4bd82c3

Browse files
cy948cy948
authored
💄 style: fix usage table display issues (#10108)
* wip: use stack bar chart * 💄 style: update labels * 🐛 fix: should not include INF vales * ♻️ refactor: improve codes * 💄 style: improve label format * 💄 style: improve label format
1 parent 891837b commit 4bd82c3

File tree

4 files changed

+69
-29
lines changed

4 files changed

+69
-29
lines changed

‎src/app/[variants]/(main)/settings/stats/features/components/UsageBarChart.tsx‎

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,43 +2,66 @@ import { BarChart, type BarChartProps, ChartTooltipFrame, ChartTooltipRow } from
22
import { Flexbox, Text } from '@lobehub/ui';
33
import { Divider } from 'antd';
44

5-
export const UsageBarChart = ({ ...props }: BarChartProps) => (
5+
import { formatNumber, formatTokenNumber } from '@/utils/format';
6+
7+
interface UsageBarChartProps extends BarChartProps {
8+
showType: 'spend' | 'token';
9+
}
10+
11+
export const UsageBarChart = ({ ...props }: UsageBarChartProps) => (
612
<BarChart
713
{...props}
8-
customTooltip={({ active, payload, label, valueFormatter }) => {
14+
customTooltip={({ active, payload, label }) => {
915
if (active && payload) {
16+
const sum = payload.reduce(
17+
(acc: number, cur: any) => (typeof cur.value === 'number' ? acc + cur.value : acc),
18+
0,
19+
);
1020
return (
1121
<ChartTooltipFrame>
1222
<Flexbox horizontal justify={'space-between'} paddingBlock={8} paddingInline={16}>
1323
<Text as={'p'} ellipsis style={{ margin: 0 }}>
1424
{label}
1525
</Text>
16-
<span style={{ fontWeight: 'bold' }}>
17-
{payload.reduce((acc: number, cur: any) => acc + cur.value, 0)}
18-
</span>
19-
</Flexbox>
20-
<Divider style={{ margin: 0 }} />
21-
<Flexbox
22-
gap={4}
23-
paddingBlock={8}
24-
paddingInline={16}
25-
style={{ flexDirection: 'column-reverse', marginTop: 4 }}
26-
>
27-
{payload.map(({ value, color, name }: any, idx: number) =>
28-
typeof value === 'number' && value > 0 ? (
29-
<ChartTooltipRow
30-
color={color}
31-
key={`id-${idx}`}
32-
name={name}
33-
value={(valueFormatter as any)?.(value)}
34-
/>
35-
) : null,
26+
{sum !== 0 && (
27+
<span style={{ fontWeight: 'bold' }}>
28+
{props.showType === 'spend' ? formatNumber(sum, 2) : formatTokenNumber(sum)}
29+
</span>
3630
)}
3731
</Flexbox>
32+
{sum !== 0 && (
33+
<>
34+
<Divider style={{ margin: 0 }} />
35+
<Flexbox
36+
gap={4}
37+
paddingBlock={8}
38+
paddingInline={16}
39+
style={{ flexDirection: 'column-reverse', marginTop: 4 }}
40+
>
41+
{payload.map(({ value, color, name }: any, idx: number) =>
42+
typeof value === 'number' && value > 0 ? (
43+
<ChartTooltipRow
44+
color={color}
45+
key={`id-${idx}`}
46+
name={name}
47+
value={
48+
props.showType === 'spend'
49+
? formatNumber(value, 2)
50+
: formatTokenNumber(value)
51+
}
52+
/>
53+
) : null,
54+
)}
55+
</Flexbox>
56+
</>
57+
)}
3858
</ChartTooltipFrame>
3959
);
4060
}
4161
return null;
4262
}}
63+
valueFormatter={(num) =>
64+
props.showType === 'spend' ? formatNumber(num, 2) : formatTokenNumber(num)
65+
}
4366
/>
4467
);

‎src/app/[variants]/(main)/settings/stats/features/usage/UsageTable.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ProviderIcon } from '@lobehub/icons';
2-
import { Flexbox, Tag, Text } from '@lobehub/ui';
2+
import { Flexbox, Tag, Text, Tooltip } from '@lobehub/ui';
33
import { type TableColumnType } from 'antd';
44
import { cssVar } from 'antd-style';
55
import { memo, useEffect } from 'react';
@@ -53,7 +53,9 @@ const UsageTable = memo<UsageChartProps>(({ dateStrings }) => {
5353
marginRight: -8,
5454
}}
5555
/>
56-
<Text>{value?.length > 12 ? `${value.slice(0, 12)}...` : value}</Text>
56+
<Tooltip title={value}>
57+
<Text>{value?.length > 12 ? `${value.slice(0, 12)}...` : value}</Text>
58+
</Tooltip>
5759
</Flexbox>
5860
),
5961
title: t('usage.table.model'),

‎src/app/[variants]/(main)/settings/stats/features/usage/UsageTrends.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,21 @@ const UsageTrends = memo<UsageChartProps>(({ isLoading, data, groupBy }) => {
8383
const charts =
8484
data &&
8585
(type === ShowType.Spend ? (
86-
<UsageBarChart categories={spendCate} data={spendData} index="day" />
86+
<UsageBarChart
87+
categories={spendCate}
88+
data={spendData}
89+
index="day"
90+
showType="spend"
91+
stack={true}
92+
/>
8793
) : (
88-
<UsageBarChart categories={tokenCate} data={tokenData} index="day" />
94+
<UsageBarChart
95+
categories={tokenCate}
96+
data={tokenData}
97+
index="day"
98+
showType="token"
99+
stack={true}
100+
/>
89101
));
90102

91103
return (

‎src/server/services/usage/index.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export class UsageRecordService {
2828
// Set startAt and endAt
2929
let startAt: string;
3030
let endAt: string;
31-
if (mo) {
31+
if (mo && dayjs(mo, 'YYYY-MM', true).isValid()) {
3232
// mo format: "YYYY-MM"
3333
startAt = dayjs(mo, 'YYYY-MM').startOf('month').format('YYYY-MM-DD');
3434
endAt = dayjs(mo, 'YYYY-MM').endOf('month').format('YYYY-MM-DD');
@@ -89,15 +89,18 @@ export class UsageRecordService {
8989
// Set startAt and endAt
9090
let startAt: string;
9191
let endAt: string;
92-
if (mo) {
92+
let month: string;
93+
if (mo && dayjs(mo, 'YYYY-MM', true).isValid()) {
9394
// mo format: "YYYY-MM"
9495
startAt = dayjs(mo, 'YYYY-MM').startOf('month').format('YYYY-MM-DD');
9596
endAt = dayjs(mo, 'YYYY-MM').endOf('month').format('YYYY-MM-DD');
97+
month = mo;
9698
} else {
9799
startAt = dayjs().startOf('month').format('YYYY-MM-DD');
98100
endAt = dayjs().endOf('month').format('YYYY-MM-DD');
101+
month = dayjs().format('YYYY-MM');
99102
}
100-
const spends = await this.findByMonth(mo);
103+
const spends = await this.findByMonth(month);
101104
// Clustering by time
102105
let usages = new Map<string, { date: Date; logs: UsageRecordItem[] }>();
103106
spends.forEach((spend) => {

0 commit comments

Comments
 (0)