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

fix: use 24-hour time in Peak Hours heatmap

Browse Source 
Axis labels, bucket ranges, and busiest-time callout now use
24-hour format (00:00, 06:00, 12:00, 18:00) instead of AM/PM.
This commit is contained in:
Usman Baig
2026-03-14 13:38:51 +01:00
parent 25210013d3
commit 2242a159c7
1 changed files with 6 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/dashboard/PeakHours.tsx
View File

@@ -13,8 +13,8 @@ interface PeakHoursProps {
const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
const BUCKETS = 12 // 2-hour buckets const BUCKETS = 12 // 2-hour buckets
// Label at bucket index 0=12am, 3=6am, 6=12pm, 9=6pm // Label at bucket index 0=00:00, 3=06:00, 6=12:00, 9=18:00
const BUCKET_LABELS: Record<number, string> = { 0: '12am', 3: '6am', 6: '12pm', 9: '6pm' } const BUCKET_LABELS: Record<number, string> = { 0: '00:00', 3: '06:00', 6: '12:00', 9: '18:00' }
const HIGHLIGHT_COLORS = [ const HIGHLIGHT_COLORS = [
'rgba(253,94,15,0.18)', 'rgba(253,94,15,0.18)',
@@ -25,15 +25,12 @@ const HIGHLIGHT_COLORS = [
function formatBucket(bucket: number): string { function formatBucket(bucket: number): string {
const hour = bucket * 2 const hour = bucket * 2
if (hour === 0) return '12am–2am' const end = hour + 2
if (hour === 12) return '12pm–2pm' return `${String(hour).padStart(2, '0')}:00–${String(end).padStart(2, '0')}:00`
return hour < 12 ? `${hour}am–${hour + 2}am` : `${hour - 12}pm–${hour - 10}pm`
} }
function formatHour(hour: number): string { function formatHour(hour: number): string {
if (hour === 0) return '12am' return `${String(hour).padStart(2, '0')}:00`
if (hour === 12) return '12pm'
return hour < 12 ? `${hour}am` : `${hour - 12}pm`
} }
function getHighlightColor(value: number, max: number): string { function getHighlightColor(value: number, max: number): string {
@@ -205,7 +202,7 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
className="absolute text-[10px] text-neutral-400 dark:text-neutral-600 -translate-x-full" className="absolute text-[10px] text-neutral-400 dark:text-neutral-600 -translate-x-full"
style={{ left: '100%' }} style={{ left: '100%' }}
> >
12am 24:00
</span> </span>
</div> </div>
</div> </div>