feat: auto resize card if rank is hidden (#721) (1c123260) · Commits · 郑智淋 / github-readme-stats

readme.md

+1 −1

Original line number	Diff line number	Diff line
		@@ -156,7 +156,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)_
		- `hide_rank` - _(boolean)_
		- `hide_rank` - _(boolean)_ hides the rank and automatically resizes the card width
		- `hide_border` - _(boolean)_
		- `show_icons` - _(boolean)_
		- `include_all_commits` - Count total commits instead of just the current year commits _(boolean)_

src/cards/stats-card.js

+20 −2

Original line number	Diff line number	Diff line
		@@ -3,7 +3,13 @@ const Card = require("../common/Card");
		const icons = require("../common/icons");
		const { getStyles } = require("../getStyles");
		const { statCardLocales } = require("../translations");
		const { kFormatter, getCardColors, FlexLayout } = require("../common/utils");
		const {
		kFormatter,
		FlexLayout,
		clampValue,
		measureText,
		getCardColors,
		} = require("../common/utils");

		const createTextNode = ({
		icon,
		@@ -176,10 +182,22 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
		progress,
		});

		const calculateTextWidth = () => {
		return measureText(custom_title ? custom_title : i18n.t("statcard.title"));
		};

		const width = hide_rank
		? clampValue(
		50 /* padding / + calculateTextWidth() 2,
		270 /* min */,
		Infinity,
		)
		: 495;

		const card = new Card({
		customTitle: custom_title,
		defaultTitle: i18n.t("statcard.title"),
		width: 495,
		width,
		height,
		colors: {
		titleColor,

src/common/utils.js

+36 −0

Original line number	Diff line number	Diff line
		@@ -188,6 +188,41 @@ class CustomError extends Error {
		static USER_NOT_FOUND = "USER_NOT_FOUND";
		}

		// https://stackoverflow.com/a/48172630/10629172
		function measureText(str, fontSize = 10) {
		// prettier-ignore
		const widths = [
		0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
		0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
		0, 0, 0, 0, 0.2796875, 0.2765625,
		0.3546875, 0.5546875, 0.5546875, 0.8890625, 0.665625, 0.190625,
		0.3328125, 0.3328125, 0.3890625, 0.5828125, 0.2765625, 0.3328125,
		0.2765625, 0.3015625, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
		0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875, 0.5546875,
		0.2765625, 0.2765625, 0.584375, 0.5828125, 0.584375, 0.5546875,
		1.0140625, 0.665625, 0.665625, 0.721875, 0.721875, 0.665625,
		0.609375, 0.7765625, 0.721875, 0.2765625, 0.5, 0.665625,
		0.5546875, 0.8328125, 0.721875, 0.7765625, 0.665625, 0.7765625,
		0.721875, 0.665625, 0.609375, 0.721875, 0.665625, 0.94375,
		0.665625, 0.665625, 0.609375, 0.2765625, 0.3546875, 0.2765625,
		0.4765625, 0.5546875, 0.3328125, 0.5546875, 0.5546875, 0.5,
		0.5546875, 0.5546875, 0.2765625, 0.5546875, 0.5546875, 0.221875,
		0.240625, 0.5, 0.221875, 0.8328125, 0.5546875, 0.5546875,
		0.5546875, 0.5546875, 0.3328125, 0.5, 0.2765625, 0.5546875,
		0.5, 0.721875, 0.5, 0.5, 0.5, 0.3546875, 0.259375, 0.353125, 0.5890625,
		];

		const avg = 0.5279276315789471;
		return (
		str
		.split("")
		.map((c) =>
		c.charCodeAt(0) < widths.length ? widths[c.charCodeAt(0)] : avg,
		)
		.reduce((cur, acc) => acc + cur) * fontSize
		);
		}

		module.exports = {
		renderError,
		kFormatter,
		@@ -201,6 +236,7 @@ module.exports = {
		getCardColors,
		clampValue,
		wrapTextMultiline,
		measureText,
		logger,
		CONSTANTS,
		CustomError,

tests/renderStatsCard.test.js

+21 −0

Original line number	Diff line number	Diff line
		@@ -210,6 +210,27 @@ describe("Test renderStatsCard", () => {
		).not.toHaveAttribute("x");
		});

		it("should auto resize if hide_rank is true", () => {
		document.body.innerHTML = renderStatsCard(stats, {
		hide_rank: true,
		});

		expect(
		document.body.getElementsByTagName("svg")[0].getAttribute("width"),
		).toBe("305.81250000000006");
		});

		it("should auto resize if hide_rank is true & custom_title is set", () => {
		document.body.innerHTML = renderStatsCard(stats, {
		hide_rank: true,
		custom_title: "Hello world",
		});

		expect(
		document.body.getElementsByTagName("svg")[0].getAttribute("width"),
		).toBe("270");
		});

		it("should render translations", () => {
		document.body.innerHTML = renderStatsCard(stats, { locale: "cn" });
		expect(document.getElementsByClassName("header")[0].textContent).toBe(

Admin message