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

feat: add technology stats (browser, os, device) to analytics dashboard

Browse Source
This commit is contained in:
Usman Baig
2026-01-16 22:09:10 +01:00
parent 557407fca6
commit 1e2fa71e5c
3 changed files with 145 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { getSite, type Site } from '@/lib/api/sites'
import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities } from '@/lib/api/stats'
import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getBrowsers, getOS, getDevices } from '@/lib/api/stats'
import { formatNumber, getDateRange } from '@/lib/utils/format'
import { toast } from 'sonner'
import LoadingOverlay from '@/components/LoadingOverlay'
@@ -12,6 +12,7 @@ import RealtimeVisitors from '@/components/dashboard/RealtimeVisitors'
import TopPages from '@/components/dashboard/TopPages'
import TopReferrers from '@/components/dashboard/TopReferrers'
import Countries from '@/components/dashboard/Countries'
import TechSpecs from '@/components/dashboard/TechSpecs'
import Chart from '@/components/dashboard/Chart'
export default function SiteDashboardPage() {
@@ -28,6 +29,9 @@ export default function SiteDashboardPage() {
const [topReferrers, setTopReferrers] = useState<any[]>([])
const [countries, setCountries] = useState<any[]>([])
const [cities, setCities] = useState<any[]>([])
const [browsers, setBrowsers] = useState<any[]>([])
const [os, setOS] = useState<any[]>([])
const [devices, setDevices] = useState<any[]>([])
const [dateRange, setDateRange] = useState(getDateRange(30))
useEffect(() => {
@@ -41,7 +45,7 @@ export default function SiteDashboardPage() {
const loadData = async () => {
try {
setLoading(true)
const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData, citiesData] = await Promise.all([
const [siteData, statsData, realtimeData, dailyData, pagesData, referrersData, countriesData, citiesData, browsersData, osData, devicesData] = await Promise.all([
getSite(siteId),
getStats(siteId, dateRange.start, dateRange.end),
getRealtime(siteId),
@@ -50,6 +54,9 @@ export default function SiteDashboardPage() {
getTopReferrers(siteId, dateRange.start, dateRange.end, 10),
getCountries(siteId, dateRange.start, dateRange.end, 10),
getCities(siteId, dateRange.start, dateRange.end, 10),
getBrowsers(siteId, dateRange.start, dateRange.end, 10),
getOS(siteId, dateRange.start, dateRange.end, 10),
getDevices(siteId, dateRange.start, dateRange.end, 10),
])
setSite(siteData)
setStats(statsData || { pageviews: 0, visitors: 0 })
@@ -59,6 +66,9 @@ export default function SiteDashboardPage() {
setTopReferrers(Array.isArray(referrersData) ? referrersData : [])
setCountries(Array.isArray(countriesData) ? countriesData : [])
setCities(Array.isArray(citiesData) ? citiesData : [])
setBrowsers(Array.isArray(browsersData) ? browsersData : [])
setOS(Array.isArray(osData) ? osData : [])
setDevices(Array.isArray(devicesData) ? devicesData : [])
} catch (error: any) {
toast.error('Failed to load data: ' + (error.message || 'Unknown error'))
} finally {
@@ -138,6 +148,10 @@ export default function SiteDashboardPage() {
<TopReferrers referrers={topReferrers} />
<Countries countries={countries} cities={cities} />
</div>
<div className="grid gap-6 lg:grid-cols-2 mb-8">
<TechSpecs browsers={browsers} os={os} devices={devices} />
</div>
</div>
)
}

90
components/dashboard/TechSpecs.tsx Normal file
View File

@@ -0,0 +1,90 @@
'use client'
import { useState } from 'react'
import { formatNumber } from '@/lib/utils/format'
interface TechSpecsProps {
browsers: Array<{ browser: string; pageviews: number }>
os: Array<{ os: string; pageviews: number }>
devices: Array<{ device: string; pageviews: number }>
}
type Tab = 'browsers' | 'os' | 'devices'
export default function TechSpecs({ browsers, os, devices }: TechSpecsProps) {
const [activeTab, setActiveTab] = useState<Tab>('browsers')
const renderContent = () => {
let data: Array<{ name: string; pageviews: number }> = []
if (activeTab === 'browsers') {
data = browsers.map(b => ({ name: b.browser, pageviews: b.pageviews }))
} else if (activeTab === 'os') {
data = os.map(o => ({ name: o.os, pageviews: o.pageviews }))
} else if (activeTab === 'devices') {
data = devices.map(d => ({ name: d.device, pageviews: d.pageviews }))
}
if (!data || data.length === 0) {
return <p className="text-neutral-600 dark:text-neutral-400">No data available</p>
}
return (
<div className="space-y-3">
{data.map((item, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1 truncate text-neutral-900 dark:text-white flex items-center gap-3">
<span className="truncate">{item.name === 'Unknown' ? 'Unknown' : item.name}</span>
</div>
<div className="text-sm font-semibold text-neutral-600 dark:text-neutral-400 ml-4">
{formatNumber(item.pageviews)}
</div>
</div>
))}
</div>
)
}
return (
<div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl p-6 h-full">
<div className="flex items-center justify-between mb-6">
<h3 className="text-lg font-semibold text-neutral-900 dark:text-white">
Technology
</h3>
<div className="flex p-1 bg-neutral-100 dark:bg-neutral-800 rounded-lg">
<button
onClick={() => setActiveTab('browsers')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
activeTab === 'browsers'
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
}`}
>
Browsers
</button>
<button
onClick={() => setActiveTab('os')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
activeTab === 'os'
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
}`}
>
OS
</button>
<button
onClick={() => setActiveTab('devices')}
className={`px-3 py-1 text-xs font-medium rounded-md transition-colors ${
activeTab === 'devices'
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
: 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white'
}`}
>
Devices
</button>
</div>
</div>
{renderContent()}
</div>
)
}

39
lib/api/stats.ts
View File

@@ -32,6 +32,21 @@ export interface RegionStat {
pageviews: number
}
export interface BrowserStat {
browser: string
pageviews: number
}
export interface OSStat {
os: string
pageviews: number
}
export interface DeviceStat {
device: string
pageviews: number
}
export interface DailyStat {
date: string
pageviews: number
@@ -94,6 +109,30 @@ export async function getRegions(siteId: string, startDate?: string, endDate?: s
return apiRequest<{ regions: RegionStat[] }>(`/sites/${siteId}/regions?${params.toString()}`).then(r => r?.regions || [])
}
export async function getBrowsers(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<BrowserStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
return apiRequest<{ browsers: BrowserStat[] }>(`/sites/${siteId}/browsers?${params.toString()}`).then(r => r?.browsers || [])
}
export async function getOS(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<OSStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
return apiRequest<{ os: OSStat[] }>(`/sites/${siteId}/os?${params.toString()}`).then(r => r?.os || [])
}
export async function getDevices(siteId: string, startDate?: string, endDate?: string, limit = 10): Promise<DeviceStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)
if (endDate) params.append('end_date', endDate)
params.append('limit', limit.toString())
return apiRequest<{ devices: DeviceStat[] }>(`/sites/${siteId}/devices?${params.toString()}`).then(r => r?.devices || [])
}
export async function getDailyStats(siteId: string, startDate?: string, endDate?: string): Promise<DailyStat[]> {
const params = new URLSearchParams()
if (startDate) params.append('start_date', startDate)