V4.8.20 feature (#3686)
* Aiproxy (#3649) * model config * feat: model config ui * perf: rename variable * feat: custom request url * perf: model buffer * perf: init model * feat: json model config * auto login * fix: ts * update packages * package * fix: dockerfile * feat: usage filter & export & dashbord (#3538) * feat: usage filter & export & dashbord * adjust ui * fix tmb scroll * fix code & selecte all * merge * perf: usages list；perf: move components (#3654) * perf: usages list * team sub plan load * perf: usage dashboard code * perf: dashboard ui * perf: move components * add default model config (#3653) * 4.8.20 test (#3656) * provider * perf: model config * model perf (#3657) * fix: model * dataset quote * perf: model config * model tag * doubao model config * perf: config model * feat: model test * fix: POST 500 error on dingtalk bot (#3655) * feat: default model (#3662) * move model config * feat: default model * fix: false triggerd org selection (#3661) * export usage csv i18n (#3660) * export usage csv i18n * fix build * feat: markdown extension (#3663) * feat: markdown extension * media cros * rerank test * default price * perf: default model * fix: cannot custom provider * fix: default model select * update bg * perf: default model selector * fix: usage export * i18n * fix: rerank * update init extension * perf: ip limit check * doubao model order * web default modle * perf: tts selector * perf: tts error * qrcode package * reload buffer (#3665) * reload buffer * reload buffer * tts selector * fix: err tip (#3666) * fix: err tip * perf: training queue * doc * fix interactive edge (#3659) * fix interactive edge * fix * comment * add gemini model * fix: chat model select * perf: supplement assistant empty response (#3669) * perf: supplement assistant empty response * check array * perf: max_token count;feat: support resoner output;fix: member scroll (#3681) * perf: supplement assistant empty response * check array * perf: max_token count * feat: support resoner output * member scroll * update provider order * i18n * fix: stream response (#3682) * perf: supplement assistant empty response * check array * fix: stream response * fix: model config cannot set to null * fix: reasoning response (#3684) * perf: supplement assistant empty response * check array * fix: reasoning response * fix: reasoning response * doc (#3685) * perf: supplement assistant empty response * check array * doc * lock * animation * update doc * update compose * doc * doc --------- Co-authored-by: heheer <heheer@sealos.io> Co-authored-by: a.e. <49438478+I-Info@users.noreply.github.com>
This commit is contained in:
Archer
142
projects/app/src/pageComponents/account/usage/Dashboard.tsx
Normal file
142
projects/app/src/pageComponents/account/usage/Dashboard.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
import { getDashboardData } from '@/web/support/wallet/usage/api';
|
||||
import { Box, Flex } from '@chakra-ui/react';
|
||||
import { formatNumber } from '@fastgpt/global/common/math/tools';
|
||||
import MyBox from '@fastgpt/web/components/common/MyBox';
|
||||
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
|
||||
import { addDays } from 'date-fns';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import React, { useMemo } from 'react';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
TooltipProps
|
||||
} from 'recharts';
|
||||
import { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent';
|
||||
import { UnitType, UsageFilterParams } from './type';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
export type usageFormType = {
|
||||
date: string;
|
||||
totalPoints: number;
|
||||
};
|
||||
|
||||
const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
|
||||
const data = payload?.[0]?.payload as usageFormType;
|
||||
const { t } = useTranslation();
|
||||
if (active && data) {
|
||||
return (
|
||||
<Box
|
||||
bg={'white'}
|
||||
p={3}
|
||||
borderRadius={'md'}
|
||||
border={'0.5px solid'}
|
||||
borderColor={'myGray.200'}
|
||||
boxShadow={
|
||||
'0px 24px 48px -12px rgba(19, 51, 107, 0.20), 0px 0px 1px 0px rgba(19, 51, 107, 0.20)'
|
||||
}
|
||||
>
|
||||
<Box fontSize={'mini'} color={'myGray.600'} mb={3}>
|
||||
{data.date}
|
||||
</Box>
|
||||
<Box fontSize={'14px'} color={'myGray.900'} fontWeight={'medium'}>
|
||||
{`${formatNumber(data.totalPoints)} ${t('account_usage:points')}`}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const UsageDashboard = ({
|
||||
filterParams,
|
||||
Tabs,
|
||||
Selectors
|
||||
}: {
|
||||
filterParams: UsageFilterParams;
|
||||
Tabs: React.ReactNode;
|
||||
Selectors: React.ReactNode;
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { dateRange, selectTmbIds, usageSources, unit, isSelectAllSource, isSelectAllTmb } =
|
||||
filterParams;
|
||||
|
||||
const { data: totalPoints = [], loading: totalPointsLoading } = useRequest2(
|
||||
() =>
|
||||
getDashboardData({
|
||||
dateStart: dateRange.from
|
||||
? new Date(dateRange.from.setHours(0, 0, 0, 0))
|
||||
: new Date(new Date().setHours(0, 0, 0, 0)),
|
||||
dateEnd: dateRange.to
|
||||
? new Date(addDays(dateRange.to, 1).setHours(0, 0, 0, 0))
|
||||
: new Date(addDays(new Date(), 1).setHours(0, 0, 0, 0)),
|
||||
sources: isSelectAllSource ? undefined : usageSources,
|
||||
teamMemberIds: isSelectAllTmb ? undefined : selectTmbIds,
|
||||
unit
|
||||
}).then((res) =>
|
||||
res.map((item) => ({
|
||||
...item,
|
||||
date: dayjs(item.date).format('YYYY-MM-DD')
|
||||
}))
|
||||
),
|
||||
{
|
||||
manual: false,
|
||||
refreshDeps: [filterParams]
|
||||
}
|
||||
);
|
||||
|
||||
const totalUsage = useMemo(() => {
|
||||
return totalPoints.reduce((acc, curr) => acc + curr.totalPoints, 0);
|
||||
}, [totalPoints]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box>{Tabs}</Box>
|
||||
<Box mt={4}>{Selectors}</Box>
|
||||
<MyBox overflowY={'auto'} isLoading={totalPointsLoading}>
|
||||
<Flex fontSize={'20px'} fontWeight={'medium'} my={6}>
|
||||
<Box color={'black'}>{`${t('account_usage:total_usage')}:`}</Box>
|
||||
<Box color={'primary.600'} ml={2}>
|
||||
{`${formatNumber(totalUsage)} ${t('account_usage:points')}`}
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex mb={4} fontSize={'mini'} color={'myGray.500'} fontWeight={'medium'}>
|
||||
{t('account_usage:points')}
|
||||
</Flex>
|
||||
<ResponsiveContainer width="100%" height={424}>
|
||||
<LineChart data={totalPoints} margin={{ top: 10, right: 30, left: -12, bottom: 0 }}>
|
||||
<XAxis
|
||||
dataKey="date"
|
||||
padding={{ left: 40, right: 40 }}
|
||||
tickMargin={10}
|
||||
tickSize={0}
|
||||
tick={{ fontSize: '12px', color: '#667085', fontWeight: '500' }}
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickSize={0}
|
||||
tickMargin={12}
|
||||
tick={{ fontSize: '12px', color: '#667085', fontWeight: '500' }}
|
||||
/>
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Line
|
||||
type="monotone"
|
||||
dataKey="totalPoints"
|
||||
stroke="#5E8FFF"
|
||||
strokeWidth={2.5}
|
||||
dot={false}
|
||||
/>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</MyBox>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(UsageDashboard);
|
||||
Reference in New Issue
Block a user