Update college predictor graph to show static labels for all weeks and remove tooltip
This commit is contained in:
@@ -8,10 +8,10 @@ import { useActiveUser, isDemoUser } from "@/hooks/useActiveUser"
|
||||
|
||||
const DEMO_TREND_DATA = [
|
||||
{ name: 'Week 1', rank: 4500, label: 'NIT Trichy CSE' },
|
||||
{ name: 'Week 2', rank: 4100 },
|
||||
{ name: 'Week 3', rank: 3800 },
|
||||
{ name: 'Week 4', rank: 3300 },
|
||||
{ name: 'Week 5', rank: 2900 },
|
||||
{ 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' },
|
||||
]
|
||||
|
||||
@@ -26,13 +26,31 @@ const ZERO_TREND_DATA = [
|
||||
|
||||
// Custom Label to permanently show text on the graph (not on hover)
|
||||
const CustomLabel = (props: any) => {
|
||||
const { x, y, stroke, value, index, data } = props;
|
||||
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 - 20;
|
||||
|
||||
if (index === 0) {
|
||||
anchor = "start";
|
||||
xPos = x + 5;
|
||||
} else if (index === data.length - 1) {
|
||||
anchor = "end";
|
||||
xPos = x - 5;
|
||||
}
|
||||
|
||||
return (
|
||||
<text x={x} y={y - 15} fill="#fff" fontSize={12} fontWeight="bold" textAnchor="middle">
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -74,16 +92,11 @@ export default function CollegePredictorPage() {
|
||||
</CardHeader>
|
||||
<CardContent className="h-[350px] mt-4">
|
||||
<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. */}
|
||||
<CartesianGrid stroke="#333" vertical={false} />
|
||||
<XAxis dataKey="name" stroke="#888" tick={{ fill: '#888' }} />
|
||||
<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
|
||||
type="linear"
|
||||
dataKey="rank"
|
||||
|
||||
Reference in New Issue
Block a user