I have 3 charts.
- Motivational Interview
- Tech Interview
- Coding Assignment
I am using Rechart in React app. I am rendering 3 charts with two sets of data(fetching from an api). But one chart (Coding assignment) is not displaying. (It displays the else mesage I set even though it fetched data and works until combinedData
portion but it's not setting the state!) But If I remove any of two charts (1/2) or remove both then Coding assignment Chart renders perfectly fine. What am I doing wrong?
Here's my code. Parent Component:
<div className="flex">
<RadarChartComponent
skillUrl={`${conf.API_BASE_URL}/prospect/soft-skills/interview/${id}`}
avgMarksUrl={`${conf.API_BASE_URL}/prospect/get/softskill/avgmarks/interview`}
title="Motivational Interview"
/>
<RadarChartComponent
skillUrl={`${conf.API_BASE_URL}/prospect/hard-skills/interview/${id}/tech-interview`}
avgMarksUrl={`${conf.API_BASE_URL}/prospect/get/avgmarks/tech-interview`}
title="Tech Interview"
/>
<RadarChartComponent
skillUrl={`${conf.API_BASE_URL}/prospect/assignment/interview/${id}/coding-assignment`}
avgMarksUrl={`${conf.API_BASE_URL}/prospect/get/avgmarks/coding-assignment`}
title="Coding Assignment"
/>
</div>
And here is my Radar chart component.
function RadarChartComponent({
skillUrl,
avgMarksUrl,
title,
}: {
skillUrl: string;
avgMarksUrl: string;
title: string;
}) {
const [loader, setLoader] = useState(false);
const [skillData, setSkillData] = useState<any[]>([]);
useEffect(() => {
console.log(`welcome to radar chart ${title}`);
async function fetchData() {
try {
setLoader(true);
// Fetch soft skill data
const softSkillResponse = await serverFetch("get", skillUrl);
const skillData: any[] = softSkillResponse;
console.log(`checking skills ${title}`, softSkillResponse)
// Fetch average marks data
const avgMarksResponse = await serverFetch("get", avgMarksUrl);
const avgMarksData: any[] = avgMarksResponse;
console.log(`checking avg skills ${title}`, avgMarksData);
//Combine the two datasets
const combinedData: any[] = skillData.map((skill, index) => {
return {
...skill,
averageMarks: avgMarksData[index].marks,
};
});
setSkillData(combinedData);
console.log(`"combined data" ${title}`, skillData)
setLoader(false);
} catch (error) {
setLoader(false);
}
}
fetchData();
}, []);
return (
<div className="chart-container text-center mb-1">
<h2 className="chart-title">{title}</h2>
<div style={{ width: "100%", height: "200px" }}>
{loader ? (
<Skeleton.Avatar size={164} active />
) : (
<>
{skillData.length > 0 ? (
<ResponsiveContainer>
<RadarChart
cx="50%"
cy="50%"
outerRadius="80%"
data={skillData}
>
<PolarGrid />
<PolarAngleAxis dataKey="name" tick={{ fontSize: "small" }} />
<PolarRadiusAxis domain={[0, 10]} />
{/*
//! TODO: Need to fix the tooltip!
<Tooltip
cursor={{ strokeDasharray: "3 3" }}
content={<CustomRadarTooltip />}
/>
*/}
<Radar
name="Soft Skills"
dataKey="marks"
stroke="#0088FF"
fill="#0088FF"
fillOpacity={0.6}
/>
<Radar
name="Average Marks"
dataKey="averageMarks"
stroke="#FF0000"
fill="#FF0000"
fillOpacity={0.6}
/>
</RadarChart>
</ResponsiveContainer>
) : (
<p>No data available for {title}.</p>
)}
</>
)}
</div>
</div>
);
}