System-End/github-readme-stats
1
0
Fork 0
mirror of https://github.com/System-End/github-readme-stats.git synced 2026-04-19 19:55:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add percentile rank icon (#2859)

Browse source 
* feat: add 'percentile' rank icon

This commit adds the `percentile` option for the `rank_icon` query
variable. This option displays the rank percentile the user belongs to.

* style: improve percentile rank icon styling

* dev

* dev

* dev

---------

Co-authored-by: Alexandr <qwerty541zxc@gmail.com>
This commit is contained in:
Rick Staa 2023-06-20 08:47:02 +02:00 • committed by GitHub
parent de093e8118
commit 2642fc546c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 39 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.vscode/settings.json vendored
View file

@ -1,5 +1,5 @@
{
"markdown.extension.toc.levels": "1..3",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.defaultFormatter": "esbenp.prettier-vscode"
}

6
readme.md
View file

@ -304,7 +304,7 @@ You can provide multiple comma-separated values in the bg\_color option to rende
* `hide_title` - *(boolean)*. Default: `false`.
* `card_width` - Set the card's width manually *(number)*. Default: `500px (approx.)`.
* `hide_rank` - *(boolean)* hides the rank and automatically resizes the card width. Default: `false`.
* `rank_icon` - Shows alternative rank icon (i.e. `github`, `progress` or `default`). Default: `default`.
* `rank_icon` - Shows alternative rank icon (i.e. `github`, `percentile` or `default`). Default: `default`.
* `show_icons` - *(boolean)*. Default: `false`.
* `include_all_commits` - Count total commits instead of just the current year commits *(boolean)*. Default: `false`.
* `line_height` - Sets the line height between text *(number)*. Default: `25`.
@ -557,6 +557,10 @@ Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra\&rank_icon=progress)
* Shows user rank percentile instead of rank level
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra\&rank_icon=percentile)
* Customize Border Color
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra\&border_color=2e4058)

2
src/cards/stats-card.js
View file

@ -328,7 +328,7 @@ const renderStatsCard = (stats = {}, options = {}) => {
<circle class="rank-circle-rim" cx="-10" cy="8" r="40" />
<circle class="rank-circle" cx="-10" cy="8" r="40" />
<g class="rank-text">
${rankIcon(rank_icon, rank?.level, progress)}
${rankIcon(rank_icon, rank?.level, rank?.percentile)}
</g>
</g>`;

2
src/cards/types.d.ts vendored
View file

@ -1,5 +1,5 @@
type ThemeNames = keyof typeof import("../../themes/index.js");
type RankIcon = "default" | "github" | "progress";
type RankIcon = "default" | "github" | "percentile";
export type CommonOptions = {
title_color: string;

15
src/common/icons.js
View file

@ -16,10 +16,10 @@ const icons = {
*
* @param {string} rankIcon - The rank icon type.
* @param {number} rankLevel - The rank level.
* @param {number} progress - The rank progress.
* @param {number} percentile - The rank percentile.
* @returns {string} - The SVG code of the rank icon
*/
const rankIcon = (rankIcon, rankLevel, progress) => {
const rankIcon = (rankIcon, rankLevel, percentile) => {
switch (rankIcon) {
case "github":
return `
@ -27,11 +27,14 @@ const rankIcon = (rankIcon, rankLevel, progress) => {
<path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path>
</svg>
`;
case "progress":
case "percentile":
return `
<text x="-5" y="3" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="progress-rank-icon" class="rank-progress-text">
${progress.toFixed(1)}%
</text>
<text x="-5" y="-12" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="percentile-top-header" class="rank-percentile-header">
Top
</text>
<text x="-5" y="12" alignment-baseline="central" dominant-baseline="central" text-anchor="middle" data-testid="percentile-rank-value" class="rank-percentile-text">
${percentile.toFixed(1)}%
</text>
`;
case "default":
default:

7
src/getStyles.js
View file

@ -98,7 +98,10 @@ const getStyles = ({
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor};
animation: scaleInAnimation 0.3s ease-in-out forwards;
}
.rank-progress-text {
.rank-percentile-header {
font-size: 14px;
}
.rank-percentile-text {
font-size: 16px;
}
@ -130,4 +133,4 @@ const getStyles = ({
`;
};
export { getStyles, getAnimations };
export { getAnimations, getStyles };

10
tests/__snapshots__/renderWakatimeCard.test.js.snap
View file

@ -42,7 +42,10 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
animation: scaleInAnimation 0.3s ease-in-out forwards;
}
.rank-progress-text {
.rank-percentile-header {
font-size: 14px;
}
.rank-percentile-text {
font-size: 16px;
}
@ -225,7 +228,10 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w
font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58;
animation: scaleInAnimation 0.3s ease-in-out forwards;
}
.rank-progress-text {
.rank-percentile-header {
font-size: 14px;
}
.rank-percentile-text {
font-size: 16px;
}

14
tests/renderStatsCard.test.js
View file

@ -418,13 +418,17 @@ describe("Test renderStatsCard", () => {
expect(queryByTestId(document.body, "github-rank-icon")).toBeDefined();
});
it("should show the progress", () => {
it("should show the rank percentile", () => {
document.body.innerHTML = renderStatsCard(stats, {
rank_icon: "progress",
rank_icon: "percentile",
});
expect(queryByTestId(document.body, "rank-progress-text")).toBeDefined();
expect(queryByTestId(document.body, "percentile-top-header")).toBeDefined();
expect(
queryByTestId(document.body, "progress-rank-icon").textContent.trim(),
).toBe((100 - stats.rank.percentile).toFixed(1) + "%");
queryByTestId(document.body, "percentile-top-header").textContent.trim(),
).toBe("Top");
expect(queryByTestId(document.body, "rank-percentile-text")).toBeDefined();
expect(
queryByTestId(document.body, "percentile-rank-value").textContent.trim(),
).toBe(stats.rank.percentile.toFixed(1) + "%");
});
});