mirror of https://github.com/msgbyte/tailchat
feat(admin): add analytics page
- activeGroupTop5 - activeUserTop5 - largeGroupTop5 - fileStorageUserTop5pull/105/merge
moonrailgun
2 years ago
parent
288f5a61e8
commit
39e0b2cee7
@ -0,0 +1,203 @@
|
||||
import fileSize from 'filesize';
|
||||
import React from 'react';
|
||||
import {
|
||||
Card,
|
||||
Grid,
|
||||
Tooltip,
|
||||
Typography,
|
||||
useAsync,
|
||||
useTranslation,
|
||||
} from 'tushan';
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
XAxis,
|
||||
YAxis,
|
||||
} from 'tushan/chart';
|
||||
import { request } from '../../request';
|
||||
|
||||
export const TailchatAnalytics: React.FC = React.memo(() => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Grid.Row gutter={4}>
|
||||
<Grid.Col md={12}>
|
||||
<Card>
|
||||
<Typography.Title heading={4}>
|
||||
{t('custom.analytics.activeGroupTop5')}
|
||||
</Typography.Title>
|
||||
|
||||
<ActiveGroupChart />
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col md={12}>
|
||||
<Card>
|
||||
<Typography.Title heading={4}>
|
||||
{t('custom.analytics.activeUserTop5')}
|
||||
</Typography.Title>
|
||||
|
||||
<ActiveUserChart />
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
|
||||
<Grid.Row gutter={4} style={{ marginTop: 8 }}>
|
||||
<Grid.Col md={12}>
|
||||
<Card>
|
||||
<Typography.Title heading={4}>
|
||||
{t('custom.analytics.largeGroupTop5')}
|
||||
</Typography.Title>
|
||||
|
||||
<LargeGroupChart />
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
|
||||
<Grid.Col md={12}>
|
||||
<Card>
|
||||
<Typography.Title heading={4}>
|
||||
{t('custom.analytics.fileStorageUserTop5')}
|
||||
</Typography.Title>
|
||||
|
||||
<FileStorageChart />
|
||||
</Card>
|
||||
</Grid.Col>
|
||||
</Grid.Row>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
TailchatAnalytics.displayName = 'TailchatAnalytics';
|
||||
|
||||
const ActiveGroupChart: React.FC = React.memo(() => {
|
||||
const { value } = useAsync(async () => {
|
||||
const { data } = await request.get<{
|
||||
activeGroups: {
|
||||
groupId: string;
|
||||
groupName: string;
|
||||
messageCount: number;
|
||||
}[];
|
||||
}>('/analytics/activeGroups');
|
||||
|
||||
return data.activeGroups;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<BarChart
|
||||
data={value}
|
||||
layout="vertical"
|
||||
maxBarSize={40}
|
||||
margin={{ left: 60 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="messageCount" type="number" />
|
||||
<YAxis dataKey="groupName" type="category" />
|
||||
<Tooltip />
|
||||
<Bar dataKey="messageCount" fill="#8884d8" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
});
|
||||
ActiveGroupChart.displayName = 'ActiveGroupChart';
|
||||
|
||||
const ActiveUserChart: React.FC = React.memo(() => {
|
||||
const { value } = useAsync(async () => {
|
||||
const { data } = await request.get<{
|
||||
activeUsers: {
|
||||
groupId: string;
|
||||
groupName: string;
|
||||
messageCount: number;
|
||||
}[];
|
||||
}>('/analytics/activeUsers');
|
||||
|
||||
return data.activeUsers;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<BarChart
|
||||
data={value}
|
||||
layout="vertical"
|
||||
maxBarSize={40}
|
||||
margin={{ left: 60 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="messageCount" type="number" />
|
||||
<YAxis dataKey="userName" type="category" />
|
||||
<Tooltip />
|
||||
<Bar dataKey="messageCount" fill="#8884d8" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
});
|
||||
ActiveUserChart.displayName = 'ActiveUserChart';
|
||||
|
||||
const LargeGroupChart: React.FC = React.memo(() => {
|
||||
const { value } = useAsync(async () => {
|
||||
const { data } = await request.get<{
|
||||
largeGroups: {
|
||||
name: string;
|
||||
memberCount: number;
|
||||
}[];
|
||||
}>('/analytics/largeGroups');
|
||||
|
||||
return data.largeGroups;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<BarChart
|
||||
data={value}
|
||||
layout="vertical"
|
||||
maxBarSize={40}
|
||||
margin={{ left: 60 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="memberCount" type="number" />
|
||||
<YAxis dataKey="name" type="category" />
|
||||
<Tooltip />
|
||||
<Bar dataKey="memberCount" fill="#8884d8" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
});
|
||||
LargeGroupChart.displayName = 'LargeGroupChart';
|
||||
|
||||
const FileStorageChart: React.FC = React.memo(() => {
|
||||
const { value } = useAsync(async () => {
|
||||
const { data } = await request.get<{
|
||||
fileStorageUserTop: {
|
||||
userId: string;
|
||||
userName: string;
|
||||
fileStorageTotal: number;
|
||||
}[];
|
||||
}>('/analytics/fileStorageUserTop');
|
||||
|
||||
return data.fileStorageUserTop;
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ResponsiveContainer width="100%" height={320}>
|
||||
<BarChart
|
||||
data={value}
|
||||
layout="vertical"
|
||||
maxBarSize={40}
|
||||
margin={{ left: 60 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis
|
||||
dataKey="fileStorageTotal"
|
||||
type="number"
|
||||
tickFormatter={(val) => fileSize(val)}
|
||||
/>
|
||||
<YAxis dataKey="userName" type="category" />
|
||||
<Tooltip />
|
||||
<Bar dataKey="fileStorageTotal" fill="#8884d8" />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
);
|
||||
});
|
||||
FileStorageChart.displayName = 'FileStorageChart';
|
||||
@ -0,0 +1,218 @@
|
||||
import { Router } from 'express';
|
||||
import { auth } from '../middleware/auth';
|
||||
import messageModel from '../../../../models/chat/message';
|
||||
import groupModel from '../../../../models/group/group';
|
||||
import fileModel from '../../../../models/file';
|
||||
import dayjs from 'dayjs';
|
||||
import { db } from 'tailchat-server-sdk';
|
||||
|
||||
const router = Router();
|
||||
|
||||
router.get('/activeGroups', auth(), async (req, res) => {
|
||||
// 返回最近7天的最活跃的群组
|
||||
const day = 7;
|
||||
const aggregateRes: { _id: string; count: number }[] = await messageModel
|
||||
.aggregate([
|
||||
{
|
||||
$match: {
|
||||
createdAt: {
|
||||
$gte: dayjs().subtract(day, 'd').startOf('d').toDate(),
|
||||
$lt: dayjs().endOf('d').toDate(),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
$group: {
|
||||
_id: '$groupId' as any,
|
||||
count: {
|
||||
$sum: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
$sort: {
|
||||
count: -1,
|
||||
},
|
||||
},
|
||||
{
|
||||
$limit: 5,
|
||||
},
|
||||
{
|
||||
$lookup: {
|
||||
from: 'groups',
|
||||
localField: '_id',
|
||||
foreignField: '_id',
|
||||
as: 'groupInfo',
|
||||
},
|
||||
},
|
||||
{
|
||||
$project: {
|
||||
_id: 0,
|
||||
groupId: '$_id',
|
||||
messageCount: '$count',
|
||||
groupName: {
|
||||
$arrayElemAt: ['$groupInfo.name', 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
])
|
||||
.exec();
|
||||
|
||||
const activeGroups = aggregateRes;
|
||||
|
||||
res.json({ activeGroups });
|
||||
});
|
||||
|
||||
router.get('/activeUsers', auth(), async (req, res) => {
|
||||
// 返回最近7天的最活跃的用户
|
||||
const day = 7;
|
||||
const aggregateRes: { _id: string; count: number }[] = await messageModel
|
||||
.aggregate([
|
||||
{
|
||||
$match: {
|
||||
author: {
|
||||
$ne: new db.Types.ObjectId('000000000000000000000000'),
|
||||
},
|
||||
createdAt: {
|
||||
$gte: dayjs().subtract(day, 'd').startOf('d').toDate(),
|
||||
$lt: dayjs().endOf('d').toDate(),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
$group: {
|
||||
_id: '$author' as any,
|
||||
count: {
|
||||
$sum: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
$sort: {
|
||||
count: -1,
|
||||
},
|
||||
},
|
||||
{
|
||||
$limit: 5,
|
||||
},
|
||||
{
|
||||
$lookup: {
|
||||
from: 'users',
|
||||
localField: '_id',
|
||||
foreignField: '_id',
|
||||
as: 'userInfo',
|
||||
},
|
||||
},
|
||||
{
|
||||
$project: {
|
||||
_id: 0,
|
||||
userId: '$_id',
|
||||
messageCount: '$count',
|
||||
userName: {
|
||||
$concat: [
|
||||
{
|
||||
$arrayElemAt: ['$userInfo.nickname', 0],
|
||||
},
|
||||
'#',
|
||||
{
|
||||
$arrayElemAt: ['$userInfo.discriminator', 0],
|
||||
},
|
||||
],
|
||||
// $arrayElemAt: ['$userInfo.nickname', 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
])
|
||||
.exec();
|
||||
|
||||
const activeUsers = aggregateRes;
|
||||
|
||||
res.json({ activeUsers });
|
||||
});
|
||||
|
||||
router.get('/largeGroups', auth(), async (req, res) => {
|
||||
// 返回最大的 5 个群组
|
||||
const limit = 5;
|
||||
const aggregateRes: { _id: string; count: number }[] = await groupModel
|
||||
.aggregate([
|
||||
{
|
||||
$project: {
|
||||
name: 1,
|
||||
memberCount: {
|
||||
$size: '$members',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
$sort: {
|
||||
memberCount: -1,
|
||||
},
|
||||
},
|
||||
{
|
||||
$limit: limit,
|
||||
},
|
||||
])
|
||||
.exec();
|
||||
|
||||
const largeGroups = aggregateRes;
|
||||
|
||||
res.json({ largeGroups });
|
||||
});
|
||||
|
||||
router.get('/fileStorageUserTop', auth(), async (req, res) => {
|
||||
// 返回最大的 5 个群组
|
||||
const limit = 5;
|
||||
const aggregateRes: { _id: string; count: number }[] = await fileModel
|
||||
.aggregate([
|
||||
{
|
||||
$group: {
|
||||
_id: '$userId',
|
||||
total: {
|
||||
$sum: '$size',
|
||||
},
|
||||
} as any,
|
||||
},
|
||||
{
|
||||
$sort: {
|
||||
total: -1,
|
||||
},
|
||||
},
|
||||
{
|
||||
$limit: limit,
|
||||
},
|
||||
{
|
||||
$lookup: {
|
||||
from: 'users',
|
||||
localField: '_id',
|
||||
foreignField: '_id',
|
||||
as: 'userInfo',
|
||||
},
|
||||
},
|
||||
{
|
||||
$project: {
|
||||
_id: 0,
|
||||
userId: '$_id',
|
||||
fileStorageTotal: '$total',
|
||||
userName: {
|
||||
$concat: [
|
||||
{
|
||||
$arrayElemAt: ['$userInfo.nickname', 0],
|
||||
},
|
||||
'#',
|
||||
{
|
||||
$arrayElemAt: ['$userInfo.discriminator', 0],
|
||||
},
|
||||
],
|
||||
// $arrayElemAt: ['$userInfo.nickname', 0],
|
||||
},
|
||||
},
|
||||
},
|
||||
])
|
||||
.exec();
|
||||
|
||||
const fileStorageUserTop = aggregateRes;
|
||||
|
||||
res.json({ fileStorageUserTop });
|
||||
});
|
||||
|
||||
export { router as analyticsRouter };
|
||||
Loading…
Reference in New Issue