| | 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); |
| | }); |