add percentile rank icon and remove progress

.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" 
 }

readme.md

@@ -83,38 +83,38 @@ Please visit [this link](https://give.do/fundraisers/stand-beside-the-victims-of
 
 # Features <!-- omit in toc -->
 
-*   [GitHub Stats Card](#github-stats-card)
-    *   [Hiding individual stats](#hiding-individual-stats)
-    *   [Showing additional individual stats](#showing-additional-individual-stats)
-    *   [Showing icons](#showing-icons)
-    *   [Themes](#themes)
-    *   [Customization](#customization)
-*   [GitHub Extra Pins](#github-extra-pins)
-    *   [Usage](#usage)
-    *   [Demo](#demo)
-*   [Top Languages Card](#top-languages-card)
-    *   [Usage](#usage-1)
-    *   [Language stats algorithm](#language-stats-algorithm)
-    *   [Exclude individual repositories](#exclude-individual-repositories)
-    *   [Hide individual languages](#hide-individual-languages)
-    *   [Show more languages](#show-more-languages)
-    *   [Compact Language Card Layout](#compact-language-card-layout)
-    *   [Donut Chart Language Card Layout](#donut-chart-language-card-layout)
-    *   [Donut Vertical Chart Language Card Layout](#donut-vertical-chart-language-card-layout)
-    *   [Pie Chart Language Card Layout](#pie-chart-language-card-layout)
-    *   [Hide Progress Bars](#hide-progress-bars)
-    *   [Demo](#demo-1)
-*   [Wakatime Stats Card](#wakatime-stats-card)
-    *   [Demo](#demo-2)
-*   [All Demos](#all-demos)
-    *   [Quick Tip (Align The Repo Cards)](#quick-tip-align-the-repo-cards)
-*   [Deploy on your own](#deploy-on-your-own)
-    *   [On Vercel](#on-vercel)
-        *   [:film\_projector: Check Out Step By Step Video Tutorial By @codeSTACKr](#film_projector-check-out-step-by-step-video-tutorial-by-codestackr)
-    *   [On other platforms](#on-other-platforms)
-    *   [Disable rate limit protections](#disable-rate-limit-protections)
-    *   [Keep your fork up to date](#keep-your-fork-up-to-date)
-*   [:sparkling\_heart: Support the project](#sparkling_heart-support-the-project)
+- [GitHub Stats Card](#github-stats-card)
+    - [Hiding individual stats](#hiding-individual-stats)
+    - [Showing additional individual stats](#showing-additional-individual-stats)
+    - [Showing icons](#showing-icons)
+    - [Themes](#themes)
+    - [Customization](#customization)
+- [GitHub Extra Pins](#github-extra-pins)
+    - [Usage](#usage)
+    - [Demo](#demo)
+- [Top Languages Card](#top-languages-card)
+    - [Usage](#usage-1)
+    - [Language stats algorithm](#language-stats-algorithm)
+    - [Exclude individual repositories](#exclude-individual-repositories)
+    - [Hide individual languages](#hide-individual-languages)
+    - [Show more languages](#show-more-languages)
+    - [Compact Language Card Layout](#compact-language-card-layout)
+    - [Donut Chart Language Card Layout](#donut-chart-language-card-layout)
+    - [Donut Vertical Chart Language Card Layout](#donut-vertical-chart-language-card-layout)
+    - [Pie Chart Language Card Layout](#pie-chart-language-card-layout)
+    - [Hide Progress Bars](#hide-progress-bars)
+    - [Demo](#demo-1)
+- [Wakatime Stats Card](#wakatime-stats-card)
+    - [Demo](#demo-2)
+- [All Demos](#all-demos)
+  - [Quick Tip (Align The Repo Cards)](#quick-tip-align-the-repo-cards)
+- [Deploy on your own](#deploy-on-your-own)
+  - [On Vercel](#on-vercel)
+    - [:film\_projector: Check Out Step By Step Video Tutorial By @codeSTACKr](#film_projector-check-out-step-by-step-video-tutorial-by-codestackr)
+  - [On other platforms](#on-other-platforms)
+  - [Disable rate limit protections](#disable-rate-limit-protections)
+  - [Keep your fork up to date](#keep-your-fork-up-to-date)
+- [:sparkling\_heart: Support the project](#sparkling_heart-support-the-project)
 
 # Important Notice <!-- omit in toc -->
 
@@ -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)

src/cards/stats-card.js

@@ -328,7 +328,7 @@ const renderStatsCard = (stats = {}, options = {}) => {
         <circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
         <circle class="rank-circle" cx="-10" cy="8" r="40" />
         <g class="rank-text">
-          ${rankIcon(rank_icon, rank?.level, progress)}
+          ${rankIcon(rank_icon, rank?.level, rank?.percentile)}
         </g>
       </g>`;
 

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;

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 };

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;
     }
     

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(),
+      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((100 - stats.rank.percentile).toFixed(1) + "%");
   });
 });