136 lines
3.4 KiB
JavaScript
136 lines
3.4 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
||
|
||
const months = ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн'];
|
||
|
||
// Attendance Chart
|
||
const attCtx = document.getElementById('attendanceChart').getContext('2d');
|
||
new Chart(attCtx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: months,
|
||
datasets: [
|
||
{
|
||
label: 'A1-1',
|
||
data: [88, 90, 85, 91, 93, 92],
|
||
backgroundColor: '#00E5FF',
|
||
borderRadius: 6,
|
||
barPercentage: 0.7
|
||
},
|
||
{
|
||
label: 'A1-2',
|
||
data: [82, 78, 75, 70, 74, 76],
|
||
backgroundColor: '#EAB308',
|
||
borderRadius: 6,
|
||
barPercentage: 0.7
|
||
},
|
||
{
|
||
label: 'B1-1',
|
||
data: [85, 87, 90, 88, 91, 89],
|
||
backgroundColor: '#22C55E',
|
||
borderRadius: 6,
|
||
barPercentage: 0.7
|
||
},
|
||
{
|
||
label: 'B1-2',
|
||
data: [80, 75, 70, 65, 63, 61],
|
||
backgroundColor: '#EF4444',
|
||
borderRadius: 6,
|
||
barPercentage: 0.7
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true } }
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: false,
|
||
min: 40,
|
||
max: 100,
|
||
ticks: { callback: v => v + '%' },
|
||
grid: { color: '#F2F4F7' }
|
||
},
|
||
x: { grid: { display: false } }
|
||
}
|
||
}
|
||
});
|
||
|
||
// Scores Chart
|
||
const scoresCtx = document.getElementById('scoresChart').getContext('2d');
|
||
new Chart(scoresCtx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: months,
|
||
datasets: [
|
||
{
|
||
label: 'A1-1',
|
||
data: [68, 70, 72, 74, 76, 78],
|
||
borderColor: '#00E5FF',
|
||
backgroundColor: 'rgba(0,229,255,.1)',
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 4
|
||
},
|
||
{
|
||
label: 'A1-2',
|
||
data: [62, 60, 58, 61, 63, 64],
|
||
borderColor: '#EAB308',
|
||
backgroundColor: 'rgba(234,179,8,.1)',
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 4
|
||
},
|
||
{
|
||
label: 'B1-1',
|
||
data: [72, 74, 76, 78, 80, 81],
|
||
borderColor: '#22C55E',
|
||
backgroundColor: 'rgba(34,197,94,.1)',
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 4
|
||
},
|
||
{
|
||
label: 'B1-2',
|
||
data: [60, 56, 54, 50, 48, 52],
|
||
borderColor: '#EF4444',
|
||
backgroundColor: 'rgba(239,68,68,.1)',
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointRadius: 4
|
||
}
|
||
]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: { position: 'bottom', labels: { padding: 16, usePointStyle: true } }
|
||
},
|
||
scales: {
|
||
y: {
|
||
beginAtZero: false,
|
||
min: 30,
|
||
max: 100,
|
||
grid: { color: '#F2F4F7' }
|
||
},
|
||
x: { grid: { display: false } }
|
||
}
|
||
}
|
||
});
|
||
|
||
// Smooth scroll for nav links
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
link.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
|
||
this.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
|
||
});
|