feat: add bytes stats format option for top-languages card (#3708)

* feat: add `display_bytes` option to top-languages.

* docs: add description about display bytes in top-languages

* feat: add `stats_format` option instead of `display_bytes`

* docs: add description about stats format in top-languages

* refactor: rewrite with function to determine display value

* docs: add `stats_format`to table of parameter

* fix: remove unnecessary decimal part from format of bytes

* tests: add tests of stats_format in top-langs card

* Update tests/renderTopLanguagesCard.test.js

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* Update readme.md

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

* prettier

* jsdoc

---------

Co-authored-by: Alexandr <qwerty541zxc@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

tests/renderTopLanguagesCard.test.js

@@ -849,4 +849,40 @@ describe("Test renderTopLanguages", () => {
       "No languages data.",
     );
   });
+
+  it("should show proper stats format", () => {
+    document.body.innerHTML = renderTopLanguages(langs, {
+      layout: "compact",
+      stats_format: "percentages",
+    });
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 40.00%",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 40.00%",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 20.00%",
+    );
+
+    document.body.innerHTML = renderTopLanguages(langs, {
+      layout: "compact",
+      stats_format: "bytes",
+    });
+
+    expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent(
+      "HTML 200.0 B",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent(
+      "javascript 200.0 B",
+    );
+
+    expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent(
+      "css 100.0 B",
+    );
+  });
 });

tests/utils.test.js

@@ -7,6 +7,7 @@ import {
   parseBoolean,
   renderError,
   wrapTextMultiline,
+  formatBytes,
 } from "../src/common/utils.js";
 import { expect, it, describe } from "@jest/globals";
 
@@ -134,6 +135,20 @@ describe("Test utils.js", () => {
       borderColor: "#fff",
     });
   });
+
+  it("formatBytes: should return expected values", () => {
+    expect(formatBytes(0)).toBe("0 B");
+    expect(formatBytes(100)).toBe("100.0 B");
+    expect(formatBytes(1024)).toBe("1.0 KB");
+    expect(formatBytes(1024 * 1024)).toBe("1.0 MB");
+    expect(formatBytes(1024 * 1024 * 1024)).toBe("1.0 GB");
+    expect(formatBytes(1024 * 1024 * 1024 * 1024)).toBe("1.0 TB");
+    expect(formatBytes(1024 * 1024 * 1024 * 1024 * 1024)).toBe("1.0 PB");
+    expect(formatBytes(1024 * 1024 * 1024 * 1024 * 1024 * 1024)).toBe("1.0 EB");
+
+    expect(formatBytes(1234 * 1024)).toBe("1.2 MB");
+    expect(formatBytes(123.4 * 1024)).toBe("123.4 KB");
+  });
 });
 
 describe("wrapTextMultiline", () => {