diff --git a/readme.md b/readme.md index e7ef2b7..d0669d4 100644 --- a/readme.md +++ b/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`. diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 23c76bc..d854c95 100644 --- a/src/cards/top-languages-card.js +++ b/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, }; diff --git a/tests/renderTopLanguages.test.js b/tests/renderTopLanguages.test.js index b02d51b..c906dec 100644 --- a/tests/renderTopLanguages.test.js +++ b/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", () => {