Added Language_count parameter

Signed-off-by: Florian Bouillon <florian.bouillon@delta-wings.net>

src/cards/top-languages-card.js

@@ -1,25 +1,29 @@
 const { getCardColors, FlexLayout, clampValue } = require("../common/utils");
 const Card = require("../common/Card");
 
-const createProgressNode = ({ width, color, name, progress }) => {
-  const paddingRight = 95;
-  const progressTextX = width - paddingRight + 10;
+const createProgressNode = ({ width, color, name, progress, progress2 }) => {
+  const paddingRight = 60;
   const progressWidth = width - paddingRight;
   const progressPercentage = clampValue(progress, 2, 100);
+  const progress2Percentage = clampValue(progress2, 2, 100);
 
   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 data-testid="lang-name" x="2" y="15" class="lang-name">${name} ${progress}%${progress2 > progress ? ` + ${progress2 - progress}%` : ''}</text>
     <svg width="${progressWidth}">
       <rect rx="5" ry="5" x="0" y="25" width="${progressWidth}" height="8" fill="#ddd"></rect>
+      <rect
+        height="8"
+        fill="#f2b866"
+        rx="5" ry="5" x="1" y="25"
+        width="calc(${progress2Percentage}% - 1px)"
+      ></rect>
       <rect
         height="8"
         fill="${color}"
         rx="5" ry="5" x="0" y="25"
         data-testid="lang-progress"
         width="${progressPercentage}%"
-      >
-      </rect>
+      ></rect>
     </svg>
   `;
 };
@@ -70,6 +74,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     text_color,
     bg_color,
     hide,
+    language_count,
     theme,
     layout,
   } = options;
@@ -90,7 +95,8 @@ const renderTopLanguages = (topLangs, options = {}) => {
     .sort((a, b) => b.size - a.size)
     .filter((lang) => {
       return !langsToHide[lowercaseTrim(lang.name)];
-    });
+    })
+    .slice(0, language_count || 5);
 
   const totalLanguageSize = langs.reduce((acc, curr) => {
     return acc + curr.size;
@@ -129,11 +135,11 @@ const renderTopLanguages = (topLangs, options = {}) => {
 
         const output = `
           <rect
-            mask="url(#rect-mask)" 
+            mask="url(#rect-mask)"
             data-testid="lang-progress"
-            x="${progressOffset}" 
+            x="${progressOffset}"
             y="0"
-            width="${progress}" 
+            width="${progress}"
             height="8"
             fill="${lang.color || "#858585"}"
           />
@@ -164,7 +170,8 @@ const renderTopLanguages = (topLangs, options = {}) => {
           width: width,
           name: lang.name,
           color: lang.color || "#858585",
-          progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
+		  progress: ((lang.size / totalLanguageSize) * 100).toFixed(2),
+		  progress2: ((lang.recentSize / totalLanguageSize) * 100).toFixed(2),
         });
       }),
       gap: 40,

src/fetchers/top-languages-fetcher.js

@@ -26,8 +26,10 @@ async function fetchTopLanguages(username) {
   for (const key in repoNodes) {
     const item = repoNodes[key]
     list.push({
-      name: key,
-      xp: item.xps
+	  name: key,
+	  color: languageColor[key] ? languageColor[key].color  : '#000000',
+	  xp: item.xps,
+	  recentXp: item.new_xps + item.xps
     })
   }
 
@@ -37,27 +39,19 @@ async function fetchTopLanguages(username) {
     })
     .sort((a, b) => b.xp - a.xp)
     .reduce((acc, prev) => {
-      // get the size of the language (bytes)
-      let langSize = prev.xp;
-
-      // if we already have the language in the accumulator
-      // & the current language name is same as previous name
-      // add the size to the language size.
-      if (acc[prev.name] && prev.name === acc[prev.name].name) {
-        langSize = prev.size + acc[prev.name].size;
-      }
       return {
         ...acc,
         [prev.name]: {
           name: prev.name,
-          color: languageColor[prev.name] ? languageColor[prev.name].color  : '#000000',
-          size: langSize,
+          color: prev.color,
+		  size: prev.xp,
+		  recentSize: prev.recentXp
         },
       };
     }, {});
 
   const topLangs = Object.keys(repoNodes)
-    .slice(0, 5)
+    // .slice(0, 5)
     .reduce((result, key) => {
       result[key] = repoNodes[key];
       return result;