Spaces:
Configuration error
Configuration error
File size: 11,432 Bytes
bcce530 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 | "use client"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Play, Star, GitFork, FileText, TrendingUp, Zap, BarChart3 } from "lucide-react"
import Link from "next/link"
interface AnalyticsData {
prompts: {
id: string
title: string
slug: string
totalRuns: number
starsCount: number
remixesCount: number
createdAt: Date
}[]
dailyData: { date: string; runs: number }[]
modelUsage: Record<string, number>
totalTokens: number
totals: {
runs: number
stars: number
remixes: number
prompts: number
}
}
interface AnalyticsDashboardProps {
data: AnalyticsData
}
export function AnalyticsDashboard({ data }: AnalyticsDashboardProps) {
const maxRuns = Math.max(...data.dailyData.map((d) => d.runs), 1)
return (
<div className="space-y-8">
{/* Summary Stats */}
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
<Card>
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-muted-foreground">Total Prompts</p>
<p className="text-3xl font-bold">{data.totals.prompts}</p>
</div>
<FileText className="h-8 w-8 text-muted-foreground/30" />
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-muted-foreground">Total Runs</p>
<p className="text-3xl font-bold">{data.totals.runs.toLocaleString()}</p>
</div>
<Play className="h-8 w-8 text-muted-foreground/30" />
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-muted-foreground">Total Stars</p>
<p className="text-3xl font-bold">{data.totals.stars.toLocaleString()}</p>
</div>
<Star className="h-8 w-8 text-muted-foreground/30" />
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-muted-foreground">Total Remixes</p>
<p className="text-3xl font-bold">{data.totals.remixes.toLocaleString()}</p>
</div>
<GitFork className="h-8 w-8 text-muted-foreground/30" />
</div>
</CardContent>
</Card>
</div>
{/* Charts Row */}
<div className="grid lg:grid-cols-2 gap-6">
{/* Runs per Day Chart */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<TrendingUp className="h-5 w-5" />
Runs Per Day
</CardTitle>
<CardDescription>Last 30 days</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-end gap-1 h-[200px]">
{data.dailyData.map((day, i) => (
<div
key={day.date}
className="flex-1 group relative"
title={`${day.date}: ${day.runs} runs`}
>
<div
className="bg-primary/80 hover:bg-primary rounded-t transition-colors"
style={{
height: `${(day.runs / maxRuns) * 100}%`,
minHeight: day.runs > 0 ? "4px" : "1px",
}}
/>
<div className="absolute -top-8 left-1/2 -translate-x-1/2 bg-foreground text-background px-2 py-1 rounded text-xs opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">
{day.runs} runs
</div>
</div>
))}
</div>
<div className="flex justify-between text-xs text-muted-foreground mt-2">
<span>30 days ago</span>
<span>Today</span>
</div>
</CardContent>
</Card>
{/* Model Usage */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Zap className="h-5 w-5" />
Model Usage
</CardTitle>
<CardDescription>
{data.totalTokens.toLocaleString()} total tokens used
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{Object.entries(data.modelUsage).length > 0 ? (
Object.entries(data.modelUsage)
.sort(([, a], [, b]) => b - a)
.map(([model, count]) => {
const percentage = Math.round(
(count / Object.values(data.modelUsage).reduce((a, b) => a + b, 0)) * 100
)
return (
<div key={model}>
<div className="flex justify-between text-sm mb-1">
<span className="font-medium">{model}</span>
<span className="text-muted-foreground">
{count} runs ({percentage}%)
</span>
</div>
<div className="h-2 bg-muted rounded-full overflow-hidden">
<div
className="h-full bg-primary rounded-full transition-all"
style={{ width: `${percentage}%` }}
/>
</div>
</div>
)
})
) : (
<div className="text-center text-muted-foreground py-8">
No usage data yet
</div>
)}
</div>
</CardContent>
</Card>
</div>
{/* Top Prompts */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<BarChart3 className="h-5 w-5" />
Top Performing Prompts
</CardTitle>
<CardDescription>Sorted by total runs</CardDescription>
</CardHeader>
<CardContent>
{data.prompts.length > 0 ? (
<div className="space-y-3">
{data.prompts.slice(0, 10).map((prompt, i) => (
<Link
key={prompt.id}
href={`/p/${prompt.slug}`}
className="flex items-center gap-4 p-3 rounded-lg hover:bg-muted/50 transition-colors"
>
<span className="text-2xl font-bold text-muted-foreground w-8">
{i + 1}
</span>
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{prompt.title}</p>
<div className="flex gap-4 text-xs text-muted-foreground mt-1">
<span className="flex items-center gap-1">
<Play className="h-3 w-3" />
{prompt.totalRuns.toLocaleString()} runs
</span>
<span className="flex items-center gap-1">
<Star className="h-3 w-3" />
{prompt.starsCount} stars
</span>
<span className="flex items-center gap-1">
<GitFork className="h-3 w-3" />
{prompt.remixesCount} remixes
</span>
</div>
</div>
<Badge variant="outline">{prompt.totalRuns} runs</Badge>
</Link>
))}
</div>
) : (
<div className="text-center text-muted-foreground py-12">
<FileText className="h-12 w-12 mx-auto mb-4 opacity-20" />
<p>No prompts yet</p>
<p className="text-sm mt-1">
<Link href="/create" className="text-primary hover:underline">
Create your first prompt
</Link>
</p>
</div>
)}
</CardContent>
</Card>
</div>
)
}
|