DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Beautiyf

Browse Source
This commit is contained in:
HW Computer
2023-04-21 16:31:34 -05:00
parent ca78e1dea8
commit f7ddf94d7d
3 changed files with 181 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@@ -58,9 +58,9 @@
<br><br>
</form>
</form>
<div id="grades" value="invisible" class="center" style="width:800px; margin:0 auto;">
<div class="chart-container" id="grades" value="invisible" class="center" style="position: relative; height:40vh; width:80vw">
<!--Bar graph stuff-->
<canvas id="gradeBar" style="width:100%;max-width:700px"></canvas>
<canvas id="gradeBar"></canvas>
</div>
</div>
<script src='main.js'></script>

13
main.css
View File

@@ -110,8 +110,10 @@ body {
/* Position text in the middle of the page/image */
.bg-text {
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0,0,0, 0.4); /* opacity/see-through */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* opacity/see-through */
color: white;
font-weight: bold;
border: 3px solid #f1f1f1;
@@ -124,3 +126,10 @@ body {
padding: 20px;
text-align: center;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}

59
main.js
View File

@@ -1,9 +1,11 @@
const submitButton = document.getElementById('subBut');
submitButton.addEventListener("click", parseName);
var barChart = document.querySelector('#grades');
if(barChart.getAttribute('value') == 'invisible'){
barChart.style.display = 'none';
var chartDiv = document.querySelector('#grades');
if(chartDiv.getAttribute('value') == 'invisible'){
chartDiv.style.display = 'none';
}
var gradeChart;
const ctx = document.getElementById("gradeBar");
/*
Parse the name
@@ -78,16 +80,38 @@ async function PapaParse(department, num, name) {
// console.log(selectedClass[i]["Count of letter grade"]);
}
console.log(gradeDist);
loadChart(gradeDist);
barChart.style.display = '';
}
var randomColorGenerator = function () {
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
if(gradeChart) {
gradeChart.config.data = {
labels: [
'A',
'A-',
'B+',
'B',
'B-',
'C+',
'C',
'C-',
'D+',
'D',
'D-',
'F'],
datasets: [{
label: 'Grade Distribution',
data: Object.values(gradeDist),
borderWidth: 3,
// borderColor: '#36A2EB',
backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""],
}]
};
gradeChart.update();
} else {
loadChart(gradeDist);
chartDiv.style.display = '';
}
}
function loadChart(gradeDist) {
const ctx = document.getElementById("gradeBar");
new Chart(ctx, {
gradeChart = new Chart(ctx, {
type: 'bar',
data: {
labels: [
@@ -106,15 +130,24 @@ function loadChart(gradeDist) {
datasets: [{
label: 'Grade Distribution',
data: Object.values(gradeDist),
borderWidth: 1,
// borderColor: '#36A2EB',
borderWidth: 3,
barThickness: 50,
backgroundColor: ["rgb(98, 244, 54)", "rgb(129, 231, 10)", "rgb(151, 218, 0)", "rgb(168, 204, 0)", "rgb(181, 190, 0)", "rgb(191, 176, 0)", "rgb(199, 162, 0)", "rgb(205, 148, 0)", "rgb(209, 133, 0)", "rgb(211, 119, 0)", "rgb(210, 105, 0)", "rgb(208, 91, 23)", "rgb(204, 78, 36)", "rgb(198, 66, 46)", "rgb(190, 54, 54)", ""],
}]
},
options: {
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
stacked: true,
grid: {
display: true,
}
},
x: {
grid: {
display: false
}
}
}
}