ZeroScoreChart.js

import { data } from '../../utils/Data1';
import { Chart, registerables } from 'chart.js';
import { Pie } from 'react-chartjs-2';
import { Typography } from '@mui/material';

Chart.register(...registerables);

function ZeroScoreChart() {
  const quizzes = [
    'Bounding Constraint Quiz',
    'Desirability Quiz',
    'Feasibility Quiz',
  ];

  const chartData = quizzes.map((quiz) => {
    const questions = ['Q1', 'Q2', 'Q3', 'Q4', 'Q5', 'Q6', 'Q7'];
    const dataByQuestion = questions.map((question) => {
      const count = data.filter(
        (d) => d[`${quiz} - ${question} (Earned)`] === '0'
      ).length;
      return { question: question, count: count };
    });

    return {
      labels: dataByQuestion.map((d) => d.question),
      datasets: [
        {
          label: `0 Scores in ${quiz}`,
          data: dataByQuestion.map((d) => d.count),
          backgroundColor: [
            '#FF6384',
            '#36A2EB',
            '#FFCE56',
            '#4BC0C0',
            '#9966FF',
            '#FF8F00',
            '#2E8B57',
          ],
        },
      ],
    };
  });

  return (
    <div style={{ textAlign: 'center' }}>
      <Typography variant="h3" sx={{ marginTop: '25px' }}>
        Most Missed Questions in Each Quiz
      </Typography>
      <div
        className="chart-container"
        style={{ display: 'flex', justifyContent: 'center', padding: '50px' }}
      >
        {chartData.map((data, index) => (
          <div key={index} style={{ width: '30vw', marginRight: '20px' }}>
            <h2 style={{ textAlign: 'center' }}>{quizzes[index]}</h2>
            <Pie
              data={data}
              options={{
                plugins: {
                  title: {
                    display: true,
                    text: `Most Missed Questions in ${quizzes[index]}`,
                  },
                  legend: { display: true },
                },
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

export default ZeroScoreChart;