Spaces:
Running
Running
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize charts | |
| const pieCtx = document.getElementById('pieChart').getContext('2d'); | |
| const lineCtx = document.getElementById('lineChart').getContext('2d'); | |
| // Pie Chart | |
| new Chart(pieCtx, { | |
| type: 'pie', | |
| data: { | |
| labels: ['Salaries', 'Cloud', 'Software', 'Contractors', 'Marketing', 'Office'], | |
| datasets: [{ | |
| data: [125000, 18750, 8300, 32500, 14200, 6800], | |
| backgroundColor: [ | |
| '#3B82F6', | |
| '#10B981', | |
| '#6366F1', | |
| '#F59E0B', | |
| '#EC4899', | |
| '#8B5CF6' | |
| ], | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| }, | |
| tooltip: { | |
| callbacks: { | |
| label: function(context) { | |
| const label = context.label || ''; | |
| const value = context.raw || 0; | |
| const total = context.dataset.data.reduce((acc, data) => acc + data, 0); | |
| const percentage = Math.round((value / total) * 100); | |
| return `${label}: $${value.toLocaleString()} (${percentage}%)`; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Line Chart | |
| new Chart(lineCtx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], | |
| datasets: [ | |
| { | |
| label: 'Salaries', | |
| data: [115000, 118000, 120000, 122000, 123000, 124000, 125000], | |
| borderColor: '#3B82F6', | |
| backgroundColor: 'rgba(59, 130, 246, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Cloud', | |
| data: [20000, 19500, 19200, 19000, 18800, 18750, 18750], | |
| borderColor: '#10B981', | |
| backgroundColor: 'rgba(16, 185, 129, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| }, | |
| { | |
| label: 'Total', | |
| data: [175000, 177500, 180000, 182000, 183000, 184500, 186000], | |
| borderColor: '#6366F1', | |
| backgroundColor: 'rgba(99, 102, 241, 0.05)', | |
| tension: 0.3, | |
| fill: true | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| plugins: { | |
| legend: { | |
| position: 'bottom', | |
| }, | |
| tooltip: { | |
| mode: 'index', | |
| intersect: false, | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| beginAtZero: false, | |
| ticks: { | |
| callback: function(value) { | |
| return '$' + value.toLocaleString(); | |
| } | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // Initialize all tooltips | |
| const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); | |
| tooltipTriggerList.map(function (tooltipTriggerEl) { | |
| return new bootstrap.Tooltip(tooltipTriggerEl); | |
| }); | |
| }); | |
| // Function to format currency | |
| function formatCurrency(amount) { | |
| return new Intl.NumberFormat('en-US', { | |
| style: 'currency', | |
| currency: 'USD', | |
| maximumFractionDigits: 0 | |
| }).format(amount); | |
| } |