fix: dashboard weekly statistics NaN undefined error

Author: Mecozea

README.md

@@ -7,10 +7,43 @@
 
 NodePassDash是一个现代化的 NodePass 管理界面，基于 Go 后端 + React + Vite、HeroUI 和 TypeScript 构建。提供实时隧道监控、流量统计和端点管理功能。
 
-> **⚠️ 重大版本升级通知**
-> **version 3.x 是一个重大版本更新！** 核心架构全面重构，从 Next.js 迁移至 Vite，后端升级至 GORM + Gin 架构。
+> ## 📋 2.x 升级到 3.x 迁移指南
+> **version 3.x 是一个重大版本更新！** 核心架构全面重构，从 Next.js 打包更换为 Vite 打包，后端重构为 GORM + Gin 架构。
 >
+> ### 升级步骤
+>
+> 1. **导出主控数据**
+>
+>    - 在 2.x 版本的主控列表中，使用导出功能保存所有主控配置数据
+>
+> 2. **更新 Docker 配置**
+>
+>    - 从仓库获取最新的 `docker-compose.yml` 配置文件
+>
+> 3. **拉取最新镜像**
+>
+>    ```bash
+>    docker pull ghcr.io/nodepassproject/nodepassdash:latest
+>    ```
+>
+> 4. **重启容器**
+>
+>    ```bash
+>    # 在容器所在的compose文件目录运行
+>    docker compose down && docker compose up -d
+>    ```
+>
+> 5. **重新导入数据**
+>
+>    - 访问新版本界面，重新创建主控配置
+>    - 导入之前导出的主控数据
+>    - 验证所有功能正常工作
+>
+> ### ⚠️ 注意事项
 > ***此版本不向下兼容，升级前请务必备份/导出主控数据，建议全新创建主控避免旧数据的影响！***
+> - **数据库不兼容**: 3.x 版本使用全新的数据库表结构，无法直接迁移 2.x 数据
+> - **配置格式变更**: 主控配置格式有所调整，建议手动重新配置重要隧道
+> - **功能变化**: 部分功能界面和操作方式有所变化，建议查看新版本文档
 
 ## ✨ 主要特性
 

web/src/components/ui/weekly-stats-chart.tsx

@@ -166,8 +166,9 @@ function WeeklyStatsChartComponent({
             />
             <YAxis
               axisLine={false}
+              domain={[0, 'dataMax']}
               style={{ fontSize: "var(--heroui-font-size-tiny)" }}
-              tickFormatter={(value) => formatBytes(value)}
+              tickFormatter={(value) => formatBytes(Math.max(0, value))}
               tickLine={false}
             />
             <Tooltip
@@ -179,7 +180,7 @@ function WeeklyStatsChartComponent({
                     </span>
                     {payload?.map((p, index) => {
                       const name = p.name;
-                      const value = p.value;
+                      const value = Math.max(0, Number(p.value) || 0);
                       const category =
                         categories.find((c) => c === name) ?? name;
 
@@ -197,7 +198,7 @@ function WeeklyStatsChartComponent({
                           <div className="text-default-700 flex w-full items-center justify-between gap-x-2 pr-1 text-xs">
                             <span className="text-default-500">{category}</span>
                             <span className="text-default-700 font-mono font-medium">
-                              {formatBytes(value as number)}
+                              {formatBytes(value)}
                             </span>
                           </div>
                         </div>

web/src/pages/dashboard/index.tsx

@@ -443,10 +443,10 @@ export default function DashboardPage() {
         // 转换后端数据格式为图表组件需要的格式
         let chartData = result.data.map((item: any) => ({
           weekday: item.weekday,
-          "TCP In": item.tcp_in,
-          "TCP Out": item.tcp_out,
-          "UDP In": item.udp_in,
-          "UDP Out": item.udp_out,
+          "TCP In": Math.max(0, Number(item.tcp_in) || 0),
+          "TCP Out": Math.max(0, Number(item.tcp_out) || 0),
+          "UDP In": Math.max(0, Number(item.udp_in) || 0),
+          "UDP Out": Math.max(0, Number(item.udp_out) || 0),
         }));
 
         // 如果后端没有返回数据或数据不足7天，生成默认的7天0值数据