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

[abap34]

What's Change ?

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

(Fix #3707)

Implementation

1. Add display_bytes parameter to api/top-langs.js and src/cards/types.d.ts.
2. Pass this parameter to each render~Layout function.
3. Implement formatBytes in src/common/utils.js. This function formats the bytes into a human readable string
4. 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[bot]]

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

[abap34]

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]

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]

OK, I understand your point.

I will implement bytes and percentages in this PR.

[abap34]

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.