richard/digital-pilates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 调整睡眠阶段图表的宽度和边距，优化标签显示逻辑

Browse Source
This commit is contained in:
richarjiang
2025-09-10 19:20:05 +08:00
parent 6fbdbafa3e
commit aee87e8900
2 changed files with 13 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/sleep-detail.tsx
View File

@@ -305,10 +305,10 @@ export default function SleepDetailScreen() {
</View> </View>
{/* 睡眠阶段图表 */} {/* 睡眠阶段图表 */}
<SleepStageChart {/* <SleepStageChart
sleepData={displayData} sleepData={displayData}
onInfoPress={() => setSleepStagesModal({ visible: true })} onInfoPress={() => setSleepStagesModal({ visible: true })}
/> /> */}
{/* 苹果健康风格的睡眠阶段时间轴图表 */} {/* 苹果健康风格的睡眠阶段时间轴图表 */}
<SleepStageTimeline <SleepStageTimeline
@@ -387,7 +387,7 @@ export default function SleepDetailScreen() {
</View> </View>
{/* Raw Sleep Samples List - 显示所有原始睡眠数据 */} {/* Raw Sleep Samples List - 显示所有原始睡眠数据 */}
{sleepData && sleepData.rawSleepSamples && sleepData.rawSleepSamples.length > 1 && ( {sleepData && sleepData.rawSleepSamples && sleepData.rawSleepSamples.length > 100 && (
<View style={[styles.rawSamplesContainer, { backgroundColor: colorTokens.background }]}> <View style={[styles.rawSamplesContainer, { backgroundColor: colorTokens.background }]}>
<View style={styles.rawSamplesHeader}> <View style={styles.rawSamplesHeader}>
<Text style={[styles.rawSamplesTitle, { color: colorTokens.text }]}> <Text style={[styles.rawSamplesTitle, { color: colorTokens.text }]}>

18
components/sleep/SleepStageTimeline.tsx
View File

@@ -24,7 +24,9 @@ export const SleepStageTimeline = ({
const colorTokens = Colors[theme]; const colorTokens = Colors[theme];
// 图表尺寸参数 // 图表尺寸参数
const chartWidth = 320; const containerWidth = 320;
const chartPadding = 25; // 左右边距，为时间标签预留空间
const chartWidth = containerWidth - chartPadding * 2;
const chartHeight = 80; const chartHeight = 80;
const timelineHeight = 32; const timelineHeight = 32;
const timelineY = 24; const timelineY = 24;
@@ -53,7 +55,7 @@ export const SleepStageTimeline = ({
const startOffset = sampleStart.diff(startTime, 'minute'); const startOffset = sampleStart.diff(startTime, 'minute');
const duration = sampleEnd.diff(sampleStart, 'minute'); const duration = sampleEnd.diff(sampleStart, 'minute');
const x = Math.max(0, (startOffset / totalMinutes) * chartWidth); const x = Math.max(0, (startOffset / totalMinutes) * chartWidth) + chartPadding;
const width = Math.max(2, (duration / totalMinutes) * chartWidth); const width = Math.max(2, (duration / totalMinutes) * chartWidth);
return { return {
@@ -71,7 +73,7 @@ export const SleepStageTimeline = ({
// 总是显示起始时间 // 总是显示起始时间
labels.push({ labels.push({
time: startTime.format('HH:mm'), time: startTime.format('HH:mm'),
x: 0 x: chartPadding
}); });
// 根据睡眠总时长动态调整时间间隔 // 根据睡眠总时长动态调整时间间隔
@@ -92,11 +94,11 @@ export const SleepStageTimeline = ({
while (currentTime.add(timeStepMinutes * stepCount, 'minute').isBefore(endTime)) { while (currentTime.add(timeStepMinutes * stepCount, 'minute').isBefore(endTime)) {
const stepTime = currentTime.add(timeStepMinutes * stepCount, 'minute'); const stepTime = currentTime.add(timeStepMinutes * stepCount, 'minute');
const x = (stepTime.diff(startTime, 'minute') / totalMinutes) * chartWidth; const x = (stepTime.diff(startTime, 'minute') / totalMinutes) * chartWidth + chartPadding;
// 检查与前一个标签的间距 // 检查与前一个标签的间距
const lastLabel = labels[labels.length - 1]; const lastLabel = labels[labels.length - 1];
if (x - lastLabel.x >= minLabelSpacing && x <= chartWidth - 30) { if (x - lastLabel.x >= minLabelSpacing && x <= containerWidth - chartPadding) {
labels.push({ labels.push({
time: stepTime.format('HH:mm'), time: stepTime.format('HH:mm'),
x: x x: x
@@ -107,7 +109,7 @@ export const SleepStageTimeline = ({
} }
// 总是显示结束时间，但要确保与前一个标签有足够间距 // 总是显示结束时间，但要确保与前一个标签有足够间距
const endX = chartWidth - 25; const endX = containerWidth - chartPadding;
const lastLabel = labels[labels.length - 1]; const lastLabel = labels[labels.length - 1];
if (endX - lastLabel.x >= minLabelSpacing) { if (endX - lastLabel.x >= minLabelSpacing) {
labels.push({ labels.push({
@@ -176,7 +178,7 @@ export const SleepStageTimeline = ({
{/* SVG 图表 */} {/* SVG 图表 */}
<View style={styles.chartContainer}> <View style={styles.chartContainer}>
<Svg width={chartWidth} height={chartHeight}> <Svg width={containerWidth} height={chartHeight}>
{/* 绘制睡眠阶段条形图 */} {/* 绘制睡眠阶段条形图 */}
{timelineData.map((segment, index) => ( {timelineData.map((segment, index) => (
<Rect <Rect
@@ -195,7 +197,7 @@ export const SleepStageTimeline = ({
<React.Fragment key={index}> <React.Fragment key={index}>
{/* 刻度线 */} {/* 刻度线 */}
<Rect <Rect
x={label.x} x={label.x - 0.5}
y={timelineY + timelineHeight} y={timelineY + timelineHeight}
width={1} width={1}
height={6} height={6}