Skip to content

Added Language and Milestones Card #1172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 25, 2024
Merged

Added Language and Milestones Card #1172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5084e22
Added Language and Milestones Card
shreyash3087 Aug 24, 2024
4a0ce18
Update script.js
shreyash3087 Aug 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions Website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="logo.png" type="image/png"> <!-- Added favicon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<header>
Expand All @@ -32,16 +33,11 @@

<main>
<section class="welcome-section">
<div class="container">
<div>
<div>
<h1 class="welcome-title">Welcome to <span class="highlight">Machine Learning Repositories</span></h1>
<p class="welcome-description">Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the <span> <a href="https://github.com/recodehive"> RecodeHive </a></span>community.</p>
</div>
</div>
</div>
<h2>Welcome to the Machine Learning Repositories</h2>
<p>Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
</section>


<!-- Toggle button for Repository Statistics -->
<section>
<button id="toggle-stats"><span id="display">Show</span> Repository Statistics</button>
Expand Down Expand Up @@ -84,11 +80,22 @@ <h3>Most Used Language</h3>
</div>
</section>

<!-- Languages -->
<!-- Languages and Milestone-->

<section class="language-and-milestone">
<section id="languages">
<h2>Languages Used</h2>
<div class="text-base">Languages</div>
<ul id="language-list"></ul>
</section>
<section id="milestone">
<div class="text-base">Milestones Progress</div>
<div class="chart-container">
<canvas id="milestoneChart"></canvas>
<div class="legend">
</div>
</div>
</section>
</section>

<section id="repo-list">
<h2>Repositories</h2>
Expand Down
84 changes: 74 additions & 10 deletions Website/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,32 @@ document.addEventListener('DOMContentLoaded', function() {
directoriesList.innerHTML = '<li class="card">Failed to load directories.</li>';
}
}
// Function to fetch and count subdirectories for each directory
async function fetchSubdirectoryCounts() {
try {
const directoriesResponse = await fetch('/api/github/repos');
if (!directoriesResponse.ok) {
throw new Error(`HTTP error! status: ${directoriesResponse.status}`);
}
const directoriesData = await directoriesResponse.json();
const directories = directoriesData.filter(item => item.type === 'dir' && item.name !== 'Website');
const directoryCounts = [];

for (const directory of directories) {
const subResponse = await fetch(`https://api.github.com/repos/recodehive/machine-learning-repos/contents/${directory.name}`);
if (!subResponse.ok) {
throw new Error(`HTTP error! status: ${subResponse.status} for ${directory.name}`);
}
const subData = await subResponse.json();
const subDirectoriesCount = subData.filter(item => item.type === 'dir').length;
directoryCounts.push({ name: directory.name, count: subDirectoriesCount });
}

return directoryCounts;
} catch (error) {
console.error('Error fetching subdirectory counts:', error);
}
}

// Function to toggle languages section
function toggleLanguagesSection() {
Expand Down Expand Up @@ -76,14 +102,12 @@ document.addEventListener('DOMContentLoaded', function() {
for (const [language, bytes] of Object.entries(languagesData)) {
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
const listItem = document.createElement('li');
listItem.classList.add('card-languages');
const h3 = document.createElement('h3');
h3.textContent = `${language}`;
listItem.appendChild(h3);
// listItem.innerHTML = `
// <h3>${language}</h3>
// <div class="progress-bar" style="width: ${percentage}%;"></div>
// `;
listItem.innerHTML = `
<span>${language}</span>
<div class="progress-bar-container">
<div class="progress-bar" style="width: ${percentage}%;">${percentage}%</div>
</div>
`;
languageList.appendChild(listItem);

if (bytes > mostUsedLanguage.bytes) {
Expand All @@ -97,7 +121,47 @@ document.addEventListener('DOMContentLoaded', function() {
console.error('Error fetching data from GitHub API:', error);
}
}

async function createPieChart() {
const directoryCounts = await fetchSubdirectoryCounts();
const ctx = document.getElementById('milestoneChart').getContext('2d');
const labels = directoryCounts.map(dir => dir.name);
const data = directoryCounts.map(dir => dir.count);

const chart = new Chart(ctx, {
type: 'pie',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
'#4BC0C0',
'#9966FF',
'#FF9F40',
'#01A02A',
'#FA5F20'
],
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false // Disable Chart.js default legend
}
}
}
});

// Inject custom legend
const legendContainer = document.querySelector('.legend');
legendContainer.innerHTML = labels.map((label, index) => `
<span style="color: ${chart.data.datasets[0].backgroundColor[index]}">${label}</span>
`).join('');
}

// Function to toggle statistics section
function toggleStatsSection() {
const toggleButton = document.getElementById('toggle-stats');
Expand Down Expand Up @@ -203,7 +267,7 @@ document.addEventListener('DOMContentLoaded', function() {
});

fetchDirectories();
toggleLanguagesSection();
createPieChart();
fetchRepoStats();
toggleStatsSection();
});
Expand Down
24 changes: 22 additions & 2 deletions Website/server/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,29 @@ const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, '../')));
app.get('/api/github/repos/subdir', async (req, res) => {
const dirName = req.query.dir;
if (!dirName) {
return res.status(400).json({ error: "Directory name is required" });
}

try {
const response = await fetch(`https://api.github.com/repos/recodehive/machine-learning-repos/contents/${dirName}`, {
headers: {
Authorization: `Bearer ${GITHUB_TOKEN}`,
},
});
if (!response.ok) {
const errorDetails = await response.text();
throw new Error(`GitHub API error: ${response.status} - ${response.statusText}: ${errorDetails}`);
}

app.get('/welcome', (req, res) => {
res.send('Welcome to the Machine Learning Repos API!');
const data = await response.json();
res.json(data);
} catch (error) {
console.error(`Error fetching GitHub subdirectory contents for ${dirName}:`, error);
res.status(500).json({ error: error.message });
}
});
app.get('/api/github/repos', async (req, res) => {
try {
Expand Down
Loading