b18f8b32a1
- /bdd/notehub.sql - /doc/cahierdescharges.pdf - /html/notes.php - /html/profil.php - /html/register.php - /html/style.css - /html/addcas.php - /html/admin.php - /html/colormode.php - /html/data_usage.php - /html/devoirs.php - /html/favicon.ico - /html/index.php - /html/login.php - /html/logout.php - /html/main.js - /html/img/notehub1.png - /html/img/notehub2.png - /html/img/default_pp.jpg - /html/img/logo.png - /html/img/notehub.png - /html/img/notehub0.png - /include/connect.php - /include/functions.php - /include/config.php - /log/notehub.log
309 lines
8.2 KiB
JavaScript
309 lines
8.2 KiB
JavaScript
function colormode(mode) {
|
|
const profiles = {
|
|
0:["#0D1117", "#0D1117", "#161B22", "#171D24", "#ECF6FF", "#E1EAF3", "#BEC6CD", "#BEC6CD", "dark"],
|
|
1:["#EFF3F4", "#F7F9F9", "#FFFFFF", "#EFF1F1", "#0F1419", "#454A4F", "#0F1419", "#ACB3B3", "light"],
|
|
2:["#FF0000", "#FF8800", "#FFFF00", "#88FF00", "#00FF00", "#00FFFF", "#0000FF", "#8800FF", "dark"]
|
|
}
|
|
var r = document.querySelector('body');
|
|
r.style.setProperty('--nav-bg', profiles[mode][0]);
|
|
r.style.setProperty('--table-bg', profiles[mode][1]);
|
|
r.style.setProperty('--background', profiles[mode][2]);
|
|
r.style.setProperty('--link-hover-bg', profiles[mode][3]);
|
|
r.style.setProperty('--text-color', profiles[mode][4]);
|
|
r.style.setProperty('--link-color', profiles[mode][5]);
|
|
r.style.setProperty('--title-color', profiles[mode][6]);
|
|
r.style.setProperty('--table-corder', profiles[mode][7]);
|
|
r.style.setProperty('--graphtheme', profiles[mode][8]);
|
|
}
|
|
|
|
function ressourceChart(ue, name) {
|
|
|
|
const moyennes = [];
|
|
const labels = [];
|
|
const colors = [];
|
|
const palette = ["#ca1414", "#ca1414", "#ca1414", "#ca1414", "#ea1818", "#ea1818", "#ea1818", "#ea1818", "#eb6b17", "#ebb117", "#ebe117", "#e5eb17", "#d8eb17", "#cbeb17","#bfeb17", "#9feb17", "#6ceb17", "#2dde15", "#28c513", "#13be7f", "#7013bf"];
|
|
|
|
// Récupération des moyennes et des labels pour chaque ressource
|
|
ue = data.relevé.ues[ue]
|
|
for (const ressource in ue.ressources) {
|
|
var moyenne = ue.ressources[ressource].moyenne
|
|
if (moyenne == "~") {
|
|
moyenne = "0";
|
|
}
|
|
moyennes.push(moyenne);
|
|
labels.push([`${data.relevé.ressources[ressource].titre} (${ue.ressources[ressource].coef})`]);
|
|
colors.push(palette[Math.round(parseInt(moyenne))]);
|
|
}
|
|
for (const sae in ue.saes) {
|
|
var moyenne = ue.saes[sae].moyenne
|
|
if (moyenne == "~") {
|
|
moyenne = "0";
|
|
}
|
|
moyennes.push(moyenne);
|
|
labels.push([`${data.relevé.saes[sae].titre} (${ue.saes[sae].coef})`]);
|
|
colors.push(palette[Math.round(parseInt(moyenne))]);
|
|
}
|
|
|
|
// Options pour le graphe
|
|
const options = {
|
|
series: [{
|
|
name: "Moyenne",
|
|
data: moyennes
|
|
},],
|
|
chart: {
|
|
type: 'bar',
|
|
height: 400,
|
|
width: 800,
|
|
background: getComputedStyle(document.body).getPropertyValue('--background'),
|
|
foreColor: getComputedStyle(document.body).getPropertyValue('--text-color')
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
distributed: true,
|
|
borderRadius: 2,
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
colors: colors,
|
|
annotations: {
|
|
yaxis: [{
|
|
y: 0,
|
|
y2: 8,
|
|
borderColor: '#b62828',
|
|
fillColor: '#b62828',
|
|
opacity: 0.2,
|
|
},{
|
|
y: 8,
|
|
y2: 10,
|
|
borderColor: '#deb62f',
|
|
fillColor: '#deb62f',
|
|
opacity: 0.2,
|
|
}]
|
|
},
|
|
xaxis: {
|
|
categories: labels
|
|
},
|
|
yaxis: {
|
|
max: 20
|
|
},
|
|
title: {
|
|
text: name,
|
|
align: 'center',
|
|
margin: 10,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
floating: false,
|
|
style: {
|
|
fontSize: '20px',
|
|
fontWeight: 'bold',
|
|
fontFamily: undefined,
|
|
color: getComputedStyle(document.body).getPropertyValue('--title-color')
|
|
},
|
|
},
|
|
theme: {
|
|
mode: 'dark'
|
|
}
|
|
};
|
|
options.theme.mode = getComputedStyle(document.body).getPropertyValue('--graphtheme');
|
|
console.log(getComputedStyle(document.body).getPropertyValue('--graphtheme'));
|
|
return options;
|
|
}
|
|
|
|
function uesChart(data, name) {
|
|
|
|
const moyennes = [];
|
|
const labels = [];
|
|
const colors = [];
|
|
const palette = ["#ca1414", "#ca1414", "#ca1414", "#ca1414", "#ea1818", "#ea1818", "#ea1818", "#ea1818", "#eb6b17", "#ebb117", "#ebe117", "#e5eb17", "#d8eb17", "#cbeb17","#bfeb17", "#9feb17", "#6ceb17", "#2dde15", "#28c513", "#13be7f", "#7013bf"];
|
|
|
|
|
|
// Récupération des moyennes et des labels pour chaque ressource
|
|
for (const ue in data.relevé.ues) {
|
|
moyenne = data.relevé.ues[ue].moyenne.value
|
|
if (moyenne == "~") {
|
|
moyenne = "0"
|
|
}
|
|
moyennes.push(data.relevé.ues[ue].moyenne.value);
|
|
labels.push([`${ue}`]);
|
|
colors.push(palette[parseInt(moyenne, 10)])
|
|
}
|
|
|
|
// Options pour le graphe
|
|
const options = {
|
|
series: [{
|
|
name: "Moyenne",
|
|
data: moyennes
|
|
}],
|
|
chart: {
|
|
type: "bar",
|
|
height: 400,
|
|
width: 800,
|
|
background: getComputedStyle(document.body).getPropertyValue('--background'),
|
|
foreColor: getComputedStyle(document.body).getPropertyValue('--text-color')
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
horizontal: false,
|
|
distributed: true,
|
|
endingShape: 'rounded',
|
|
}
|
|
},
|
|
legend: {
|
|
show: false
|
|
},
|
|
colors: colors,
|
|
annotations: {
|
|
yaxis: [{
|
|
y: 0,
|
|
y2: 8,
|
|
borderColor: '#b62828',
|
|
fillColor: '#b62828',
|
|
opacity: 0.2,
|
|
},{
|
|
y: 8,
|
|
y2: 10,
|
|
borderColor: '#deb62f',
|
|
fillColor: '#deb62f',
|
|
opacity: 0.2,
|
|
}]
|
|
},
|
|
xaxis: {
|
|
categories: labels
|
|
},
|
|
yaxis: {
|
|
max: 20
|
|
},
|
|
title: {
|
|
text: name,
|
|
align: 'center',
|
|
margin: 10,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
floating: false,
|
|
style: {
|
|
fontSize: '20px',
|
|
fontWeight: 'bold',
|
|
fontFamily: undefined,
|
|
color: getComputedStyle(document.body).getPropertyValue('--title-color')
|
|
},
|
|
},
|
|
theme: {
|
|
mode: 'dark',
|
|
palette: 'palette1',
|
|
}
|
|
};
|
|
options.theme.mode = getComputedStyle(document.body).getPropertyValue('--graphtheme');
|
|
return options;
|
|
}
|
|
|
|
function absencesChart(data) {
|
|
|
|
const absences = data.relevé.semestre.absences.total;
|
|
const absences_injustifie = data.relevé.semestre.absences.injustifie;
|
|
const abs_percent = (absences_injustifie/5)*100;
|
|
var color;
|
|
if (absences <= 1) {
|
|
color = "#23A100"
|
|
} else if (absences == 2) {
|
|
color = "#00FF00"
|
|
} else if (absences == 3) {
|
|
color = "#FFFF00"
|
|
} else if (absences == 4) {
|
|
color = "#FF7500"
|
|
} else if (absences >= 5) {
|
|
color = "#FF0000"
|
|
};
|
|
const options = {
|
|
chart: {
|
|
height: 400,
|
|
type: "radialBar",
|
|
},
|
|
series: [abs_percent],
|
|
colors: [color],
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
track: {
|
|
background: getComputedStyle(document.body).getPropertyValue('--table-bg'),
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
offsetY: 10,
|
|
fontSize: "30px",
|
|
show: true,
|
|
label: "Absences"
|
|
},
|
|
value: {
|
|
fontSize: "10px",
|
|
show: false,
|
|
color: getComputedStyle(document.body).getPropertyValue('--title-color'),
|
|
}
|
|
}
|
|
}
|
|
},
|
|
labels: [[`${absences_injustifie}/${absences}`]],
|
|
stroke: {
|
|
lineCap: "round"
|
|
}
|
|
};
|
|
|
|
// Options pour le graphe
|
|
|
|
return options;
|
|
}
|
|
function rangChart(data) {
|
|
|
|
const rang = parseInt(data.relevé.semestre.rang.value, 10);
|
|
const total = data.relevé.semestre.rang.total;
|
|
const rang_percent = 100-((rang/total)*100);
|
|
const colors = ["#ca1414", "#ca1414", "#ca1414", "#ca1414", "#ea1818", "#ea1818", "#ea1818", "#ea1818", "#eb6b17", "#ebb117", "#ebe117", "#e5eb17", "#d8eb17", "#cbeb17","#bfeb17", "#9feb17", "#6ceb17", "#2dde15", "#28c513", "#13be7f", "#7013bf"];
|
|
var color_pos = Math.round(rang_percent/5);
|
|
var color = colors[color_pos];
|
|
const options = {
|
|
chart: {
|
|
height: 400,
|
|
type: "radialBar",
|
|
},
|
|
series: [rang_percent],
|
|
colors: [color],
|
|
plotOptions: {
|
|
radialBar: {
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
track: {
|
|
background: getComputedStyle(document.body).getPropertyValue('--table-bg'),
|
|
startAngle: -135,
|
|
endAngle: 135,
|
|
},
|
|
dataLabels: {
|
|
name: {
|
|
offsetY: 10,
|
|
fontSize: "30px",
|
|
show: true,
|
|
label: "Rang"
|
|
},
|
|
value: {
|
|
fontSize: "10px",
|
|
show: false,
|
|
color: getComputedStyle(document.body).getPropertyValue('--title-color'),
|
|
}
|
|
}
|
|
}
|
|
},
|
|
labels: [`${rang}/${total}`],
|
|
stroke: {
|
|
lineCap: "round"
|
|
}
|
|
};
|
|
|
|
// Options pour le graphe
|
|
|
|
return options;
|
|
}
|