fix: wakatime langs_count when layout=compact (#1041) (24063f14) · Commits · 郑智淋 / github-readme-stats

src/cards/wakatime-card.js

+40 −40

Original line number	Diff line number	Diff line
		@@ -129,26 +129,15 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
		theme,
		});

		const statItems = languages
		const filteredLanguages = languages
		? languages
		.filter((language) => language.hours \|\| language.minutes)
		.slice(0, langsCount)
		.map((language) => {
		return createTextNode({
		id: language.name,
		label: language.name,
		value: language.text,
		percent: language.percent,
		progressBarColor: titleColor,
		progressBarBackgroundColor: textColor,
		hideProgress: hide_progress,
		});
		})
		: [];

		// Calculate the card height depending on how many items there are
		// but if rank circle is visible clamp the minimum height to `150`
		let height = Math.max(45 + (statItems.length + 1) * lheight, 150);
		let height = Math.max(45 + (filteredLanguages.length + 1) * lheight, 150);

		const cssStyles = getStyles({
		titleColor,
		@@ -163,17 +152,17 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
		// RENDER COMPACT LAYOUT
		if (layout === "compact") {
		width = width + 50;
		height = 90 + Math.round(languages.length / 2) * 25;
		height = 90 + Math.round(filteredLanguages.length / 2) * 25;

		// progressOffset holds the previous language's width and used to offset the next language
		// so that we can stack them one after another, like this: [--][----][---]
		let progressOffset = 0;
		const compactProgressBar = languages
		.map((lang) => {
		const compactProgressBar = filteredLanguages
		.map((language) => {
		// const progress = (width * lang.percent) / 100;
		const progress = ((width - 25) * lang.percent) / 100;
		const progress = ((width - 25) * language.percent) / 100;

		const languageColor = languageColors[lang.name] \|\| "#858585";
		const languageColor = languageColors[language.name] \|\| "#858585";

		const output = `
		<rect
		@@ -199,14 +188,25 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
		${createLanguageTextNode({
		x: 0,
		y: 25,
		langs: languages,
		langs: filteredLanguages,
		totalSize: 100,
		}).join("")}
		`;
		} else {
		finalLayout = flexLayout({
		items: statItems.length
		? statItems
		items: filteredLanguages.length
		? filteredLanguages
		.map((language) => {
		return createTextNode({
		id: language.name,
		label: language.name,
		value: language.text,
		percent: language.percent,
		progressBarColor: titleColor,
		progressBarBackgroundColor: textColor,
		hideProgress: hide_progress,
		});
		})
		: [
		noCodingActivityNode({
		color: textColor,

tests/snapshots/renderWakatimeCard.test.js.snap

+2 −19

Original line number	Diff line number	Diff line
		@@ -155,8 +155,8 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
		"
		<svg
		width=\\"495\\"
		height=\\"140\\"
		viewBox=\\"0 0 495 140\\"
		height=\\"115\\"
		viewBox=\\"0 0 495 115\\"
		fill=\\"none\\"
		xmlns=\\"http://www.w3.org/2000/svg\\"
		>
		@@ -273,16 +273,6 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
		fill=\\"#2b7489\\"
		/>

		<rect
		mask=\\"url(#rect-mask)\\"
		data-testid=\\"lang-progress\\"
		x=\\"7.1145\\"
		y=\\"0\\"
		width=\\"0.32550000000000007\\"
		height=\\"8\\"
		fill=\\"#cb171e\\"
		/>


		<g transform=\\"translate(25, 25)\\">
		<circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#858585\\" />
		@@ -298,13 +288,6 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
		</text>
		</g>

		<g transform=\\"translate(25, 50)\\">
		<circle cx=\\"5\\" cy=\\"6\\" r=\\"5\\" fill=\\"#cb171e\\" />
		<text data-testid=\\"lang-name\\" x=\\"15\\" y=\\"10\\" class='lang-name'>
		YAML - 0 secs
		</text>
		</g>


		</svg>

Admin message