Skip to content

Implement peer comparison mode with side-by-side stats and interactive charts#116

Closed
Vachhani-Tapan wants to merge 2 commits into
codepvg:mainfrom
Vachhani-Tapan:main
Closed

Implement peer comparison mode with side-by-side stats and interactive charts#116
Vachhani-Tapan wants to merge 2 commits into
codepvg:mainfrom
Vachhani-Tapan:main

Conversation

@Vachhani-Tapan
Copy link
Copy Markdown

Description
This PR introduces a peer comparison feature to the LeetCode leaderboard, allowing students to select up to 3 peers and compare their current stats and daily grinding histories side-by-side.

Linked Issue
Fixes #103

Changes Made

  • Comparison Mode Toggle: Added a static terminal-themed $ compare_mode toggle button next to the search bar to explicitly enable/disable peer selection, showing/hiding checkboxes dynamically and resetting selection on disable.
  • Checkboxes & State Syncing: Implemented custom terminal-styled checkboxes prepended to both desktop rows (.leaderboard-row) and mobile cards (.mobile-card) with cross-view checking state synchronization.
  • Floating Action Panel: Added a fixed bottom action bar to track selected users (supporting 2 to 3 selections) with a "Compare" launch button.
  • Performance Breakdown Modal: Integrated Chart.js to render a visual bar chart comparing easy/medium/hard solves and a multi-line graph plotting cumulative solves over time fetched from the user history endpoint.
  • Retro Theme Accentuation: Handcrafted UI elements to conform to the existing cyberpunk CRT scanline aesthetics.

Type of Change

  • Bug fix
  • New feature
  • UI/Visual update
  • Documentation update
  • Refactor

Testing

  • Tested locally
  • Tested on mobile viewport (if applicable)
  • No console errors introduced

Checklist

  • My code follows the project's coding style
  • I have formatted my code locally using Prettier
  • I have performed a self-review of my code
  • My changes generate no new warnings or errors
  • I have updated documentation if required
  • I have linked the relevant issue
image 602995184-f0a3bdff-0e6d-4e97-9428-bc7a20eb9e41 602995058-96333e4e-fc84-493a-a2e9-cc4c403035a6

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Jun 5, 2026

Thank you for submitting a pull request.

Please ensure your changes comply with the project's contribution guidelines and that all workflow checks pass successfully.

A maintainer will review your submission shortly.

@Vachhani-Tapan
Copy link
Copy Markdown
Author

@jagdish-15 Sir now i have worked according to the review that you have given in the last PR and now there is no merge conflicts in the files so please review the request . Thank You !

@Vachhani-Tapan
Copy link
Copy Markdown
Author

@jagdish-15 sir please review the pull request and give the review so that i can work on another issue also so sir please review it once asap . Thank You !

Copy link
Copy Markdown
Collaborator

@jagdish-15 jagdish-15 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The overall comparison feature and UI direction look good, but I noticed a few things that still need adjustment before this is ready to merge:

  1. The compare mode toggle/button mentioned earlier does not seem to be present in the current pushed implementation. Right now the selection checkboxes appear by default, but I’d still prefer the compare selection mode to be explicitly enabled first to keep the leaderboard UI cleaner during normal usage.

  2. Once users begin selecting people for comparison, there should also be a cancel/reset option alongside the current compare button so users can easily exit comparison mode without manually unchecking everything.

  3. There’s currently a dataset consistency issue:
    if someone selects one user from the weekly leaderboard and then switches to monthly/daily and selects another user there, the comparison mixes data from different leaderboard contexts, which becomes misleading.

A cleaner approach would be to automatically clear/reset all selected users whenever the active leaderboard tab changes.

  1. In the peer_comparison.sh popup itself, it’s currently not immediately obvious whether the displayed stats correspond to the overall/monthly/weekly/daily leaderboard context.

It would help to include the active dataset context in the title itself, for example:
metrics_summary (weekly)
or
metrics_summary (monthly).

  1. It would also be nice to include:
  • global rank (already available through /api/student/:username)
  • and the leaderboard rank change indicator relative to the previous day for the active dataset

inside the comparison view as additional metrics.

  1. One more thing regarding the graphs:
    right now the history graph always shows overall progression data. Instead:
  • weekly leaderboard comparisons should show weekly progression/history,
  • monthly leaderboard comparisons should show monthly progression/history,
  • overall can continue using the full overall history graph.

And for the daily leaderboard specifically, a graph does not really make much sense due to the very small time window. Instead, we could either:

  • show a simple message like:
    No meaningful historical trend available for daily comparison.
  • or display the problems solved today by the selected users using the same API currently used by the sync logic:
    https://leetcode-api-dun.vercel.app/:username

@Vachhani-Tapan
Copy link
Copy Markdown
Author

@jagdish-15 I am closing this pr and open new pr with all the changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat: Implement a side-by-side user comparison tool for the leaderboard

2 participants