Skip to content

Commit 1f5190f

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1172 from shreyash3087/feat/language-and-milestone
Added Language and Milestones Card
2 parents 4845519 + 4a0ce18 commit 1f5190f

File tree

4 files changed

+216
-69
lines changed

4 files changed

+216
-69
lines changed

‎Website/index.html‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<link rel="stylesheet" href="styles.css">
88
<link rel="icon" href="logo.png" type="image/png"> <!-- Added favicon -->
99
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
10+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1011
</head>
1112
<body>
1213
<header>
@@ -32,16 +33,11 @@
3233

3334
<main>
3435
<section class="welcome-section">
35-
<div class="container">
36-
<div>
37-
<div>
38-
<h1 class="welcome-title">Welcome to <span class="highlight">Machine Learning Repositories</span></h1>
39-
<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>
40-
</div>
41-
</div>
42-
</div>
36+
<h2>Welcome to the Machine Learning Repositories</h2>
37+
<p>Explore a curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community.</p>
4338
</section>
4439

40+
4541
<!-- Toggle button for Repository Statistics -->
4642
<section>
4743
<button id="toggle-stats"><span id="display">Show</span> Repository Statistics</button>
@@ -84,11 +80,22 @@ <h3>Most Used Language</h3>
8480
</div>
8581
</section>
8682

87-
<!-- Languages -->
83+
<!-- Languages and Milestone-->
84+
85+
<section class="language-and-milestone">
8886
<section id="languages">
89-
<h2>Languages Used</h2>
87+
<div class="text-base">Languages</div>
9088
<ul id="language-list"></ul>
9189
</section>
90+
<section id="milestone">
91+
<div class="text-base">Milestones Progress</div>
92+
<div class="chart-container">
93+
<canvas id="milestoneChart"></canvas>
94+
<div class="legend">
95+
</div>
96+
</div>
97+
</section>
98+
</section>
9299

93100
<section id="repo-list">
94101
<h2>Repositories</h2>

‎Website/js/script.js‎

Lines changed: 74 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,32 @@ document.addEventListener('DOMContentLoaded', function() {
3131
directoriesList.innerHTML = '<li class="card">Failed to load directories.</li>';
3232
}
3333
}
34+
// Function to fetch and count subdirectories for each directory
35+
async function fetchSubdirectoryCounts() {
36+
try {
37+
const directoriesResponse = await fetch('/api/github/repos');
38+
if (!directoriesResponse.ok) {
39+
throw new Error(`HTTP error! status: ${directoriesResponse.status}`);
40+
}
41+
const directoriesData = await directoriesResponse.json();
42+
const directories = directoriesData.filter(item => item.type === 'dir' && item.name !== 'Website');
43+
const directoryCounts = [];
44+
45+
for (const directory of directories) {
46+
const subResponse = await fetch(`https://api.github.com/repos/recodehive/machine-learning-repos/contents/${directory.name}`);
47+
if (!subResponse.ok) {
48+
throw new Error(`HTTP error! status: ${subResponse.status} for ${directory.name}`);
49+
}
50+
const subData = await subResponse.json();
51+
const subDirectoriesCount = subData.filter(item => item.type === 'dir').length;
52+
directoryCounts.push({ name: directory.name, count: subDirectoriesCount });
53+
}
54+
55+
return directoryCounts;
56+
} catch (error) {
57+
console.error('Error fetching subdirectory counts:', error);
58+
}
59+
}
3460

3561
// Function to toggle languages section
3662
function toggleLanguagesSection() {
@@ -76,14 +102,12 @@ document.addEventListener('DOMContentLoaded', function() {
76102
for (const [language, bytes] of Object.entries(languagesData)) {
77103
const percentage = ((bytes / totalBytes) * 100).toFixed(2);
78104
const listItem = document.createElement('li');
79-
listItem.classList.add('card-languages');
80-
const h3 = document.createElement('h3');
81-
h3.textContent = `${language}`;
82-
listItem.appendChild(h3);
83-
// listItem.innerHTML = `
84-
// <h3>${language}</h3>
85-
// <div class="progress-bar" style="width: ${percentage}%;"></div>
86-
// `;
105+
listItem.innerHTML = `
106+
<span>${language}</span>
107+
<div class="progress-bar-container">
108+
<div class="progress-bar" style="width: ${percentage}%;">${percentage}%</div>
109+
</div>
110+
`;
87111
languageList.appendChild(listItem);
88112

89113
if (bytes > mostUsedLanguage.bytes) {
@@ -97,7 +121,47 @@ document.addEventListener('DOMContentLoaded', function() {
97121
console.error('Error fetching data from GitHub API:', error);
98122
}
99123
}
100-
124+
async function createPieChart() {
125+
const directoryCounts = await fetchSubdirectoryCounts();
126+
const ctx = document.getElementById('milestoneChart').getContext('2d');
127+
const labels = directoryCounts.map(dir => dir.name);
128+
const data = directoryCounts.map(dir => dir.count);
129+
130+
const chart = new Chart(ctx, {
131+
type: 'pie',
132+
data: {
133+
labels: labels,
134+
datasets: [{
135+
data: data,
136+
backgroundColor: [
137+
'#FF6384',
138+
'#36A2EB',
139+
'#FFCE56',
140+
'#4BC0C0',
141+
'#9966FF',
142+
'#FF9F40',
143+
'#01A02A',
144+
'#FA5F20'
145+
],
146+
}]
147+
},
148+
options: {
149+
responsive: true,
150+
plugins: {
151+
legend: {
152+
display: false // Disable Chart.js default legend
153+
}
154+
}
155+
}
156+
});
157+
158+
// Inject custom legend
159+
const legendContainer = document.querySelector('.legend');
160+
legendContainer.innerHTML = labels.map((label, index) => `
161+
<span style="color: ${chart.data.datasets[0].backgroundColor[index]}">${label}</span>
162+
`).join('');
163+
}
164+
101165
// Function to toggle statistics section
102166
function toggleStatsSection() {
103167
const toggleButton = document.getElementById('toggle-stats');
@@ -203,7 +267,7 @@ document.addEventListener('DOMContentLoaded', function() {
203267
});
204268

205269
fetchDirectories();
206-
toggleLanguagesSection();
270+
createPieChart();
207271
fetchRepoStats();
208272
toggleStatsSection();
209273
});

‎Website/server/server.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,29 @@ const app = express();
1313
const port = 3000;
1414

1515
app.use(express.static(path.join(__dirname, '../')));
16+
app.get('/api/github/repos/subdir', async (req, res) => {
17+
const dirName = req.query.dir;
18+
if (!dirName) {
19+
return res.status(400).json({ error: "Directory name is required" });
20+
}
21+
22+
try {
23+
const response = await fetch(`https://api.github.com/repos/recodehive/machine-learning-repos/contents/${dirName}`, {
24+
headers: {
25+
Authorization: `Bearer ${GITHUB_TOKEN}`,
26+
},
27+
});
28+
if (!response.ok) {
29+
const errorDetails = await response.text();
30+
throw new Error(`GitHub API error: ${response.status} - ${response.statusText}: ${errorDetails}`);
31+
}
1632

17-
app.get('/welcome', (req, res) => {
18-
res.send('Welcome to the Machine Learning Repos API!');
33+
const data = await response.json();
34+
res.json(data);
35+
} catch (error) {
36+
console.error(`Error fetching GitHub subdirectory contents for ${dirName}:`, error);
37+
res.status(500).json({ error: error.message });
38+
}
1939
});
2040
app.get('/api/github/repos', async (req, res) => {
2141
try {

0 commit comments

Comments
 (0)