feat: added ability to hide specific stats (#3)

* feat: added ability to hide specific stats

* chore: added docs for ?hide=

* chore: fix readme docs

* chore: updated docs preview link

api/index.js

@@ -19,6 +19,9 @@ async function fetchStats(username) {
             pullRequests(first: 100) {
               totalCount
             }
+            issues(first: 100) {
+              totalCount
+            }
             repositories(first: 100) {
               nodes {
                 stargazers {
@@ -35,42 +38,94 @@ async function fetchStats(username) {
     },
   });
 
-  const stats = { totalStars: 0, contributedTo: 0, name: "", totalPRs: 0 };
+  const stats = {
+    name: "",
+    totalPRs: 0,
+    totalIssues: 0,
+    totalStars: 0,
+    contributedTo: 0,
+  };
   if (res.data.error) return stats;
 
   const user = res.data.data.user;
+
+  stats.name = user.name;
+  stats.totalIssues = user.issues.totalCount;
+  stats.totalPRs = user.pullRequests.totalCount;
+  stats.contributedTo = user.repositoriesContributedTo.totalCount;
+
   stats.totalStars = user.repositories.nodes.reduce((prev, curr) => {
     return prev + curr.stargazers.totalCount;
   }, 0);
 
-  stats.totalPRs = user.pullRequests.totalCount;
-  stats.contributedTo = user.repositoriesContributedTo.totalCount;
-  stats.name = user.name;
   return stats;
 }
 
+const renderSVG = (stats, options) => {
+  const { name, totalStars, totalIssues, totalPRs, contributedTo } = stats;
+  const { hide } = options || {};
+  const height = 150 - hide.length * 20;
+
+  const STAT_MAP = {
+    stars: `
+      <tspan x="25" dy="20" class="stat bold"> Total Stars:</tspan>
+      <tspan x="135" dy="0" class="stat">${totalStars}</tspan>
+    `,
+    prs: `
+      <tspan x="25" dy="20" class="stat bold">Total PRs:</tspan>
+      <tspan x="135" dy="0" class="stat">${totalPRs}</tspan>
+    `,
+    issues: `
+      <tspan x="25" dy="20" class="stat bold">Total Issues:</tspan>
+      <tspan x="135" dy="0" class="stat">${totalIssues}</tspan>
+    `,
+    contribs: `
+      <tspan x="25" dy="20" class="stat bold">Contributed to:</tspan>
+      <tspan x="135" dy="0" class="stat">${contributedTo} repos</tspan> 
+    `,
+  };
+
+  return `
+    <svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <style>
+      .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
+      .stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
+      .bold { font-weight: 700 }
+      </style>
+      <rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
+
+      <text x="25" y="35" class="header">${name}'s github stats</text>
+      <text y="45">
+        ${Object.keys(STAT_MAP)
+          .filter((key) => !hide.includes(key))
+          .map((key) => STAT_MAP[key])}
+      </text>
+    </svg>
+  `;
+};
+
 module.exports = async (req, res) => {
   const username = req.query.username;
-  let { name, totalStars, totalPRs, contributedTo } = await fetchStats(
+  const hide = req.query.hide;
-    username
+  let {
-  );
+    name,
+    totalPRs,
+    totalStars,
+    totalIssues,
+    contributedTo,
+  } = await fetchStats(username);
 
   res.setHeader("Content-Type", "image/svg+xml");
-  res.send(`
+  res.send(
-    <svg width="495" height="130" viewBox="0 0 495 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+    renderSVG(
-    <style>
+      {
-    .header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: #2F80ED }
+        name,
-    .stat { font: 600 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: #333 }
+        totalStars,
-    .bold { font-weight: 700 }
+        totalIssues,
-    </style>
+        totalPRs,
-    <rect x="0.5" y="0.5" width="494" height="99%" rx="4.5" fill="#FFFEFE" stroke="#E4E2E2"/>
+        contributedTo,
-    <text x="25" y="35" class="header">${name}'s github stats</text>
+      },
-    <text x="25" y="70" class="stat bold">Total Stars:</text>
+      { hide: JSON.parse(hide || "[]") }
-    <text x="135" y="70" class="stat">${totalStars}</text>
+    )
-    <text x="25" y="90" class="stat bold">Total PRs:</text>
+  );
-    <text x="135" y="90" class="stat">${totalPRs}</text>
-    <text x="25" y="110" class="stat bold">Contributed to:</text>
-    <text x="135" y="110" class="stat">${contributedTo} repos</text>
-    </svg>
-  `);
 };

readme.md

@@ -12,10 +12,24 @@ change the `?username=` value to your GitHubs's username
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
 ```
 
+### Hiding certain stats
+
+To hide any specific stats you can pass a query parameter `?hide=` with an array of items you wanna hide.
+
+> Options: `&hide=["stars","prs","issues","contribs"]`
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","prs"])
+```
+
 ## Demo
 
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)
 
+- Hiding specific stats
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["contribs","issues"])
+
 Contributions are welcomed! <3
 
 Made with :heart: and javascript.