avior/codestats-readme
1
0
Fork 0
mirror of https://github.com/Aviortheking/codestats-readme.git synced 2025-04-22 10:42:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* feat: added ability to hide specific stats

* chore: added docs for ?hide=

* chore: fix readme docs

* chore: updated docs preview link
This commit is contained in:
Anurag Hazra 2020-07-09 17:50:15 +05:30 committed by GitHub
parent 59ae7f366e
commit 61626af2d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 93 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
api/index.js
View File

@ -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(
username
);
const hide = req.query.hide;
let {
name,
totalPRs,
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,
totalIssues,
totalPRs,
contributedTo,
},
{ hide: JSON.parse(hide || "[]") }
)
);
};

14
readme.md
View File

@ -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.