add percentile rank icon (#2859)

* feat: add 'percentile' rank icon

This commit adds the `percentile` option for the `rank_icon` query
variable. This option displays the rank percentile the user belongs to.

* style: improve percentile rank icon styling

* dev

* dev

* dev

---------

Co-authored-by: Alexandr <qwerty541zxc@gmail.com>

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(),
-    ).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) + "%");
   });
 });