diff --git a/.vscode/settings.json b/.vscode/settings.json index 761ce7a..5d461aa 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { "markdown.extension.toc.levels": "1..3", "editor.formatOnSave": true, - "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.defaultFormatter": "esbenp.prettier-vscode" } diff --git a/readme.md b/readme.md index 4c16744..0f9b787 100644 --- a/readme.md +++ b/readme.md @@ -304,7 +304,7 @@ You can provide multiple comma-separated values in the bg\_color option to rende * `hide_title` - *(boolean)*. Default: `false`. * `card_width` - Set the card's width manually *(number)*. Default: `500px (approx.)`. * `hide_rank` - *(boolean)* hides the rank and automatically resizes the card width. Default: `false`. -* `rank_icon` - Shows alternative rank icon (i.e. `github`, `progress` or `default`). Default: `default`. +* `rank_icon` - Shows alternative rank icon (i.e. `github`, `percentile` or `default`). Default: `default`. * `show_icons` - *(boolean)*. Default: `false`. * `include_all_commits` - Count total commits instead of just the current year commits *(boolean)*. Default: `false`. * `line_height` - Sets the line height between text *(number)*. Default: `25`. @@ -557,6 +557,10 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username. ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra\&rank_icon=progress) +* Shows user rank percentile instead of rank level + +![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra\&rank_icon=percentile) + * Customize Border Color ![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra\&border_color=2e4058) diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index c6694f2..e3502fc 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -328,7 +328,7 @@ const renderStatsCard = (stats = {}, options = {}) => { - ${rankIcon(rank_icon, rank?.level, progress)} + ${rankIcon(rank_icon, rank?.level, rank?.percentile)} `; diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts index 53091b9..a3f0b2b 100644 --- a/src/cards/types.d.ts +++ b/src/cards/types.d.ts @@ -1,5 +1,5 @@ type ThemeNames = keyof typeof import("../../themes/index.js"); -type RankIcon = "default" | "github" | "progress"; +type RankIcon = "default" | "github" | "percentile"; export type CommonOptions = { title_color: string; diff --git a/src/common/icons.js b/src/common/icons.js index fd743ff..28f82ed 100644 --- a/src/common/icons.js +++ b/src/common/icons.js @@ -16,10 +16,10 @@ const icons = { * * @param {string} rankIcon - The rank icon type. * @param {number} rankLevel - The rank level. - * @param {number} progress - The rank progress. + * @param {number} percentile - The rank percentile. * @returns {string} - The SVG code of the rank icon */ -const rankIcon = (rankIcon, rankLevel, progress) => { +const rankIcon = (rankIcon, rankLevel, percentile) => { switch (rankIcon) { case "github": return ` @@ -27,11 +27,14 @@ const rankIcon = (rankIcon, rankLevel, progress) => { `; - case "progress": + case "percentile": return ` - - ${progress.toFixed(1)}% - + + Top + + + ${percentile.toFixed(1)}% + `; case "default": default: diff --git a/src/getStyles.js b/src/getStyles.js index 088f723..79a7f8c 100644 --- a/src/getStyles.js +++ b/src/getStyles.js @@ -98,7 +98,10 @@ const getStyles = ({ font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; animation: scaleInAnimation 0.3s ease-in-out forwards; } - .rank-progress-text { + .rank-percentile-header { + font-size: 14px; + } + .rank-percentile-text { font-size: 16px; } @@ -130,4 +133,4 @@ const getStyles = ({ `; }; -export { getStyles, getAnimations }; +export { getAnimations, getStyles }; diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap index 1ad81d2..2050be0 100644 --- a/tests/__snapshots__/renderWakatimeCard.test.js.snap +++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap @@ -42,7 +42,10 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1 font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; animation: scaleInAnimation 0.3s ease-in-out forwards; } - .rank-progress-text { + .rank-percentile-header { + font-size: 14px; + } + .rank-percentile-text { font-size: 16px; } @@ -225,7 +228,10 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; animation: scaleInAnimation 0.3s ease-in-out forwards; } - .rank-progress-text { + .rank-percentile-header { + font-size: 14px; + } + .rank-percentile-text { font-size: 16px; } diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 05d7452..0bb2044 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -418,13 +418,17 @@ describe("Test renderStatsCard", () => { expect(queryByTestId(document.body, "github-rank-icon")).toBeDefined(); }); - it("should show the progress", () => { + it("should show the rank percentile", () => { document.body.innerHTML = renderStatsCard(stats, { - rank_icon: "progress", + rank_icon: "percentile", }); - expect(queryByTestId(document.body, "rank-progress-text")).toBeDefined(); + expect(queryByTestId(document.body, "percentile-top-header")).toBeDefined(); expect( - queryByTestId(document.body, "progress-rank-icon").textContent.trim(), - ).toBe((100 - stats.rank.percentile).toFixed(1) + "%"); + queryByTestId(document.body, "percentile-top-header").textContent.trim(), + ).toBe("Top"); + expect(queryByTestId(document.body, "rank-percentile-text")).toBeDefined(); + expect( + queryByTestId(document.body, "percentile-rank-value").textContent.trim(), + ).toBe(stats.rank.percentile.toFixed(1) + "%"); }); });