+ {/* Column headers */}
+
+
+ Selector
+ Page
+
+
+ {showAvgClicks && Avg}
+ Sessions
+ Last Seen
+ Count
+
+
+
+ {items.map((item, i) => (
+ |
+ ))}
+
-
- No {title.toLowerCase()} detected in this period
+
+
+
+
+
+ No {title.toLowerCase()} detected
+
+
+ {description}. Data will appear here once frustration signals are detected on your site.
)}
diff --git a/components/behavior/FrustrationTrend.tsx b/components/behavior/FrustrationTrend.tsx
new file mode 100644
index 0000000..330b0a6
--- /dev/null
+++ b/components/behavior/FrustrationTrend.tsx
@@ -0,0 +1,158 @@
+'use client'
+
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts'
+import { TrendUp } from '@phosphor-icons/react'
+import type { FrustrationSummary } from '@/lib/api/stats'
+
+interface FrustrationTrendProps {
+ summary: FrustrationSummary | null
+ loading: boolean
+}
+
+function SkeletonCard() {
+ return (
+
+
+
+ {[120, 80, 140, 100].map((h, i) => (
+
+ ))}
+
+
+ )
+}
+
+export default function FrustrationTrend({ summary, loading }: FrustrationTrendProps) {
+ if (loading || !summary) return
+
+ const hasData = summary.rage_clicks > 0 || summary.dead_clicks > 0 ||
+ summary.prev_rage_clicks > 0 || summary.prev_dead_clicks > 0
+
+ const chartData = [
+ {
+ label: 'Rage',
+ current: summary.rage_clicks,
+ previous: summary.prev_rage_clicks,
+ },
+ {
+ label: 'Dead',
+ current: summary.dead_clicks,
+ previous: summary.prev_dead_clicks,
+ },
+ ]
+
+ const totalCurrent = summary.rage_clicks + summary.dead_clicks
+ const totalPrevious = summary.prev_rage_clicks + summary.prev_dead_clicks
+ const totalChange = totalPrevious > 0
+ ? Math.round(((totalCurrent - totalPrevious) / totalPrevious) * 100)
+ : null
+
+ return (
+
+
+
+ Frustration Trend
+
+
+
+ Current vs. previous period comparison
+
+
+ {hasData ? (
+
+ {/* Summary line */}
+
+
+ {totalCurrent.toLocaleString()}
+
+
+ total signals
+
+ {totalChange !== null && (
+ 0
+ ? 'text-red-600 dark:text-red-400'
+ : totalChange < 0
+ ? 'text-green-600 dark:text-green-400'
+ : 'text-neutral-500 dark:text-neutral-400'
+ }`}>
+ {totalChange > 0 ? '+' : ''}{totalChange}%
+
+ )}
+ {totalChange === null && totalCurrent > 0 && (
+
+ New
+
+ )}
+
+
+ {/* Chart */}
+
+
+
+
+
+ [
+ value.toLocaleString(),
+ name === 'current' ? 'Current' : 'Previous',
+ ]}
+ />
+
+ {chartData.map((_, i) => (
+ |
+ ))}
+
+
+ {chartData.map((_, i) => (
+ |
+ ))}
+
+
+
+
+
+ {/* Legend */}
+
+
+ ) : (
+
+
+
+
+
+ No trend data yet
+
+
+ Frustration trend data will appear here once rage clicks or dead clicks are detected across periods.
+
+
+ )}
+
+ )
+}