From a17d6dde9b1df8069e45e623cab51ca4bd9f9c4d Mon Sep 17 00:00:00 2001 From: ericwyuan Date: Sun, 23 Aug 2026 21:36:28 +0800 Subject: [PATCH] =?UTF-8?q?=E7=9D=A1=E7=9C=A0=E9=A1=B5=E9=BB=98=E8=AE=A4?= =?UTF-8?q?=E7=AA=97=E5=8F=A3=E6=94=B9=E4=B8=BA=2014=20=E5=A4=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 30 根堆叠柱在常规宽度下每根约 10px，扣掉段间 2px 间隙后深睡那层 细到难以辨认，悬停命中区也逼近 24px 下限。默认收到 14 天让柱宽 翻倍，更长的窗口仍可手动选择。 Co-Authored-By: Claude Haiku 4.5 --- client/src/pages/Sleep.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/pages/Sleep.tsx b/client/src/pages/Sleep.tsx index 051e009..d684367 100644 --- a/client/src/pages/Sleep.tsx +++ b/client/src/pages/Sleep.tsx @@ -15,7 +15,10 @@ function avg(values: Array): number | null { function Sleep() { const [days, setDays] = useState([]); - const [range, setRange] = useState(30); + // 14 by default: the stacked chart needs bars wide enough to read the + // thinnest stage and to give hover a ~24px hit target. Longer windows stay + // available for the trend, where density matters less. + const [range, setRange] = useState(14); const [loading, setLoading] = useState(true); const [error, setError] = useState('');