From 53ad2edde89b812b4646fba36aa2c29bd5a7a12e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=94=A1=E5=8F=8A?= <522caiji@gmail.com> Date: Sat, 29 Aug 2026 16:00:40 +0800 Subject: [PATCH] fix: give the Overview traffic chart a full-width row The series sat beside the account pool, so the plot stayed narrow. Put traffic on its own row and let the SVG scale to the console width. --- CHANGELOG.md | 2 ++ frontend/src/components/overview/TrafficChart.tsx | 6 +++--- frontend/src/components/ui/PageSkeletons.tsx | 5 +++-- frontend/src/pages/OverviewPage.tsx | 8 +++++--- .../assets/{index-D0zQGztl.js => index-BLu1oRxf.js} | 2 +- .../assets/{index-Dh4GNv7V.css => index-DaLLqKNi.css} | 2 +- internal/webui/static/index.html | 4 ++-- 7 files changed, 17 insertions(+), 12 deletions(-) rename internal/webui/static/assets/{index-D0zQGztl.js => index-BLu1oRxf.js} (96%) rename internal/webui/static/assets/{index-Dh4GNv7V.css => index-DaLLqKNi.css} (89%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 645a1309..a9ae0010 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,10 +8,12 @@ Write each change in both `### English` and `### 中文` under `## Unreleased`. ### English - Make the Overview traffic chart taller so the area/line plot is readable +- Give the Overview traffic chart a full-width row so the series can use the console width ### 中文 - 加高概览流量图,面积折线更容易看清 +- 概览流量图单独占一行,折线铺满控制台宽度 ## 0.2.18 - 2026-08-29 diff --git a/frontend/src/components/overview/TrafficChart.tsx b/frontend/src/components/overview/TrafficChart.tsx index a20bd4e4..f5915769 100644 --- a/frontend/src/components/overview/TrafficChart.tsx +++ b/frontend/src/components/overview/TrafficChart.tsx @@ -3,9 +3,9 @@ import gsap from 'gsap' import type { RequestStatsPoint } from '@/api/logs' import { formatCompact } from '@/lib/format' -const WIDTH = 720 +const WIDTH = 960 const HEIGHT = 280 -const PAD = { top: 16, right: 12, bottom: 28, left: 40 } +const PAD = { top: 16, right: 16, bottom: 28, left: 40 } function hourLabel(value: string, daily: boolean, lang: 'en' | 'zh') { const date = new Date(value) @@ -137,7 +137,7 @@ export function TrafficChart({