xinyin025/one-api
1
0
Fork 0
mirror of https://github.com/songquanpeng/one-api.git synced 2025-11-04 15:53:42 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: update dashboard

Browse Source
This commit is contained in:
JustSong
2025-02-02 13:38:48 +08:00
parent 174dea7763
commit 4685c52a5d
1 changed files with 53 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
web/default/src/pages/Dashboard/index.js
View File

@@ -118,11 +118,17 @@ const Dashboard = () => {
// 获取日期范围
const dates = data.map((item) => item.Day);
const minDate =
dates.length > 0
? new Date(Math.min(...dates.map((d) => new Date(d))))
: new Date();
const maxDate = new Date(); // 总是使用今天作为最后一天
let minDate = dates.length > 0
? new Date(Math.min(...dates.map((d) => new Date(d))))
: new Date();
// 确保至少显示5天的数据
const fiveDaysAgo = new Date();
fiveDaysAgo.setDate(fiveDaysAgo.getDate() - 4); // -4是因为包含今天
if (minDate > fiveDaysAgo) {
minDate = fiveDaysAgo;
}
// 生成所有日期
for (let d = new Date(minDate); d <= maxDate; d.setDate(d.getDate() + 1)) {
@@ -153,11 +159,17 @@ const Dashboard = () => {
// 获取日期范围
const dates = data.map((item) => item.Day);
const minDate =
dates.length > 0
? new Date(Math.min(...dates.map((d) => new Date(d))))
: new Date();
const maxDate = new Date(); // 总是使用今天作为最后一天
let minDate = dates.length > 0
? new Date(Math.min(...dates.map((d) => new Date(d))))
: new Date();
// 确保至少显示5天的数据
const fiveDaysAgo = new Date();
fiveDaysAgo.setDate(fiveDaysAgo.getDate() - 4); // -4是因为包含今天
if (minDate > fiveDaysAgo) {
minDate = fiveDaysAgo;
}
// 生成所有日期
for (let d = new Date(minDate); d <= maxDate; d.setDate(d.getDate() + 1)) {
@@ -196,6 +208,28 @@ const Dashboard = () => {
return chartConfig.barColors[index % chartConfig.barColors.length];
};
// 添加一个日期格式化函数
const formatDate = (dateStr) => {
const date = new Date(dateStr);
return date.toLocaleDateString('zh-CN', { month: 'numeric', day: 'numeric' });
};
// 修改所有 XAxis 配置
const xAxisConfig = {
dataKey: 'date',
axisLine: false,
tickLine: false,
tick: {
fontSize: 12,
fill: '#A3AED0',
dx: 15 // 向右偏移文本
},
tickFormatter: formatDate,
interval: 0,
minTickGap: 5,
padding: { left: 20, right: 20 } // 增加两侧的内边距
};
return (
<div className='dashboard-container'>
{/* 三个并排的折线图 */}
@@ -208,7 +242,7 @@ const Dashboard = () => {
<span className='stat-value'>{summaryData.todayRequests}</span>
</Card.Header>
<div className='chart-container'>
<ResponsiveContainer width='100%' height={120}>
<ResponsiveContainer width='100%' height={120} margin={{ left: 20, right: 20 }}>
<LineChart data={timeSeriesData}>
<CartesianGrid
strokeDasharray='3 3'
@@ -216,12 +250,7 @@ const Dashboard = () => {
horizontal={chartConfig.lineChart.grid.horizontal}
opacity={chartConfig.lineChart.grid.opacity}
/>
<XAxis
dataKey='date'
axisLine={false}
tickLine={false}
tick={{ fontSize: 12, fill: '#A3AED0' }}
/>
<XAxis {...xAxisConfig} />
<YAxis hide={true} />
<Tooltip
contentStyle={{
@@ -235,7 +264,7 @@ const Dashboard = () => {
t('dashboard.charts.requests.tooltip'),
]}
labelFormatter={(label) =>
`${t('dashboard.tooltip.date')}: ${label}`
`${t('dashboard.tooltip.date')}: ${formatDate(label)}`
}
/>
<Line
@@ -263,7 +292,7 @@ const Dashboard = () => {
</span>
</Card.Header>
<div className='chart-container'>
<ResponsiveContainer width='100%' height={120}>
<ResponsiveContainer width='100%' height={120} margin={{ left: 20, right: 20 }}>
<LineChart data={timeSeriesData}>
<CartesianGrid
strokeDasharray='3 3'
@@ -271,12 +300,7 @@ const Dashboard = () => {
horizontal={chartConfig.lineChart.grid.horizontal}
opacity={chartConfig.lineChart.grid.opacity}
/>
<XAxis
dataKey='date'
axisLine={false}
tickLine={false}
tick={{ fontSize: 12, fill: '#A3AED0' }}
/>
<XAxis {...xAxisConfig} />
<YAxis hide={true} />
<Tooltip
contentStyle={{
@@ -290,7 +314,7 @@ const Dashboard = () => {
t('dashboard.charts.quota.tooltip'),
]}
labelFormatter={(label) =>
`${t('dashboard.tooltip.date')}: ${label}`
`${t('dashboard.tooltip.date')}: ${formatDate(label)}`
}
/>
<Line
@@ -316,7 +340,7 @@ const Dashboard = () => {
<span className='stat-value'>{summaryData.todayTokens}</span>
</Card.Header>
<div className='chart-container'>
<ResponsiveContainer width='100%' height={120}>
<ResponsiveContainer width='100%' height={120} margin={{ left: 20, right: 20 }}>
<LineChart data={timeSeriesData}>
<CartesianGrid
strokeDasharray='3 3'
@@ -324,12 +348,7 @@ const Dashboard = () => {
horizontal={chartConfig.lineChart.grid.horizontal}
opacity={chartConfig.lineChart.grid.opacity}
/>
<XAxis
dataKey='date'
axisLine={false}
tickLine={false}
tick={{ fontSize: 12, fill: '#A3AED0' }}
/>
<XAxis {...xAxisConfig} />
<YAxis hide={true} />
<Tooltip
contentStyle={{
@@ -343,7 +362,7 @@ const Dashboard = () => {
t('dashboard.charts.tokens.tooltip'),
]}
labelFormatter={(label) =>
`${t('dashboard.tooltip.date')}: ${label}`
`${t('dashboard.tooltip.date')}: ${formatDate(label)}`
}
/>
<Line
@@ -374,12 +393,7 @@ const Dashboard = () => {
vertical={false}
opacity={0.1}
/>
<XAxis
dataKey='date'
axisLine={false}
tickLine={false}
tick={{ fontSize: 12, fill: '#A3AED0' }}
/>
<XAxis {...xAxisConfig} />
<YAxis
axisLine={false}
tickLine={false}
@@ -393,7 +407,7 @@ const Dashboard = () => {
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
}}
labelFormatter={(label) =>
`${t('dashboard.tooltip.date')}: ${label}`
`${t('dashboard.tooltip.date')}: ${formatDate(label)}`
}
/>
<Legend