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> <br><br>
</form> </form>
</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--> <!--Bar graph stuff-->
<canvas id="gradeBar" style="width:100%;max-width:700px"></canvas> <canvas id="gradeBar"></canvas>
</div> </div>
</div> </div>
<script src='main.js'></script> <script src='main.js'></script>

251
main.css
View File

@@ -3,124 +3,133 @@
*/ */
/* General Styles */ /* General Styles */
body { body {
font-family: 'Helvetica Neue', sans-serif; font-family: 'Helvetica Neue', sans-serif;
background: rgb(27,26,42); background: rgb(27, 26, 42);
background: linear-gradient(90deg, rgba(61,87,92,1) 0%, rgb(69, 68, 84) 100%); background: linear-gradient(90deg, rgba(61, 87, 92, 1) 0%, rgb(69, 68, 84) 100%);
} }
a { a {
color: #2c82c9; color: #2c82c9;
text-decoration: none; text-decoration: none;
} }
/* Header Styles */ /* Header Styles */
header { header {
background-color: #2c82c9; background-color: #2c82c9;
color: #ffffff; color: #ffffff;
padding: 20px; padding: 20px;
} }
header h1 { header h1 {
font-size: 48px; font-size: 48px;
margin: 0; margin: 0;
} }
header h2 { header h2 {
font-size: 24px; font-size: 24px;
margin: 0; margin: 0;
} }
/* Navigation Styles */ /* Navigation Styles */
nav { nav {
background-color: #ffffff; background-color: #ffffff;
padding: 20px; padding: 20px;
} }
nav ul { nav ul {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
nav li { nav li {
display: inline-block; display: inline-block;
margin-right: 20px; margin-right: 20px;
} }
nav a { nav a {
color: #333333; color: #333333;
font-size: 18px; font-size: 18px;
text-decoration: none; text-decoration: none;
} }
nav a:hover { nav a:hover {
color: #2c82c9; color: #2c82c9;
} }
/* Main Content Styles */ /* Main Content Styles */
main { main {
padding: 20px; padding: 20px;
} }
main h1 { main h1 {
font-size: 36px; font-size: 36px;
margin: 0 0 20px 0; margin: 0 0 20px 0;
} }
main p { main p {
font-size: 18px; font-size: 18px;
line-height: 1.5; line-height: 1.5;
margin: 0 0 20px 0; margin: 0 0 20px 0;
} }
/* Footer Styles */ /* Footer Styles */
footer { footer {
background-color: #2e2d2d; background-color: #2e2d2d;
color: #ffffff; color: #ffffff;
padding: 20px; padding: 20px;
text-align: center; text-align: center;
} }
footer p { footer p {
font-size: 18px; font-size: 18px;
margin: 0; margin: 0;
} }
/* Backgrund stuffs*/ /* Backgrund stuffs*/
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
.bg { .bg {
/* The image used */ /* The image used */
background-image: url("tempbg.png"); background-image: url("tempbg.png");
/* Add the blur effect */ /* Add the blur effect */
filter: blur(8px); filter: blur(8px);
-webkit-filter: blur(8px); -webkit-filter: blur(8px);
/* Full height */ /* Full height */
height: 100%; height: 100%;
/* Center and scale the image nicely */ /* Center and scale the image nicely */
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
/* Position text in the middle of the page/image */ /* Position text in the middle of the page/image */
.bg-text { .bg-text {
background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgb(0, 0, 0);
background-color: rgba(0,0,0, 0.4); /* opacity/see-through */ /* Fallback color */
color: white; background-color: rgba(0, 0, 0, 0.4);
font-weight: bold; /* opacity/see-through */
border: 3px solid #f1f1f1; color: white;
position: absolute; font-weight: bold;
top: 50%; border: 3px solid #f1f1f1;
left: 50%; position: absolute;
transform: translate(-50%, -50%); top: 50%;
z-index: 2; left: 50%;
width: 80%; transform: translate(-50%, -50%);
padding: 20px; z-index: 2;
text-align: center; width: 80%;
} padding: 20px;
text-align: center;
}
.chart-container {
position: relative;
margin: auto;
height: 80vh;
width: 80vw;
}

65
main.js
View File

@@ -1,9 +1,11 @@
const submitButton = document.getElementById('subBut'); const submitButton = document.getElementById('subBut');
submitButton.addEventListener("click", parseName); submitButton.addEventListener("click", parseName);
var barChart = document.querySelector('#grades'); var chartDiv = document.querySelector('#grades');
if(barChart.getAttribute('value') == 'invisible'){ if(chartDiv.getAttribute('value') == 'invisible'){
barChart.style.display = 'none'; chartDiv.style.display = 'none';
} }
var gradeChart;
const ctx = document.getElementById("gradeBar");
/* /*
Parse the name Parse the name
@@ -78,16 +80,38 @@ async function PapaParse(department, num, name) {
// console.log(selectedClass[i]["Count of letter grade"]); // console.log(selectedClass[i]["Count of letter grade"]);
} }
console.log(gradeDist); console.log(gradeDist);
loadChart(gradeDist); if(gradeChart) {
barChart.style.display = ''; 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 = '';
}
} }
var randomColorGenerator = function () {
return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
};
function loadChart(gradeDist) { function loadChart(gradeDist) {
const ctx = document.getElementById("gradeBar"); gradeChart = new Chart(ctx, {
new Chart(ctx, {
type: 'bar', type: 'bar',
data: { data: {
labels: [ labels: [
@@ -106,17 +130,26 @@ function loadChart(gradeDist) {
datasets: [{ datasets: [{
label: 'Grade Distribution', label: 'Grade Distribution',
data: Object.values(gradeDist), data: Object.values(gradeDist),
borderWidth: 1, borderWidth: 3,
// borderColor: '#36A2EB', 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)", ""], 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: { options: {
scales: { maintainAspectRatio: false,
y: { scales: {
beginAtZero: true y: {
stacked: true,
grid: {
display: true,
}
},
x: {
grid: {
display: false
}
}
} }
} }
}
}); });
} }