Assessments.js

import AssessmentDistributionChart from '../charts/AssessmentDistributionChart.js';
import { Grid, Typography } from '@mui/material';
import { data } from '../../utils/Data1';
import ZeroScoreChart from '../charts/ZeroScoreChart';
import LineGraph from '../charts/MeanHighLow';

function getGradeCounts(quizName) {
  return data.reduce(
    (counts, d) => {
      const grade = d[quizName] * 100;
      if (grade >= 90) {
        counts[0]++;
      } else if (grade >= 80) {
        counts[1]++;
      } else if (grade >= 70) {
        counts[2]++;
      } else if (grade >= 60) {
        counts[3]++;
      } else {
        counts[4]++;
      }
      return counts;
    },
    [0, 0, 0, 0, 0]
  );
}

function Assessments() {
  const gradeLabels = ['A', 'B', 'C', 'D', 'F'];

  const boundingData = {
    labels: gradeLabels,
    datasets: [
      {
        label: 'Grade on Bounding Constraints Quiz',
        data: getGradeCounts('Grade on Bounding Constraints Quiz'),
        backgroundColor: '#3CB371',
      },
    ],
  };

  const desirabilityData = {
    labels: gradeLabels,
    datasets: [
      {
        label: 'Grade on Desirability Quiz',
        data: getGradeCounts('Grade on Desirability Quiz'),
        backgroundColor: '#FFC0CB',
      },
    ],
  };

  const feasibilityData = {
    labels: gradeLabels,
    datasets: [
      {
        label: 'Grade on Feasibility Quiz',
        data: getGradeCounts('Grade on Feasibility Quiz'),
        backgroundColor: '#FFD700',
      },
    ],
  };

  return (
    <div>
      <div>
        <Typography
          variant="h2"
          sx={{ textAlign: 'center', padding: 20 + 'px' }}
        >
          Grade Distribution by Assessment
        </Typography>
        <Grid container justifyContent="center">
          <Grid container xs={6} justifyContent="center">
            <AssessmentDistributionChart data={boundingData} />
          </Grid>
          <Grid container xs={6} justifyContent="center">
            <AssessmentDistributionChart data={desirabilityData} />
          </Grid>
          <Grid container xs={6} justifyContent="center">
            <AssessmentDistributionChart data={feasibilityData} />
          </Grid>
        </Grid>
      </div>
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
        }}
      >
        <ZeroScoreChart />
        <LineGraph />
      </div>
    </div>
  );
}

export default Assessments;