From dfe415af40e3d1bbbb5356dbd829b702ec56fc0d Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Mon, 19 Jan 2026 18:52:41 +0100
Subject: [PATCH] fix: refine Chart component to display midnight timestamps
 correctly and optimize X-axis labels for hourly intervals

---
 components/dashboard/Chart.tsx | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

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 (
     <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}