Update college predictor chart with JEE/NEET marks scale and college names
This commit is contained in:
@@ -7,41 +7,55 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContai
|
|||||||
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
|
import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
|
||||||
|
|
||||||
const DEMO_TREND_DATA = [
|
const DEMO_TREND_DATA = [
|
||||||
{ name: '1', value: 0.120, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
|
{ name: 'Test 1', value: 120, ucl: 285, lcl: 40, cl: 150, target: 240, label: 'NIT Raipur CSE' },
|
||||||
{ name: '2', value: 0.100, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
|
{ name: 'Test 2', value: 135, ucl: 285, lcl: 40, cl: 150, target: 240, label: 'NIT Jalandhar IT' },
|
||||||
{ name: '3', value: 0.075, ucl: 0.195, lcl: 0.005, cl: 0.10, target: 0.16 },
|
{ name: 'Test 3', value: 110, ucl: 290, lcl: 35, cl: 150, target: 240, label: 'IIIT Pune CSE' },
|
||||||
{ name: '4', value: 0.090, ucl: 0.195, lcl: 0.005, cl: 0.10, target: 0.16 },
|
{ name: 'Test 4', value: 160, ucl: 290, lcl: 35, cl: 150, target: 240, label: 'NIT Silchar CSE' },
|
||||||
{ name: '5', value: 0.119, ucl: 0.180, lcl: 0.020, cl: 0.10, target: 0.16 },
|
{ name: 'Test 5', value: 145, ucl: 280, lcl: 45, cl: 150, target: 240, label: 'NIT Kurukshetra IT' },
|
||||||
{ name: '6', value: 0.110, ucl: 0.180, lcl: 0.020, cl: 0.10, target: 0.16 },
|
{ name: 'Test 6', value: 175, ucl: 280, lcl: 45, cl: 150, target: 240, label: 'NIT Calicut CSE' },
|
||||||
{ name: '7', value: 0.110, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
|
{ name: 'Test 7', value: 195, ucl: 285, lcl: 40, cl: 150, target: 240, label: 'NIT Rourkela ECE' },
|
||||||
{ name: '8', value: 0.160, ucl: 0.185, lcl: 0.015, cl: 0.10, target: 0.16 },
|
{ name: 'Test 8', value: 165, ucl: 285, lcl: 40, cl: 150, target: 240, label: 'NIT Durgapur CSE' },
|
||||||
{ name: '9', value: 0.111, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
|
{ name: 'Test 9', value: 215, ucl: 275, lcl: 50, cl: 150, target: 240, label: 'NIT Warangal ECE' },
|
||||||
{ name: '10', value: 0.067, ucl: 0.190, lcl: 0.010, cl: 0.10, target: 0.16 },
|
{ name: 'Test 10', value: 230, ucl: 275, lcl: 50, cl: 150, target: 240, label: 'NIT Surathkal IT' },
|
||||||
{ name: '11', value: 0.180, ucl: 0.178, lcl: 0.022, cl: 0.10, target: 0.16 },
|
{ name: 'Test 11', value: 210, ucl: 285, lcl: 40, cl: 150, target: 240, label: 'IIT Mandi CSE' },
|
||||||
{ name: '12', value: 0.125, ucl: 0.178, lcl: 0.022, cl: 0.10, target: 0.16 },
|
{ name: 'Test 12', value: 255, ucl: 285, lcl: 40, cl: 150, target: 240, label: 'IIT Roorkee CSE' },
|
||||||
{ 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 = DEMO_TREND_DATA.map(d => ({ ...d, value: 0 }));
|
const ZERO_TREND_DATA = DEMO_TREND_DATA.map(d => ({ ...d, value: 0 }));
|
||||||
|
|
||||||
// Custom dot to match the requested look
|
// 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;
|
||||||
|
|
||||||
|
let anchor = "middle";
|
||||||
|
let xPos = x;
|
||||||
|
let yPos = y - 15;
|
||||||
|
|
||||||
|
if (index === 0) {
|
||||||
|
anchor = "start";
|
||||||
|
xPos = x + 5;
|
||||||
|
} else if (index === data.length - 1) {
|
||||||
|
anchor = "end";
|
||||||
|
xPos = x - 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<g>
|
||||||
|
<text x={xPos} y={yPos} fill="var(--foreground)" opacity={0.8} fontSize={11} fontWeight="bold" textAnchor={anchor as any}>
|
||||||
|
{point.label}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Custom dot
|
||||||
const CustomDot = (props: any) => {
|
const CustomDot = (props: any) => {
|
||||||
const { cx, cy, payload } = props;
|
const { cx, cy, payload } = props;
|
||||||
|
|
||||||
// Find if this is the outlier (highest point, around 0.180) to color it red
|
// High score outlier (e.g., above target band)
|
||||||
const isOutlier = payload.value >= 0.180;
|
const isOutlier = payload.value >= 250;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<circle
|
<circle
|
||||||
@@ -98,12 +112,11 @@ export default function CollegePredictorPage() {
|
|||||||
<YAxis
|
<YAxis
|
||||||
stroke="var(--muted-foreground)"
|
stroke="var(--muted-foreground)"
|
||||||
tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }}
|
tick={{ fill: 'var(--muted-foreground)', fontSize: 12 }}
|
||||||
domain={[0.02, 0.22]}
|
domain={[0, 300]}
|
||||||
ticks={[0.02, 0.07, 0.12, 0.17, 0.22]}
|
ticks={[0, 50, 100, 150, 200, 250, 300]}
|
||||||
tickFormatter={(val) => val.toFixed(3)}
|
|
||||||
axisLine={false}
|
axisLine={false}
|
||||||
tickLine={false}
|
tickLine={false}
|
||||||
label={{ value: 'Prediction Volatility', angle: -90, position: 'insideLeft', fill: 'var(--muted-foreground)', fontSize: 12, fontWeight: 'bold' }}
|
label={{ value: 'Mock Exam Score', angle: -90, position: 'insideLeft', fill: 'var(--muted-foreground)', fontSize: 12, fontWeight: 'bold' }}
|
||||||
/>
|
/>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
contentStyle={{ backgroundColor: 'var(--background)', borderColor: 'var(--border)', color: 'var(--foreground)' }}
|
contentStyle={{ backgroundColor: 'var(--background)', borderColor: 'var(--border)', color: 'var(--foreground)' }}
|
||||||
@@ -111,13 +124,13 @@ export default function CollegePredictorPage() {
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
{/* Target Spec Line Band */}
|
{/* Target Spec Line Band */}
|
||||||
<ReferenceArea y1={0.15} y2={0.17} fill="rgba(250, 204, 21, 0.2)" />
|
<ReferenceArea y1={230} y2={250} fill="rgba(250, 204, 21, 0.2)" />
|
||||||
|
|
||||||
{/* Target Line */}
|
{/* Target Line */}
|
||||||
<ReferenceLine y={0.16} stroke="#3b82f6" strokeWidth={2} label={{ position: 'insideTopLeft', value: 'Target 0.16', fill: 'var(--foreground)', fontSize: 11, fontWeight: 'bold' }} />
|
<ReferenceLine y={240} stroke="#3b82f6" strokeWidth={2} label={{ position: 'insideTopLeft', value: 'Target 240', fill: 'var(--foreground)', fontSize: 11, fontWeight: 'bold' }} />
|
||||||
|
|
||||||
{/* Center Line (CL) */}
|
{/* 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' }} />
|
<ReferenceLine y={150} stroke="#2dd4bf" strokeWidth={1} label={{ position: 'insideTopLeft', value: 'CL 150', fill: 'var(--foreground)', fontSize: 11, fontWeight: 'bold' }} />
|
||||||
|
|
||||||
{/* Control Limits (stepped) */}
|
{/* Control Limits (stepped) */}
|
||||||
<Line type="stepAfter" dataKey="ucl" stroke="#ef4444" strokeWidth={2} strokeDasharray="5 5" dot={false} isAnimationActive={false} />
|
<Line type="stepAfter" dataKey="ucl" stroke="#ef4444" strokeWidth={2} strokeDasharray="5 5" dot={false} isAnimationActive={false} />
|
||||||
@@ -132,6 +145,7 @@ export default function CollegePredictorPage() {
|
|||||||
dot={<CustomDot />}
|
dot={<CustomDot />}
|
||||||
activeDot={{ r: 6, fill: 'var(--cyan-ai)' }}
|
activeDot={{ r: 6, fill: 'var(--cyan-ai)' }}
|
||||||
isAnimationActive={true}
|
isAnimationActive={true}
|
||||||
|
label={<CustomLabel data={trendData} />}
|
||||||
/>
|
/>
|
||||||
</LineChart>
|
</LineChart>
|
||||||
</ResponsiveContainer>
|
</ResponsiveContainer>
|
||||||
|
|||||||
Reference in New Issue
Block a user