Last 24 hours chart view

This commit is contained in:
headlessdev 2025-04-23 20:24:24 +02:00
parent a8f0c7932f
commit 42622f69d2
2 changed files with 28 additions and 8 deletions

View File

@ -5,13 +5,19 @@ import { Prisma } from "@prisma/client";
interface GetRequest { interface GetRequest {
page?: number; page?: number;
ITEMS_PER_PAGE?: number; ITEMS_PER_PAGE?: number;
timeRange?: '1h' | '7d' | '30d'; timeRange?: '1h' | '1d' | '7d' | '30d';
serverId?: number; serverId?: number;
} }
const getTimeRange = (timeRange: '1h' | '7d' | '30d' = '1h') => { const getTimeRange = (timeRange: '1h' | '1d' | '7d' | '30d' = '1h') => {
const now = new Date(); const now = new Date();
switch (timeRange) { switch (timeRange) {
case '1d':
return {
start: new Date(now.getTime() - 24 * 60 * 60 * 1000),
end: now,
intervalMinutes: 15 // 15 minute intervals
};
case '7d': case '7d':
return { return {
start: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000), start: new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000),
@ -34,11 +40,14 @@ const getTimeRange = (timeRange: '1h' | '7d' | '30d' = '1h') => {
} }
}; };
const getIntervals = (timeRange: '1h' | '7d' | '30d' = '1h') => { const getIntervals = (timeRange: '1h' | '1d' | '7d' | '30d' = '1h') => {
const { start, end, intervalMinutes } = getTimeRange(timeRange); const { start, end, intervalMinutes } = getTimeRange(timeRange);
let intervalCount: number; let intervalCount: number;
switch (timeRange) { switch (timeRange) {
case '1d':
intervalCount = 96; // 24 hours * 4 (15-minute intervals)
break;
case '7d': case '7d':
intervalCount = 168; // 7 days * 24 hours intervalCount = 168; // 7 days * 24 hours
break; break;

View File

@ -67,7 +67,7 @@ export default function ServerDetail() {
const params = useParams() const params = useParams()
const serverId = params.server_id as string const serverId = params.server_id as string
const [server, setServer] = useState<Server | null>(null) const [server, setServer] = useState<Server | null>(null)
const [timeRange, setTimeRange] = useState<'1h' | '7d' | '30d'>('1h') const [timeRange, setTimeRange] = useState<'1h' | '1d' | '7d' | '30d'>('1h')
const [loading, setLoading] = useState(true) const [loading, setLoading] = useState(true)
// Chart references // Chart references
@ -114,6 +114,12 @@ export default function ServerDetail() {
const d = new Date(date) const d = new Date(date)
if (timeRange === '1h') { if (timeRange === '1h') {
return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
} else if (timeRange === '1d') {
// For 1 day, show hours and minutes
return d.toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit'
})
} else if (timeRange === '7d') { } else if (timeRange === '7d') {
// For 7 days, show day and time // For 7 days, show day and time
return d.toLocaleDateString([], { return d.toLocaleDateString([], {
@ -139,6 +145,8 @@ export default function ServerDetail() {
if (timeRange === '1h') { if (timeRange === '1h') {
return `Last Hour (${startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })})` return `Last Hour (${startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })})`
} else if (timeRange === '1d') {
return `Last 24 Hours (${startDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - ${now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })})`
} else if (timeRange === '7d') { } else if (timeRange === '7d') {
return `Last 7 Days (${startDate.toLocaleDateString([], { month: 'short', day: 'numeric' })} - ${now.toLocaleDateString([], { month: 'short', day: 'numeric' })})` return `Last 7 Days (${startDate.toLocaleDateString([], { month: 'short', day: 'numeric' })} - ${now.toLocaleDateString([], { month: 'short', day: 'numeric' })})`
} else { } else {
@ -516,18 +524,21 @@ export default function ServerDetail() {
<CardDescription> <CardDescription>
{timeRange === '1h' {timeRange === '1h'
? 'Last hour, per minute' ? 'Last hour, per minute'
: timeRange === '7d' : timeRange === '1d'
? 'Last 7 days, hourly intervals' ? 'Last 24 hours, 15-minute intervals'
: 'Last 30 days, 4-hour intervals'} : timeRange === '7d'
? 'Last 7 days, hourly intervals'
: 'Last 30 days, 4-hour intervals'}
</CardDescription> </CardDescription>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Select value={timeRange} onValueChange={(value: '1h' | '7d' | '30d') => setTimeRange(value)}> <Select value={timeRange} onValueChange={(value: '1h' | '1d' | '7d' | '30d') => setTimeRange(value)}>
<SelectTrigger className="w-[180px]"> <SelectTrigger className="w-[180px]">
<SelectValue placeholder="Time range" /> <SelectValue placeholder="Time range" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="1h">Last Hour (per minute)</SelectItem> <SelectItem value="1h">Last Hour (per minute)</SelectItem>
<SelectItem value="1d">Last 24 Hours (15 min)</SelectItem>
<SelectItem value="7d">Last 7 Days (hourly)</SelectItem> <SelectItem value="7d">Last 7 Days (hourly)</SelectItem>
<SelectItem value="30d">Last 30 Days (4h intervals)</SelectItem> <SelectItem value="30d">Last 30 Days (4h intervals)</SelectItem>
</SelectContent> </SelectContent>