blyzer/graphs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix date range picker presets
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m26s
Details

Browse Source
This commit is contained in:
Cauê Faleiros
2026-06-15 09:54:18 -03:00
parent fdec698954
commit ac692b8e10
1 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/components/DateRangePicker.tsx
View File

@@ -11,15 +11,15 @@ interface DateRangePickerProps {
}
const PRESETS = [
{ label: 'Hoje', getRange: () => { const d = new Date(); d.setHours(0,0,0,0); return { start: d, end: new Date() }; } },
{ label: 'Ontem', getRange: () => { const d = new Date(); d.setDate(d.getDate() - 1); d.setHours(0,0,0,0); const end = new Date(d); end.setHours(23,59,59,999); return { start: d, end }; } },
{ label: 'Últimos 7 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 7); start.setHours(0,0,0,0); return { start, end }; } },
{ label: 'Últimos 30 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 30); start.setHours(0,0,0,0); return { start, end }; } },
{ label: 'Este Mês', getRange: () => { const end = new Date(); const start = new Date(end.getFullYear(), end.getMonth(), 1); return { start, end }; } },
{ label: 'Hoje', getRange: () => rangeForDay(new Date()) },
{ label: 'Ontem', getRange: () => { const d = new Date(); d.setDate(d.getDate() - 1); return rangeForDay(d); } },
{ label: 'Últimos 7 dias', getRange: () => rangeForLastDays(7) },
{ label: 'Últimos 30 dias', getRange: () => rangeForLastDays(30) },
{ label: 'Este Mês', getRange: () => { const end = endOfDay(new Date()); const start = startOfDay(new Date(end.getFullYear(), end.getMonth(), 1)); return { start, end }; } },
{ label: 'Mês Passado', getRange: () => { const d = new Date(); const start = new Date(d.getFullYear(), d.getMonth() - 1, 1); const end = new Date(d.getFullYear(), d.getMonth(), 0, 23, 59, 59, 999); return { start, end }; } },
{ label: 'Últimos 90 dias', getRange: () => { const end = new Date(); const start = new Date(); start.setDate(start.getDate() - 90); start.setHours(0,0,0,0); return { start, end }; } },
{ label: 'Este Ano', getRange: () => { const end = new Date(); const start = new Date(end.getFullYear(), 0, 1); return { start, end }; } },
{ label: 'Todo o Período', getRange: () => { const end = new Date(); const start = new Date(2000, 0, 1); return { start, end }; } },
{ label: 'Últimos 90 dias', getRange: () => rangeForLastDays(90) },
{ label: 'Este Ano', getRange: () => { const end = endOfDay(new Date()); const start = startOfDay(new Date(end.getFullYear(), 0, 1)); return { start, end }; } },
{ label: 'Todo o Período', getRange: () => { const end = endOfDay(new Date()); const start = startOfDay(new Date(2000, 0, 1)); return { start, end }; } },
];
const REFRESH_OPTIONS = [
@@ -31,13 +31,37 @@ const REFRESH_OPTIONS = [
{ label: '5m', value: 300000 },
];
const startOfDay = (date: Date) => {
const nextDate = new Date(date);
nextDate.setHours(0, 0, 0, 0);
return nextDate;
};
const endOfDay = (date: Date) => {
const nextDate = new Date(date);
nextDate.setHours(23, 59, 59, 999);
return nextDate;
};
const rangeForDay = (date: Date) => ({
start: startOfDay(date),
end: endOfDay(date),
});
const rangeForLastDays = (days: number) => {
const end = endOfDay(new Date());
const start = startOfDay(end);
start.setDate(start.getDate() - Math.max(days - 1, 0));
return { start, end };
};
const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange, refreshInterval, setRefreshInterval, onManualRefresh }) => {
const [isPresetOpen, setIsPresetOpen] = useState(false);
const startRef = useRef<HTMLInputElement>(null);
const endRef = useRef<HTMLInputElement>(null);
const formatShortDate = (date: Date) => {
return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: '2-digit' });
const formatDisplayDate = (date: Date) => {
return date.toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit', year: 'numeric' });
};
const formatDateForInput = (date: Date) => {
@@ -56,15 +80,18 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
const handleStartChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newStart = parseLocalDate(e.target.value);
if (newStart && !isNaN(newStart.getTime())) {
onChange({ ...dateRange, start: newStart });
const start = startOfDay(newStart);
const end = dateRange.end < start ? endOfDay(start) : dateRange.end;
onChange({ start, end });
}
};
const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newEnd = parseLocalDate(e.target.value);
if (newEnd && !isNaN(newEnd.getTime())) {
newEnd.setHours(23, 59, 59, 999);
onChange({ ...dateRange, end: newEnd });
const end = endOfDay(newEnd);
const start = dateRange.start > end ? startOfDay(end) : dateRange.start;
onChange({ start, end });
}
};
@@ -91,7 +118,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
className="flex items-center gap-2 bg-dark-card border border-dark-border px-4 py-2.5 rounded-xl shadow-sm hover:border-brand-primary transition-colors text-sm font-medium text-dark-text cursor-pointer"
>
<Calendar size={16} className="text-dark-muted shrink-0" />
<span>{formatShortDate(dateRange.start)} - {formatShortDate(dateRange.end)}</span>
<span>{formatDisplayDate(dateRange.start)} - {formatDisplayDate(dateRange.end)}</span>
<ChevronDown size={14} className="text-dark-muted ml-1" />
</button>
@@ -108,7 +135,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
onClick={() => openPicker(startRef)}
>
<span className="w-full text-center">{formatShortDate(dateRange.start)}</span>
<span className="w-full text-center">{formatDisplayDate(dateRange.start)}</span>
<input
ref={startRef}
type="date"
@@ -124,7 +151,7 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
className="relative bg-dark-input border border-dark-border text-dark-text text-xs rounded-lg px-2 py-1 focus-within:border-brand-primary w-full cursor-pointer overflow-hidden flex items-center h-6"
onClick={() => openPicker(endRef)}
>
<span className="w-full text-center">{formatShortDate(dateRange.end)}</span>
<span className="w-full text-center">{formatDisplayDate(dateRange.end)}</span>
<input
ref={endRef}
type="date"