feat: complete comprehensive zero-state metrics across all dashboard pages for new accounts
This commit is contained in:
@@ -3,28 +3,52 @@
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
|
||||
import { LineChart as LineChartIcon, Activity, BrainCircuit } from "lucide-react"
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, BarChart, Bar, Cell } from 'recharts'
|
||||
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
|
||||
|
||||
const DEMO_TREND_DATA = [
|
||||
{ name: 'Week 1', score: 120 },
|
||||
{ name: 'Week 2', score: 135 },
|
||||
{ name: 'Week 3', score: 130 },
|
||||
{ name: 'Week 4', score: 145 },
|
||||
{ name: 'Week 5', score: 160 },
|
||||
{ name: 'Week 6', score: 185 },
|
||||
]
|
||||
|
||||
const ZERO_TREND_DATA = [
|
||||
{ name: 'Week 1', score: 0 },
|
||||
{ name: 'Week 2', score: 0 },
|
||||
{ name: 'Week 3', score: 0 },
|
||||
{ name: 'Week 4', score: 0 },
|
||||
{ name: 'Week 5', score: 0 },
|
||||
{ name: 'Week 6', score: 0 },
|
||||
]
|
||||
|
||||
const DEMO_HEATMAP_DATA = [
|
||||
{ topic: 'Kinematics', accuracy: 95 },
|
||||
{ topic: 'Optics', accuracy: 72 },
|
||||
{ topic: 'Thermodynamics', accuracy: 45 },
|
||||
{ topic: 'Calculus', accuracy: 38 },
|
||||
{ topic: 'Organic Chem', accuracy: 88 },
|
||||
{ topic: 'Inorganic', accuracy: 65 },
|
||||
]
|
||||
|
||||
const ZERO_HEATMAP_DATA = [
|
||||
{ topic: 'Kinematics', accuracy: 0 },
|
||||
{ topic: 'Optics', accuracy: 0 },
|
||||
{ topic: 'Thermodynamics', accuracy: 0 },
|
||||
{ topic: 'Calculus', accuracy: 0 },
|
||||
{ topic: 'Organic Chem', accuracy: 0 },
|
||||
{ topic: 'Inorganic', accuracy: 0 },
|
||||
]
|
||||
|
||||
export default function AnalyticsPage() {
|
||||
const trendData = [
|
||||
{ name: 'Week 1', score: 120 },
|
||||
{ name: 'Week 2', score: 135 },
|
||||
{ name: 'Week 3', score: 130 },
|
||||
{ name: 'Week 4', score: 145 },
|
||||
{ name: 'Week 5', score: 160 },
|
||||
{ name: 'Week 6', score: 185 },
|
||||
]
|
||||
|
||||
// For heatmap-like visualization (using a barchart with different colors)
|
||||
const heatmapData = [
|
||||
{ topic: 'Kinematics', accuracy: 95 },
|
||||
{ topic: 'Optics', accuracy: 72 },
|
||||
{ topic: 'Thermodynamics', accuracy: 45 },
|
||||
{ topic: 'Calculus', accuracy: 38 },
|
||||
{ topic: 'Organic Chem', accuracy: 88 },
|
||||
{ topic: 'Inorganic', accuracy: 65 },
|
||||
]
|
||||
const { userId } = useActiveUser()
|
||||
const isDemo = isDemoUser(userId)
|
||||
const trendData = isDemo ? DEMO_TREND_DATA : ZERO_TREND_DATA
|
||||
const heatmapData = isDemo ? DEMO_HEATMAP_DATA : ZERO_HEATMAP_DATA
|
||||
|
||||
const getColor = (accuracy: number) => {
|
||||
if (accuracy === 0) return '#374151' // neutral gray
|
||||
if (accuracy >= 80) return '#10b981' // emerald-500
|
||||
if (accuracy >= 60) return '#f59e0b' // amber-500
|
||||
return '#ef4444' // red-500
|
||||
@@ -50,7 +74,9 @@ export default function AnalyticsPage() {
|
||||
<Card className="col-span-1 lg:col-span-2 border-border shadow-sm bg-background">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2"><LineChartIcon className="text-[#00F0FF]" size={20} /> Projected Score Trajectory</CardTitle>
|
||||
<CardDescription>Your mock scores over the last 6 months projected towards the final exam.</CardDescription>
|
||||
<CardDescription>
|
||||
{isDemo ? "Your mock scores over the last 6 months projected towards the final exam." : "Your mock test trajectory will plot here as you complete tests."}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="h-[350px] mt-4">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
@@ -75,7 +101,11 @@ export default function AnalyticsPage() {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-foreground/80 leading-relaxed font-medium">
|
||||
Our models detect a consistent <strong>14% accuracy drop</strong> in physics questions involving Calculus. We are adjusting your upcoming DPPs to focus heavily on integration applications in kinematics.
|
||||
{isDemo ? (
|
||||
<>Our models detect a consistent <strong>14% accuracy drop</strong> in physics questions involving Calculus. We are adjusting your upcoming DPPs to focus heavily on integration applications in kinematics.</>
|
||||
) : (
|
||||
<>Complete your first diagnostic test or DPP to unlock personalized AI diagnoses and focus area recommendations. Our neural models will begin analyzing your accuracy curves as soon as you attempt questions.</>
|
||||
)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user