From 1740dbd4f3c356d4309e6a2e68e14fadf788796c Mon Sep 17 00:00:00 2001
From: Caeden Perelli-Harris <caedenperelliharris@gmail.com>
Date: Sat, 1 Apr 2023 05:47:56 +0100
Subject: [PATCH] Add format stats option (#2155)

* feat: added `format_stats` option (#2128)

* refactor: change `format_stats` to `short_values` (#2128)

* test: create shorten values test (#2128)

* Update readme.md

Co-authored-by: Rick Staa <rick.staa@outlook.com>

* refactor: rename ``short_values`` to ``number_format``

* Update readme.md

Co-authored-by: Rick Staa <rick.staa@outlook.com>

* Update src/cards/stats-card.js

Co-authored-by: Rick Staa <rick.staa@outlook.com>

* refactor: format codebase

---------

Co-authored-by: Rick Staa <rick.staa@outlook.com>
---
 api/index.js                  | 2 ++
 readme.md                     | 1 +
 src/cards/stats-card.js       | 6 +++++-
 src/cards/types.d.ts          | 1 +
 tests/renderStatsCard.test.js | 9 +++++++++
 5 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/api/index.js b/api/index.js
index b449d43b490801..e89c74688d1163 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 7a602284601261..91a1cfa9f88701 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 f39a968f180659..c60ea51d5119c0 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 52ee0edb6a4592..a3abc23e98a36c 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 & {
diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js
index 748b7a32cd32b6..110121ac9e4b66 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");
+  });
 });