67 lines
2.7 KiB
JavaScript
67 lines
2.7 KiB
JavaScript
import React, { useMemo } from 'react';
|
|
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell } from 'recharts';
|
|
|
|
const TIERS = [
|
|
{ label: '0-39', range: [0, 39], color: '#333F48' },
|
|
{ label: '40-59', range: [40, 59], color: '#D1E0D7' },
|
|
{ label: '60-79', range: [60, 79], color: '#F8E08E' },
|
|
{ label: '80-100', range: [80, 100], color: '#0838E0' },
|
|
];
|
|
|
|
export default function ScoreDistribution({ applications }) {
|
|
const data = useMemo(() => {
|
|
const scored = applications.filter(a => a.ai_score > 0);
|
|
return TIERS.map((tier) => ({
|
|
label: tier.label,
|
|
count: scored.filter(a => a.ai_score >= tier.range[0] && a.ai_score <= tier.range[1]).length,
|
|
color: tier.color,
|
|
}));
|
|
}, [applications]);
|
|
|
|
const avgScore = useMemo(() => {
|
|
const scored = applications.filter(a => a.ai_score > 0);
|
|
return scored.length ? Math.round(scored.reduce((s, a) => s + a.ai_score, 0) / scored.length) : 0;
|
|
}, [applications]);
|
|
|
|
const screened = applications.filter(a => a.ai_score > 0).length;
|
|
|
|
return (
|
|
<div className="glass-card border border-white/60 rounded-2xl p-6 shadow-sm">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<h3 className="font-heading font-semibold text-[#111827] text-[16px]">Candidate Scores</h3>
|
|
<div className="text-right">
|
|
<div className="text-[22px] font-heading font-bold gradient-text">{avgScore}</div>
|
|
<div className="text-[10px] text-[#9CA3AF] tracking-wide">AVG SCORE</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-[12px] text-[#6B7280] mb-5">{screened} candidates screened</p>
|
|
|
|
<ResponsiveContainer width="100%" height={220}>
|
|
<BarChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#F3F4F6" />
|
|
<XAxis dataKey="label" tick={{ fontSize: 11 }} stroke="#9CA3AF" />
|
|
<YAxis tick={{ fontSize: 11 }} stroke="#9CA3AF" allowDecimals={false} />
|
|
<Tooltip
|
|
cursor={{ fill: '#F9FAFB' }}
|
|
contentStyle={{ borderRadius: 8, border: '1px solid #E5E7EB', fontSize: 12 }}
|
|
/>
|
|
<Bar dataKey="count" radius={[6, 6, 0, 0]}>
|
|
{data.map((entry, i) => (
|
|
<Cell key={i} fill={entry.color} />
|
|
))}
|
|
</Bar>
|
|
</BarChart>
|
|
</ResponsiveContainer>
|
|
|
|
<div className="grid grid-cols-4 gap-2 mt-4">
|
|
{TIERS.map((t, i) => (
|
|
<div key={t.label} className="text-center">
|
|
<div className="w-full h-1.5 rounded-full mb-1" style={{ background: t.color }} />
|
|
<div className="text-[11px] text-[#6B7280]">{t.label}</div>
|
|
<div className="text-[14px] font-bold text-[#111827]">{data[i].count}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |