naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update college predictor graph to show static labels for all weeks and remove tooltip

Browse Source
This commit is contained in:
ectasy663
2026-09-25 13:28:13 +05:30
parent ee8aadcf2d
commit 67a26ffe79
1 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/app/dashboard/ai-coach/college-predictor/page.tsx
View File

@@ -8,10 +8,10 @@ import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
const DEMO_TREND_DATA = [ const DEMO_TREND_DATA = [
{ name: 'Week 1', rank: 4500, label: 'NIT Trichy CSE' }, { name: 'Week 1', rank: 4500, label: 'NIT Trichy CSE' },
{ name: 'Week 2', rank: 4100 }, { name: 'Week 2', rank: 4100, label: 'NIT Surathkal CSE' },
{ name: 'Week 3', rank: 3800 }, { name: 'Week 3', rank: 3800, label: 'IIT Mandi EEE' },
{ name: 'Week 4', rank: 3300 }, { name: 'Week 4', rank: 3300, label: 'IIT Ropar CSE' },
{ name: 'Week 5', rank: 2900 }, { name: 'Week 5', rank: 2900, label: 'IIT Guwahati ECE' },
{ name: 'Week 6', rank: 2750, label: 'IIT Roorkee' }, { name: 'Week 6', rank: 2750, label: 'IIT Roorkee' },
] ]
@@ -26,13 +26,31 @@ const ZERO_TREND_DATA = [
// Custom Label to permanently show text on the graph (not on hover) // Custom Label to permanently show text on the graph (not on hover)
const CustomLabel = (props: any) => { const CustomLabel = (props: any) => {
const { x, y, stroke, value, index, data } = props; const { x, y, index, data } = props;
const point = data[index]; const point = data[index];
if (!point || !point.label) return null; if (!point || !point.label) return null;
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;
}
return ( return (
<text x={x} y={y - 15} fill="#fff" fontSize={12} fontWeight="bold" textAnchor="middle"> <g>
{point.label} <text x={xPos} y={yPos} fill="#fff" fontSize={11} fontWeight="bold" textAnchor={anchor as any}>
</text> {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>
); );
}; };
@@ -74,16 +92,11 @@ export default function CollegePredictorPage() {
</CardHeader> </CardHeader>
<CardContent className="h-[350px] mt-4"> <CardContent className="h-[350px] mt-4">
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<LineChart data={trendData} margin={{ top: 25, right: 30, bottom: 5, left: 10 }}> <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. */} {/* 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} /> <CartesianGrid stroke="#333" vertical={false} />
<XAxis dataKey="name" stroke="#888" tick={{ fill: '#888' }} /> <XAxis dataKey="name" stroke="#888" tick={{ fill: '#888' }} />
<YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 5000]} reversed={true} /> <YAxis stroke="#888" tick={{ fill: '#888' }} domain={[0, 5000]} reversed={true} />
<Tooltip
contentStyle={{ backgroundColor: '#1f2937', borderColor: '#374151', borderRadius: '8px' }}
itemStyle={{ color: 'var(--cyan-ai)' }}
formatter={(value: any) => [`Rank: ${value}`, 'Prediction']}
/>
<Line <Line
type="linear" type="linear"
dataKey="rank" dataKey="rank"