ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: add multi-day interval selection for dashboard data display in PublicDashboardPage and SiteDashboardPage

Browse Source
This commit is contained in:
Usman Baig
2026-01-19 18:37:59 +01:00
parent 43dd977c4c
commit 3629f11661
2 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/share/[id]/page.tsx
View File

@@ -42,7 +42,8 @@ export default function PublicDashboardPage() {
const [dateRange, setDateRange] = useState(getDateRange(30))
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
const [todayInterval, setTodayInterval] = useState<'minute' | 'hour'>('hour')
const [multiDayInterval, setMultiDayInterval] = useState<'hour' | 'day'>('day')
// Auto-refresh interval (for realtime)
useEffect(() => {
const interval = setInterval(() => {
@@ -57,7 +58,7 @@ export default function PublicDashboardPage() {
useEffect(() => {
loadDashboard()
}, [siteId, dateRange, todayInterval])
}, [siteId, dateRange, todayInterval, multiDayInterval])
const loadDashboard = async (silent = false) => {
try {
@@ -68,7 +69,7 @@ export default function PublicDashboardPage() {
dateRange.start,
dateRange.end,
10,
dateRange.start === dateRange.end ? todayInterval : 'day',
dateRange.start === dateRange.end ? todayInterval : multiDayInterval,
password
)
@@ -236,6 +237,17 @@ export default function PublicDashboardPage() {
className="min-w-[100px]"
/>
)}
{dateRange.start !== dateRange.end && (
<Select
value={multiDayInterval}
onChange={(value) => setMultiDayInterval(value as 'hour' | 'day')}
options={[
{ value: 'hour', label: '1 hour' },
{ value: 'day', label: '1 day' },
]}
className="min-w-[100px]"
/>
)}
{/* Powered by Ciphera Badge */}
<a
href="https://ciphera.net"
@@ -267,7 +279,7 @@ export default function PublicDashboardPage() {
data={safeDailyStats}
prevData={[]}
stats={safeStats}
interval={dateRange.start === dateRange.end ? todayInterval : 'day'}
interval={dateRange.start === dateRange.end ? todayInterval : multiDayInterval}
/>
</div>

18
app/sites/[id]/page.tsx
View File

@@ -44,6 +44,7 @@ export default function SiteDashboardPage() {
const [dateRange, setDateRange] = useState(getDateRange(30))
const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
const [todayInterval, setTodayInterval] = useState<'minute' | 'hour'>('hour')
const [multiDayInterval, setMultiDayInterval] = useState<'hour' | 'day'>('day')
useEffect(() => {
loadData()
@@ -51,7 +52,7 @@ export default function SiteDashboardPage() {
loadRealtime()
}, 30000) // Update every 30 seconds
return () => clearInterval(interval)
}, [siteId, dateRange, todayInterval])
}, [siteId, dateRange, todayInterval, multiDayInterval])
const getPreviousDateRange = (start: string, end: string) => {
const startDate = new Date(start)
@@ -80,7 +81,7 @@ export default function SiteDashboardPage() {
const loadData = async () => {
try {
setLoading(true)
const interval = dateRange.start === dateRange.end ? todayInterval : 'day'
const interval = dateRange.start === dateRange.end ? todayInterval : multiDayInterval
const [data, prevStatsData, prevDailyStatsData] = await Promise.all([
getDashboard(siteId, dateRange.start, dateRange.end, 10, interval),
@@ -209,6 +210,17 @@ export default function SiteDashboardPage() {
className="min-w-[100px]"
/>
)}
{dateRange.start !== dateRange.end && (
<Select
value={multiDayInterval}
onChange={(value) => setMultiDayInterval(value as 'hour' | 'day')}
options={[
{ value: 'hour', label: '1 hour' },
{ value: 'day', label: '1 day' },
]}
className="min-w-[100px]"
/>
)}
<button
onClick={() => router.push(`/sites/${siteId}/settings`)}
className="btn-secondary text-sm"
@@ -226,7 +238,7 @@ export default function SiteDashboardPage() {
prevData={prevDailyStats}
stats={stats}
prevStats={prevStats}
interval={dateRange.start === dateRange.end ? todayInterval : 'day'}
interval={dateRange.start === dateRange.end ? todayInterval : multiDayInterval}
/>
</div>