Update top-languages-card.js

src/cards/top-languages-card.js

@@ -46,14 +46,14 @@ const getLongestLang = (arr) =>
  * @param {string} props.progress Usage of the programming language in percentage.
  * @returns {string} Programming language SVG node.
  */
-const createProgressTextNode = ({ width, color, name, progress }) => {
+const createProgressTextNode = ({ width, color, name, progress, text }) => {
   const paddingRight = 95;
   const progressTextX = width - paddingRight + 10;
   const progressWidth = width - paddingRight;
 
   return `
     <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
-    <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
+    <text x="${progressTextX}" y="34" class="lang-name">${text || `${progress}%`}</text>
     ${createProgressNode({
       x: 0,
       y: 25,
@@ -81,7 +81,7 @@ const createCompactLangNode = ({ lang, totalSize }) => {
     <g>
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} ${percentage}%
+        ${lang.name} ${lang.text || `${percentage}%`}
       </text>
     </g>
   `;
@@ -117,7 +117,7 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
 
   const percent = ((longestLang.size / totalSize) * 100).toFixed(2);
   const minGap = 150;
-  const maxGap = 20 + measureText(`${longestLang.name} ${percent}%`, 11);
+  const maxGap = 20 + measureText(`${longestLang.name} ${longestLang.text || `${percent}%`}, 11);
   return flexLayout({
     items: layouts,
     gap: maxGap < minGap ? minGap : maxGap,
@@ -140,6 +140,7 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => {
         name: lang.name,
         color: lang.color || DEFAULT_LANG_COLOR,
         progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
+        text: lang.text,
       });
     }),
     gap: 40,