fix(wakatime card): add percent display format for compact layout (resolves anuraghazra#3503) (anuraghazra#3504)

Author: qwerty541

src/cards/wakatime-card.js

@@ -46,16 +46,21 @@ const noCodingActivityNode = ({ color, text }) => {
  * @param {WakaTimeLang} args.lang The languages array.
  * @param {number} args.x The x position of the language node.
  * @param {number} args.y The y position of the language node.
+ * @param {"time" | "percent"} args.display_format The display format of the language node.
  * @returns {string} The compact layout language SVG node.
  */
-const createCompactLangNode = ({ lang, x, y }) => {
+const createCompactLangNode = ({ lang, x, y, display_format }) => {
   const color = languageColors[lang.name] || "#858585";
+  const value =
+    display_format === "percent"
+      ? `${lang.percent.toFixed(2).toString()} %`
+      : lang.text;
 
   return `
     <g transform="translate(${x}, ${y})">
       <circle cx="5" cy="6" r="5" fill="${color}" />
       <text data-testid="lang-name" x="15" y="10" class='lang-name'>
-        ${lang.name} - ${lang.text}
+        ${lang.name} - ${value}
       </text>
     </g>
   `;
@@ -67,21 +72,24 @@ const createCompactLangNode = ({ lang, x, y }) => {
  * @param {Object} args The function arguments.
  * @param {WakaTimeLang[]} args.langs The language objects.
  * @param {number} args.y The y position of the language node.
+ * @param {"time" | "percent"} args.display_format The display format of the language node.
  * @returns {string[]} The language text node items.
  */
-const createLanguageTextNode = ({ langs, y }) => {
+const createLanguageTextNode = ({ langs, y, display_format }) => {
   return langs.map((lang, index) => {
     if (index % 2 === 0) {
       return createCompactLangNode({
         lang,
         x: 25,
         y: 12.5 * index + y,
+        display_format,
       });
     }
     return createCompactLangNode({
       lang,
       x: 230,
       y: 12.5 + 12.5 * index,
+      display_format,
     });
   });
 };
@@ -313,6 +321,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
           ? createLanguageTextNode({
               y: 25,
               langs: filteredLanguages,
+              display_format,
             }).join("")
           : noCodingActivityNode({
               // @ts-ignore