| document.addEventListener('DOMContentLoaded', function() { |
| |
| const currentDate = new Date(); |
| const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate(); |
| const daysArray = Array.from({length: daysInMonth}, (_, i) => i + 1); |
| |
| let tokenData = []; |
| let dailyData = []; |
| let lastValue = 0; |
| let maxDayValue = 0; |
| let abstinenceDays = 0; |
| |
| for (let i = 0; i < daysInMonth; i++) { |
| let dailyUsage = 0; |
| if (i < 10) { |
| dailyUsage = Math.floor(Math.random() * 600) + 100; |
| lastValue += dailyUsage; |
| } else { |
| abstinenceDays++; |
| } |
| |
| if (dailyUsage > maxDayValue) { |
| maxDayValue = dailyUsage; |
| } |
| |
| tokenData.push(lastValue); |
| dailyData.push(dailyUsage); |
| } |
|
|
| |
| document.querySelector('div:nth-child(4) div.text-2xl').textContent = maxDayValue.toLocaleString(); |
| document.querySelector('div:nth-child(5) div.text-2xl').textContent = abstinenceDays; |
| |
| const ctx = document.getElementById('tokenChart').getContext('2d'); |
| const chart = new Chart(ctx, { |
| type: 'line', |
| data: { |
| labels: daysArray.map(day => `${day}`), |
| datasets: [{ |
| label: 'Tokens Used', |
| data: tokenData, |
| borderColor: '#6366F1', |
| backgroundColor: 'rgba(99, 102, 241, 0.1)', |
| borderWidth: 3, |
| tension: 0.1, |
| fill: true, |
| pointBackgroundColor: '#6366F1', |
| pointRadius: 4, |
| pointHoverRadius: 6 |
| }] |
| }, |
| options: { |
| responsive: true, |
| maintainAspectRatio: false, |
| plugins: { |
| legend: { |
| display: false |
| }, |
| tooltip: { |
| callbacks: { |
| label: function(context) { |
| return `Tokens: ${context.raw.toLocaleString()}`; |
| } |
| } |
| } |
| }, |
| scales: { |
| y: { |
| beginAtZero: true, |
| grid: { |
| color: 'rgba(0, 0, 0, 0.05)' |
| }, |
| ticks: { |
| callback: function(value) { |
| return value.toLocaleString(); |
| } |
| } |
| }, |
| x: { |
| grid: { |
| display: false |
| } |
| } |
| } |
| } |
| }); |
| }); |
