m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-24 18:26:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

Updated date range handling.

Browse Source
This commit is contained in:
Mike Cao 2023-05-28 22:28:11 -07:00
parent bfb52eb678
commit e9b0d3f796
4 changed files with 25 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/input/DateFilter.js
View File

@ -65,7 +65,7 @@ export function DateFilter({
].filter(n => n); ].filter(n => n);
const renderValue = value => { const renderValue = value => {
return value === 'custom' ? ( return value.startsWith('range') ? (
<CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} /> <CustomRange startDate={startDate} endDate={endDate} onClick={() => handleChange('custom')} />
) : ( ) : (
options.find(e => e.value === value).label options.find(e => e.value === value).label

3
components/input/WebsiteDateFilter.js
View File

@ -1,4 +1,3 @@
import { getDateRangeValues } from 'lib/date';
import useApi from 'hooks/useApi'; import useApi from 'hooks/useApi';
import useDateRange from 'hooks/useDateRange'; import useDateRange from 'hooks/useDateRange';
import DateFilter from './DateFilter'; import DateFilter from './DateFilter';
@ -13,7 +12,7 @@ export default function WebsiteDateFilter({ websiteId, value }) {
const data = await get(`/websites/${websiteId}`); const data = await get(`/websites/${websiteId}`);
if (data) { if (data) {
setDateRange({ value, ...getDateRangeValues(new Date(data.createdAt), Date.now()) }); setDateRange(`range:${new Date(data.createdAt)}:${Date.now()}`);
} }
} else if (value !== 'all') { } else if (value !== 'all') {
setDateRange(value); setDateRange(value);

16
components/metrics/DatePickerForm.js
View File

@ -2,7 +2,6 @@ import { useState } from 'react';
import { Button, ButtonGroup, Calendar } from 'react-basics'; import { Button, ButtonGroup, Calendar } from 'react-basics';
import { isAfter, isBefore, isSameDay } from 'date-fns'; import { isAfter, isBefore, isSameDay } from 'date-fns';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import { getDateRangeValues } from 'lib/date';
import { getDateLocale } from 'lib/lang'; import { getDateLocale } from 'lib/lang';
import { FILTER_DAY, FILTER_RANGE } from 'lib/constants'; import { FILTER_DAY, FILTER_RANGE } from 'lib/constants';
import useMessages from 'hooks/useMessages'; import useMessages from 'hooks/useMessages';
@ -19,7 +18,7 @@ export function DatePickerForm({
const [selected, setSelected] = useState( const [selected, setSelected] = useState(
isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE, isSameDay(defaultStartDate, defaultEndDate) ? FILTER_DAY : FILTER_RANGE,
); );
const [date, setDate] = useState(defaultStartDate); const [singleDate, setSingleDate] = useState(defaultStartDate);
const [startDate, setStartDate] = useState(defaultStartDate); const [startDate, setStartDate] = useState(defaultStartDate);
const [endDate, setEndDate] = useState(defaultEndDate); const [endDate, setEndDate] = useState(defaultEndDate);
const { locale } = useLocale(); const { locale } = useLocale();
@ -27,14 +26,14 @@ export function DatePickerForm({
const disabled = const disabled =
selected === FILTER_DAY selected === FILTER_DAY
? isAfter(minDate, date) && isBefore(maxDate, date) ? isAfter(minDate, singleDate) && isBefore(maxDate, singleDate)
: isAfter(startDate, endDate); : isAfter(startDate, endDate);
const handleSave = () => { const handleSave = () => {
if (selected === FILTER_DAY) { if (selected === FILTER_DAY) {
onChange({ ...getDateRangeValues(date, date), value: 'custom' }); onChange(`range:${singleDate.getTime()}:${singleDate.getTime()}`);
} else { } else {
onChange({ ...getDateRangeValues(startDate, endDate), value: 'custom' }); onChange(`range:${startDate.getTime()}:${endDate.getTime()}`);
} }
}; };
@ -48,7 +47,12 @@ export function DatePickerForm({
</div> </div>
<div className={styles.calendars}> <div className={styles.calendars}>
{selected === FILTER_DAY && ( {selected === FILTER_DAY && (
<Calendar date={date} minDate={minDate} maxDate={maxDate} onChange={setDate} /> <Calendar
date={singleDate}
minDate={minDate}
maxDate={maxDate}
onChange={setSingleDate}
/>
)} )}
{selected === FILTER_RANGE && ( {selected === FILTER_RANGE && (
<> <>

19
lib/date.js
View File

@ -40,20 +40,27 @@ export function getLocalTime(t) {
export function parseDateRange(value, locale = 'en-US') { export function parseDateRange(value, locale = 'en-US') {
if (typeof value === 'object') { if (typeof value === 'object') {
const { startDate, endDate } = value; return value;
}
if (value?.startsWith?.('range')) {
const [, startAt, endAt] = value.split(':');
const startDate = new Date(+startAt);
const endDate = new Date(+endAt);
return { return {
...value, ...getDateRangeValues(startDate, endDate),
startDate: typeof startDate === 'string' ? parseISO(startDate) : startDate, value,
endDate: typeof endDate === 'string' ? parseISO(endDate) : endDate,
}; };
} }
const now = new Date(); const now = new Date();
const dateLocale = getDateLocale(locale); const dateLocale = getDateLocale(locale);
const match = value.match(/^(?<num>[0-9-]+)(?<unit>hour|day|week|month|year)$/); const match = value?.match?.(/^(?<num>[0-9-]+)(?<unit>hour|day|week|month|year)$/);
if (!match) return {}; if (!match) return null;
const { num, unit } = match.groups; const { num, unit } = match.groups;