File size: 2,870 Bytes
593b435 174409d 593b435 174409d 593b435 174409d 593b435 174409d 593b435 174409d 593b435 174409d 593b435 174409d 593b435 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
document.addEventListener('DOMContentLoaded', function() {
// Sample data - in a real app you would fetch this from an API
const currentDate = new Date();
const daysInMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0).getDate();
const daysArray = Array.from({length: daysInMonth}, (_, i) => i + 1);
// Generate data with usage until day 10 then flat
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; // Random increment 100-700
lastValue += dailyUsage;
} else {
abstinenceDays++;
}
if (dailyUsage > maxDayValue) {
maxDayValue = dailyUsage;
}
tokenData.push(lastValue);
dailyData.push(dailyUsage);
}
// Update stats in the UI
document.querySelector('div:nth-child(4) div.text-2xl').textContent = maxDayValue.toLocaleString();
document.querySelector('div:nth-child(5) div.text-2xl').textContent = abstinenceDays;
// Chart setup
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
}
}
}
}
});
}); |