feat: date range selector #8991
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
1 Skipped Deployment
|
Dependency Review✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.OpenSSF Scorecard
Scanned Files |
| }, | ||
| { | ||
| label: 'Date To', | ||
| icon: 'today', | ||
| options: [], | ||
| filterKey: 'to', | ||
| dateOperators: ['IS'], | ||
| fromFilterKey: 'from', |
There was a problem hiding this comment.
if the from/to filter keys are present then the date selection component automatically gets presets working
| @@ -41,6 +41,8 @@ type ITextFilterItem = IBaseFilterItem & { | |||
|
|
|||
| type IDateFilterItem = IBaseFilterItem & { | |||
| dateOperators: [string, ...string[]]; | |||
| fromFilterKey?: string; | |||
There was a problem hiding this comment.
range presents are optional
| | 'thisYear' | ||
| | 'previousYear'; | ||
|
|
||
| export const calculateDateRange = ( |
There was a problem hiding this comment.
extracted for testability
| @@ -32,10 +34,20 @@ export const Insights: FC<InsightsProps> = ({ withCharts = true }) => { | |||
|
|
|||
| const stateConfig = { | |||
| project: FilterItemParam, | |||
| from: FilterItemParam, | |||
| to: FilterItemParam, | |||
| from: withDefault(FilterItemParam, { | |||
There was a problem hiding this comment.
preselected dates always show a current day minus one month
| }; | ||
| const [state, setState] = usePersistentTableState('insights', stateConfig); | ||
| const [state, setState] = usePersistentTableState('insights', stateConfig, [ | ||
| 'from', |
There was a problem hiding this comment.
we don't want o persist from and to to local storage and prefer to always use the moving last month window
| operators={filter.dateOperators} | ||
| onChipClose={() => deselectFilter(filter.label)} | ||
| onChipClose={ | ||
| filter.persistent |
There was a problem hiding this comment.
persistent filters don't allow to close with a chip click
| @@ -31,6 +31,7 @@ const StyledLabel = styled('div')(({ theme }) => ({ | |||
| alignItems: 'center', | |||
| justifyContent: 'space-between', | |||
| fontWeight: theme.typography.fontWeightBold, | |||
| minHeight: theme.spacing(3.5), | |||
There was a problem hiding this comment.
we need to make sure that filters with chip and without a chip have the same height
There was a problem hiding this comment.
It's a bit weird not having the "default" unselected option. Time selector stands a lot.
I think calendar and presets are too fair apart. Also title "Presets" doesn't look correct to me. Maybe "Choose date range"?
"This year" could be "This year to date"?
Just nitpicking, because code looks good. UX is a bit of a compromise
About the changes
Adding a new capability to select date ranges. It allows to select a date range preset from the from/to dates. This is already available in the Insights sections and in the Event Log search.
presets_final.mov
Details:
Important files
Discussion points