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

feat: hide auto-refresh controls outside of dashboard and update refresh UI design

Browse Source
This commit is contained in:
Cauê Faleiros
2026-05-07 15:07:44 -03:00
parent b986eafb98
commit b048c963dd
3 changed files with 29 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/DateRangePicker.tsx
View File

@@ -5,9 +5,9 @@ import type { DateRange } from '../types';
interface DateRangePickerProps {
dateRange: DateRange;
onChange: (range: DateRange) => void;
refreshInterval: number;
setRefreshInterval: (interval: number) => void;
onManualRefresh: () => void;
refreshInterval?: number;
setRefreshInterval?: (interval: number) => void;
onManualRefresh?: () => void;
}
const PRESETS = [
@@ -73,27 +73,30 @@ const DateRangePicker: React.FC<DateRangePickerProps> = ({ dateRange, onChange,
</div>
{/* Auto Refresh Dropdown */}
<div className="flex items-center bg-dark-card border border-dark-border rounded-xl shadow-sm overflow-hidden">
<button
onClick={onManualRefresh}
className="px-3 py-2.5 text-dark-muted hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border"
title="Atualizar Agora"
>
<RefreshCw size={16} />
</button>
<select
value={refreshInterval}
onChange={(e) => setRefreshInterval(Number(e.target.value))}
className="appearance-none bg-transparent text-sm font-medium text-dark-text pl-3 pr-8 py-2.5 focus:outline-none cursor-pointer relative"
style={{ backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.5rem center', backgroundSize: '1em' }}
>
{REFRESH_OPTIONS.map(opt => (
<option key={opt.label} value={opt.value} className="bg-dark-card">
Auto: {opt.label}
</option>
))}
</select>
</div>
{setRefreshInterval && onManualRefresh && (
<div className="flex items-center bg-dark-card border border-dark-border rounded-xl shadow-sm overflow-hidden">
<button
onClick={onManualRefresh}
className="flex items-center gap-1.5 px-4 py-2.5 text-sm font-medium text-dark-text hover:text-brand-primary hover:bg-dark-input transition-colors border-r border-dark-border"
title="Atualizar Agora"
>
<RefreshCw size={16} className="text-brand-primary" />
<span>Atualizar</span>
</button>
<select
value={refreshInterval}
onChange={(e) => setRefreshInterval(Number(e.target.value))}
className="appearance-none bg-transparent text-sm font-bold text-dark-muted pl-4 pr-10 py-2.5 focus:outline-none cursor-pointer relative"
style={{ backgroundImage: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e")`, backgroundRepeat: 'no-repeat', backgroundPosition: 'right 0.75rem center', backgroundSize: '1em' }}
>
{REFRESH_OPTIONS.map(opt => (
<option key={opt.label} value={opt.value} className="bg-dark-card font-medium text-dark-text">
{opt.label}
</option>
))}
</select>
</div>
)}
</div>
);
};