151 lines
4.5 KiB
JavaScript
151 lines
4.5 KiB
JavaScript
// Dashboard functionality
|
|
let supportChart = null;
|
|
let entriesChart = null;
|
|
|
|
// Load dashboard data
|
|
async function loadDashboardData() {
|
|
try {
|
|
const response = await fetch('/api/admin/dashboard/stats');
|
|
const result = await response.json();
|
|
|
|
if (result.success) {
|
|
updateDashboardCards(result.data);
|
|
createSupportLevelChart(result.data.supportLevels);
|
|
createEntriesChart(result.data.dailyEntries);
|
|
} else {
|
|
showStatus('Failed to load dashboard data', 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Dashboard loading error:', error);
|
|
showStatus('Error loading dashboard', 'error');
|
|
}
|
|
}
|
|
|
|
// Update summary cards
|
|
function updateDashboardCards(data) {
|
|
document.getElementById('total-locations').textContent = data.totalLocations.toLocaleString();
|
|
document.getElementById('overall-score').textContent = data.overallScore;
|
|
document.getElementById('sign-requests').textContent = data.signRequests.toLocaleString();
|
|
document.getElementById('total-users').textContent = data.totalUsers.toLocaleString();
|
|
}
|
|
|
|
// Create support level distribution chart
|
|
function createSupportLevelChart(supportLevels) {
|
|
const ctx = document.getElementById('support-chart');
|
|
if (!ctx) return;
|
|
|
|
if (supportChart) {
|
|
supportChart.destroy();
|
|
}
|
|
|
|
supportChart = new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Strong Support (1)', 'Support (2)', 'Neutral (3)', 'Opposed (4)'],
|
|
datasets: [{
|
|
data: [
|
|
supportLevels['1'] || 0,
|
|
supportLevels['2'] || 0,
|
|
supportLevels['3'] || 0,
|
|
supportLevels['4'] || 0
|
|
],
|
|
backgroundColor: [
|
|
'#4CAF50',
|
|
'#FFC107',
|
|
'#FF9800',
|
|
'#F44336'
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Create daily entries chart
|
|
function createEntriesChart(dailyEntries) {
|
|
const ctx = document.getElementById('entries-chart');
|
|
if (!ctx) return;
|
|
|
|
if (entriesChart) {
|
|
entriesChart.destroy();
|
|
}
|
|
|
|
// Generate last 30 days
|
|
const labels = [];
|
|
const data = [];
|
|
const today = new Date();
|
|
|
|
for (let i = 29; i >= 0; i--) {
|
|
const date = new Date(today);
|
|
date.setDate(date.getDate() - i);
|
|
const dateKey = date.toISOString().split('T')[0];
|
|
labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
|
|
data.push(dailyEntries[dateKey] || 0);
|
|
}
|
|
|
|
entriesChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'New Entries',
|
|
data: data,
|
|
borderColor: 'rgb(75, 192, 192)',
|
|
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
|
tension: 0.1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: {
|
|
stepSize: 1
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Add event listener for dashboard navigation
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// Update navigation to load dashboard when clicked
|
|
const dashboardLink = document.querySelector('.admin-nav a[href="#dashboard"]');
|
|
if (dashboardLink) {
|
|
dashboardLink.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
|
|
// Hide all sections
|
|
document.querySelectorAll('.admin-section').forEach(section => {
|
|
section.style.display = 'none';
|
|
});
|
|
|
|
// Show dashboard
|
|
const dashboardSection = document.getElementById('dashboard');
|
|
if (dashboardSection) {
|
|
dashboardSection.style.display = 'block';
|
|
}
|
|
|
|
// Update active nav
|
|
document.querySelectorAll('.admin-nav a').forEach(link => {
|
|
link.classList.remove('active');
|
|
});
|
|
dashboardLink.classList.add('active');
|
|
|
|
// Load dashboard data
|
|
loadDashboardData();
|
|
});
|
|
}
|
|
});
|