Skip to content

Commit 4d13e80

Browse files
Yashaswini-K-PYashaswini-K-P
authored
Feature/display global ranking (#215)
* feat: display leetcode global ranking in user profile banner * changed variable name * Fix template string syntax for ranking display * debugged
1 parent 6a15d3f commit 4d13e80

3 files changed

Lines changed: 80 additions & 2 deletions

File tree

‎frontend/js/user/historical-graphs.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ async function fetchUserData(username) {
3434
}
3535
rawPerformanceData = await response.json();
3636
userDataArray = rawPerformanceData.history || [];
37-
console.log("Successfully fetched user data:", userDataArray);
37+
renderRankings(rawPerformanceData);
3838
updateChart();
3939
} catch (error) {
4040
console.log("error loading performance statics: ", error);
@@ -64,6 +64,17 @@ function setupFilterButtons() {
6464
});
6565
}
6666

67+
function renderRankings(data) {
68+
const profileRankingEl = document.getElementById("profile-ranking");
69+
if (!profileRankingEl) return;
70+
71+
if (data && data.ranking) {
72+
profileRankingEl.textContent = Number(data.ranking).toLocaleString();
73+
} else {
74+
profileRankingEl.textContent = "--";
75+
}
76+
}
77+
6778
function updateChart() {
6879
if (!userDataArray || userDataArray.length === 0) {
6980
return;

‎frontend/user.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,42 @@
235235
height: 100%;
236236
min-height: 300px;
237237
}
238+
239+
/* Rankings Banner Styles */
240+
.ranks-banner {
241+
margin-bottom: 1.5rem;
242+
padding: 1rem 1.5rem;
243+
}
244+
245+
.ranks-banner .card-header {
246+
margin-bottom: 0.5rem;
247+
}
248+
249+
.ranks-display-wrapper {
250+
font-family: "Space Mono", monospace;
251+
font-size: 0.9rem;
252+
display: flex;
253+
flex-wrap: wrap;
254+
gap: 1.5rem;
255+
justify-content: space-between;
256+
align-items: center;
257+
}
258+
259+
.rank-item .rank-label {
260+
color: var(--text-dim);
261+
}
262+
263+
.rank-item .rank-value {
264+
margin-left: 0.5rem;
265+
}
266+
267+
.active-rank .rank-value {
268+
font-weight: bold;
269+
}
270+
271+
.placeholder-rank {
272+
opacity: 0.5;
273+
}
238274
</style>
239275
</head>
240276
<body>
@@ -370,6 +406,37 @@ <h1 id="username-display" class="page-title">[USER_PROFILE]</h1>
370406
</div>
371407
</div>
372408

409+
<div class="terminal-card ranks-banner">
410+
<div class="card-header">
411+
<span class="card-title">[SYS_RANKS]</span>
412+
<span class="card-subtitle">// LEETCODE_LOCAL_RANKS</span>
413+
</div>
414+
<div class="ranks-display-wrapper">
415+
<div class="rank-item active-rank">
416+
<span class="rank-label">PROFILE:</span>
417+
<span id="profile-ranking" class="rank-value streak-current"
418+
>--</span
419+
>
420+
</div>
421+
<div class="rank-item placeholder-rank">
422+
<span class="rank-label">OVERALL:</span>
423+
<span class="rank-value">--</span>
424+
</div>
425+
<div class="rank-item placeholder-rank">
426+
<span class="rank-label">MONTHLY:</span>
427+
<span class="rank-value">--</span>
428+
</div>
429+
<div class="rank-item placeholder-rank">
430+
<span class="rank-label">WEEKLY:</span>
431+
<span class="rank-value">--</span>
432+
</div>
433+
<div class="rank-item placeholder-rank">
434+
<span class="rank-label">DAILY:</span>
435+
<span class="rank-value">--</span>
436+
</div>
437+
</div>
438+
</div>
439+
373440
<!-- Historical Graphs Section -->
374441
<div class="terminal-card" style="margin-bottom: 3rem">
375442
<div class="card-header">

‎scripts/fetch-user-info.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ async function fetchUserInfo(username) {
1717
}
1818
} catch (err) {
1919
console.error(
20-
"Failed to fetch live global ranking from API wrapper:",
20+
"Failed to fetch live profile ranking from API wrapper:",
2121
err.message,
2222
);
2323
}

0 commit comments

Comments
 (0)