|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
const months = ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']; |
|
|
const tokenData = { |
|
|
labels: months, |
|
|
datasets: [{ |
|
|
label: 'Tokens Gerados', |
|
|
data: [1245, 1890, 1823, 2345, 2789, 3021, 3420, 3210, 2956, 2567, 2108, 1765], |
|
|
backgroundColor: 'rgba(255, 88, 15, 0.8)', |
|
|
borderColor: 'rgba(255, 61, 0, 1)', |
|
|
borderWidth: 1, |
|
|
borderRadius: { |
|
|
topLeft: 6, |
|
|
topRight: 6 |
|
|
}, |
|
|
borderSkipped: false |
|
|
}] |
|
|
}; |
|
|
|
|
|
|
|
|
const config = { |
|
|
type: 'bar', |
|
|
data: tokenData, |
|
|
options: { |
|
|
responsive: true, |
|
|
maintainAspectRatio: false, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
}, |
|
|
tooltip: { |
|
|
callbacks: { |
|
|
label: function(context) { |
|
|
return context.parsed.y.toLocaleString() + ' tokens'; |
|
|
} |
|
|
} |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true, |
|
|
grid: { |
|
|
drawBorder: false, |
|
|
color: 'rgba(0, 0, 0, 0.05)' |
|
|
}, |
|
|
ticks: { |
|
|
callback: function(value) { |
|
|
return value.toLocaleString(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
x: { |
|
|
grid: { |
|
|
display: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
animation: { |
|
|
duration: 1000, |
|
|
easing: 'easeOutQuart' |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const ctx = document.getElementById('tokenChart').getContext('2d'); |
|
|
new Chart(ctx, config); |
|
|
}); |