feat: add 'progress' rank icon (#2858)

This pull request allows users to replace the rank level with the rank progress
by setting the `rank_icon` query to `progress`.

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/common/icons.js

@@ -14,9 +14,12 @@ const icons = {
 /**
  * Get rank icon
  *
+ * @param {string} rankIcon - The rank icon type.
+ * @param {number} rankLevel - The rank level.
+ * @param {number} progress - The rank progress.
  * @returns {string} - The SVG code of the rank icon
  */
-const rankIcon = (rankIcon, rankLevel) => {
+const rankIcon = (rankIcon, rankLevel, progress) => {
   switch (rankIcon) {
     case "github":
       return `
@@ -24,6 +27,12 @@ const rankIcon = (rankIcon, rankLevel) => {
           <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
         </svg>
       `;
+    case "progress":
+      return `
+      <text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="progress-rank-icon" class="rank-progress-text">
+          ${progress.toFixed(1)}%
+      </text>
+      `;
     case "default":
     default:
       return `

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 }