feat: improved top lang fetching & changed title

src/fetchTopLanguages.js

@@ -8,9 +8,10 @@ const fetcher = (variables, token) => {
       query: `
       query userInfo($login: String!) {
         user(login: $login) {
-          repositories(isFork: false, first: 100, orderBy: {field: UPDATED_AT, direction: DESC}) {
+          # fetch only owner repos & not forks
+          repositories(ownerAffiliations: OWNER, isFork: false, first: 100) {
             nodes {
-              languages(first: 1, orderBy: {field: SIZE, direction: DESC}) {
+              languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
                 edges {
                   size
                   node {
@@ -49,18 +50,13 @@ async function fetchTopLanguages(username) {
     .filter((node) => {
       return node.languages.edges.length > 0;
     })
-    .sort((a, b) => {
+    .reduce((acc, curr) => curr.languages.edges.concat(acc), [])
-      return b.languages.edges[0].size - a.languages.edges[0].size;
+    .sort((a, b) => b.size - a.size)
-    })
-    .map((node) => {
-      return node.languages.edges[0];
-    })
     .reduce((acc, prev) => {
       let langSize = prev.size;
       if (acc[prev.node.name] && prev.node.name === acc[prev.node.name].name) {
         langSize = prev.size + acc[prev.node.name].size;
       }
-
       return {
         ...acc,
         [prev.node.name]: {

src/renderTopLanguages.js

@@ -185,7 +185,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
       ${
         hide_title
           ? ""
-          : `<text data-testid="header" x="25" y="35" class="header">Top Languages</text>`
+          : `<text data-testid="header" x="25" y="35" class="header">Most Used Languages</text>`
       }
 
       <svg data-testid="lang-items" x="25" y="${hide_title ? 25 : 55}">

tests/renderTopLanguages.test.js

@@ -32,7 +32,7 @@ describe("Test renderTopLanguages", () => {
     document.body.innerHTML = renderTopLanguages(langs);
 
     expect(queryByTestId(document.body, "header")).toHaveTextContent(
-      "Top Languages"
+      "Most Used Languages"
     );
 
     expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
@@ -211,7 +211,7 @@ describe("Test renderTopLanguages", () => {
   it('should render with layout compact', () => {
     document.body.innerHTML = renderTopLanguages(langs, {layout: 'compact'});
 
-    expect(queryByTestId(document.body, "header")).toHaveTextContent("Top Languages");
+    expect(queryByTestId(document.body, "header")).toHaveTextContent("Most Used Languages");
 
     expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent("HTML 40.00%");
     expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute("width","120.00");

tests/top-langs.test.js

@@ -12,7 +12,7 @@ const data_langs = {
         nodes: [
           {
             languages: {
-              edges: [{ size: 100, node: { color: "#0f0", name: "HTML" } }],
+              edges: [{ size: 150, node: { color: "#0f0", name: "HTML" } }],
             },
           },
           {
@@ -55,7 +55,7 @@ const langs = {
   HTML: {
     color: "#0f0",
     name: "HTML",
-    size: 200,
+    size: 250,
   },
   javascript: {
     color: "#0ff",