feat: adding distribution graph in course details page

[ImJustChew]

import React from 'react';
import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid } from 'recharts';

const NormalDistributionChart = ({ std, mean, range }) => {
    const calculateY = (x) => {
        // Normal distribution formula
        return (1 / (std * Math.sqrt(2 * Math.PI))) * Math.exp(-0.5 * ((x - mean) / std) ** 2);
    };

    const generateData = () => {
        const data = [];
        const [min, max] = range === 'percent' ? [0, 100] : [0, 4.3];
        const step = (max - min) / 1000;

        for (let x = min; x <= max; x += step) {
            data.push({
                x: x.toFixed(2),
                y: calculateY(x),
            });
        }
        return data;
    };

    const data = generateData();

    return (
        <LineChart width={600} height={300} data={data}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
            <XAxis dataKey="x" label={{ value: range === 'percent' ? "Grade (%)" : "GPA", position: 'insideBottomRight', offset: 0 }} />
            <YAxis />
            <Tooltip />
            <CartesianGrid strokeDasharray="3 3" />
            <Line type="monotone" dataKey="y" stroke="#8884d8" fill="#8884d8" />
        </LineChart>
    );
};

export default NormalDistributionChart;