feat: Add time-of-day filtering with quick hour filters and time range picker

[Yashh56]

This pull request adds enhanced time-based filtering options to the DateFilter component, allowing users to select more granular time ranges, including specific hours within a day. It introduces a new TimeRangePickerForm component, updates the available filter options, and adds supporting labels for improved user experience.

New time range filtering features:

• Added a new TimeRangePickerForm component that allows users to select a specific date and start/end hours, enabling hour-level granularity for date filters. (src/components/metrics/TimeRangePickerForm.tsx)
• Updated the DateFilter component to include new quick-select options for the last 1, 2, 4, 6, and 12 hours, and added a "Time range" option that opens the new time picker modal. (src/components/input/DateFilter.tsx) [1] [2]
• Integrated the new time range picker modal into the DateFilter component, handling its open/close state and passing selected values back to the parent. (src/components/input/DateFilter.tsx) [1] [2] [3] [4]

Internationalization and UI improvements:

• Added new message labels for "Time range", "Start time", and "End time" to support the new filtering options. (src/components/messages.ts)
• Imported the new TimeRangePickerForm in the DateFilter component to enable the modal functionality. (src/components/input/DateFilter.tsx)

Closes #3962

[vercel]

@Yashh56 is attempting to deploy a commit to the umami-software Team on Vercel.

A member of the Team first needs to authorize it.

[greptile-apps]

Greptile Overview

Greptile Summary

This PR adds hour-level time filtering to Umami's analytics, enabling more granular data analysis. The implementation introduces a new TimeRangePickerForm component with calendar and hour selector controls, adds quick-select options for the last 1-12 hours to the DateFilter dropdown, and includes proper internationalization labels.

Key changes:

• New hour-based filtering UI with date + start/end hour selection
• Quick filters for last 1, 2, 4, 6, and 12 hours
• Proper initialization from existing date ranges when reopening the picker
• Validation to prevent invalid time ranges (startHour > endHour)
• Consistent time range format using range:${start}:${end} matching existing patterns

The implementation correctly addresses previous feedback by initializing hour states from props (defaultStartDate?.getHours()) and using inclusive hour ranges with proper minute boundaries.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation is clean and well-structured. All previous feedback has been addressed - hour initialization from props works correctly, the time range format uses proper boundaries (endHour + 1 with minute 0 for inclusive ranges), validation prevents invalid selections, and the code follows existing patterns in the codebase. The changes are isolated, don't affect existing functionality, and integrate smoothly with the existing date filtering system.
• No files require special attention

Important Files Changed

Filename	Overview
src/components/metrics/TimeRangePickerForm.tsx	New component enabling hour-level time filtering with date/hour selection and validation
src/components/input/DateFilter.tsx	Added quick-select hour filters (1h-12h) and integrated time range picker modal
src/components/messages.ts	Added i18n labels for timeRange, startTime, and endTime

Sequence Diagram

sequenceDiagram
    participant User
    participant DateFilter
    participant TimeRangePickerForm
    participant parseDateRange

    User->>DateFilter: Select "Time range" option
    DateFilter->>DateFilter: Set showTimePicker(true)
    DateFilter->>TimeRangePickerForm: Open modal with startDate/endDate
    TimeRangePickerForm->>TimeRangePickerForm: Initialize date state
    TimeRangePickerForm->>TimeRangePickerForm: Extract hours from props (getHours())
    User->>TimeRangePickerForm: Select date from calendar
    TimeRangePickerForm->>TimeRangePickerForm: Update date state
    User->>TimeRangePickerForm: Select start hour (0-23)
    TimeRangePickerForm->>TimeRangePickerForm: Update startHour state
    User->>TimeRangePickerForm: Select end hour (0-23)
    TimeRangePickerForm->>TimeRangePickerForm: Update endHour state
    TimeRangePickerForm->>TimeRangePickerForm: Validate startHour <= endHour
    User->>TimeRangePickerForm: Click Apply
    TimeRangePickerForm->>TimeRangePickerForm: Create range with setHours(startHour) to setHours(endHour+1)
    TimeRangePickerForm->>DateFilter: Call onChange("range:startTime:endTime")
    DateFilter->>DateFilter: Set showTimePicker(false)
    DateFilter->>parseDateRange: Parse range value
    parseDateRange->>DateFilter: Return startDate, endDate, unit
    DateFilter->>User: Display selected time range

Loading

[greptile-apps]

_{3 files reviewed, 3 comments}

_{Edit Code Review Agent Settings | Greptile}

[Yashh56]

@greptileai

[greptile-apps]

_{No files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}