<div class="container mx-auto px-4 py-8" x-data="{
darkMode: false,
users: [
{ id: 1, name: 'Jane Cooper', email: 'jane.cooper@example.com', role: 'Admin', status: 'Active', avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60' },
{ id: 3, name: 'Esther Howard', email: 'esther.howard@example.com', role: 'User', status: 'Inactive', avatar: 'https://images.unsplash.com/photo-1520813792240-56fc4a3765a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60' },
{ id: 4, name: 'Jenny Wilson', email: 'jenny.wilson@example.com', role: 'User', status: 'Pending', avatar: 'https://images.unsplash.com/photo-1498551172505-8ee7ad69f235?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60' },
{ id: 5, name: 'Robert Fox', email: 'robert.fox@example.com', role: 'Editor', status: 'Active', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60' }
],
getRoleCounts() {
return {
Admin: this.users.filter(user => user.role === 'Admin').length,
User: this.users.filter(user => user.role === 'User').length,
Editor: this.users.filter(user => user.role === 'Editor').length
};
},
init() {
this.darkMode = localStorage.getItem('darkMode') === 'true';
const ctx = document.getElementById('roleChart').getContext('2d');
new Chart(ctx, this.getChartConfig());
},
toggleDarkMode() {
this.darkMode = !this.darkMode;
localStorage.setItem('darkMode', this.darkMode);
},
getChartConfig() {
const counts = this.getRoleCounts();
return {
type: 'bar',
data: {
labels: ['Admin', 'User', 'Editor'],
datasets: [{
label: 'User Roles',
data: [counts.Admin, counts.User, counts.Editor],
backgroundColor: ['#6b7280', '#3b82f6', '#8b5cf6'],
borderColor: ['#4b5563', '#2563eb', '#7c3aed'],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true,
ticks: {
stepSize: 1,
color: this.darkMode ? '#d1d5db' : '#374151'
},
grid: {
color: this.darkMode ? '#374151' : '#e5e7eb'
}
},
x: {
ticks: {
color: this.darkMode ? '#d1d5db' : '#374151'
},
grid: {
display: false
}
}
},
plugins: {
legend: {
labels: {
color: this.darkMode ? '#d1d5db' : '#374151'
}
}
}
}
};
}
}">
<!-- Header -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4">
<div>
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">User Role Distribution</h1>
<p class="text-gray-600 dark:text-gray-400">Chart showing the distribution of user roles</p>
</div>
</div>
<!-- Chart Container -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 transition-colors duration-300">
<canvas id="roleChart" class="w-full h-96"></canvas>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>