Different default languages count for different languages card layouts (#2774)

* Different default languages count for different layouts

* docs: update default  documentation

Updates the README so that the new `langs_count` default behavoir is
explained to users.

---------

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

readme.md

@@ -292,7 +292,7 @@ You can provide multiple comma-separated values in the bg_color option to render
 -   `hide_title` - _(boolean)_. Default: `false`.
 -   `layout` - Switch between five available layouts `normal` & `compact` & `donut` & `donut-vertical` & `pie`. Default: `normal`.
 -   `card_width` - Set the card's width manually _(number)_. Default `300`.
--   `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default `5`.
+-   `langs_count` - Show more languages on the card, between 1-10 _(number)_. Default: `5` for `normal` and `donut`, `6` for other layouts.
 -   `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
 -   `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`.
 -   `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.

src/cards/top-languages-card.js

@@ -14,11 +14,16 @@ import { langCardLocales } from "../translations.js";
 
 const DEFAULT_CARD_WIDTH = 300;
 const MIN_CARD_WIDTH = 280;
-const DEFAULT_LANGS_COUNT = 5;
 const DEFAULT_LANG_COLOR = "#858585";
 const CARD_PADDING = 25;
 const COMPACT_LAYOUT_BASE_HEIGHT = 90;
 
+const NORMAL_LAYOUT_DEFAULT_LANGS_COUNT = 5;
+const COMPACT_LAYOUT_DEFAULT_LANGS_COUNT = 6;
+const DONUT_LAYOUT_DEFAULT_LANGS_COUNT = 5;
+const PIE_LAYOUT_DEFAULT_LANGS_COUNT = 6;
+const DONUT_VERTICAL_LAYOUT_DEFAULT_LANGS_COUNT = 6;
+
 /**
  * @typedef {import("../fetchers/types").Lang} Lang
  */
@@ -668,6 +673,26 @@ const noLanguagesDataNode = ({ color, text, layout }) => {
   `;
 };
 
+/**
+ * Get default languages count for provided card layout.
+ *
+ * @param {import("./types").TopLangOptions["layout"] | undefined} layout Input layout string
+ * @return {number} Default languages count for input layout
+ */
+const getDefaultLanguagesCountByLayout = (layout) => {
+  if (layout === "compact") {
+    return COMPACT_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "donut") {
+    return DONUT_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "donut-vertical") {
+    return DONUT_VERTICAL_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else if (layout === "pie") {
+    return PIE_LAYOUT_DEFAULT_LANGS_COUNT;
+  } else {
+    return NORMAL_LAYOUT_DEFAULT_LANGS_COUNT;
+  }
+};
+
 /**
  * Renders card that display user's most frequently used programming languages.
  *
@@ -689,7 +714,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
     layout,
     custom_title,
     locale,
-    langs_count = DEFAULT_LANGS_COUNT,
+    langs_count = getDefaultLanguagesCountByLayout(layout),
     border_radius,
     border_color,
     disable_animations,
@@ -837,4 +862,5 @@ export {
   trimTopLanguages,
   renderTopLanguages,
   MIN_CARD_WIDTH,
+  getDefaultLanguagesCountByLayout,
 };

tests/renderTopLanguages.test.js

@@ -16,6 +16,7 @@ import {
   trimTopLanguages,
   renderTopLanguages,
   MIN_CARD_WIDTH,
+  getDefaultLanguagesCountByLayout,
 } from "../src/cards/top-languages-card.js";
 
 // adds special assertions like toHaveTextContent
@@ -328,6 +329,15 @@ describe("Test renderTopLanguages helper functions", () => {
       totalLanguageSize: 300,
     });
   });
+
+  it("getDefaultLanguagesCountByLayout", () => {
+    expect(getDefaultLanguagesCountByLayout("normal")).toStrictEqual(5);
+    expect(getDefaultLanguagesCountByLayout(undefined)).toStrictEqual(5);
+    expect(getDefaultLanguagesCountByLayout("compact")).toStrictEqual(6);
+    expect(getDefaultLanguagesCountByLayout("donut")).toStrictEqual(5);
+    expect(getDefaultLanguagesCountByLayout("donut-vertical")).toStrictEqual(6);
+    expect(getDefaultLanguagesCountByLayout("pie")).toStrictEqual(6);
+  });
 });
 
 describe("Test renderTopLanguages", () => {