diff --git a/components/dashboard/Chart.tsx b/components/dashboard/Chart.tsx index a5cfce9..679a29e 100644 --- a/components/dashboard/Chart.tsx +++ b/components/dashboard/Chart.tsx @@ -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 (