mirror of https://github.com/msgbyte/tailchat
feat(admin-next): add custom dashboard
moonrailgun
2 years ago
parent
26f4c6a864
commit
4ee2fa81e2
@ -0,0 +1,226 @@
|
|||||||
|
import { IconFile, IconUser, IconUserGroup } from 'tushan/icon';
|
||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
CartesianGrid,
|
||||||
|
Tooltip,
|
||||||
|
ResponsiveContainer,
|
||||||
|
AreaChart,
|
||||||
|
Area,
|
||||||
|
} from 'tushan/chart';
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
Link,
|
||||||
|
Space,
|
||||||
|
Grid,
|
||||||
|
Divider,
|
||||||
|
Typography,
|
||||||
|
useUserStore,
|
||||||
|
createSelector,
|
||||||
|
useTranslation,
|
||||||
|
useGetList,
|
||||||
|
useAsync,
|
||||||
|
} from 'tushan';
|
||||||
|
import { request } from '../request';
|
||||||
|
|
||||||
|
const { GridItem } = Grid;
|
||||||
|
|
||||||
|
export const Dashboard: React.FC = React.memo(() => {
|
||||||
|
const { userIdentity } = useUserStore(createSelector('userIdentity'));
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const { total: usersNum } = useGetList('users', {
|
||||||
|
pagination: { page: 1, perPage: 1 },
|
||||||
|
});
|
||||||
|
const { total: groupNum } = useGetList('groups', {
|
||||||
|
pagination: { page: 1, perPage: 1 },
|
||||||
|
});
|
||||||
|
const { total: fileNum } = useGetList('file', {
|
||||||
|
pagination: { page: 1, perPage: 1 },
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<Space direction="vertical" style={{ width: '100%' }}>
|
||||||
|
<Card bordered={false}>
|
||||||
|
<Typography.Title heading={5}>
|
||||||
|
{t('tushan.dashboard.welcome', {
|
||||||
|
name: userIdentity.fullName,
|
||||||
|
})}
|
||||||
|
</Typography.Title>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<Grid.Row justify="center">
|
||||||
|
<Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
|
||||||
|
<DataItem
|
||||||
|
icon={<IconUser />}
|
||||||
|
title={t('tushan.dashboard.user')}
|
||||||
|
count={usersNum}
|
||||||
|
/>
|
||||||
|
</Grid.Col>
|
||||||
|
|
||||||
|
<Divider type="vertical" style={{ height: 40 }} />
|
||||||
|
|
||||||
|
<Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
|
||||||
|
<DataItem
|
||||||
|
icon={<IconUserGroup />}
|
||||||
|
title={t('tushan.dashboard.group')}
|
||||||
|
count={groupNum}
|
||||||
|
/>
|
||||||
|
</Grid.Col>
|
||||||
|
|
||||||
|
<Divider type="vertical" style={{ height: 40 }} />
|
||||||
|
|
||||||
|
<Grid.Col flex={1} style={{ paddingLeft: '1rem' }}>
|
||||||
|
<DataItem
|
||||||
|
icon={<IconFile />}
|
||||||
|
title={t('custom.dashboard.file')}
|
||||||
|
count={fileNum}
|
||||||
|
/>
|
||||||
|
</Grid.Col>
|
||||||
|
</Grid.Row>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
|
<Typography.Title heading={6} style={{ marginBottom: 10 }}>
|
||||||
|
{t('custom.dashboard.messageCount')}
|
||||||
|
</Typography.Title>
|
||||||
|
|
||||||
|
<MessageCountChart />
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Grid cols={3} colGap={12} rowGap={16}>
|
||||||
|
<GridItem index={0}>
|
||||||
|
<DashboardItem title="Docs" href="https://tailchat.msgbyte.com/">
|
||||||
|
{t('tushan.dashboard.tip.docs')}
|
||||||
|
</DashboardItem>
|
||||||
|
</GridItem>
|
||||||
|
<GridItem index={0}>
|
||||||
|
<DashboardItem
|
||||||
|
title="Github"
|
||||||
|
href="https://github.com/msgbyte/tailchat"
|
||||||
|
>
|
||||||
|
{t('custom.dashboard.tip.github')}
|
||||||
|
</DashboardItem>
|
||||||
|
</GridItem>
|
||||||
|
<GridItem index={0}>
|
||||||
|
<DashboardItem
|
||||||
|
title="Provide by Tushan"
|
||||||
|
href="https://tushan.msgbyte.com/"
|
||||||
|
>
|
||||||
|
{t('custom.dashboard.tip.tushan')}
|
||||||
|
</DashboardItem>
|
||||||
|
</GridItem>
|
||||||
|
</Grid>
|
||||||
|
</Space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
Dashboard.displayName = 'Dashboard';
|
||||||
|
|
||||||
|
const DashboardItem: React.FC<
|
||||||
|
React.PropsWithChildren<{
|
||||||
|
title: string;
|
||||||
|
href?: string;
|
||||||
|
}>
|
||||||
|
> = React.memo((props) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
title={props.title}
|
||||||
|
extra={
|
||||||
|
props.href && (
|
||||||
|
<Link target="_blank" href={props.href}>
|
||||||
|
{t('tushan.dashboard.more')}
|
||||||
|
</Link>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
bordered={false}
|
||||||
|
style={{ overflow: 'hidden' }}
|
||||||
|
>
|
||||||
|
{props.children}
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
DashboardItem.displayName = 'DashboardItem';
|
||||||
|
|
||||||
|
const DataItem: React.FC<{
|
||||||
|
icon: React.ReactElement;
|
||||||
|
title: string;
|
||||||
|
count: number;
|
||||||
|
}> = React.memo((props) => {
|
||||||
|
return (
|
||||||
|
<Space>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: 20,
|
||||||
|
padding: '0.5rem',
|
||||||
|
borderRadius: '9999px',
|
||||||
|
border: '1px solid #ccc',
|
||||||
|
width: 24,
|
||||||
|
height: 24,
|
||||||
|
display: 'flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{props.icon}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontWeight: 700 }}>{props.title}</div>
|
||||||
|
<div>{props.count}</div>
|
||||||
|
</div>
|
||||||
|
</Space>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
DataItem.displayName = 'DataItem';
|
||||||
|
|
||||||
|
const MessageCountChart: React.FC = React.memo(() => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const { value: messageCountSummary } = useAsync(async () => {
|
||||||
|
const { data } = await request.get<{
|
||||||
|
summary: {
|
||||||
|
count: number;
|
||||||
|
date: string;
|
||||||
|
}[];
|
||||||
|
}>('/message/count/summary');
|
||||||
|
|
||||||
|
return data.summary;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ResponsiveContainer width="100%" height={320}>
|
||||||
|
<AreaChart
|
||||||
|
width={730}
|
||||||
|
height={250}
|
||||||
|
data={messageCountSummary}
|
||||||
|
margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
|
||||||
|
>
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} />
|
||||||
|
<stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<XAxis dataKey="date" />
|
||||||
|
<YAxis />
|
||||||
|
<CartesianGrid strokeDasharray="3 3" />
|
||||||
|
<Tooltip />
|
||||||
|
<Area
|
||||||
|
type="monotone"
|
||||||
|
dataKey="count"
|
||||||
|
label={t('custom.dashboard.messageCount')}
|
||||||
|
stroke="#8884d8"
|
||||||
|
fillOpacity={1}
|
||||||
|
fill="url(#colorUv)"
|
||||||
|
/>
|
||||||
|
</AreaChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
MessageCountChart.displayName = 'MessageCountChart';
|
||||||
Loading…
Reference in New Issue