Added Language_count parameter

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

api/top-langs.js

@@ -19,7 +19,8 @@ module.exports = async (req, res) => {
     card_width,
     title_color,
     text_color,
-    bg_color,
+	bg_color,
+	language_count,
     theme,
     cache_seconds,
     layout,
@@ -48,7 +49,8 @@ module.exports = async (req, res) => {
         hide_title: parseBoolean(hide_title),
         hide_border: parseBoolean(hide_border),
         card_width: parseInt(card_width, 10),
-        hide: parseArray(hide),
+		hide: parseArray(hide),
+		language_count: parseInt(language_count),
         title_color,
         text_color,
         bg_color,

package.json

@@ -29,10 +29,5 @@
     "emoji-name-map": "^1.2.8",
     "github-username-regex": "^1.0.0",
     "word-wrap": "^1.2.3"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm test"
-    }
   }
 }

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;

tests/fetchTopLanguages.test.js

@@ -1,84 +0,0 @@
-require("@testing-library/jest-dom");
-const axios = require("axios");
-const MockAdapter = require("axios-mock-adapter");
-const fetchTopLanguages = require("../src/fetchers/top-languages-fetcher");
-
-const mock = new MockAdapter(axios);
-
-afterEach(() => {
-  mock.reset();
-});
-
-const data_langs = {
-  data: {
-    user: {
-      repositories: {
-        nodes: [
-          {
-            languages: {
-              edges: [{ size: 100, node: { color: "#0f0", name: "HTML" } }],
-            },
-          },
-          {
-            languages: {
-              edges: [{ size: 100, node: { color: "#0f0", name: "HTML" } }],
-            },
-          },
-          {
-            languages: {
-              edges: [
-                { size: 100, node: { color: "#0ff", name: "javascript" } },
-              ],
-            },
-          },
-          {
-            languages: {
-              edges: [
-                { size: 100, node: { color: "#0ff", name: "javascript" } },
-              ],
-            },
-          },
-        ],
-      },
-    },
-  },
-};
-
-const error = {
-  errors: [
-    {
-      type: "NOT_FOUND",
-      path: ["user"],
-      locations: [],
-      message: "Could not resolve to a User with the login of 'noname'.",
-    },
-  ],
-};
-
-describe("FetchTopLanguages", () => {
-  it("should fetch correct language data", async () => {
-    mock.onPost("https://api.github.com/graphql").reply(200, data_langs);
-
-    let repo = await fetchTopLanguages("anuraghazra");
-    expect(repo).toStrictEqual({
-      HTML: {
-        color: "#0f0",
-        name: "HTML",
-        size: 200,
-      },
-      javascript: {
-        color: "#0ff",
-        name: "javascript",
-        size: 200,
-      },
-    });
-  });
-
-  it("should throw error", async () => {
-    mock.onPost("https://api.github.com/graphql").reply(200, error);
-
-    await expect(fetchTopLanguages("anuraghazra")).rejects.toThrow(
-      "Could not resolve to a User with the login of 'noname'."
-    );
-  });
-});

themes/language-bar.js

@@ -1538,6 +1538,10 @@ module.exports = { // https://github.com/ozh/github-colors
     "TypeScript": {
         "color": "#2b7489",
         "url": "https://github.com/trending?l=TypeScript"
+	},
+	"TypeScript (JSX)": {
+        "color": "#2b7489",
+        "url": "https://github.com/trending?l=TypeScript"
     },
     "Unified Parallel C": {
         "color": null,