Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: date range selector #8991

Merged
merged 4 commits into from
Dec 18, 2024
Merged

feat: date range selector #8991

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8080ff6
feat: date range selector
kwasniew Dec 17, 2024
4adcc6f
feat: date range selector
kwasniew Dec 17, 2024
1f0150c
feat: persistent dates with default values
kwasniew Dec 17, 2024
870569d
test: preset selectors
kwasniew Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions frontend/src/component/common/FilterDateItem/DateRangePresets.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { Box, List, ListItem, ListItemButton, Typography } from '@mui/material';
import type { FilterItemParams } from '../../filter/FilterItem/FilterItem';
import type { FC } from 'react';
import { calculateDateRange, type RangeType } from './calculateDateRange';

export const DateRangePresets: FC<{
onRangeChange: (value: {
from: FilterItemParams;
to: FilterItemParams;
}) => void;
}> = ({ onRangeChange }) => {
const rangeChangeHandler = (rangeType: RangeType) => () => {
const [start, end] = calculateDateRange(rangeType);
onRangeChange({
from: {
operator: 'IS',
values: [start],
},
to: {
operator: 'IS',
values: [end],
},
});
};

return (
<Box>
<Typography variant='h3' sx={{ pb: 1, pl: 2 }}>
Presets
</Typography>
<List disablePadding sx={{ pb: 2 }}>
<ListItem disablePadding>
<ListItemButton onClick={rangeChangeHandler('thisMonth')}>
This month
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton
onClick={rangeChangeHandler('previousMonth')}
>
Previous month
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton onClick={rangeChangeHandler('thisQuarter')}>
This quarter
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton
onClick={rangeChangeHandler('previousQuarter')}
>
Previous quarter
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton onClick={rangeChangeHandler('thisYear')}>
This year
</ListItemButton>
</ListItem>
<ListItem disablePadding>
<ListItemButton
onClick={rangeChangeHandler('previousYear')}
>
Previous year
</ListItemButton>
</ListItem>
</List>
</Box>
);
};
9 changes: 9 additions & 0 deletions frontend/src/component/common/FilterDateItem/FilterDateItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,16 @@ import { format } from 'date-fns';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { getLocalizedDateString } from '../util';
import type { FilterItemParams } from 'component/filter/FilterItem/FilterItem';
import { DateRangePresets } from './DateRangePresets';

export interface IFilterDateItemProps {
name: string;
label: ReactNode;
onChange: (value: FilterItemParams) => void;
onRangeChange?: (value: {
from: FilterItemParams;
to: FilterItemParams;
}) => void;
onChipClose: () => void;
state: FilterItemParams | null | undefined;
operators: [string, ...string[]];
Expand All @@ -22,6 +27,7 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
name,
label,
onChange,
onRangeChange,
onChipClose,
state,
operators,
Expand Down Expand Up @@ -115,6 +121,9 @@ export const FilterDateItem: FC<IFilterDateItemProps> = ({
});
}}
/>
{onRangeChange && (
<DateRangePresets onRangeChange={onRangeChange} />
)}
</LocalizationProvider>
</StyledPopover>
</>
Expand Down
40 changes: 40 additions & 0 deletions frontend/src/component/common/FilterDateItem/calculateDateRange.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { calculateDateRange, type RangeType } from './calculateDateRange';

describe('calculateDateRange', () => {
const fixedDate = new Date('2024-06-16');

test.each<[RangeType, string, string]>([
['thisMonth', '2024-06-01', '2024-06-30'],
['previousMonth', '2024-05-01', '2024-05-31'],
['thisQuarter', '2024-04-01', '2024-06-30'],
['previousQuarter', '2024-01-01', '2024-03-31'],
['thisYear', '2024-01-01', '2024-12-31'],
['previousYear', '2023-01-01', '2023-12-31'],
])(
'should return correct range for %s',
(rangeType, expectedStart, expectedEnd) => {
const [start, end] = calculateDateRange(rangeType, fixedDate);
expect(start).toBe(expectedStart);
expect(end).toBe(expectedEnd);
},
);

test('should default to previousMonth if rangeType is invalid', () => {
const [start, end] = calculateDateRange(
'invalidRange' as RangeType,
fixedDate,
);
expect(start).toBe('2024-05-01');
expect(end).toBe('2024-05-31');
});

test('should handle edge case for previousMonth at year boundary', () => {
const yearBoundaryDate = new Date('2024-01-15');
const [start, end] = calculateDateRange(
'previousMonth',
yearBoundaryDate,
);
expect(start).toBe('2023-12-01');
expect(end).toBe('2023-12-31');
});
});
66 changes: 66 additions & 0 deletions frontend/src/component/common/FilterDateItem/calculateDateRange.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import {
endOfMonth,
endOfQuarter,
endOfYear,
format,
startOfMonth,
startOfQuarter,
startOfYear,
subMonths,
subQuarters,
subYears,
} from 'date-fns';

export type RangeType =
| 'thisMonth'
| 'previousMonth'
| 'thisQuarter'
| 'previousQuarter'
| 'thisYear'
| 'previousYear';

export const calculateDateRange = (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

extracted for testability

rangeType: RangeType,
today = new Date(),
): [string, string] => {
let start: Date;
let end: Date;

switch (rangeType) {
case 'thisMonth': {
start = startOfMonth(today);
end = endOfMonth(today);
break;
}
case 'thisQuarter': {
start = startOfQuarter(today);
end = endOfQuarter(today);
break;
}
case 'previousQuarter': {
const previousQuarter = subQuarters(today, 1);
start = startOfQuarter(previousQuarter);
end = endOfQuarter(previousQuarter);
break;
}
case 'thisYear': {
start = startOfYear(today);
end = endOfYear(today);
break;
}
case 'previousYear': {
const lastYear = subYears(today, 1);
start = startOfYear(lastYear);
end = endOfYear(lastYear);
break;
}

default: {
const lastMonth = subMonths(today, 1);
start = startOfMonth(lastMonth);
end = endOfMonth(lastMonth);
}
}

return [format(start, 'yyyy-MM-dd'), format(end, 'yyyy-MM-dd')];
};
4 changes: 4 additions & 0 deletions frontend/src/component/events/EventLog/EventLogFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,13 +57,17 @@ export const useEventLogFilters = (
options: [],
filterKey: 'from',
dateOperators: ['IS'],
fromFilterKey: 'from',
toFilterKey: 'to',
},
{
label: 'Date To',
icon: 'today',
options: [],
filterKey: 'to',
dateOperators: ['IS'],
fromFilterKey: 'from',
toFilterKey: 'to',
},
{
label: 'Created by',
Expand Down
25 changes: 22 additions & 3 deletions frontend/src/component/filter/Filters/Filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ type ITextFilterItem = IBaseFilterItem & {

type IDateFilterItem = IBaseFilterItem & {
dateOperators: [string, ...string[]];
fromFilterKey?: string;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

range presents are optional

toFilterKey?: string;
};

export type IFilterItem = ITextFilterItem | IDateFilterItem;
Expand Down Expand Up @@ -116,6 +118,22 @@ export const Filters: FC<IFilterProps> = ({
}, [JSON.stringify(state), JSON.stringify(availableFilters)]);

const hasAvailableFilters = unselectedFilters.length > 0;

const rangeChangeHandler = (filter: IDateFilterItem) => {
const fromKey = filter.fromFilterKey;
const toKey = filter.toFilterKey;
if (fromKey && toKey) {
return (value: {
from: FilterItemParams;
to: FilterItemParams;
}) => {
onChange({ [fromKey]: value.from });
onChange({ [toKey]: value.to });
};
}
return undefined;
};

return (
<StyledBox className={className}>
{selectedFilters.map((selectedFilter) => {
Expand Down Expand Up @@ -143,9 +161,10 @@ export const Filters: FC<IFilterProps> = ({
label={label}
name={filter.label}
state={state[filter.filterKey]}
onChange={(value) =>
onChange({ [filter.filterKey]: value })
}
onChange={(value) => {
onChange({ [filter.filterKey]: value });
}}
onRangeChange={rangeChangeHandler(filter)}
operators={filter.dateOperators}
onChipClose={() => deselectFilter(filter.label)}
/>
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/component/insights/InsightsFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,17 @@ export const InsightsFilters: FC<IFeatureToggleFiltersProps> = ({
options: [],
filterKey: 'from',
dateOperators: ['IS'],
fromFilterKey: 'from',
toFilterKey: 'to',
},
{
label: 'Date To',
icon: 'today',
options: [],
filterKey: 'to',
dateOperators: ['IS'],
fromFilterKey: 'from',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if the from/to filter keys are present then the date selection component automatically gets presets working

toFilterKey: 'to',
},
...(hasMultipleProjects
? ([
Expand Down
Loading