admin/changemaker.lite
1
0
Fork 0
Code Issues Packages Projects Releases 35 Wiki Activity

a few more dashboard updates

Browse Source
This commit is contained in:
admin
2025-07-31 10:59:22 -06:00
parent 944bf43fc9
commit 7335c6c3a1
5 changed files with 222 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
map/app/public/admin.html
View File

@@ -88,8 +88,8 @@
<div class="card-subtitle">out of 4.0</div>
</div>
<div class="dashboard-card">
<h3>Sign Requests</h3>
<div class="card-value" id="sign-requests">-</div>
<h3>Signs Delivered</h3>
<div class="card-value" id="sign-delivered">-</div>
</div>
<div class="dashboard-card">
<h3>Total Users</h3>
@@ -104,6 +104,10 @@
<canvas id="support-chart"></canvas>
</div>
<div class="chart-container">
<h3>Sign Sizes Requested</h3>
<canvas id="sign-sizes-chart"></canvas>
</div>
<div class="chart-container chart-full-width">
<h3>Daily Entries (Last 30 Days)</h3>
<canvas id="entries-chart"></canvas>
</div>

15
map/app/public/css/modules/dashboard.css
View File

@@ -55,6 +55,10 @@
min-height: 350px;
}
.chart-container.chart-full-width {
grid-column: 1 / -1;
}
.chart-container h3 {
margin: 0 0 1.5rem 0;
font-size: 1.25rem;
@@ -68,6 +72,17 @@
touch-action: pan-y; /* Allow vertical scrolling on mobile */
}
/* Responsive design */
@media (max-width: 1200px) {
.dashboard-charts {
grid-template-columns: 1fr;
}
.chart-container.chart-full-width {
grid-column: 1;
}
}
/* Responsive design */
@media (max-width: 768px) {
.dashboard-container {

116
map/app/public/js/dashboard.js
View File

@@ -1,16 +1,21 @@
// Dashboard functionality
let supportChart = null;
let entriesChart = null;
let signSizesChart = null;
// Load dashboard data
async function loadDashboardData() {
try {
// Show loading state
setLoadingState(true);
const response = await fetch('/api/admin/dashboard/stats');
const result = await response.json();
if (result.success) {
updateDashboardCards(result.data);
createSupportLevelChart(result.data.supportLevels);
createSignSizesChart(result.data.signSizes);
createEntriesChart(result.data.dailyEntries);
} else {
showStatus('Failed to load dashboard data', 'error');
@@ -18,14 +23,29 @@ async function loadDashboardData() {
} catch (error) {
console.error('Dashboard loading error:', error);
showStatus('Error loading dashboard', 'error');
} finally {
setLoadingState(false);
}
}
// Set loading state
function setLoadingState(isLoading) {
const cards = document.querySelectorAll('.card-value');
cards.forEach(card => {
if (isLoading) {
card.textContent = '...';
card.style.opacity = '0.6';
} else {
card.style.opacity = '1';
}
});
}
// 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('sign-delivered').textContent = data.signDelivered.toLocaleString();
document.getElementById('total-users').textContent = data.totalUsers.toLocaleString();
}
@@ -91,6 +111,90 @@ function createSupportLevelChart(supportLevels) {
});
}
// Create sign sizes chart
function createSignSizesChart(signSizes) {
const ctx = document.getElementById('sign-sizes-chart');
if (!ctx) return;
if (signSizesChart) {
signSizesChart.destroy();
}
// Check if mobile
const isMobile = window.innerWidth <= 480;
signSizesChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Regular', 'Large', 'Unsure'],
datasets: [{
label: 'Signs Requested',
data: [
signSizes['Regular'] || 0,
signSizes['Large'] || 0,
signSizes['Unsure'] || 0
],
backgroundColor: [
'#2196F3', // Blue for Regular
'#4CAF50', // Green for Large
'#FF9800' // Orange for Unsure
],
borderColor: [
'#1976D2',
'#388E3C',
'#F57C00'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
display: !isMobile,
position: 'top'
},
tooltip: {
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.parsed.y || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
return `${label}: ${value} (${percentage}%)`;
}
}
}
},
scales: {
y: {
beginAtZero: true,
ticks: {
stepSize: 1,
font: {
size: isMobile ? 10 : 12
}
},
grid: {
display: !isMobile
}
},
x: {
ticks: {
font: {
size: isMobile ? 10 : 12
}
},
grid: {
display: false
}
}
}
}
});
}
// Create daily entries chart
function createEntriesChart(dailyEntries) {
const ctx = document.getElementById('entries-chart');
@@ -251,6 +355,16 @@ document.addEventListener('DOMContentLoaded', () => {
createSupportLevelChart(supportLevels);
}
if (signSizesChart) {
const currentData = signSizesChart.data.datasets[0].data;
const signSizes = {
'Regular': currentData[0] || 0,
'Large': currentData[1] || 0,
'Unsure': currentData[2] || 0
};
createSignSizesChart(signSizes);
}
if (entriesChart) {
const currentLabels = entriesChart.data.labels;
const currentData = entriesChart.data.datasets[0].data;