diff --git a/main.js b/main.js index 1a21ee8..8e5a53a 100644 --- a/main.js +++ b/main.js @@ -1,13 +1,58 @@ +const themes = { + default: { + backgroundColor: [ + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ] + }, + dark: { + backgroundColor: [ + 'rgba(54, 54, 54, 0.2)', + 'rgba(77, 77, 77, 0.2)' + ], + borderColor: [ + 'rgba(54, 54, 54, 1)', + 'rgba(77, 77, 77, 1)' + ] + }, + light: { + backgroundColor: [ + 'rgba(200, 200, 200, 0.2)', + 'rgba(220, 220, 220, 0.2)' + ], + borderColor: [ + 'rgba(200, 200, 200, 1)', + 'rgba(220, 220, 220, 1)' + ] + }, + colorful: { + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(75, 192, 192, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(75, 192, 192, 1)' + ] + } +}; + document.getElementById('repoForm').addEventListener('submit', function(event) { event.preventDefault(); const username = document.getElementById('username').value; const repository = document.getElementById('repository').value; + const theme = document.getElementById('theme').value; fetch(`https://api.github.com/repos/${username}/${repository}`) .then(response => response.json()) .then(data => { const forks = data.forks_count; const stars = data.stargazers_count; + const themeColors = themes[theme]; const ctx = document.getElementById('forksStarsChart').getContext('2d'); if (window.forksStarsChart instanceof Chart) { @@ -20,19 +65,14 @@ document.getElementById('repoForm').addEventListener('submit', function(event) { datasets: [{ label: 'Count', data: [forks, stars], - backgroundColor: [ - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)' - ], - borderColor: [ - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)' - ], + backgroundColor: themeColors.backgroundColor, + borderColor: themeColors.borderColor, borderWidth: 1 }] }, options: { responsive: true, + maintainAspectRatio: false, scales: { y: { beginAtZero: true, @@ -44,7 +84,7 @@ document.getElementById('repoForm').addEventListener('submit', function(event) { x: { title: { display: true, - text: 'Metric' + text: repository } } } @@ -61,4 +101,4 @@ document.getElementById('downloadButton').addEventListener('click', function() { link.href = window.forksStarsChart.toBase64Image(); link.download = 'forks-stars-chart.png'; link.click(); -}); \ No newline at end of file +});