feat(dashboard): add statistics API and enhance homepage dashboard cards
- Add Query and DataResponse interfaces to common API module - Implement getDashboardStatistics API endpoint for fetching dashboard metrics - Update TopCardList component to display real dashboard data with dynamic values - Replace hardcoded dashboard metrics with actual API response data - Add support for calculating and displaying weekly growth rates for spaces and users - Update dashboard card labels and descriptions for models, spaces, users, and apps - Add "Rebuild Graph" button translation to knowledge graph card (en/zh) - Add appCount and userCount translation keys for dashboard display - Fix dashboard metric key naming consistency (total_apps_runs → total_running_apps) - Update dashboard descriptions to reflect weekly comparisons instead of daily - Improve data binding between API response and UI components for real-time statistics
This commit is contained in:
yujiangping
@@ -9,7 +9,7 @@ import arrowDownDb from '@/assets/images/index/arrow_down_d.svg'
|
||||
import arrowUp from '@/assets/images/index/arrow_up.svg'
|
||||
import arrowDown from '@/assets/images/index/arrow_down.svg'
|
||||
import styles from './index.module.css'
|
||||
import type { DashboardData } from '../../types'
|
||||
import { type DataResponse } from '@/api/common'
|
||||
|
||||
const list = [
|
||||
{
|
||||
@@ -46,7 +46,7 @@ const list = [
|
||||
background: 'linear-gradient( 136deg, rgba(77,168,255,0.06) 0%, rgba(251,253,255,0) 100%)',
|
||||
},
|
||||
{
|
||||
key: 'apps_runs',
|
||||
key: 'running_apps',
|
||||
icon: totalApps,
|
||||
value: '12.8k',
|
||||
trendValue: '98.7%',
|
||||
@@ -57,7 +57,7 @@ const list = [
|
||||
background: 'linear-gradient( 136deg, rgba(156,111,255,0.06) 0%, rgba(251,253,255,0) 100%)',
|
||||
},
|
||||
]
|
||||
const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
|
||||
const TopCardList: FC<{data?: DataResponse}> = ({ data }) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="rb:grid rb:grid-cols-4 rb:gap-[16px]">
|
||||
@@ -76,30 +76,53 @@ const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
|
||||
</div>
|
||||
|
||||
<div className={styles.content}>
|
||||
{data?.[`total_${item.key}` as keyof DashboardData] || item.value || 0}
|
||||
{item.key === 'spaces' && String(data?.active_workspaces)}
|
||||
{item.key !== 'spaces' && String(data?.[`total_${item.key}` as keyof DataResponse] || item.value || 0)}
|
||||
</div>
|
||||
<div className='rb:flex rb:flex-col rb:items-start'>
|
||||
{item.key === 'models' ? (
|
||||
<div className='rb:text-xs rb:leading-4 rb:text-[#5F6266] rb:w-[130px]'>
|
||||
{t(`dashboard.${'desc_' + item.key}`, { account: 18, nums: 6 })}
|
||||
{t(`dashboard.${'desc_' + item.key}`, { account: data?.total_llm, nums: data?.total_embedding })}
|
||||
</div>
|
||||
) : (<>
|
||||
<div className='rb:flex rb:items-center rb:text-xs rb:leading-4 rb:gap-1'>
|
||||
<img src={item.trend === 'up' ? arrowUpDb : arrowDownDb} className='rb:size-3'/>
|
||||
<span className={item.trend === 'up' ? 'rb:text-[#369F21]' : 'rb:text-[#FF5D34]'}>{item.trendValue}</span>
|
||||
{item.key === 'spaces' && (<>
|
||||
<img src={Number(data?.new_workspaces_this_week || 0) >= 0 ? arrowUpDb : arrowDownDb} className='rb:size-3'/>
|
||||
<span className={Number(data?.new_workspaces_this_week || 0) >= 0 ? 'rb:text-[#369F21]' : 'rb:text-[#FF5D34]'}>{Number(data?.new_workspaces_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_workspaces_this_week || 0))}</span>
|
||||
</>)}
|
||||
{item.key === 'users' && (<>
|
||||
<img src={Number(data?.new_users_this_week || 0) >= 0 ? arrowUpDb : arrowDownDb} className='rb:size-3'/>
|
||||
<span className={Number(data?.new_users_this_week || 0) >= 0 ? 'rb:text-[#369F21]' : 'rb:text-[#FF5D34]'}>{Number(data?.new_users_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_users_this_week || 0))}</span>
|
||||
</>)}
|
||||
{item.key === 'running_apps' && (<>
|
||||
<img src={Number(data?.new_apps_this_week || 0) >= 0 ? arrowUpDb : arrowDownDb} className='rb:size-3'/>
|
||||
<span className={Number(data?.new_apps_this_week || 0) >= 0 ? 'rb:text-[#369F21]' : 'rb:text-[#FF5D34]'}>{Number(data?.new_apps_this_week || 0) >= 0 ? '+' : '-'}{Math.abs(Number(data?.new_apps_this_week || 0))}</span>
|
||||
</>)}
|
||||
|
||||
</div>
|
||||
<div className='rb:text-xs rb:leading-4 rb:text-[#5F6266]'>
|
||||
{t(`dashboard.${'desc_' + item.key}`)}
|
||||
</div>
|
||||
</>)}
|
||||
</div>
|
||||
<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${item.rate === 'up' ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
|
||||
<img src={item.rate === 'up' ? arrowUp : arrowDown} className='rb:size-3'/>
|
||||
<span> {item.rateValue} </span>
|
||||
{(item.key === 'models' || item.key === 'users') && (<span>{t('dashboard.thisWeek')}</span>)}
|
||||
{item.key === 'apps_runs' && (<span>{t('dashboard.failureRate')}</span>)}
|
||||
{item.key === 'spaces' && (<span>{t('dashboard.thisDay')}</span>)}
|
||||
</div>
|
||||
|
||||
{item.key === 'models' && (<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${Number(data?.model_week_growth_rate || 0) >= 0 ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
|
||||
<img src={Number(data?.model_week_growth_rate || 0) >= 0 ? arrowUp : arrowDown} className='rb:size-3'/>
|
||||
<span>{Math.abs(Number(data?.model_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
|
||||
</div>)}
|
||||
{item.key === 'spaces' && (<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${Number(data?.workspace_week_growth_rate || 0) >= 0 ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
|
||||
<img src={Number(data?.workspace_week_growth_rate || 0) >= 0 ? arrowUp : arrowDown} className='rb:size-3'/>
|
||||
<span>{Math.abs(Number(data?.workspace_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
|
||||
</div>)}
|
||||
{item.key === 'users' && (<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${Number(data?.user_week_growth_rate || 0) >= 0 ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
|
||||
<img src={Number(data?.user_week_growth_rate || 0) >= 0 ? arrowUp : arrowDown} className='rb:size-3'/>
|
||||
<span>{Math.abs(Number(data?.user_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
|
||||
</div>)}
|
||||
{item.key === 'running_apps' && (<div className={`rb:flex rb:max-w-40 rb:text-xs rb:mt-2 rb:items-center rb:gap-1 rb:border-1 rb:rounded rb:px-2 rb:py-0.5 ${Number(data?.app_week_growth_rate || 0) >= 0 ? 'rb:text-[#369F21] rb:border-[#369F21] rb:bg-[rgba(54, 159, 33, 0.25)]' : 'rb:text-[#FF5D34] rb:border-[#FF5D34] rb:bg-[rgba(255, 93, 52, 0.25)]'}`}>
|
||||
<img src={Number(data?.app_week_growth_rate || 0) >= 0 ? arrowUp : arrowDown} className='rb:size-3'/>
|
||||
<span>{Math.abs(Number(data?.app_week_growth_rate || 0))}% {t('dashboard.thisWeek')}</span>
|
||||
</div>)}
|
||||
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
@@ -1,59 +1,79 @@
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Row, Col, Space, Button } from 'antd';
|
||||
import TopCardList from './components/TopCardList';
|
||||
import GuideCard from './components/GuideCard';
|
||||
import VersionCard from './components/VersionCard';
|
||||
import QuickActions from './components/QuickActions';
|
||||
import bgImg from '@/assets/images/index/index_bg@2x.png'
|
||||
import type { DashboardData } from './types';
|
||||
import Table, { type TableRef } from '@/components/Table'
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { formatDateTime } from '@/utils/format';
|
||||
import {
|
||||
getDashboardData,
|
||||
getDashboardStatistics,
|
||||
type DataResponse } from '@/api/common';
|
||||
import { switchWorkspace } from '@/api/workspaces'
|
||||
const Index = () => {
|
||||
const { t } = useTranslation();
|
||||
const [dashboardData, setDashboardData] = useState<DashboardData>({
|
||||
total_models: 24,
|
||||
total_spaces: 156,
|
||||
total_users: 1248,
|
||||
total_apps_runs: '12.8k',
|
||||
});
|
||||
const navigate = useNavigate()
|
||||
const [dashboardData, setDashboardData] = useState<DataResponse>();
|
||||
const tableRef = useRef<TableRef>(null);
|
||||
const tableApi = '/workspaces';
|
||||
const [loading, setLoading] = useState({
|
||||
knowledgeTypeDistribution: true,
|
||||
});
|
||||
const [knowledgeTypeDistribution, setKnowledgeTypeDistribution] = useState<Array<{ name: string; value: number }>>([]);
|
||||
const [memoryIncrement, setMemoryIncrement] = useState<Array<{ updated_at: string; total_num: number; }>>([]);
|
||||
const [limit, setLimit] = useState(7);
|
||||
const tableApi = getDashboardData;
|
||||
const getDashboardCount = async () => {
|
||||
try{
|
||||
const res = await getDashboardStatistics();
|
||||
setDashboardData(res);
|
||||
}catch(e) {
|
||||
console.log(e)
|
||||
}
|
||||
}
|
||||
const handleJump = (id: string) => {
|
||||
switchWorkspace(id)
|
||||
.then(() => {
|
||||
localStorage.removeItem('user')
|
||||
navigate('/')
|
||||
})
|
||||
}
|
||||
const columns: ColumnsType = [
|
||||
{
|
||||
title: t('space.spaceName'),
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
// {
|
||||
// title: t('space.associated') + ' ' + t('memorySummary.user'),
|
||||
// dataIndex: 'name',
|
||||
// key: 'name',
|
||||
// },
|
||||
|
||||
{
|
||||
title: t('space.spaceIcon'),
|
||||
dataIndex: 'icon',
|
||||
key: 'icon',
|
||||
render:(value:string) => {
|
||||
return(
|
||||
render:(value: string, record: any) => {
|
||||
return value ? (
|
||||
<img src={value} alt="icon" className='rb:w-[24px] rb:h-[24px]' />
|
||||
) : (
|
||||
<div className='rb:w-[24px] rb:h-[24px] rb:bg-blue-500 rb:text-white rb:rounded rb:flex rb:items-center rb:justify-center rb:text-xs rb:font-medium'>
|
||||
{record.name?.charAt(0)?.toUpperCase() || '?'}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
title: t('index.appCount'),
|
||||
dataIndex: 'app_count',
|
||||
key: 'app_count',
|
||||
},
|
||||
{
|
||||
title: t('index.userCount'),
|
||||
dataIndex: 'user_count',
|
||||
key: 'user_count',
|
||||
},
|
||||
{
|
||||
title: t('apiKey.createdAt'),
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
render:(value:string) => {
|
||||
return(
|
||||
<span>{formatDateTime(Number(value) * 1000 ,'YYYY-MM-DD HH:mm:ss')}</span>
|
||||
<span>{formatDateTime(Number(value) ,'YYYY-MM-DD HH:mm:ss')}</span>
|
||||
)
|
||||
}
|
||||
},
|
||||
@@ -64,16 +84,18 @@ const Index = () => {
|
||||
width: 100,
|
||||
render: (_, record) => (
|
||||
<Space size="middle">
|
||||
<Button color="primary" variant="text">{t('space.enterSpace')}</Button>
|
||||
<Button onClick={() => handleJump(record.id)} color="primary" variant="text">{t('space.enterSpace')}</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
]
|
||||
// 模拟API获取数据
|
||||
|
||||
useEffect(() => {
|
||||
tableRef.current?.loadData();
|
||||
}, [tableApi]);
|
||||
|
||||
useEffect(() => {
|
||||
getDashboardCount();
|
||||
}, [])
|
||||
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user