Newer
Older
import { FakeData } from '../../utils/Data';
import { Chart, registerables } from 'chart.js';
import { Bar } from 'react-chartjs-2';
Emily Nicole Adams
committed
Emily Nicole Adams
committed
Chart.register(...registerables);
Emily Nicole Adams
committed
Emily Nicole Adams
committed
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'],
},
],
};
Emily Nicole Adams
committed
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>
);
Emily Nicole Adams
committed
}
Emily Nicole Adams
committed