From f9c0e0bff64f325235ccbf936c9d5f7a918ac790 Mon Sep 17 00:00:00 2001 From: Artem Kostiuk Date: Tue, 28 Sep 2021 10:42:59 +0300 Subject: [PATCH 1/8] Change default stats card width with hide rank --- api/index.js | 2 ++ src/cards/stats-card.js | 61 ++++++++++++++++++++++++----------------- 2 files changed, 38 insertions(+), 25 deletions(-) diff --git a/api/index.js b/api/index.js index 0cda587ea02fe..8c4c6714d4307 100644 --- a/api/index.js +++ b/api/index.js @@ -17,6 +17,7 @@ module.exports = async (req, res) => { hide, hide_title, hide_border, + card_width, hide_rank, show_icons, count_private, @@ -67,6 +68,7 @@ module.exports = async (req, res) => { show_icons: parseBoolean(show_icons), hide_title: parseBoolean(hide_title), hide_border: parseBoolean(hide_border), + card_width: parseInt(card_width, 10), hide_rank: parseBoolean(hide_rank), include_all_commits: parseBoolean(include_all_commits), line_height, diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index 22e4be765c749..32f71134f1986 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -60,6 +60,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { show_icons = false, hide_title = false, hide_border = false, + card_width, hide_rank = false, include_all_commits = false, line_height = 25, @@ -75,6 +76,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { disable_animations = false, } = options; + const lheight = parseInt(line_height, 10); // returns theme based colors with proper overrides and defaults @@ -168,26 +170,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { hide_rank ? 0 : 150, ); - // Conditionally rendered elements - const rankCircle = hide_rank - ? "" - : ` - - - - - ${rank.level} - - - `; - // the better user's score the the rank will be closer to zero so // subtracting 100 to get the progress in 100% const progress = 100 - rank.score; @@ -203,13 +185,22 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { return measureText(custom_title ? custom_title : i18n.t("statcard.title")); }; - const width = hide_rank + /* + When hide_rank=true, minimum card width is max of 270 and length of title + paddings. + When hide_rank=false, minimum card_width is 340. + Numbers are picked by looking at existing dimensions on production. + */ + const minCardWidth = hide_rank ? clampValue( 50 /* padding */ + calculateTextWidth() * 2, - 270 /* min */, - Infinity, - ) - : 495; + 270, + Infinity) + : 340 + const defaultCardWidth = hide_rank ? 270 : 495 + let width = isNaN(card_width) ? defaultCardWidth : card_width + if (width < minCardWidth) { + width = minCardWidth + } const card = new Card({ customTitle: custom_title, @@ -232,6 +223,26 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { if (disable_animations) card.disableAnimations(); + // Conditionally rendered elements + const rankCircle = hide_rank + ? "" + : ` + + + + + ${rank.level} + + + `; + return card.render(` ${rankCircle} From cc282739341953858711800a0f8dba9e1d88a329 Mon Sep 17 00:00:00 2001 From: Artem Kostiuk Date: Tue, 28 Sep 2021 10:43:19 +0300 Subject: [PATCH 2/8] Add tests for stats card with card_width --- tests/renderStatsCard.test.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 96a48d1a9d7bd..fc0d4fab6e498 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -75,6 +75,22 @@ describe("Test renderStatsCard", () => { expect(queryByTestId(document.body, "rank-circle")).not.toBeInTheDocument(); }); + it("should render with custom width set", () => { + document.body.innerHTML = renderStatsCard(stats); + expect(document.querySelector("svg")).toHaveAttribute("width", "495"); + + document.body.innerHTML = renderStatsCard(stats, { card_width: 400 }); + expect(document.querySelector("svg")).toHaveAttribute("width", "400"); + }); + + it("should render with custom width set and limit minimum width", () => { + document.body.innerHTML = renderStatsCard(stats, { card_width: 1 }); + expect(document.querySelector("svg")).toHaveAttribute("width", "340"); + + document.body.innerHTML = renderStatsCard(stats, { card_width: 1, hide_rank: true }); + expect(document.querySelector("svg")).toHaveAttribute("width", "305.81250000000006"); + }); + it("should render default colors properly", () => { document.body.innerHTML = renderStatsCard(stats); From dc78bad925e57ac875e9da435c546c1c4a63ab97 Mon Sep 17 00:00:00 2001 From: Artem Kostiuk Date: Tue, 28 Sep 2021 10:48:53 +0300 Subject: [PATCH 3/8] Add card_width Stats Card description to readme --- readme.md | 1 + 1 file changed, 1 insertion(+) diff --git a/readme.md b/readme.md index b06fd64c17e24..9d7a088963c34 100644 --- a/readme.md +++ b/readme.md @@ -183,6 +183,7 @@ You can provide multiple comma-separated values in bg_color option to render a g - `hide` - Hides the specified items from stats _(Comma-separated values)_ - `hide_title` - _(boolean)_ +- `card_width` - Set the card's width manually _(number)_ - `hide_rank` - _(boolean)_ hides the rank and automatically resizes the card width - `show_icons` - _(boolean)_ - `include_all_commits` - Count total commits instead of just the current year commits _(boolean)_ From f6426274927906414f8a0d3266ee9115cf388e20 Mon Sep 17 00:00:00 2001 From: rickstaa Date: Thu, 4 Nov 2021 17:56:59 +0100 Subject: [PATCH 4/8] fix: add icon width to stats-card min width calculation --- src/cards/stats-card.js | 31 ++++++++++++++----------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index 32f71134f1986..fafbd39058769 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -35,10 +35,10 @@ const createTextNode = ({ ${iconSvg} ${label}: - ${kValue} @@ -76,7 +76,6 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { disable_animations = false, } = options; - const lheight = parseInt(line_height, 10); // returns theme based colors with proper overrides and defaults @@ -186,20 +185,18 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { }; /* - When hide_rank=true, minimum card width is max of 270 and length of title + paddings. - When hide_rank=false, minimum card_width is 340. + When hide_rank=true, the minimum card width is 270 px + the title length and padding. + When hide_rank=false, the minimum card_width is 340 px + the icon width (if show_icons=true). Numbers are picked by looking at existing dimensions on production. */ + const iconWidth = show_icons ? 16 : 0; const minCardWidth = hide_rank - ? clampValue( - 50 /* padding */ + calculateTextWidth() * 2, - 270, - Infinity) - : 340 - const defaultCardWidth = hide_rank ? 270 : 495 - let width = isNaN(card_width) ? defaultCardWidth : card_width + ? clampValue(50 /* padding */ + calculateTextWidth() * 2, 270, Infinity) + : 340 + iconWidth; + const defaultCardWidth = hide_rank ? 270 : 495; + let width = isNaN(card_width) ? defaultCardWidth : card_width; if (width < minCardWidth) { - width = minCardWidth + width = minCardWidth; } const card = new Card({ @@ -226,7 +223,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { // Conditionally rendered elements const rankCircle = hide_rank ? "" - : ` @@ -252,7 +249,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { gap: lheight, direction: "column", }).join("")} - + `); }; From 34d642356f14a267ca8cc0d03effcb602fe4c34f Mon Sep 17 00:00:00 2001 From: rickstaa Date: Thu, 4 Nov 2021 18:00:07 +0100 Subject: [PATCH 5/8] fix: fixes rank circle padding problem This commit fixes a padding problem that was introduced in f9c0e0bff64f325235ccbf936c9d5f7a918ac790. In the new code, the padding around the rank circle will be 50 when the stats card is bigger than 450. When it is smaller than 450 the left and right padding will shrink equally. --- src/cards/stats-card.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/cards/stats-card.js b/src/cards/stats-card.js index fafbd39058769..9388d3a6492f6 100644 --- a/src/cards/stats-card.js +++ b/src/cards/stats-card.js @@ -220,11 +220,30 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => { if (disable_animations) card.disableAnimations(); + /** + * Calculates the right rank circle translation values such that the rank circle + * keeps respecting the padding. + * + * width > 450: The default left padding of 50 px will be used. + * width < 450: The left and right padding will shrink equally. + * + * @returns {number} - Rank circle translation value. + */ + const calculateRankXTranslation = () => { + if (width < 450) { + return width - 95 + (45 * (450 - 340)) / 110; + } else { + return width - 95; + } + }; + // Conditionally rendered elements const rankCircle = hide_rank ? "" : ` + transform="translate(${calculateRankXTranslation()}, ${ + height / 2 - 50 + })"> From 61e287b34632b95b14e328188ebae3df694dfe41 Mon Sep 17 00:00:00 2001 From: rickstaa Date: Fri, 16 Sep 2022 12:18:26 +0200 Subject: [PATCH 6/8] style: run prettier --- tests/renderStatsCard.test.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 14a7196b81741..32b472b283ff8 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -87,8 +87,14 @@ describe("Test renderStatsCard", () => { document.body.innerHTML = renderStatsCard(stats, { card_width: 1 }); expect(document.querySelector("svg")).toHaveAttribute("width", "340"); - document.body.innerHTML = renderStatsCard(stats, { card_width: 1, hide_rank: true }); - expect(document.querySelector("svg")).toHaveAttribute("width", "305.81250000000006"); + document.body.innerHTML = renderStatsCard(stats, { + card_width: 1, + hide_rank: true, + }); + expect(document.querySelector("svg")).toHaveAttribute( + "width", + "305.81250000000006", + ); }); it("should render default colors properly", () => { From bab00bf0faf8ebaae6ebc9d9e01e82310994f0c9 Mon Sep 17 00:00:00 2001 From: rickstaa Date: Fri, 16 Sep 2022 12:46:39 +0200 Subject: [PATCH 7/8] tests: add extra stats 'card_width' tests This commit makes sure we also test the stats card width for the case that the 'show_icons' option is enabled. --- tests/renderStatsCard.test.js | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index 32b472b283ff8..b17ed3e8d3faf 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -95,6 +95,36 @@ describe("Test renderStatsCard", () => { "width", "305.81250000000006", ); + + document.body.innerHTML = renderStatsCard(stats, { + card_width: 1, + hide_rank: true, + show_icons: true, + }); + expect(document.querySelector("svg")).toHaveAttribute( + "width", + "305.81250000000006", + ); + + document.body.innerHTML = renderStatsCard(stats, { + card_width: 1, + hide_rank: false, + show_icons: true, + }); + expect(document.querySelector("svg")).toHaveAttribute( + "width", + "356", + ); + + document.body.innerHTML = renderStatsCard(stats, { + card_width: 1, + hide_rank: false, + show_icons: false, + }); + expect(document.querySelector("svg")).toHaveAttribute( + "width", + "340", + ); }); it("should render default colors properly", () => { From 247d1a3cad9bdc8206599865feaa3a528bcaad10 Mon Sep 17 00:00:00 2001 From: rickstaa Date: Fri, 16 Sep 2022 12:48:45 +0200 Subject: [PATCH 8/8] style: run prettier --- tests/renderStatsCard.test.js | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/tests/renderStatsCard.test.js b/tests/renderStatsCard.test.js index b17ed3e8d3faf..09bd9b044eef4 100644 --- a/tests/renderStatsCard.test.js +++ b/tests/renderStatsCard.test.js @@ -111,20 +111,14 @@ describe("Test renderStatsCard", () => { hide_rank: false, show_icons: true, }); - expect(document.querySelector("svg")).toHaveAttribute( - "width", - "356", - ); + expect(document.querySelector("svg")).toHaveAttribute("width", "356"); document.body.innerHTML = renderStatsCard(stats, { card_width: 1, hide_rank: false, show_icons: false, }); - expect(document.querySelector("svg")).toHaveAttribute( - "width", - "340", - ); + expect(document.querySelector("svg")).toHaveAttribute("width", "340"); }); it("should render default colors properly", () => {