From 3afe547077db76a81e93b2f03f8c2fd4b0375ace Mon Sep 17 00:00:00 2001
From: rickstaa <rick.staa@outlook.com>
Date: Thu, 22 Jun 2023 10:45:17 +0200
Subject: [PATCH] feat: add 'progress' rank icon

This commit gives users the ability to show the `progress` compared to
the highest possible rank in the stats card.
---
 readme.md                     |  2 +-
 src/cards/types.d.ts          |  2 +-
 src/common/icons.js           |  8 +++++++-
 tests/renderStatsCard.test.js | 10 ++++++++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/readme.md b/readme.md
index 456a977c..c79b233c 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`, `percentile` or `default`). Default: `default`.
+*   `rank_icon` - Shows alternative rank icon (i.e. `github`, `percentile`, `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`.
diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts
index a3f0b2b7..6c460886 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" | "percentile";
+type RankIcon = "default" | "github" | "percentile" | "progress";
 
 export type CommonOptions = {
   title_color: string;
diff --git a/src/common/icons.js b/src/common/icons.js
index 28f82ed9..1f03f78a 100644
--- a/src/common/icons.js
+++ b/src/common/icons.js
@@ -36,13 +36,19 @@ const rankIcon = (rankIcon, rankLevel, percentile) => {
           ${percentile.toFixed(1)}%
         </text>
       `;
+    case "progress":
+      return `
+        <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="progress-rank-icon" class="rank-percentile-text">
+            ${(100.0 - percentile).toFixed(1)}%
+        </text>
+        `;
     case "default":
     default:
       return `
         <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="level-rank-icon">
           ${rankLevel}
         </text>
-      `;
+  `;
   }
 };
 
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
index 0bb20442..4bbc2276 100644
--- a/tests/renderStatsCard.test.js
+++ b/tests/renderStatsCard.test.js
@@ -431,4 +431,14 @@ describe("Test renderStatsCard", () => {
       queryByTestId(document.body, "percentile-rank-value").textContent.trim(),
     ).toBe(stats.rank.percentile.toFixed(1) + "%");
   });
+
+  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) + "%");
+  });
 });