Repository: anuraghazra/github-readme-stats
Pull request #2155 (2022-10-07 20:24:17)

Add format stats option
Implements #2128

The ability for users to add a `format_stats` option removing the annoying `k` formating. This defaults to `true`

vercel[bot]: @CaedenPH is attempting to deploy a commit to the **github readme stats** Team on [Vercel](https://vercel.com).

A member of the Team first needs to [authorize it](https://vercel.com/git/authorize?team=github%20readme%20stats&type=github&job=%7B%22headInfo%22%3A%7B%22sha%22%3A%225e7805f615d37a60fd0358bbe8dedae8a176926e%22%7D%2C%22id%22%3A%22QmUbMjx6Ev2nqGrY95VKUyD889zhr4UaoD5kWcqxCpeK5s%22%2C%22org%22%3A%22anuraghazra%22%2C%22prId%22%3A2155%2C%22repo%22%3A%22github-readme-stats%22%7D).


rickstaa: @CaedenPH Thanks for the pull request. Although we are not merging this PR for now, I'm happy to add the `hacktoberfest-accepted` label if you make the requested changes above.
CaedenPH: @rickstaa I have added tests and renamed `format_stats` to `shorten_values`
codecov[bot]: # [Codecov](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2155?src=pr&el=h1&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra) Report
Base: **96.65**% // Head: **96.65**% // Increases project coverage by **`+0.00%`** :tada:
> Coverage data is based on head [(`56a4aad`)](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2155?src=pr&el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra) compared to base [(`6001270`)](https://codecov.io/gh/anuraghazra/github-readme-stats/commit/60012707c7eaa51fd0377ce8ae46da6ebad24342?el=desc&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra).
> Patch coverage: 100.00% of modified lines in pull request are covered.

<details><summary>Additional details and impacted files</summary>


```diff
@@           Coverage Diff           @@
##           master    #2155   +/-   ##
=======================================
  Coverage   96.65%   96.65%           
=======================================
  Files          22       22           
  Lines        3792     3797    +5     
  Branches      323      324    +1     
=======================================
+ Hits         3665     3670    +5     
  Misses        125      125           
  Partials        2        2           
```


| [Impacted Files](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2155?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra) | Coverage Δ | |
|---|---|---|
| [api/index.js](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2155/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra#diff-YXBpL2luZGV4Lmpz) | `95.83% <100.00%> (+0.08%)` | :arrow_up: |
| [src/cards/stats-card.js](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2155/diff?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra#diff-c3JjL2NhcmRzL3N0YXRzLWNhcmQuanM=) | `100.00% <100.00%> (ø)` | |

Help us with your feedback. Take ten seconds to tell us [how you rate us](https://about.codecov.io/nps?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra). Have a feature suggestion? [Share it here.](https://app.codecov.io/gh/feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra)

</details>

[:umbrella: View full report at Codecov](https://codecov.io/gh/anuraghazra/github-readme-stats/pull/2155?src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra).   
:loudspeaker: Do you have feedback about the report comment? [Let us know in this issue](https://about.codecov.io/codecov-pr-comment-feedback/?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=Anurag+Hazra).

rickstaa: @CaedenPH Thanks for your contribution. I accepted your changes and attached the `hacktoberfest-accepted` label, so it should appear in 7 days as accepted in your Hacktoberfest dashboard. I can, however, not guarantee that we will ever merge this PR (see https://github.com/anuraghazra/github-readme-stats/issues/2128#issuecomment-1271427583).
CaedenPH: > @CaedenPH Thanks for your contribution. I accepted your changes and attached the `hacktoberfest-accepted` label, so it should appear in 7 days as accepted in your Hacktoberfest dashboard. I can, however, not guarantee that we will ever merge this PR (see https://github.com/anuraghazra/github-readme-stats/issues/2128#issuecomment-1271427583).

Thanks: To be honest, I completely forgot about hacktoberfest and I'm not trying to get the 4 pull requests. I just made this pull request because its a feature I personally really would love to see implemented and this is an awesome project.

Keep up the great work!
rickstaa: > > @CaedenPH Thanks for your contribution. I accepted your changes and attached the `hacktoberfest-accepted` label, so it should appear in 7 days as accepted in your Hacktoberfest dashboard. I can, however, not guarantee that we will ever merge this PR (see [#2128 (comment)](https://github.com/anuraghazra/github-readme-stats/issues/2128#issuecomment-1271427583)).
> 
> Thanks: To be honest, I completely forgot about hacktoberfest and I'm not trying to get the 4 pull requests. I just made this pull request because its a feature I personally really would love to see implemented and this is an awesome project.
> 
> Keep up the great work!

I see. Thanks again for the contribution! You can already use your PR on your own fork. IF there is enough interest from the community, we will merge it into the master! 👍🏻 
CaedenPH: @anuraghazra 
I believe I have made the changes you want

1) Should we return an error if they pass a value that is not `short` or `long`? Personally I would assume not
2) How should I improve the readme documentation? I feel like I haven't worded it ideally
guylepage3: `+1` for removing the annoying `k suffix`
rickstaa: > @anuraghazra I believe I have made the changes you want
> 
> 1. Should we return an error if they pass a value that is not `short` or `long`? Personally I would assume not
> 2. How should I improve the readme documentation? I feel like I haven't worded it ideally

#### 1.

I think having it fallback to `short`in that case if good enough.

#### 2. 

I think the documentation is clear.
rickstaa: > `+1` for removing the annoying `k suffix`

I asked @Zo-Bro-23 to review it so that this PR can be merged.
guylepage3: @Zo-Bro-23 — Bro. Can you review this when you get a moment? Thank you.
Zo-Bro-23: I will merge this, but it would be great if this was added for the repo card too.

Patch:
diff --git a/api/index.js b/api/index.js
index b449d43..e89c746 100644
--- a/api/index.js
+++ b/api/index.js
@@ -35,6 +35,7 @@ export default async (req, res) => {
     locale,
     disable_animations,
     border_radius,
+    number_format,
     border_color,
   } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
@@ -88,6 +89,7 @@ export default async (req, res) => {
         custom_title,
         border_radius,
         border_color,
+        number_format,
         locale: locale ? locale.toLowerCase() : null,
         disable_animations: parseBoolean(disable_animations),
       }),
diff --git a/readme.md b/readme.md
index 7a60228..91a1cfa 100644
--- a/readme.md
+++ b/readme.md
@@ -289,6 +289,7 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `text_bold` - Use bold text _(boolean)_. Default: `true`.
 -   `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
 -   `ring_color` - Color of the rank circle _(hex color)_. Defaults to the theme ring color if it exists and otherwise the title color.
+-   `number_format` - Switch between two available formats for displaying the card values `short` (i.e. `6.6k`) and `long` (i.e. `6626`). Default: `short`.
 
 > **Note**
 > When hide_rank=`true`, the minimum card width is 270 px + the title length and padding.
diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js
index f39a968..c60ea51 100644
--- a/src/cards/stats-card.js
+++ b/src/cards/stats-card.js
@@ -39,8 +39,10 @@ const createTextNode = ({
   showIcons,
   shiftValuePos,
   bold,
+  number_format,
 }) => {
-  const kValue = kFormatter(value);
+  const kValue =
+    number_format.toLowerCase() === "long" ? value : kFormatter(value);
   const staggerDelay = (index + 3) * 150;
 
   const labelOffset = showIcons ? `x="25"` : "";
@@ -103,6 +105,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     custom_title,
     border_radius,
     border_color,
+    number_format = "short",
     locale,
     disable_animations = false,
   } = options;
@@ -192,6 +195,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         showIcons: show_icons,
         shiftValuePos: 79.01 + (isLongLocale ? 50 : 0),
         bold: text_bold,
+        number_format,
       }),
     );
 
diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts
index 52ee0ed..a3abc23 100644
--- a/src/cards/types.d.ts
+++ b/src/cards/types.d.ts
@@ -22,6 +22,7 @@ export type StatCardOptions = CommonOptions & {
   line_height: number | string;
   custom_title: string;
   disable_animations: boolean;
+  number_format: string;
 };
 
 export type RepoCardOptions = CommonOptions & {


Test patch:
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
index 748b7a3..110121a 100644
--- a/tests/renderStatsCard.test.js
+++ b/tests/renderStatsCard.test.js
@@ -357,4 +357,13 @@ describe("Test renderStatsCard", () => {
     document.body.innerHTML = renderStatsCard(stats, {});
     expect(document.querySelector("rect")).toHaveAttribute("rx", "4.5");
   });
+
+  it("should shorten values", () => {
+    stats["totalCommits"] = 1999;
+
+    document.body.innerHTML = renderStatsCard(stats);
+    expect(getByTestId(document.body, "commits").textContent).toBe("2k");
+    document.body.innerHTML = renderStatsCard(stats, { number_format: "long" });
+    expect(getByTestId(document.body, "commits").textContent).toBe("1999");
+  });
 });