feat: add 'progress' rank icon

This commit gives users the ability to replace the rank level with the
rank progress by setting the `rank_icon` query to `progress`.

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` or `default`). Default: `default`.
+*   `rank_icon` - Shows alternative rank icon (i.e. `github`, `progress` 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`.
@@ -553,6 +553,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=github)
 
+*   Shows rank progress instead of rank level
+
+![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra\&rank_icon=progress)
+
 *   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)}
+          ${rankIcon(rank_icon, rank?.level, progress)}
         </g>
       </g>`;
 

src/cards/types.d.ts

@@ -1,5 +1,5 @@
 type ThemeNames = keyof typeof import("../../themes/index.js");
-type RankIcon = "default" | "github";
+type RankIcon = "default" | "github" | "progress";
 
 export type CommonOptions = {
   title_color: string;

src/getStyles.js

@@ -98,6 +98,9 @@ const getStyles = ({
       font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
       animation: scaleInAnimation 0.3s ease-in-out forwards;
     }
+    .rank-progress-text {
+      font-size: 16px;
+    }
     
     .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }

tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -42,6 +42,9 @@ 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 {
+      font-size: 16px;
+    }
     
     .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }
@@ -222,6 +225,9 @@ 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 {
+      font-size: 16px;
+    }
     
     .not_bold { font-weight: 400 }
     .bold { font-weight: 700 }

tests/renderStatsCard.test.js

@@ -20,7 +20,7 @@ const stats = {
   totalDiscussionsStarted: 10,
   totalDiscussionsAnswered: 50,
   contributedTo: 500,
-  rank: { level: "A+", score: 40 },
+  rank: { level: "A+", percentile: 40 },
 };
 
 describe("Test renderStatsCard", () => {
@@ -417,4 +417,14 @@ describe("Test renderStatsCard", () => {
     });
     expect(queryByTestId(document.body, "github-rank-icon")).toBeDefined();
   });
+
+  it("should show the progress", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      rank_icon: "progress",
+    });
+    expect(queryByTestId(document.body, "rank-progress-text")).toBeDefined();
+    expect(
+      queryByTestId(document.body, "progress-rank-icon").textContent.trim(),
+    ).toBe((100 - stats.rank.percentile).toFixed(1) + "%");
+  });
 });