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

@@ -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),
       }),

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.

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,
       }),
     );
 

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 & {

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");
+  });
 });