419 lines
14 KiB
TypeScript
419 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, useRef } from 'react'
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────
|
|
|
|
function rand(min: number, max: number) {
|
|
return Math.floor(Math.random() * (max - min + 1)) + min
|
|
}
|
|
|
|
function fmtDuration(seconds: number) {
|
|
const m = Math.floor(seconds / 60)
|
|
const s = seconds % 60
|
|
return `${m}m ${s}s`
|
|
}
|
|
|
|
// Generate realistic hourly visitor counts (low at night, peak afternoon)
|
|
function generateHourlyPattern(): { hour: string; visitors: number; pageviews: number }[] {
|
|
const base = [
|
|
12, 8, 5, 4, 3, 4, 8, 18, 35, 52, 64, 72,
|
|
78, 85, 88, 82, 74, 60, 48, 38, 30, 25, 20, 16,
|
|
]
|
|
return base.map((v, i) => ({
|
|
hour: `${String(i).padStart(2, '0')}:00`,
|
|
visitors: v + rand(-4, 4),
|
|
pageviews: Math.round(v * 2.8) + rand(-6, 6),
|
|
}))
|
|
}
|
|
|
|
// ── Static panel data ────────────────────────────────────────
|
|
|
|
const topPages = [
|
|
{ label: '/blog/privacy', pct: 85 },
|
|
{ label: '/pricing', pct: 65 },
|
|
{ label: '/docs', pct: 45 },
|
|
{ label: '/about', pct: 30 },
|
|
{ label: '/integrations', pct: 20 },
|
|
]
|
|
|
|
const topReferrers = [
|
|
{ label: 'Google', pct: 40 },
|
|
{ label: 'Direct', pct: 25 },
|
|
{ label: 'Twitter', pct: 15 },
|
|
{ label: 'GitHub', pct: 12 },
|
|
{ label: 'Reddit', pct: 8 },
|
|
]
|
|
|
|
const locations = [
|
|
{ flag: '\u{1F1E8}\u{1F1ED}', name: 'Switzerland', pct: 30 },
|
|
{ flag: '\u{1F1E9}\u{1F1EA}', name: 'Germany', pct: 22 },
|
|
{ flag: '\u{1F1FA}\u{1F1F8}', name: 'USA', pct: 18 },
|
|
{ flag: '\u{1F1EB}\u{1F1F7}', name: 'France', pct: 15 },
|
|
{ flag: '\u{1F1EC}\u{1F1E7}', name: 'UK', pct: 15 },
|
|
]
|
|
|
|
const technology = [
|
|
{ label: 'Chrome', pct: 62 },
|
|
{ label: 'Firefox', pct: 18 },
|
|
{ label: 'Safari', pct: 15 },
|
|
{ label: 'Edge', pct: 5 },
|
|
]
|
|
|
|
const campaigns = [
|
|
{ label: 'newsletter', pct: 45 },
|
|
{ label: 'twitter', pct: 30 },
|
|
{ label: 'producthunt', pct: 25 },
|
|
]
|
|
|
|
// Generate heatmap data: 7 rows (Mon-Sun) x 24 cols (hours)
|
|
function generateHeatmap(): number[][] {
|
|
return Array.from({ length: 7 }, (_, day) =>
|
|
Array.from({ length: 24 }, (_, hour) => {
|
|
const isWeekend = day >= 5
|
|
const isNight = hour >= 1 && hour <= 5
|
|
const isPeak = hour >= 9 && hour <= 17
|
|
const isMorning = hour >= 7 && hour <= 9
|
|
const isEvening = hour >= 17 && hour <= 21
|
|
|
|
if (isNight) return rand(0, 1)
|
|
if (isWeekend) {
|
|
if (isPeak) return rand(2, 4)
|
|
return rand(1, 3)
|
|
}
|
|
if (isPeak) return rand(5, 8)
|
|
if (isMorning || isEvening) return rand(3, 5)
|
|
return rand(1, 3)
|
|
})
|
|
)
|
|
}
|
|
|
|
function heatmapOpacity(value: number): string {
|
|
if (value <= 1) return 'bg-brand-orange/[0.05]'
|
|
if (value <= 3) return 'bg-brand-orange/[0.2]'
|
|
if (value <= 5) return 'bg-brand-orange/[0.5]'
|
|
return 'bg-brand-orange/[0.8]'
|
|
}
|
|
|
|
// ── SVG chart helpers ────────────────────────────────────────
|
|
|
|
function buildSmoothPath(
|
|
points: { x: number; y: number }[],
|
|
close: boolean
|
|
): string {
|
|
if (points.length < 2) return ''
|
|
const d: string[] = [`M ${points[0].x},${points[0].y}`]
|
|
|
|
for (let i = 0; i < points.length - 1; i++) {
|
|
const p0 = points[Math.max(i - 1, 0)]
|
|
const p1 = points[i]
|
|
const p2 = points[i + 1]
|
|
const p3 = points[Math.min(i + 2, points.length - 1)]
|
|
|
|
const cp1x = p1.x + (p2.x - p0.x) / 6
|
|
const cp1y = p1.y + (p2.y - p0.y) / 6
|
|
const cp2x = p2.x - (p3.x - p1.x) / 6
|
|
const cp2y = p2.y - (p3.y - p1.y) / 6
|
|
|
|
d.push(`C ${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`)
|
|
}
|
|
|
|
if (close) {
|
|
const last = points[points.length - 1]
|
|
const first = points[0]
|
|
d.push(`L ${last.x},200 L ${first.x},200 Z`)
|
|
}
|
|
|
|
return d.join(' ')
|
|
}
|
|
|
|
// ── Component ────────────────────────────────────────────────
|
|
|
|
export default function LiveDemo() {
|
|
const [visitors, setVisitors] = useState(2847)
|
|
const [pageviews, setPageviews] = useState(8432)
|
|
const [bounceRate, setBounceRate] = useState(42)
|
|
const [avgDuration, setAvgDuration] = useState(154)
|
|
const [realtimeVisitors, setRealtimeVisitors] = useState(12)
|
|
const [chartData, setChartData] = useState(generateHourlyPattern)
|
|
const heatmap = useRef(generateHeatmap())
|
|
|
|
useEffect(() => {
|
|
const id = setInterval(() => {
|
|
setVisitors((v) => v + rand(1, 3))
|
|
setPageviews((v) => v + rand(2, 5))
|
|
setBounceRate(() => 38 + rand(0, 7))
|
|
setAvgDuration(() => 130 + rand(0, 90))
|
|
setRealtimeVisitors(() => 8 + rand(0, 7))
|
|
setChartData((prev) => {
|
|
const next = [...prev]
|
|
const lastHourNum =
|
|
parseInt(next[next.length - 1].hour.split(':')[0], 10)
|
|
const newHour = (lastHourNum + 1) % 24
|
|
next.push({
|
|
hour: `${String(newHour).padStart(2, '0')}:00`,
|
|
visitors: rand(20, 90),
|
|
pageviews: rand(50, 250),
|
|
})
|
|
if (next.length > 24) next.shift()
|
|
return next
|
|
})
|
|
}, 2500)
|
|
return () => clearInterval(id)
|
|
}, [])
|
|
|
|
// ── Chart SVG ──────────────────────────────────────────────
|
|
|
|
const chartW = 800
|
|
const chartH = 200
|
|
const maxVisitors = Math.max(...chartData.map((d) => d.visitors), 1)
|
|
|
|
const chartPoints = chartData.map((d, i) => ({
|
|
x: (i / (chartData.length - 1)) * chartW,
|
|
y: chartH - (d.visitors / maxVisitors) * (chartH - 20) - 10,
|
|
}))
|
|
|
|
const linePath = buildSmoothPath(chartPoints, false)
|
|
const areaPath = buildSmoothPath(chartPoints, true)
|
|
|
|
// ── Stats config ───────────────────────────────────────────
|
|
|
|
const stats = [
|
|
{
|
|
label: 'Visitors',
|
|
value: visitors.toLocaleString(),
|
|
change: '+12%',
|
|
positive: true,
|
|
},
|
|
{
|
|
label: 'Pageviews',
|
|
value: pageviews.toLocaleString(),
|
|
change: '+8%',
|
|
positive: true,
|
|
},
|
|
{
|
|
label: 'Bounce Rate',
|
|
value: `${bounceRate}%`,
|
|
change: '-3%',
|
|
positive: false,
|
|
},
|
|
{
|
|
label: 'Avg. Duration',
|
|
value: fmtDuration(avgDuration),
|
|
change: '+15%',
|
|
positive: true,
|
|
},
|
|
]
|
|
|
|
const xLabels = chartData
|
|
.map((d, i) => ({ label: d.hour, i }))
|
|
.filter((d) => parseInt(d.label.split(':')[0], 10) % 4 === 0)
|
|
|
|
const dayLabels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
|
|
// ── Render ─────────────────────────────────────────────────
|
|
|
|
return (
|
|
<div className="w-full max-h-[900px] overflow-hidden relative rounded-xl shadow-2xl">
|
|
{/* Browser chrome */}
|
|
<div className="bg-neutral-800 border-b border-neutral-800 px-4 py-3 flex items-center gap-3">
|
|
<div className="flex items-center gap-1.5">
|
|
<span className="w-3 h-3 rounded-full bg-red-500/20" />
|
|
<span className="w-3 h-3 rounded-full bg-yellow-500/20" />
|
|
<span className="w-3 h-3 rounded-full bg-green-500/20" />
|
|
</div>
|
|
<div className="flex-1 bg-neutral-900/80 rounded-md px-3 py-1 text-xs text-neutral-500 text-center">
|
|
pulse.ciphera.net/sites/demo
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dashboard body */}
|
|
<div className="bg-neutral-950 px-6 py-5 space-y-5">
|
|
{/* Header bar */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-white font-bold text-lg">Ciphera</span>
|
|
<span className="text-neutral-500 text-sm">ciphera.net</span>
|
|
<span className="flex items-center gap-1.5 text-xs text-neutral-400 ml-2">
|
|
<span className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
|
|
{realtimeVisitors} current visitors
|
|
</span>
|
|
</div>
|
|
<span className="text-xs text-neutral-400 bg-neutral-800 px-3 py-1 rounded-full border border-white/[0.08]">
|
|
Today
|
|
</span>
|
|
</div>
|
|
|
|
{/* Stats bar */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
{stats.map((s) => (
|
|
<div
|
|
key={s.label}
|
|
className="bg-neutral-900/80 border border-white/[0.08] rounded-xl p-4"
|
|
>
|
|
<div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
|
|
{s.label}
|
|
</div>
|
|
<div className="text-2xl font-bold text-white">{s.value}</div>
|
|
<div
|
|
className={`text-xs mt-1 ${
|
|
s.positive ? 'text-green-400' : 'text-orange-400'
|
|
}`}
|
|
>
|
|
{s.positive ? '\u2191' : '\u2193'}
|
|
{s.change.replace(/[+-]/, '')}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Chart */}
|
|
<div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
|
|
<svg
|
|
viewBox={`0 0 ${chartW} ${chartH + 30}`}
|
|
className="w-full"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<defs>
|
|
<linearGradient
|
|
id="chartGrad"
|
|
x1="0"
|
|
y1="0"
|
|
x2="0"
|
|
y2="1"
|
|
>
|
|
<stop offset="0%" stopColor="#FD5E0F" stopOpacity="0.4" />
|
|
<stop offset="100%" stopColor="#FD5E0F" stopOpacity="0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d={areaPath} fill="url(#chartGrad)" />
|
|
<path
|
|
d={linePath}
|
|
fill="none"
|
|
stroke="#FD5E0F"
|
|
strokeWidth="2"
|
|
/>
|
|
{/* X-axis labels */}
|
|
{xLabels.map(({ label, i }) => (
|
|
<text
|
|
key={label + i}
|
|
x={(i / (chartData.length - 1)) * chartW}
|
|
y={chartH + 22}
|
|
fill="#525252"
|
|
fontSize="11"
|
|
textAnchor="middle"
|
|
>
|
|
{label}
|
|
</text>
|
|
))}
|
|
</svg>
|
|
</div>
|
|
|
|
{/* Two-column panels */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-5">
|
|
{/* Top Pages */}
|
|
<PanelCard title="Top Pages" items={topPages} />
|
|
|
|
{/* Top Referrers */}
|
|
<PanelCard title="Top Referrers" items={topReferrers} />
|
|
|
|
{/* Locations */}
|
|
<div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
|
|
<h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
|
|
Locations
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{locations.map((loc) => (
|
|
<div key={loc.name}>
|
|
<div className="flex items-center gap-3 mb-1">
|
|
<span className="text-lg">{loc.flag}</span>
|
|
<span className="text-neutral-300 text-sm flex-1">
|
|
{loc.name}
|
|
</span>
|
|
<span className="text-neutral-500 text-sm">
|
|
{loc.pct}%
|
|
</span>
|
|
</div>
|
|
<div className="h-2 bg-neutral-800 rounded-full overflow-hidden ml-8">
|
|
<div
|
|
className="h-full bg-brand-orange rounded-full"
|
|
style={{ width: `${loc.pct}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Technology */}
|
|
<PanelCard title="Technology" items={technology} />
|
|
|
|
{/* Campaigns */}
|
|
<PanelCard title="Campaigns" items={campaigns} />
|
|
|
|
{/* Peak Hours */}
|
|
<div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
|
|
<h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
|
|
Peak Hours
|
|
</h3>
|
|
<div className="space-y-1">
|
|
{heatmap.current.map((row, dayIdx) => (
|
|
<div key={dayIdx} className="flex items-center gap-1">
|
|
<span className="text-[10px] text-neutral-500 w-6 shrink-0">
|
|
{dayLabels[dayIdx]}
|
|
</span>
|
|
<div className="flex gap-[2px] flex-1">
|
|
{row.map((val, hourIdx) => (
|
|
<div
|
|
key={hourIdx}
|
|
className={`w-3 h-3 rounded-sm ${heatmapOpacity(val)}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom gradient fade */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-neutral-950 to-transparent pointer-events-none" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// ── Panel Card sub-component ─────────────────────────────────
|
|
|
|
function PanelCard({
|
|
title,
|
|
items,
|
|
}: {
|
|
title: string
|
|
items: { label: string; pct: number }[]
|
|
}) {
|
|
return (
|
|
<div className="bg-neutral-900/80 border border-white/[0.08] rounded-2xl p-6">
|
|
<h3 className="text-sm font-semibold text-neutral-400 uppercase tracking-wider mb-4">
|
|
{title}
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{items.map((item) => (
|
|
<div key={item.label}>
|
|
<div className="flex justify-between text-sm mb-1">
|
|
<span className="text-neutral-300">{item.label}</span>
|
|
<span className="text-neutral-500">{item.pct}%</span>
|
|
</div>
|
|
<div className="h-2 bg-neutral-800 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-brand-orange rounded-full"
|
|
style={{ width: `${item.pct}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|