Add format stats option

api/index.js

@@ -37,6 +37,7 @@ export default async (req, res) => {
     locale,
     disable_animations,
     border_radius,
+    number_format,
     border_color,
   } = req.query;
   res.setHeader("Content-Type", "image/svg+xml");
@@ -84,6 +85,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

@@ -80,19 +80,38 @@ Visit <https://indiafightscorona.giveindia.org> and make a small donation to hel
 
 # Features
 
--   [GitHub Stats Card](#github-stats-card)
--   [GitHub Extra Pins](#github-extra-pins)
--   [Top Languages Card](#top-languages-card)
--   [Wakatime Week Stats](#wakatime-week-stats)
--   [Themes](#themes)
--   [Customization](#customization)
-    -   [Common Options](#common-options)
-    -   [Stats Card Exclusive Options](#stats-card-exclusive-options)
-    -   [Repo Card Exclusive Options](#repo-card-exclusive-options)
-    -   [Language Card Exclusive Options](#language-card-exclusive-options)
-    -   [Wakatime Card Exclusive Option](#wakatime-card-exclusive-options)
--   [Deploy Yourself](#deploy-on-your-own-vercel-instance)
-    - [Keep your fork up to date](#keep-your-fork-up-to-date)   
+- [Features](#features)
+- [GitHub Stats Card](#github-stats-card)
+    - [Hiding individual stats](#hiding-individual-stats)
+    - [Adding private contributions count to total commits count](#adding-private-contributions-count-to-total-commits-count)
+    - [Showing icons](#showing-icons)
+    - [Themes](#themes)
+      - [All inbuilt themes](#all-inbuilt-themes)
+    - [Customization](#customization)
+      - [Common Options](#common-options)
+        - [Gradient in bg_color](#gradient-in-bg_color)
+      - [Stats Card Exclusive Options](#stats-card-exclusive-options)
+      - [Repo Card Exclusive Options](#repo-card-exclusive-options)
+      - [Language Card Exclusive Options](#language-card-exclusive-options)
+      - [Wakatime Card Exclusive Options](#wakatime-card-exclusive-options)
+- [GitHub Extra Pins](#github-extra-pins)
+    - [Usage](#usage)
+    - [Demo](#demo)
+- [Top Languages Card](#top-languages-card)
+    - [Usage](#usage-1)
+    - [Exclude individual repositories](#exclude-individual-repositories)
+    - [Hide individual languages](#hide-individual-languages)
+    - [Show more languages](#show-more-languages)
+    - [Compact Language Card Layout](#compact-language-card-layout)
+    - [Demo](#demo-1)
+- [Wakatime Week Stats](#wakatime-week-stats)
+    - [Demo](#demo-2)
+    - [All Demos](#all-demos)
+    - [Quick Tip (Align The Repo Cards)](#quick-tip-align-the-repo-cards)
+  - [Deploy on your own Vercel instance](#deploy-on-your-own-vercel-instance)
+      - [Check Out Step By Step Video Tutorial By @codeSTACKr](#check-out-step-by-step-video-tutorial-by-codestackr)
+    - [Keep your fork up to date](#keep-your-fork-up-to-date)
+  - [:sparkling_heart: Support the project](#sparkling_heart-support-the-project)
 
 # GitHub Stats Card
 
@@ -196,6 +215,7 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `custom_title` - Sets a custom title for the card. Default:  `<username> Github Stats`.
 -   `text_bold` - Use bold text _(boolean)_. Default: `true`.
 -   `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
+-   `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

@@ -34,8 +34,9 @@ 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"` : "";
@@ -97,6 +98,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     custom_title,
     border_radius,
     border_color,
+    number_format = "short",
     locale,
     disable_animations = false,
   } = options;
@@ -185,6 +187,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         shiftValuePos:
           (!include_all_commits ? 50 : 35) + (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

@@ -320,4 +320,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");
+  });
 });