From 09ba8cc9926d449d47ffc0faf668dfd07ac622a4 Mon Sep 17 00:00:00 2001
From: ectasy663 <namansingh4680@gmail.com>
Date: Fri, 25 Sep 2026 16:27:24 +0530
Subject: [PATCH] Update college predictor graph to look like a control chart

---
 .../ai-coach/college-predictor/page.tsx       | 129 +++++++++++-------
 1 file changed, 78 insertions(+), 51 deletions(-)

diff --git a/src/app/dashboard/ai-coach/college-predictor/page.tsx b/src/app/dashboard/ai-coach/college-predictor/page.tsx
index 81e0514..3c10f3d 100644
--- a/src/app/dashboard/ai-coach/college-predictor/page.tsx
+++ b/src/app/dashboard/ai-coach/college-predictor/page.tsx
@@ -3,54 +3,54 @@
 import { useState, useEffect } from "react"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
 import { GraduationCap, BrainCircuit, LineChart as LineChartIcon } from "lucide-react"
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine, ReferenceArea, LabelList } from 'recharts'
 import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
 
 const DEMO_TREND_DATA = [
-  { name: 'Week 1', rank: 4500, label: 'NIT Trichy CSE' },
-  { name: 'Week 2', rank: 4100, label: 'NIT Surathkal CSE' },
-  { name: 'Week 3', rank: 3800, label: 'IIT Mandi EEE' },
-  { name: 'Week 4', rank: 3300, label: 'IIT Ropar CSE' },
-  { name: 'Week 5', rank: 2900, label: 'IIT Guwahati ECE' },
-  { name: 'Week 6', rank: 2750, label: 'IIT Roorkee' },
-]
+  { name: '1', value: 0.120, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
+  { name: '2', value: 0.100, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
+  { name: '3', value: 0.075, ucl: 0.195, lcl: 0.005, cl: 0.10, target: 0.16 },
+  { name: '4', value: 0.090, ucl: 0.195, lcl: 0.005, cl: 0.10, target: 0.16 },
+  { name: '5', value: 0.119, ucl: 0.180, lcl: 0.020, cl: 0.10, target: 0.16 },
+  { name: '6', value: 0.110, ucl: 0.180, lcl: 0.020, cl: 0.10, target: 0.16 },
+  { name: '7', value: 0.110, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
+  { name: '8', value: 0.160, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
+  { name: '9', value: 0.111, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
+  { name: '10', value: 0.067, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
+  { name: '11', value: 0.180, ucl: 0.178, lcl: 0.022, cl: 0.10, target: 0.16 },
+  { name: '12', value: 0.125, ucl: 0.178, lcl: 0.022, cl: 0.10, target: 0.16 },
+  { name: '13', value: 0.075, ucl: 0.178, lcl: 0.022, cl: 0.10, target: 0.16 },
+  { name: '14', value: 0.066, ucl: 0.180, lcl: 0.020, cl: 0.10, target: 0.16 },
+  { name: '15', value: 0.055, ucl: 0.180, lcl: 0.020, cl: 0.10, target: 0.16 },
+  { name: '16', value: 0.100, ucl: 0.195, lcl: 0.005, cl: 0.10, target: 0.16 },
+  { name: '17', value: 0.125, ucl: 0.195, lcl: 0.005, cl: 0.10, target: 0.16 },
+  { name: '18', value: 0.088, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
+  { name: '19', value: 0.056, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
+  { name: '20', value: 0.080, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
+  { name: '21', value: 0.050, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
+  { name: '22', value: 0.080, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
+  { name: '23', value: 0.100, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
+  { name: '24', value: 0.067, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
+  { name: '25', value: 0.100, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
+];
 
-const ZERO_TREND_DATA = [
-  { name: 'Week 1', rank: 0 },
-  { name: 'Week 2', rank: 0 },
-  { name: 'Week 3', rank: 0 },
-  { name: 'Week 4', rank: 0 },
-  { name: 'Week 5', rank: 0 },
-  { name: 'Week 6', rank: 0 },
-]
+const ZERO_TREND_DATA = DEMO_TREND_DATA.map(d => ({ ...d, value: 0 }));
 
-// Custom Label to permanently show text on the graph (not on hover)
-const CustomLabel = (props: any) => {
-  const { x, y, index, data } = props;
-  const point = data[index];
-  if (!point || !point.label) return null;
+// Custom dot to match the requested look
+const CustomDot = (props: any) => {
+  const { cx, cy, payload } = props;
   
-  let anchor = "middle";
-  let xPos = x;
-  let yPos = y - 20;
-
-  if (index === 0) {
-    anchor = "start";
-    xPos = x + 5;
-  } else if (index === data.length - 1) {
-    anchor = "end";
-    xPos = x - 5;
-  }
+  // Find if this is the outlier (highest point, around 0.180) to color it red
+  const isOutlier = payload.value >= 0.180;
   
   return (
-    <g>
-      <text x={xPos} y={yPos} fill="#fff" fontSize={11} fontWeight="bold" textAnchor={anchor as any}>
-        {point.label}
-      </text>
-      <text x={xPos} y={yPos + 14} fill="var(--cyan-ai)" fontSize={11} fontWeight="bold" textAnchor={anchor as any}>
-        Rank: {point.rank}
-      </text>
-    </g>
+    <circle 
+      cx={cx} 
+      cy={cy} 
+      r={4} 
+      fill={isOutlier ? "#ef4444" : "#3b82f6"} 
+      stroke="none" 
+    />
   );
 };
 
@@ -92,19 +92,46 @@ export default function CollegePredictorPage() {
           </CardHeader>
           <CardContent className="h-[350px] mt-4">
             <ResponsiveContainer width="100%" height="100%">
-              <LineChart data={trendData} margin={{ top: 35, right: 30, bottom: 5, left: 10 }}>
-                {/* User said static line, not dotted. So removed strokeDasharray from grid? Let's make it solid if they mean grid, or just the line. Line is monotone. */}
-                <CartesianGrid stroke="#333" vertical={false} />
-                <XAxis dataKey="name" stroke="#888" tick={{ fill: '#888' }} />
-                <YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 5000]} reversed={true} />
+              <LineChart data={trendData} margin={{ top: 20, right: 30, bottom: 20, left: 10 }}>
+                <CartesianGrid vertical={false} stroke="var(--border)" opacity={0.5} />
+                <XAxis dataKey="name" stroke="var(--muted-foreground)" tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }} axisLine={false} tickLine={false} />
+                <YAxis 
+                  stroke="var(--muted-foreground)" 
+                  tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }} 
+                  domain={[0.02, 0.22]} 
+                  ticks={[0.02, 0.07, 0.12, 0.17, 0.22]} 
+                  tickFormatter={(val) => val.toFixed(3)}
+                  axisLine={false}
+                  tickLine={false}
+                  label={{ value: 'Prediction Volatility', angle: -90, position: 'insideLeft', fill: 'var(--muted-foreground)', fontSize: 12, fontWeight: 'bold' }}
+                />
+                <Tooltip 
+                  contentStyle={{ backgroundColor: 'var(--background)', borderColor: 'var(--border)', color: 'var(--foreground)' }}
+                  itemStyle={{ color: 'var(--foreground)' }}
+                />
+                
+                {/* Target Spec Line Band */}
+                <ReferenceArea y1={0.15} y2={0.17} fill="rgba(250, 204, 21, 0.2)" />
+                
+                {/* Target Line */}
+                <ReferenceLine y={0.16} stroke="#3b82f6" strokeWidth={2} label={{ position: 'insideTopLeft', value: 'Target 0.16', fill: 'var(--foreground)', fontSize: 11, fontWeight: 'bold' }} />
+                
+                {/* Center Line (CL) */}
+                <ReferenceLine y={0.10} stroke="#2dd4bf" strokeWidth={1} label={{ position: 'insideTopLeft', value: 'CL 0.10', fill: 'var(--foreground)', fontSize: 11, fontWeight: 'bold' }} />
+
+                {/* Control Limits (stepped) */}
+                <Line type="stepAfter" dataKey="ucl" stroke="#ef4444" strokeWidth={2} strokeDasharray="5 5" dot={false} isAnimationActive={false} />
+                <Line type="stepAfter" dataKey="lcl" stroke="#ef4444" strokeWidth={2} strokeDasharray="5 5" dot={false} isAnimationActive={false} />
+
+                {/* Main Data Line */}
                 <Line 
                   type="linear" 
-                  dataKey="rank" 
-                  stroke="var(--cyan-ai)" 
-                  strokeWidth={3} 
-                  dot={{ r: 4, fill: 'var(--cyan-ai)' }} 
-                  activeDot={{ r: 6 }} 
-                  label={<CustomLabel data={trendData} />}
+                  dataKey="value" 
+                  stroke="#3b82f6" 
+                  strokeWidth={1.5} 
+                  dot={<CustomDot />}
+                  activeDot={{ r: 6, fill: 'var(--cyan-ai)' }} 
+                  isAnimationActive={true}
                 />
               </LineChart>
             </ResponsiveContainer>