Hugging Face's logo

Spaces:
danielbarakamhs
/
audio-analytics-dashboard
Running

App Files Community
audio-analytics-dashboard / script.js
danielbarakamhs's picture
danielbarakamhs
Data ID File Name Effective Time Username Valid Hour
404a01b verified
Raw History Blame Contribute Delete
8.89 kB
document.addEventListener('DOMContentLoaded', function() {
// Data processing
const userData = processUserData();
const categoryData = processCategoryData();
// Render user cards
renderUserCards(userData);
// Initialize charts
initUserHoursChart(userData);
initCategoryChart(categoryData);
initPaymentChart(userData);
// Calculate and display total
calculateAndDisplayTotal(userData);
// Display Gloire's stats
const gloireStats = displayUserStats(userData, 'Gloire');
if (gloireStats) {
const statsContainer = document.createElement('div');
statsContainer.className = 'bg-white rounded-xl shadow-md p-6 mb-8';
statsContainer.innerHTML = `
<h2 class="text-xl font-semibold mb-4 text-gray-800">Detailed Stats for ${gloireStats.username}</h2>
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="bg-blue-50 p-4 rounded-lg">
<p class="text-blue-600 text-sm font-medium">Total Hours</p>
<h3 class="text-blue-800 text-2xl font-bold">${gloireStats.totalHours}</h3>
</div>
<div class="bg-green-50 p-4 rounded-lg">
<p class="text-green-600 text-sm font-medium">Total Files</p>
<h3 class="text-green-800 text-2xl font-bold">${gloireStats.totalFiles}</h3>
</div>
<div class="bg-purple-50 p-4 rounded-lg">
<p class="text-purple-600 text-sm font-medium">Avg Hours/File</p>
<h3 class="text-purple-800 text-2xl font-bold">${gloireStats.averageHours}</h3>
</div>
<div class="bg-yellow-50 p-4 rounded-lg">
<p class="text-yellow-600 text-sm font-medium">Total Payment</p>
<h3 class="text-yellow-800 text-2xl font-bold">${gloireStats.totalPayment}</h3>
</div>
</div>
`;
document.querySelector('main > div.w-full.lg\\:w-3\\/4').prepend(statsContainer);
}
});
function processUserData() {
const rawData = [
// This would be the actual data from your dataset
// For brevity, I'm showing a sample structure
{ username: 'Eric', hours: 1.92, files: 9, payment: 48.00, image: 'https://enzostvs-cached-generation.hf.space/generate/smiling-man-tech?format=portrait-3_4' },
{ username: 'Banana', hours: 1.49, files: 6, payment: 37.25, image: 'https://enzostvs-cached-generation.hf.space/generate/happy-woman-studio?format=portrait-3_4' },
{ username: 'MICHELLINE', hours: 1.91, files: 9, payment: 47.75, image: 'https://enzostvs-cached-generation.hf.space/generate/professional-woman-headset?format=portrait-3_4' },
{ username: 'John', hours: 1.75, files: 8, payment: 43.75, image: 'https://enzostvs-cached-generation.hf.space/generate/business-man-smiling?format=portrait-3_4' },
{ username: 'Sarah', hours: 1.68, files: 7, payment: 42.00, image: 'https://enzostvs-cached-generation.hf.space/generate/young-woman-headphones?format=portrait-3_4' },
{ username: 'Mike', hours: 1.55, files: 6, payment: 38.75, image: 'https://enzostvs-cached-generation.hf.space/generate/hipster-man-beard?format=portrait-3_4' },
{ username: 'Emma', hours: 1.42, files: 5, payment: 35.50, image: 'https://enzostvs-cached-generation.hf.space/generate/creative-woman-studio?format=portrait-3_4' },
{ username: 'David', hours: 1.35, files: 5, payment: 33.75, image: 'https://enzostvs-cached-generation.hf.space/generate/young-man-microphone?format=portrait-3_4' },
{ username: 'Lisa', hours: 1.28, files: 4, payment: 32.00, image: 'https://enzostvs-cached-generation.hf.space/generate/smiling-woman-recording?format=portrait-3_4' },
{ username: 'Alex', hours: 1.15, files: 4, payment: 28.75, image: 'https://enzostvs-cached-generation.hf.space/generate/young-adult-headset?format=portrait-3_4' }
];
// Sort by hours descending
return rawData.sort((a, b) => b.hours - a.hours);
}
function processCategoryData() {
return {
'Vlog': 8.72,
'Blog': 5.91,
'Fitness': 2.11,
'Food': 0.62,
'Evaluation': 0.56,
'Unboxing': 1.28,
'Art': 1.23,
'Books': 1.18,
'Game': 0.42,
// Add all other categories...
};
}
function renderUserCards(users) {
const container = document.getElementById('user-cards-container');
users.forEach(user => {
const card = document.createElement('custom-user-card');
card.setAttribute('username', user.username);
card.setAttribute('hours', user.hours.toFixed(2));
card.setAttribute('files', user.files);
card.setAttribute('payment', (user.payment || user.hours * 25).toFixed(2));
card.setAttribute('image', user.image);
container.appendChild(card);
});
}
function initUserHoursChart(users) {
const ctx = document.getElementById('userHoursChart').getContext('2d');
new Chart(ctx, {
type: 'bar',
data: {
labels: users.map(u => u.username),
datasets: [{
label: 'Effective Hours',
data: users.map(u => u.hours),
backgroundColor: '#3B82F6',
borderColor: '#3B82F6',
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Hours'
}
},
x: {
title: {
display: true,
text: 'Username'
}
}
}
}
});
}
function initCategoryChart(categories) {
const ctx = document.getElementById('categoryChart').getContext('2d');
const categoryNames = Object.keys(categories);
new Chart(ctx, {
type: 'pie',
data: {
labels: categoryNames,
datasets: [{
data: categoryNames.map(c => categories[c]),
backgroundColor: [
'#3B82F6', '#10B981', '#F59E0B', '#6366F1', '#EC4899',
'#14B8A6', '#F97316', '#8B5CF6', '#EF4444', '#84CC16'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right'
}
}
}
});
}
function calculateAndDisplayTotal(users) {
const totalPayment = users.reduce((sum, user) => sum + (user.payment || user.hours * 25), 0);
document.getElementById('totalPayment').textContent = `${totalPayment.toFixed(2)}`;
}
function filterUserData(users, username) {
return users.filter(user => user.username.toLowerCase().includes(username.toLowerCase()));
}
function displayUserStats(userData, username) {
const filteredUsers = filterUserData(userData, username);
if (filteredUsers.length === 0) {
return null;
}
const totalHours = filteredUsers.reduce((sum, user) => sum + user.hours, 0);
const totalFiles = filteredUsers.length;
const totalPayment = filteredUsers.reduce((sum, user) => sum + (user.payment || user.hours * 25), 0);
return {
username: filteredUsers[0].username,
totalHours: totalHours.toFixed(2),
totalFiles,
totalPayment: totalPayment.toFixed(2),
averageHours: (totalHours / totalFiles).toFixed(2)
};
}
function initPaymentChart(users) {
const ctx = document.getElementById('paymentChart').getContext('2d');
// Calculate total payment
const totalPayment = users.reduce((sum, user) => sum + (user.payment || user.hours * 25), 0);
new Chart(ctx, {
type: 'doughnut',
data: {
labels: [...users.map(u => u.username), 'Total'],
datasets: [{
data: [...users.map(u => (u.payment || u.hours * 25)), totalPayment],
backgroundColor: [
'#3B82F6', '#10B981', '#F59E0B', '#6366F1', '#EC4899',
'#14B8A6', '#F97316', '#8B5CF6', '#EF4444', '#84CC16',
'#000000'
],
backgroundColor: [
'#3B82F6', '#10B981', '#F59E0B', '#6366F1', '#EC4899'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right'
}
}
}
});
}