fix: wakatime langs_count when layout=compact (anuraghazra#1041)

Author: florianbussmann

src/cards/wakatime-card.js

@@ -61,14 +61,14 @@ const createTextNode = ({
   const cardProgress = hideProgress
     ? null
     : createProgressNode({
-        x: 110,
-        y: 4,
-        progress: percent,
-        color: progressBarColor,
-        width: 220,
-        name: label,
-        progressBarBackgroundColor,
-      });
+      x: 110,
+      y: 4,
+      progress: percent,
+      color: progressBarColor,
+      width: 220,
+      name: label,
+      progressBarBackgroundColor,
+    });
 
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
@@ -129,26 +129,15 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     theme,
   });
 
-  const statItems = languages
+  const filteredLanguages = languages
     ? languages
-        .filter((language) => language.hours || language.minutes)
-        .slice(0, langsCount)
-        .map((language) => {
-          return createTextNode({
-            id: language.name,
-            label: language.name,
-            value: language.text,
-            percent: language.percent,
-            progressBarColor: titleColor,
-            progressBarBackgroundColor: textColor,
-            hideProgress: hide_progress,
-          });
-        })
+      .filter((language) => language.hours || language.minutes)
+      .slice(0, langsCount)
     : [];
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
-  let height = Math.max(45 + (statItems.length + 1) * lheight, 150);
+  let height = Math.max(45 + (filteredLanguages.length + 1) * lheight, 150);
 
   const cssStyles = getStyles({
     titleColor,
@@ -163,17 +152,17 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   // RENDER COMPACT LAYOUT
   if (layout === "compact") {
     width = width + 50;
-    height = 90 + Math.round(languages.length / 2) * 25;
+    height = 90 + Math.round(filteredLanguages.length / 2) * 25;
 
     // progressOffset holds the previous language's width and used to offset the next language
     // so that we can stack them one after another, like this: [--][----][---]
     let progressOffset = 0;
-    const compactProgressBar = languages
-      .map((lang) => {
+    const compactProgressBar = filteredLanguages
+      .map((language) => {
         // const progress = (width * lang.percent) / 100;
-        const progress = ((width - 25) * lang.percent) / 100;
+        const progress = ((width - 25) * language.percent) / 100;
 
-        const languageColor = languageColors[lang.name] || "#858585";
+        const languageColor = languageColors[language.name] || "#858585";
 
         const output = `
           <rect
@@ -197,22 +186,33 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
       </mask>
       ${compactProgressBar}
       ${createLanguageTextNode({
-        x: 0,
-        y: 25,
-        langs: languages,
-        totalSize: 100,
-      }).join("")}
+      x: 0,
+      y: 25,
+      langs: filteredLanguages,
+      totalSize: 100,
+    }).join("")}
     `;
   } else {
     finalLayout = flexLayout({
-      items: statItems.length
-        ? statItems
+      items: filteredLanguages.length
+        ? filteredLanguages
+          .map((language) => {
+            return createTextNode({
+              id: language.name,
+              label: language.name,
+              value: language.text,
+              percent: language.percent,
+              progressBarColor: titleColor,
+              progressBarBackgroundColor: textColor,
+              hideProgress: hide_progress,
+            });
+          })
         : [
-            noCodingActivityNode({
-              color: textColor,
-              text: i18n.t("wakatimecard.nocodingactivity"),
-            }),
-          ],
+          noCodingActivityNode({
+            color: textColor,
+            text: i18n.t("wakatimecard.nocodingactivity"),
+          }),
+        ],
       gap: lheight,
       direction: "column",
     }).join("");

tests/__snapshots__/renderWakatimeCard.test.js.snap

@@ -155,8 +155,8 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
 "
       <svg
         width=\\"495\\"
-        height=\\"140\\"
-        viewBox=\\"0 0 495 140\\"
+        height=\\"115\\"
+        viewBox=\\"0 0 495 115\\"
         fill=\\"none\\"
         xmlns=\\"http://www.w3.org/2000/svg\\"
       >
@@ -273,16 +273,6 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
             fill=\\"#2b7489\\"
           />
         
-          <rect
-            mask=\\"url(#rect-mask)\\"
-            data-testid=\\"lang-progress\\"
-            x=\\"7.1145\\"
-            y=\\"0\\"
-            width=\\"0.32550000000000007\\"
-            height=\\"8\\"
-            fill=\\"#cb171e\\"
-          />
-        
       
     <g transform=\\"translate(25, 25)\\">
       <circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#858585\\" />
@@ -298,13 +288,6 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
       </text>
     </g>
   
-    <g transform=\\"translate(25, 50)\\">
-      <circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#cb171e\\" />
-      <text data-testid=\\"lang-name\\" x=\\"15\\" y=\\"10\\" class='lang-name'>
-        YAML - 0 secs
-      </text>
-    </g>
-  
     
     </svg>