import {FakeData} from "../../utils/Data";
import {Chart, registerables} from 'chart.js';
import {Bar} from "react-chartjs-2";

Chart.register(...registerables);

function AssessmentDistributionChart() {
    /*TODO this is repeated code... need to make an actual quiz grade distribution chart.
    *  I just did this to get the layout correct on the assessments page.*/

    const chartData = {
        labels: FakeData.map((data) => data.grade),
        datasets: [{
            label: "Problem Distribution Dataset",
            data: FakeData.map((data) => data.count),
            //add customization options here
            backgroundColor: [
                "#ADD8E6",
                "#3CB371"
            ],
        }]
    };

    return (
        <div className="chart-container" style={{width: 40 + 'vw', padding: 50 + 'px'}}>
            <h2 style={{textAlign: "center"}}>Quiz Distribution</h2>
            <Bar
                data={chartData}
                options={{
                    scales: {
                        y: {
                            title: {
                                display: true,
                                text: "Count",
                            },
                            beginAtZero: true
                        },
                        x: {
                            title: {
                                display: true,
                                text: "Grade",
                            },
                        }
                    },
                    plugins: {
                        legend: {display: false}
                    }
                }}
            />
        </div>
    );
}

export default AssessmentDistributionChart;