Skip to content
Snippets Groups Projects
Commit 332b2a05 authored by Emily Nicole Adams's avatar Emily Nicole Adams
Browse files

refactored some code, moved the quiz charts to the assessments tab

parent ad67d964
1 merge request!7Emily boex 07 - Rearranging charts & fixing the homepage statistics
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 3457 additions and 3454 deletions
src/components/BasicStatistics.js
+ 1
− 1
View file @ 332b2a05
import { Grid, Paper, Typography } from '@mui/material';
function BasicStatistics() {
//make json object here with fake info
let stats = [
{
id: 1,
......@@ -46,4 +45,5 @@ function BasicStatistics() {
</Grid>
);
}
export default BasicStatistics;
src/components/charts/AssessmentDistributionChart.js
+ 4
− 20
View file @ 332b2a05
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'],
},
],
};
function AssessmentDistributionChart({ data }) {
return (
<div
className="chart-container"
style={{ width: 40 + 'vw', padding: 50 + 'px' }}
>
<h2 style={{ textAlign: 'center' }}>Quiz Distribution</h2>
<h2 style={{ textAlign: 'center' }}>{data.datasets[0].label}</h2>
<Bar
data={chartData}
data={data}
options={{
scales: {
y: {
......@@ -45,7 +29,7 @@ function AssessmentDistributionChart() {
},
},
plugins: {
legend: { display: false },
legend: { display: true },
},
}}
/>
......
src/components/charts/GradeDistributionChart.js
+ 53
− 30
View file @ 332b2a05
import { FakeData } from '../../utils/Data';
import { Chart, registerables } from 'chart.js';
import { Bar } from 'react-chartjs-2';
import { data } from '../../utils/Data1';
Chart.register(...registerables);
function GradeDistributionChart() {
const chartData = {
labels: FakeData.map((data) => data.grade),
const chartOptions = {
scales: {
y: {
title: {
display: true,
text: 'Count',
},
beginAtZero: true,
},
x: {
title: {
display: true,
text: 'Grade',
},
},
},
plugins: {
legend: { display: true },
},
};
const gradeCounts = data.reduce(
(counts, d) => {
const grade = d['Overall Grade'] * 100;
if (grade >= 90) {
counts.A++;
} else if (grade >= 80) {
counts.B++;
} else if (grade >= 70) {
counts.C++;
} else if (grade >= 60) {
counts.D++;
} else {
counts.F++;
}
return counts;
},
{ A: 0, B: 0, C: 0, D: 0, F: 0 }
);
const overallData = {
labels: ['A', 'B', 'C', 'D', 'F'],
datasets: [
{
label: 'Grade Distribution Dataset',
data: FakeData.map((data) => data.count),
//add customization options here
backgroundColor: ['#ADD8E6', '#3CB371'],
label: 'Overall Grade Distribution',
data: [
gradeCounts.A,
gradeCounts.B,
gradeCounts.C,
gradeCounts.D,
gradeCounts.F,
],
backgroundColor: '#ADD8E6',
},
],
};
......@@ -23,29 +68,7 @@ function GradeDistributionChart() {
style={{ width: 50 + 'vw', padding: 50 + 'px' }}
>
<h2 style={{ textAlign: 'center' }}>Grade 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 },
},
}}
/>
<Bar data={overallData} options={chartOptions} />
</div>
);
}
......
src/components/charts/GradeDistributionQuiz.js deleted 100644 → 0
+ 0
− 117
View file @ ad67d964
import { data } from "../../utils/Data1";
import { Chart, registerables } from "chart.js";
import { Bar } from "react-chartjs-2";
Chart.register(...registerables);
function GradeDistributionQuiz() {
const chartOptions = {
scales: {
y: {
title: {
display: true,
text: "Grade",
},
beginAtZero: true,
suggestedMax: 100,
},
x: {
title: {
display: true,
text: "Email",
},
},
},
plugins: {
legend: { display: true },
},
};
const gradeCounts = data.reduce((counts, d) => {
const grade = d["Overall Grade"] * 100;
if (grade >= 90) {
counts.A++;
} else if (grade >= 80) {
counts.B++;
} else if (grade >= 70) {
counts.C++;
} else if (grade >= 60) {
counts.D++;
} else {
counts.F++;
}
return counts;
}, { A: 0, B: 0, C: 0, D: 0, F: 0 });
const overallData = {
labels: ["A", "B", "C", "D", "F"],
datasets: [
{
label: "Overall Grade Distribution",
data: [gradeCounts.A, gradeCounts.B, gradeCounts.C, gradeCounts.D, gradeCounts.F],
backgroundColor: "#ADD8E6",
},
],
};
const boundingData = {
labels: data.map((d) => d["Username"]),
datasets: [
{
label: "Grade on Bounding Constraints Quiz",
data: data.map((d) => d["Grade on Bounding Constraints Quiz"]*100),
backgroundColor: "#3CB371",
},
],
};
const desirabilityData = {
labels: data.map((d) => d["Username"]),
datasets: [
{
label: "Grade on Desirability Quiz",
data: data.map((d) => d["Grade on Desirability Quiz"]*100),
backgroundColor: "#FFC0CB",
},
],
};
const feasibilityData = {
labels: data.map((d) => d["Username"]),
datasets: [
{
label: "Grade on Feasibility Quiz",
data: data.map((d) => d["Grade on Feasibility Quiz"]*100),
backgroundColor: "#FFD700",
},
],
};
return (
<div>
<div style={{ display: "flex", justifyContent: "center", alignItems: "flex-start", flexDirection: "column" }}>
<div className="chart-container" style={{ width: "50vw", padding: "50px", margin: "0 auto" }}>
<h2 style={{ textAlign: "center" }}>Overall Grade Distribution</h2>
<Bar data={overallData} options={chartOptions} />
</div>
<div style={{ display: "flex", justifyContent: "center" }}>
<div className="chart-container" style={{ width: "33vw", padding: "50px" }}>
<h2 style={{ textAlign: "center" }}>Bounding Constraints Quiz Grade Distribution</h2>
<Bar data={boundingData} options={chartOptions} />
</div>
<div className="chart-container" style={{ width: "33vw", padding: "50px" }}>
<h2 style={{ textAlign: "center" }}>Desirability Quiz Grade Distribution</h2>
<Bar data={desirabilityData} options={chartOptions} />
</div>
<div className="chart-container" style={{ width: "33vw", padding: "50px" }}>
<h2 style={{ textAlign: "center" }}>Feasibility Quiz Grade Distribution</h2>
<Bar data={feasibilityData} options={chartOptions} />
</div>
</div>
</div>
</div>
);
}
export default GradeDistributionQuiz;
\ No newline at end of file
src/components/charts/MeanHighLow.js
+ 114
− 80
View file @ 332b2a05
import { data } from '../../utils/Data1.js';
import { Chart, registerables } from 'chart.js';
import { Line } from 'react-chartjs-2';
Chart.register(...registerables);
function GradeLineChart() {
// Calculating mean, high score, and low score for each quiz
const overallGradeData = data.map((datum) => parseFloat(datum['Overall Grade'])*100);
const overallGradeMean = overallGradeData.reduce((acc, val) => acc + val) / overallGradeData.length;
const overallGradeMax = Math.max(...overallGradeData);
const overallGradeMin = Math.min(...overallGradeData);
const boundingGradeData = data.map((datum) => parseFloat(datum['Grade on Bounding Constraints Quiz'])*100);
const boundingGradeMean = boundingGradeData.reduce((acc, val) => acc + val) / boundingGradeData.length;
const boundingGradeMax = Math.max(...boundingGradeData);
const boundingGradeMin = Math.min(...boundingGradeData);
const desirabilityGradeData = data.map((datum) => parseFloat(datum['Grade on Desirability Quiz'])*100);
const desirabilityGradeMean = desirabilityGradeData.reduce((acc, val) => acc + val) / desirabilityGradeData.length;
const desirabilityGradeMax = Math.max(...desirabilityGradeData);
const desirabilityGradeMin = Math.min(...desirabilityGradeData);
const feasibilityGradeData = data.map((datum) => parseFloat(datum['Grade on Feasibility Quiz'])*100);
const feasibilityGradeMean = feasibilityGradeData.reduce((acc, val) => acc + val) / feasibilityGradeData.length;
const feasibilityGradeMax = Math.max(...feasibilityGradeData);
const feasibilityGradeMin = Math.min(...feasibilityGradeData);
const chartData = {
labels: ['Overall', 'Bounding Constraints', 'Desirability', 'Feasibility'],
datasets: [
{
label: 'Mean Grade',
data: [overallGradeMean, boundingGradeMean, desirabilityGradeMean, feasibilityGradeMean],
borderColor: '#3CB371',
fill: false,
},
{
label: 'High Score',
data: [overallGradeMax, boundingGradeMax, desirabilityGradeMax, feasibilityGradeMax],
borderColor: '#ADD8E6',
fill: false,
},
{
label: 'Low Score',
data: [overallGradeMin, boundingGradeMin, desirabilityGradeMin, feasibilityGradeMin],
borderColor: '#FFA07A',
fill: false,
},
],
};
const chartOptions = {
scales: {
y: {
title: {
display: true,
text: 'Grade',
},
beginAtZero: true,
},
x: {
title: {
display: true,
text: 'Quiz',
},
},
},
};
return (
<div className='chart-container' style={{ width: 50 + 'vw', padding: 50 + 'px' }}>
<h2 style={{ textAlign: 'center' }}>Mean, High and Low Scores of Each Quiz</h2>
<Line data={chartData} options={chartOptions} />
</div>
);
}
export default GradeLineChart;
import { data } from '../../utils/Data1.js';
import { Chart, registerables } from 'chart.js';
import { Line } from 'react-chartjs-2';
Chart.register(...registerables);
function GradeLineChart() {
// Calculating mean, high score, and low score for each quiz
const overallGradeData = data.map(
(datum) => parseFloat(datum['Overall Grade']) * 100
);
const overallGradeMean =
overallGradeData.reduce((acc, val) => acc + val) / overallGradeData.length;
const overallGradeMax = Math.max(...overallGradeData);
const overallGradeMin = Math.min(...overallGradeData);
const boundingGradeData = data.map(
(datum) => parseFloat(datum['Grade on Bounding Constraints Quiz']) * 100
);
const boundingGradeMean =
boundingGradeData.reduce((acc, val) => acc + val) /
boundingGradeData.length;
const boundingGradeMax = Math.max(...boundingGradeData);
const boundingGradeMin = Math.min(...boundingGradeData);
const desirabilityGradeData = data.map(
(datum) => parseFloat(datum['Grade on Desirability Quiz']) * 100
);
const desirabilityGradeMean =
desirabilityGradeData.reduce((acc, val) => acc + val) /
desirabilityGradeData.length;
const desirabilityGradeMax = Math.max(...desirabilityGradeData);
const desirabilityGradeMin = Math.min(...desirabilityGradeData);
const feasibilityGradeData = data.map(
(datum) => parseFloat(datum['Grade on Feasibility Quiz']) * 100
);
const feasibilityGradeMean =
feasibilityGradeData.reduce((acc, val) => acc + val) /
feasibilityGradeData.length;
const feasibilityGradeMax = Math.max(...feasibilityGradeData);
const feasibilityGradeMin = Math.min(...feasibilityGradeData);
const chartData = {
labels: ['Overall', 'Bounding Constraints', 'Desirability', 'Feasibility'],
datasets: [
{
label: 'Mean Grade',
data: [
overallGradeMean,
boundingGradeMean,
desirabilityGradeMean,
feasibilityGradeMean,
],
borderColor: '#3CB371',
fill: false,
},
{
label: 'High Score',
data: [
overallGradeMax,
boundingGradeMax,
desirabilityGradeMax,
feasibilityGradeMax,
],
borderColor: '#ADD8E6',
fill: false,
},
{
label: 'Low Score',
data: [
overallGradeMin,
boundingGradeMin,
desirabilityGradeMin,
feasibilityGradeMin,
],
borderColor: '#FFA07A',
fill: false,
},
],
};
const chartOptions = {
scales: {
y: {
title: {
display: true,
text: 'Grade',
},
beginAtZero: true,
},
x: {
title: {
display: true,
text: 'Quiz',
},
},
},
};
return (
<div
className="chart-container"
style={{ width: 50 + 'vw', padding: 50 + 'px' }}
>
<h2 style={{ textAlign: 'center' }}>
Mean, High and Low Scores of Each Quiz
</h2>
<Line data={chartData} options={chartOptions} />
</div>
);
}
export default GradeLineChart;
src/components/charts/ZeroScoreChart.js
+ 75
− 60
View file @ 332b2a05
import { data } from "../../utils/Data1";
import { Chart, registerables } from "chart.js";
import { Pie } from "react-chartjs-2";
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>
<h1 style={{ textAlign: "center", margin: "50px 0" }}>Most Missed Questions in Each Quiz</h1>
<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;
\ No newline at end of file
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;
src/components/pages/Assessments.js
+ 87
− 16
View file @ 332b2a05
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>
<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 />
</Grid>
<Grid container xs={6} justifyContent="center">
<AssessmentDistributionChart />
</Grid>
<Grid container xs={6} justifyContent="center">
<AssessmentDistributionChart />
</Grid>
<Grid container xs={6} justifyContent="center">
<AssessmentDistributionChart />
<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>
</Grid>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<ZeroScoreChart />
<LineGraph />
</div>
</div>
);
}
......
src/components/pages/Home.js
+ 16
− 21
View file @ 332b2a05
import CourseTitle from "../CourseTitle";
import BasicStatistics from "../BasicStatistics";
import GradeDistributionChart from "../charts/GradeDistributionChart";
import GradeDistributionQuiz from "../charts/GradeDistributionQuiz";
import ZeroScoreChart from "../charts/ZeroScoreChart";
import LineGraph from "../charts/MeanHighLow";
import CourseTitle from '../CourseTitle';
import BasicStatistics from '../BasicStatistics';
import GradeDistributionChart from '../charts/GradeDistributionChart';
import {Box} from "@mui/material";
import { Box } from '@mui/material';
function Home() {
return (
<Box display="flex"
justifyContent="center"
alignItems="center"
flexDirection="column">
<CourseTitle/>
<BasicStatistics/>
<GradeDistributionChart/>
<GradeDistributionQuiz/>
<ZeroScoreChart/>
<LineGraph/>
</Box>
);
return (
<Box
display="flex"
justifyContent="center"
alignItems="center"
flexDirection="column"
>
<CourseTitle />
<BasicStatistics />
<GradeDistributionChart />
</Box>
);
}
export default Home;
src/utils/Data1.js
+ 1555
− 1557
View file @ 332b2a05
This diff is collapsed.
src/utils/csvToPy.json
+ 1552
− 1552
View file @ 332b2a05
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment