feat: Add a display bytes option to top-languages card #3708

abap34 · 2024-03-25T08:28:03Z

What's Change ?

Add the &display_bytes= parameter to the top-languages card.

Implementation

Add display_bytes parameter to api/top-langs.js and src/cards/types.d.ts.
Pass this parameter to each render~Layout function.
Implement formatBytes in src/common/utils.js. This function formats the bytes into a human readable string
Write the following code so that the appropriate values are displayed where the progress is actually generated.

const percentage = ((lang.size / totalSize) * 100).toFixed(2) + "%";
const bytes = formatBytes(lang.size);

const showValue = displayBytes ? bytes : percentage;

Result

A preview of this PR can be seen at https://github-readme-stats-git-featuredisplaybytes-abap34.vercel.app/api/top-langs.

Example:

vercel · 2024-03-25T08:28:06Z

@abap34 is attempting to deploy a commit to the github readme stats Team on Vercel.

A member of the Team first needs to authorize it.

qwerty541

Hey, @abap34! Thanks for opening this pull request.

I'd like to make some changes in user API. Let's replace display_bytes: boolean query string parameter with stats_format: "percentages" | "bytes".

I think that this way the code will be more scalable. In case if we are going to implement more stats formats for this card in future, like displaying count of repositories where the particular languages was used or count of lines written on particular languages or anything else, then we will be able to extend an existing query string parameter with new enum values instead of bloating the total number of query string parameters with display_repos_count, display_lines_count etc.

abap34 · 2024-03-26T02:49:21Z

Thanks for the review, @qwerty541!

It would be better to implement it as you recommended. I will make the modifications.

By the way, if we implement it this way, I think a display style like "670,404 bytes" can be added. (add options like bytes_short, bytes)

Displaying the byte count as is is my favorite except that it might break the layout. It's fun to see the number of bytes increase through daily coding.

I think it would be nice to have this display option if there is also a shortened version, so that users can choose a shortened one to preserve the layout.

But of course, stability of the layout is also important.
What do you think about this idea?

qwerty541 · 2024-03-31T21:13:56Z

In my opinion it will be better to separate these two features. I'm okay with addition of bytes stats format for now and bytes_long in future. I always try to adhere the following principle:

Less code changes/features per pull request. => More easier and faster review. => More chances to get another collaborators approval and merge.

Let's keep this pull request more simple since I expect that layout changes will requre quite more code changes.

abap34 · 2024-04-03T04:16:01Z

OK, I understand your point.

I will implement bytes and percentages in this PR.

abap34 · 2024-04-03T10:19:14Z

I have done the implementation.
(https://github-readme-stats-git-featuredisplaybytes-abap34s-projects.vercel.app/api/top-langs/?username=anuraghazra&stats_format=bytes to preview!)

The only change I made was to replace all displayBytes with statsFormat and error-checking.

qwerty541

Hey, @abap34! Thanks for your efforts and patience. I just left a few comments about minor things that needs to be fixed/improved. After these changes I will be ready to give my approval. Special thanks for deployed preview link, this helped to avoid the need to checkout this branch and test locally.

qwerty541 · 2024-04-10T08:29:06Z

src/cards/top-languages-card.js

+ const progress = parseFloat(((size / totalSize) * 100).toFixed(2));
+ const bytes = formatBytes(size);
+ const showValue = statsFormat === "bytes" ? bytes : `${progress}%`;


I see that this file contains the almost same code on 266-269 lines. I think it will be better to avoid duplication of this logic and create separate function.

I'd prefer it that way too, modified at 0c90270.

qwerty541 · 2024-04-10T08:31:25Z

tests/utils.test.js

@@ -7,6 +7,7 @@ import {
 parseBoolean,


It will be awesome if you can add test of this feature in renderStatsCard.test.js

I added some tests at 1c85ace

qwerty541 · 2024-04-10T08:33:16Z

readme.md

@@ -108,6 +108,7 @@ Please visit [this link](https://give.do/fundraisers/stand-beside-the-victims-of
 - [Donut Vertical Chart Language Card Layout](#donut-vertical-chart-language-card-layout)


You also need to add new query string parameter information in table on 404 line

Sorry, I did not check enough.
I added it at 27da644.

qwerty541 · 2024-04-10T08:39:57Z

tests/utils.test.js

@@ -134,6 +135,20 @@ describe("Test utils.js", () => {
 borderColor: "#fff",
 });
 });
+
+ it("formatBytes: should return expected values", () => {
+ expect(formatBytes(0)).toBe("0.0 B");


I have some doubts about that bytes have decimal part. I think it should be just 0 B.

Okay. I removed unnecessary decimal parts at 7e17b50

abap34 added 2 commits March 25, 2024 16:44

feat: add display_bytes option to top-languages.

3b101f3

docs: add description about display bytes in top-languages

9d37526

github-actions bot added documentation Improvements or additions to documentation. lang-card Issues related to the language card. labels Mar 25, 2024

qwerty541 requested changes Mar 25, 2024

View reviewed changes

qwerty541 added the feature label Mar 25, 2024

qwerty541 mentioned this pull request Mar 25, 2024

Add an option to display byte count for Top-languages #3707

Open

abap34 added 2 commits April 3, 2024 19:05

feat: add stats_format option instead of display_bytes

ef70589

docs: add description about stats format in top-languages

ffc0230

qwerty541 requested changes Apr 10, 2024

View reviewed changes

abap34 added 4 commits April 12, 2024 14:39

refactor: rewrite with function to determine display value

0c90270

docs: add stats_formatto table of parameter

27da644

fix: remove unnecessary decimal part from format of bytes

7e17b50

tests: add tests of stats_format in top-langs card

1c85ace

abap34 requested a review from qwerty541 April 13, 2024 16:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Add a display bytes option to top-languages card #3708

feat: Add a display bytes option to top-languages card #3708

abap34 commented Mar 25, 2024 •

edited

vercel bot commented Mar 25, 2024

qwerty541 left a comment

abap34 commented Mar 26, 2024 •

edited

qwerty541 commented Mar 31, 2024

abap34 commented Apr 3, 2024 •

edited

abap34 commented Apr 3, 2024

qwerty541 left a comment

qwerty541 Apr 10, 2024

abap34 Apr 13, 2024

qwerty541 Apr 10, 2024

abap34 Apr 13, 2024 •

edited

qwerty541 Apr 10, 2024

abap34 Apr 13, 2024 •

edited

qwerty541 Apr 10, 2024

abap34 Apr 13, 2024

		@@ -108,6 +108,7 @@ Please visit [this link](https://give.do/fundraisers/stand-beside-the-victims-of
		- [Donut Vertical Chart Language Card Layout](#donut-vertical-chart-language-card-layout)

feat: Add a display bytes option to top-languages card #3708

Are you sure you want to change the base?

feat: Add a display bytes option to top-languages card #3708

Conversation

abap34 commented Mar 25, 2024 • edited

What's Change ?

Implementation

Result

vercel bot commented Mar 25, 2024

qwerty541 left a comment

Choose a reason for hiding this comment

abap34 commented Mar 26, 2024 • edited

qwerty541 commented Mar 31, 2024

abap34 commented Apr 3, 2024 • edited

abap34 commented Apr 3, 2024

qwerty541 left a comment

Choose a reason for hiding this comment

qwerty541 Apr 10, 2024

Choose a reason for hiding this comment

abap34 Apr 13, 2024

Choose a reason for hiding this comment

qwerty541 Apr 10, 2024

Choose a reason for hiding this comment

abap34 Apr 13, 2024 • edited

Choose a reason for hiding this comment

qwerty541 Apr 10, 2024

Choose a reason for hiding this comment

abap34 Apr 13, 2024 • edited

Choose a reason for hiding this comment

qwerty541 Apr 10, 2024

Choose a reason for hiding this comment

abap34 Apr 13, 2024

Choose a reason for hiding this comment

abap34 commented Mar 25, 2024 •

edited

abap34 commented Mar 26, 2024 •

edited

abap34 commented Apr 3, 2024 •

edited

abap34 Apr 13, 2024 •

edited

abap34 Apr 13, 2024 •

edited