feat: added icons support

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
2020-07-09 18:46:41 +05:30 · 2020-07-09 17:50:15 +05:30
2 changed files with 138 additions and 24 deletions
@@ -16,9 +16,15 @@ async function fetchStats(username) {
            repositoriesContributedTo(first: 100, contributionTypes: [COMMIT, ISSUE, PULL_REQUEST, REPOSITORY]) {
              totalCount
            }
+            contributionsCollection {
+              totalCommitContributions
+            }
            pullRequests(first: 100) {
              totalCount
            }
+            issues(first: 100) {
+              totalCount
+            }
            repositories(first: 100) {
              nodes {
                stargazers {
@@ -35,42 +41,122 @@ async function fetchStats(username) {
    },
  });

-  const stats = { totalStars: 0, contributedTo: 0, name: "", totalPRs: 0 };
+  const stats = {
+    name: "",
+    totalPRs: 0,
+    totalCommits: 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.totalCommits = user.contributionsCollection.totalCommitContributions;
+  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,
+    totalCommits,
+    totalIssues,
+    totalPRs,
+    contributedTo,
+  } = stats;
+  const { hide, show_icons } = options || {};
+
+  const STAT_MAP = {
+    stars: `
+      <tspan x="25" dy="25" class="stat bold">
+      <tspan class="icon star-icon" fill="#4C71F2">★</tspan> Total Stars:</tspan>
+      <tspan x="155" dy="0" class="stat">${totalStars}</tspan>
+    `,
+    commits: `
+      <tspan x="25" dy="25" class="stat bold">
+      <tspan class="icon" fill="#4C71F2">🕗</tspan> Total Commits:</tspan>
+      <tspan x="155" dy="0" class="stat">${totalCommits}</tspan>
+    `,
+    prs: `
+      <tspan x="25" dy="25" class="stat bold">
+      <tspan class="icon" fill="#4C71F2">🔀</tspan> Total PRs:</tspan>
+      <tspan x="155" dy="0" class="stat">${totalPRs}</tspan>
+    `,
+    issues: `
+      <tspan x="25" dy="25" class="stat bold">
+      <tspan class="icon" fill="#4C71F2">ⓘ</tspan> Total Issues:</tspan>
+      <tspan x="155" dy="0" class="stat">${totalIssues}</tspan>
+    `,
+    contribs: `
+      <tspan x="25" dy="25" class="stat bold"><tspan class="icon" fill="#4C71F2">📕</tspan> Contributed to:</tspan>
+      <tspan x="155" dy="0" class="stat">${contributedTo} repos</tspan> 
+    `,
+  };
+
+  const statItems = Object.keys(STAT_MAP)
+    .filter((key) => !hide.includes(key))
+    .map((key) => STAT_MAP[key]);
+
+  const height = 45 + (statItems.length + 1) * 25;
+
+  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 }
+      .star-icon { font: 600 17px 'Segoe UI', Ubuntu, Sans-Serif; }
+      .bold { font-weight: 700 }
+      .icon {
+        display: none;
+        ${show_icons && "display: block"}
+      }
+      </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">
+        ${statItems}
+      </text>
+    </svg>
+  `;
+};
+
 module.exports = async (req, res) => {
  const username = req.query.username;
-  let { name, totalStars, totalPRs, contributedTo } = await fetchStats(
-    username
-  );
+  const hide = req.query.hide;
+  const show_icons = req.query.show_icons;
+  let {
+    name,
+    totalPRs,
+    totalCommits,
+    totalStars,
+    totalIssues,
+    contributedTo,
+  } = await fetchStats(username);

  res.setHeader("Content-Type", "image/svg+xml");
-  res.send(`
-    <svg width="495" height="130" viewBox="0 0 495 130" 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 x="25" y="70" class="stat bold">Total Stars:</text>
-    <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>
-  `);
+  res.send(
+    renderSVG(
+      {
+        name,
+        totalStars,
+        totalCommits,
+        totalIssues,
+        totalPRs,
+        contributedTo,
+      },
+      { hide: JSON.parse(hide || "[]"), show_icons }
+    )
+  );
 };
@@ -12,10 +12,38 @@ 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"])
+```
+
+### Showing icons
+
+To enable icons you can pass `show_icons=true` in the query param like so
+
+```md
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
+```
+
 ## Demo

+- Default
+
 ![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"])
+
+- Showing icons
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=["issues"]&show_icons=true)
+
 Contributions are welcomed! <3

 Made with :heart: and javascript.
Author	SHA1	Message	Date
anuraghazra	1383a636bb	feat: added icons support	2020-07-09 18:46:41 +05:30
Anurag Hazra	61626af2d4	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	2020-07-09 17:50:15 +05:30