Music Pie chart

index.html

@@ -448,32 +448,25 @@
 // Music Genre Pie Chart
             const genreCtx = document.getElementById('genreChart').querySelector('div').getContext('2d');
             const genreChart = new Chart(genreCtx, {
-                type: 'pie',
+                type: 'doughnut',
                 data: {
                     labels: ['EDM', 'Hip Hop', 'Rock', 'R&B', 'Jazz', 'Alternative', 'Pop', 'Other'],
                     datasets: [{
-                        data: [25, 20, 18, 15, 10, 7, 4, 1],
+                        data: [28, 22, 19, 16, 8, 5, 1, 1],
                         backgroundColor: [
-                            'rgba(219, 39, 119, 0.7)',
-                            'rgba(16, 185, 129, 0.7)',
-                            'rgba(234, 179, 8, 0.7)',
-                            'rgba(239, 68, 68, 0.7)',
-                            'rgba(59, 130, 246, 0.7)',
-                            'rgba(139, 92, 246, 0.7)',
-                            'rgba(20, 184, 166, 0.7)',
-                            'rgba(156, 163, 175, 0.7)'
-                        ],
-                        borderColor: [
-                            'rgba(219, 39, 119, 1)',
-                            'rgba(16, 185, 129, 1)',
-                            'rgba(234, 179, 8, 1)',
-                            'rgba(239, 68, 68, 1)',
-                            'rgba(59, 130, 246, 1)',
-                            'rgba(139, 92, 246, 1)',
-                            'rgba(20, 184, 166, 1)',
-                            'rgba(156, 163, 175, 1)'
+                            'rgba(219, 39, 119, 0.8)',
+                            'rgba(16, 185, 129, 0.8)',
+                            'rgba(234, 179, 8, 0.8)',
+                            'rgba(239, 68, 68, 0.8)',
+                            'rgba(59, 130, 246, 0.8)',
+                            'rgba(139, 92, 246, 0.8)',
+                            'rgba(20, 184, 166, 0.8)',
+                            'rgba(156, 163, 175, 0.8)'
                         ],
-                        borderWidth: 1
+                        borderColor: 'rgba(31, 41, 55, 0.8)',
+                        borderWidth: 2,
+                        hoverOffset: 15,
+                        cutout: '70%'
                     }]
                 },
                 options: {
@@ -482,14 +475,50 @@
                     plugins: {
                         legend: {
                             position: 'right',
+                            labels: {
+                                color: 'rgba(255, 255, 255, 0.8)',
+                                padding: 20,
+                                font: {
+                                    size: 12
+                                },
+                                usePointStyle: true,
+                                pointStyle: 'circle'
+                            }
                         },
                         title: {
                             display: true,
-                            text: 'Music Genre Popularity',
+                            text: 'Music Genre Distribution',
+                            color: 'rgba(255, 255, 255, 0.9)',
                             font: {
-                                size: 16
+                                size: 18,
+                                weight: 'bold'
+                            },
+                            padding: {
+                                top: 20,
+                                bottom: 20
+                            }
+                        },
+                        tooltip: {
+                            backgroundColor: 'rgba(17, 24, 39, 0.95)',
+                            titleColor: '#ec4899',
+                            bodyColor: 'white',
+                            borderColor: 'rgba(255, 255, 255, 0.1)',
+                            borderWidth: 1,
+                            padding: 12,
+                            callbacks: {
+                                label: function(context) {
+                                    const label = context.label || '';
+                                    const value = context.raw || 0;
+                                    const total = context.dataset.data.reduce((a, b) => a + b, 0);
+                                    const percentage = Math.round((value / total) * 100);
+                                    return `${label}: ${percentage}% (${value})`;
+                                }
                             }
                         }
+                    },
+                    animation: {
+                        animateScale: true,
+                        animateRotate: true
                     }
                 }
 });
@@ -534,20 +563,36 @@
 
             // Initialize first button as active
             document.getElementById('age-all').classList.add('active', 'bg-pink-600');
-document.querySelectorAll('#genre-all, #genre-edm, #genre-rock, #genre-hiphop').forEach(btn => {
+            // Filter buttons for genre chart
+            document.querySelectorAll('#genre-all, #genre-edm, #genre-rock, #genre-hiphop').forEach(btn => {
                 btn.addEventListener('click', function() {
+                    // Remove active class from all buttons
+                    document.querySelectorAll('#genre-all, #genre-edm, #genre-rock, #genre-hiphop').forEach(b => {
+                        b.classList.remove('bg-gray-700');
+                        b.classList.add('bg-opacity-70');
+                    });
+                    
+                    // Add active class to clicked button
+                    this.classList.add('bg-gray-700');
+                    this.classList.remove('bg-opacity-70');
+
                     const filter = this.id.split('-').pop();
+                    
                     if (filter === 'all') {
-                        genreChart.data.datasets[0].data = [25, 20, 18, 15, 10, 7, 4, 1];
+                        genreChart.data.datasets[0].data = [28, 22, 19, 16, 8, 5, 1, 1];
                     } else {
                         genreChart.data.datasets[0].data = [0, 0, 0, 0, 0, 0, 0, 0];
                         const index = ['edm', 'hiphop', 'rock', 'r&b', 'jazz', 'alternative', 'pop', 'other'].indexOf(filter);
-                        if (index !== -1) genreChart.data.datasets[0].data[index] = [25, 20, 18, 15, 10, 7, 4, 1][index];
+                        if (index !== -1) genreChart.data.datasets[0].data[index] = [28, 22, 19, 16, 8, 5, 1, 1][index];
                     }
+                    
                     genreChart.update();
                 });
             });
-        });
+
+            // Initialize first button as active
+            document.getElementById('genre-all').classList.add('bg-gray-700');
+});
 VANTA.NET({
             el: "#vanta-bg",
             mouseControls: true,