ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

fix: refine Chart component to display midnight timestamps correctly and optimize X-axis labels for hourly intervals

Browse Source
This commit is contained in:
Usman Baig
2026-01-19 18:52:41 +01:00
parent 2a51982c28
commit dfe415af40
1 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
components/dashboard/Chart.tsx
View File

@@ -165,9 +165,10 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
} else if (interval === 'hour') {
const d = new Date(item.date)
const isMidnight = d.getHours() === 0 && d.getMinutes() === 0
// * At 12:00 AM: date only (used for X-axis ticks). Non-midnight: date + time for tooltip only.
formattedDate = isMidnight
? d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
: d.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })
? d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ' 12:00 AM'
: d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ', ' + d.toLocaleTimeString('en-US', { hour: 'numeric', minute: 'numeric' })
} else {
formattedDate = new Date(item.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}
@@ -248,6 +249,20 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
const hasPrev = !!(prevData?.length && showComparison)
// * In hourly view, only show X-axis labels at 12:00 AM (date + 12:00 AM).
const midnightTicks =
interval === 'hour'
? (() => {
const t = chartData
.filter((_, i) => {
const d = new Date(data[i].date)
return d.getHours() === 0 && d.getMinutes() === 0
})
.map((c) => c.date)
return t.length > 0 ? t : undefined
})()
: undefined
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl overflow-hidden shadow-sm">
{/* Stats Header (Interactive Tabs) */}
@@ -368,6 +383,7 @@ export default function Chart({ data, prevData, stats, prevStats, interval }: Ch
tickLine={false}
axisLine={false}
minTickGap={28}
ticks={midnightTicks}
/>
<YAxis
stroke={colors.axis}