analytics fixs
This commit is contained in:
nmemmert
@@ -68,7 +68,8 @@ export function AnalyticsPanel({
|
||||
onDeployHook,
|
||||
onRefreshStatus,
|
||||
}: Props) {
|
||||
const [chartTab, setChartTab] = useState<'overview' | 'breakdown' | 'geographic'>('overview')
|
||||
const [chartTab, setChartTab] = useState<'overview' | 'breakdown' | 'geographic' | 'referrers'>('overview')
|
||||
const [expandedVisitor, setExpandedVisitor] = useState<string | null>(null)
|
||||
|
||||
if (statsStatus === 'loading') return <p className="admin-stats-note">Loading analytics…</p>
|
||||
if (statsStatus === 'error') return <p className="admin-stats-note">Failed to load analytics.</p>
|
||||
@@ -165,6 +166,33 @@ export function AnalyticsPanel({
|
||||
],
|
||||
}
|
||||
|
||||
// 30-day trend chart
|
||||
const last30DaysReal = stats.visitors.last30DaysReal ?? []
|
||||
const thirtyDayChartData = {
|
||||
labels: last30DaysReal.map((d: { day: string; hits: number }) => d.day.slice(5)),
|
||||
datasets: [{
|
||||
label: 'Real Visitors',
|
||||
data: last30DaysReal.map((d: { day: string; hits: number }) => d.hits),
|
||||
borderColor: '#c9a84c',
|
||||
backgroundColor: 'rgba(201, 168, 76, 0.08)',
|
||||
tension: 0.3,
|
||||
fill: true,
|
||||
pointRadius: 2,
|
||||
}],
|
||||
}
|
||||
|
||||
// Device breakdown (doughnut)
|
||||
const deviceBreakdown = stats.visitors.deviceBreakdown ?? { mobile: 0, desktop: 0, tablet: 0, unknown: 0 }
|
||||
const deviceChartData = {
|
||||
labels: ['Desktop', 'Mobile', 'Tablet', 'Unknown'],
|
||||
datasets: [{
|
||||
data: [deviceBreakdown.desktop, deviceBreakdown.mobile, deviceBreakdown.tablet, deviceBreakdown.unknown],
|
||||
backgroundColor: ['#c9a84c', '#a0853d', '#6d5a2e', '#444'],
|
||||
borderColor: '#1a1a15',
|
||||
borderWidth: 2,
|
||||
}],
|
||||
}
|
||||
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: true,
|
||||
@@ -240,51 +268,77 @@ export function AnalyticsPanel({
|
||||
{/* Chart Tabs */}
|
||||
<div className="admin-tabs admin-tabs--charts">
|
||||
<button type="button" className={`admin-tab${chartTab === 'overview' ? ' admin-tab--active' : ''}`} onClick={() => setChartTab('overview')}>Overview</button>
|
||||
<button type="button" className={`admin-tab${chartTab === 'breakdown' ? ' admin-tab--active' : ''}`} onClick={() => setChartTab('breakdown')}>Bot Breakdown</button>
|
||||
<button type="button" className={`admin-tab${chartTab === 'breakdown' ? ' admin-tab--active' : ''}`} onClick={() => setChartTab('breakdown')}>Bot & Devices</button>
|
||||
<button type="button" className={`admin-tab${chartTab === 'geographic' ? ' admin-tab--active' : ''}`} onClick={() => setChartTab('geographic')}>Geographic</button>
|
||||
<button type="button" className={`admin-tab${chartTab === 'referrers' ? ' admin-tab--active' : ''}`} onClick={() => setChartTab('referrers')}>Referrers</button>
|
||||
</div>
|
||||
|
||||
{/* Overview Charts */}
|
||||
{chartTab === 'overview' && (
|
||||
<div className="admin-analytics-grid">
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">7-Day Trend (Real vs Bot)</h3>
|
||||
<Line data={dailyChartData} options={chartOptions} />
|
||||
<>
|
||||
<div className="admin-analytics-grid">
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">7-Day Trend (Real vs Bot)</h3>
|
||||
<Line data={dailyChartData} options={chartOptions} />
|
||||
</div>
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">Traffic Composition</h3>
|
||||
<Doughnut data={trafficRatioData} options={{...chartOptions, plugins: {...chartOptions.plugins}}} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">Traffic Composition</h3>
|
||||
<Doughnut data={trafficRatioData} options={{...chartOptions, plugins: {...chartOptions.plugins}}} />
|
||||
<div className="admin-analytics-grid" style={{ marginTop: '1rem' }}>
|
||||
<div className="admin-analytics-card admin-analytics-card--wide">
|
||||
<h3 className="admin-analytics-card-title">30-Day Real Visitor Trend</h3>
|
||||
<Line data={thirtyDayChartData} options={chartOptions} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Bot Breakdown Charts */}
|
||||
{/* Bot & Device Charts */}
|
||||
{chartTab === 'breakdown' && (
|
||||
<div className="admin-analytics-grid">
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">Bot Sources</h3>
|
||||
{botReasons.length === 0 ? (
|
||||
<p className="admin-stats-note">No bot traffic detected.</p>
|
||||
) : (
|
||||
<Pie data={botPieData} options={{...chartOptions, plugins: {...chartOptions.plugins}}} />
|
||||
)}
|
||||
</div>
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">Bot Detection Details</h3>
|
||||
{botReasons.length === 0 ? (
|
||||
<p className="admin-stats-note">No bots detected yet.</p>
|
||||
) : (
|
||||
<>
|
||||
<div className="admin-analytics-grid">
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">Device Breakdown</h3>
|
||||
<Doughnut data={deviceChartData} options={{...chartOptions, plugins: {...chartOptions.plugins}}} />
|
||||
</div>
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">Device Counts</h3>
|
||||
<ul className="admin-bot-reason-list">
|
||||
{botReasons.map((reason: { reason: string; count: number }) => (
|
||||
<li key={reason.reason} className="admin-bot-reason-item">
|
||||
<span>{reason.reason.replace(/-/g, ' ')}</span>
|
||||
<strong>{reason.count.toLocaleString()}</strong>
|
||||
</li>
|
||||
))}
|
||||
<li><span>Desktop</span><strong>{deviceBreakdown.desktop.toLocaleString()}</strong></li>
|
||||
<li><span>Mobile</span><strong>{deviceBreakdown.mobile.toLocaleString()}</strong></li>
|
||||
<li><span>Tablet</span><strong>{deviceBreakdown.tablet.toLocaleString()}</strong></li>
|
||||
{deviceBreakdown.unknown > 0 && <li><span>Unknown</span><strong>{deviceBreakdown.unknown.toLocaleString()}</strong></li>}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-analytics-grid" style={{ marginTop: '1rem' }}>
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">Bot Sources</h3>
|
||||
{botReasons.length === 0 ? (
|
||||
<p className="admin-stats-note">No bot traffic detected.</p>
|
||||
) : (
|
||||
<Pie data={botPieData} options={{...chartOptions, plugins: {...chartOptions.plugins}}} />
|
||||
)}
|
||||
</div>
|
||||
<div className="admin-analytics-card">
|
||||
<h3 className="admin-analytics-card-title">Bot Detection Details</h3>
|
||||
{botReasons.length === 0 ? (
|
||||
<p className="admin-stats-note">No bots detected yet.</p>
|
||||
) : (
|
||||
<ul className="admin-bot-reason-list">
|
||||
{botReasons.map((reason: { reason: string; count: number }) => (
|
||||
<li key={reason.reason} className="admin-bot-reason-item">
|
||||
<span>{reason.reason.replace(/-/g, ' ')}</span>
|
||||
<strong>{reason.count.toLocaleString()}</strong>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Geographic Charts */}
|
||||
@@ -301,6 +355,27 @@ export function AnalyticsPanel({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Referrers Tab */}
|
||||
{chartTab === 'referrers' && (
|
||||
<div className="admin-analytics-grid">
|
||||
<div className="admin-analytics-card admin-analytics-card--wide">
|
||||
<h3 className="admin-analytics-card-title">Top Traffic Sources</h3>
|
||||
{(stats.visitors.topReferrers ?? []).length === 0 ? (
|
||||
<p className="admin-stats-note">No referrer data yet. Referrers are captured on SPA navigations after consent.</p>
|
||||
) : (
|
||||
<ul className="admin-bot-reason-list">
|
||||
{(stats.visitors.topReferrers ?? []).map((item: { referrer: string; count: number }) => (
|
||||
<li key={item.referrer}>
|
||||
<span>{item.referrer}</span>
|
||||
<strong>{item.count.toLocaleString()}</strong>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Recent Visitors Table */}
|
||||
<div className="admin-stats-head admin-stats-head--visitors">
|
||||
<h2>Visitor Details</h2>
|
||||
@@ -347,25 +422,64 @@ export function AnalyticsPanel({
|
||||
<th>IP</th>
|
||||
<th>Country</th>
|
||||
<th>Path</th>
|
||||
<th>Referrer</th>
|
||||
<th>Device</th>
|
||||
<th>Returning</th>
|
||||
<th>Visit #</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{stats.visitors.recentVisits.map(row => (
|
||||
<tr key={`${row.visitorId}-${row.at}`}>
|
||||
<td>{formatDate(row.at)}</td>
|
||||
<td><code className="admin-visitor-ip">{maskIp(row.ip)}</code></td>
|
||||
<td>{row.country || '—'}</td>
|
||||
<td className="admin-visitor-path" title={row.path}>{row.path}</td>
|
||||
<td>
|
||||
<span className={`admin-visitor-tag admin-visitor-tag--${row.returningVisitor ? 'returning' : 'new'}`}>
|
||||
{row.returningVisitor ? 'Returning' : 'New'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="admin-visitor-count">{row.visitCount}</td>
|
||||
</tr>
|
||||
))}
|
||||
{stats.visitors.recentVisits.map(row => {
|
||||
const rowKey = `${row.visitorId}-${row.at}`
|
||||
const isExpanded = expandedVisitor === rowKey
|
||||
return (
|
||||
<>
|
||||
<tr
|
||||
key={rowKey}
|
||||
className={`admin-visitor-row${isExpanded ? ' admin-visitor-row--expanded' : ''}`}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => setExpandedVisitor(isExpanded ? null : rowKey)}
|
||||
title="Click to view page history"
|
||||
>
|
||||
<td>{formatDate(row.at)}</td>
|
||||
<td><code className="admin-visitor-ip">{maskIp(row.ip)}</code></td>
|
||||
<td>{row.country || '—'}</td>
|
||||
<td className="admin-visitor-path" title={row.path}>{row.path}</td>
|
||||
<td className="admin-visitor-path" title={row.referrer || ''}>{row.referrer || '—'}</td>
|
||||
<td>{row.device || '—'}</td>
|
||||
<td>
|
||||
<span className={`admin-visitor-tag admin-visitor-tag--${row.returningVisitor ? 'returning' : 'new'}`}>
|
||||
{row.returningVisitor ? 'Returning' : 'New'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="admin-visitor-count">{row.visitCount} {isExpanded ? '▲' : '▼'}</td>
|
||||
</tr>
|
||||
{isExpanded && (row.pageHistory ?? []).length > 0 && (
|
||||
<tr key={`${rowKey}-history`} className="admin-visitor-history-row">
|
||||
<td colSpan={8}>
|
||||
<div className="admin-visitor-history">
|
||||
<p className="admin-visitor-history-label">Full page history for this visitor ({(row.pageHistory ?? []).length} pages):</p>
|
||||
<ol className="admin-visitor-history-list">
|
||||
{[...(row.pageHistory ?? [])].reverse().map((entry, i) => (
|
||||
<li key={i} className="admin-visitor-history-entry">
|
||||
<span className="admin-visitor-history-time">{formatDate(entry.at)}</span>
|
||||
<span className="admin-visitor-history-path">{entry.path}</span>
|
||||
{entry.referrer && <span className="admin-visitor-history-ref">from {entry.referrer}</span>}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{isExpanded && (row.pageHistory ?? []).length === 0 && (
|
||||
<tr key={`${rowKey}-history-empty`} className="admin-visitor-history-row">
|
||||
<td colSpan={8}><p style={{ padding: '0.5rem 1rem', color: '#8a7f5a', margin: 0, fontSize: '0.85rem' }}>No page history yet — history is built from SPA navigations after consent.</p></td>
|
||||
</tr>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user