Spaces:
Sleeping
Sleeping
File size: 3,980 Bytes
59f9574 ea9ca44 84d4394 ea9ca44 59f9574 84d4394 59f9574 ea9ca44 59f9574 ea9ca44 59f9574 ea9ca44 59f9574 ea9ca44 59f9574 84d4394 59f9574 84d4394 ea9ca44 59f9574 84d4394 ea9ca44 84d4394 59f9574 ea9ca44 59f9574 ea9ca44 84d4394 59f9574 84d4394 ea9ca44 59f9574 ea9ca44 59f9574 ea9ca44 59f9574 ea9ca44 84d4394 59f9574 ea9ca44 59f9574 ea9ca44 59f9574 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
import React, { useMemo } from 'react';
import { motion } from 'framer-motion';
const ExperienceChart = ({ applicants = [] }) => {
const avgExperience = useMemo(() => {
console.log("📊 Applications received:", applicants);
if (!applicants || applicants.length === 0) {
return "0.0";
}
let totalExp = 0;
applicants.forEach((app, index) => {
const rawExp = app?.experience;
console.log(`🔍 Applicant [${index}] experience:`, rawExp);
const exp = parseFloat(rawExp);
if (!isNaN(exp)) {
totalExp += exp;
}
});
console.log("📈 Total Experience:", totalExp);
console.log("👥 Total Candidates:", applicants.length);
const avg = applicants.length > 0 ? totalExp / applicants.length : 0;
return avg.toFixed(1);
}, [applicants]);
return (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '100%'
}}>
<div style={{
position: 'relative',
width: '160px',
height: '160px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}}>
<svg
viewBox="0 0 36 36"
style={{
width: '100%',
height: '100%',
transform: 'rotate(-90deg)'
}}
>
<path
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="rgba(255,255,255,0.1)"
strokeWidth="3"
/>
<motion.path
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"
fill="none"
stroke="#EF4444"
strokeWidth="3"
strokeLinecap="round"
initial={{ pathLength: 0 }}
animate={{
pathLength: Math.min(parseFloat(avgExperience) / 10, 1)
}}
transition={{ duration: 1.5, ease: "easeOut" }}
/>
</svg>
<div style={{
position: 'absolute',
textAlign: 'center',
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}}>
<motion.span
initial={{ opacity: 0, scale: 0.5 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ delay: 0.2 }}
style={{
fontSize: '2.5rem',
fontWeight: 'bold',
color: 'white',
lineHeight: '1'
}}
>
{avgExperience}
</motion.span>
<span style={{
fontSize: '0.875rem',
color: '#9ca3af',
marginTop: '0.25rem'
}}>
Avg. Years
</span>
</div>
</div>
<p style={{
textAlign: 'center',
fontSize: '0.85rem',
color: '#6b7280',
marginTop: '1rem'
}}>
Based on application data
</p>
</div>
);
};
export default ExperienceChart;
|