refactor: refactored createProgressNode logic (#486) (278d6a17) · Commits · 郑智淋 / github-readme-stats

src/cards/top-languages-card.js

+12 −15

Original line number	Diff line number	Diff line
		const { getCardColors, FlexLayout, clampValue } = require("../common/utils");
		const Card = require("../common/Card");
		const { getCardColors, FlexLayout } = require("../common/utils");
		const { createProgressNode } = require("../common/createProgressNode");

		const createProgressNode = ({ width, color, name, progress }) => {
		const createProgressTextNode = ({ width, color, name, progress }) => {
		const paddingRight = 95;
		const progressTextX = width - paddingRight + 10;
		const progressWidth = width - paddingRight;
		const progressPercentage = clampValue(progress, 2, 100);

		return `
		<text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
		<text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
		<svg width="${progressWidth}">
		<rect rx="5" ry="5" x="0" y="25" width="${progressWidth}" height="8" fill="#ddd"></rect>
		<rect
		height="8"
		fill="${color}"
		rx="5" ry="5" x="0" y="25"
		data-testid="lang-progress"
		width="${progressPercentage}%"
		>
		</rect>
		</svg>
		${createProgressNode({
		x: 0,
		y: 25,
		color,
		width: progressWidth,
		progress,
		progressBarBackgroundColor: "#ddd",
		})}
		`;
		};

		@@ -160,7 +157,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
		} else {
		finalLayout = FlexLayout({
		items: langs.map((lang) => {
		return createProgressNode({
		return createProgressTextNode({
		width: width,
		name: lang.name,
		color: lang.color \|\| "#858585",

+6 −26

Original line number	Diff line number	Diff line
		const { getCardColors, FlexLayout, clampValue } = require("../common/utils");
		const { getStyles } = require("../getStyles");
		const icons = require("../common/icons");
		const Card = require("../common/Card");
		const { getStyles } = require("../getStyles");
		const { getCardColors, FlexLayout } = require("../common/utils");
		const { createProgressNode } = require("../common/createProgressNode");

		const noCodingActivityNode = ({ color }) => {
		return `
		@@ -9,29 +9,6 @@ const noCodingActivityNode = ({ color }) => {
		`;
		};

		const createProgressNode = ({
		width,
		color,
		progress,
		progressBarBackgroundColor,
		}) => {
		const progressPercentage = clampValue(progress, 2, 100);

		return `
		<svg width="${width}" overflow="auto">
		<rect rx="5" ry="5" x="110" y="4" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
		<rect
		height="8"
		fill="${color}"
		rx="5" ry="5" x="110" y="4"
		data-testid="lang-progress"
		width="${progressPercentage}%"
		>
		</rect>
		</svg>
		`;
		};

		const createTextNode = ({
		id,
		label,
		@@ -47,6 +24,8 @@ const createTextNode = ({
		const cardProgress = hideProgress
		? null
		: createProgressNode({
		x: 110,
		y: 4,
		progress: percent,
		color: progressBarColor,
		width: 220,
		@@ -154,3 +133,4 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
		};

		module.exports = renderWakatimeCard;
		exports.createProgressNode = createProgressNode;

0 → 100644

+28 −0

Original line number	Diff line number	Diff line
		const { clampValue } = require("../common/utils");

		const createProgressNode = ({
		x,
		y,
		width,
		color,
		progress,
		progressBarBackgroundColor,
		}) => {
		const progressPercentage = clampValue(progress, 2, 100);

		return `
		<svg width="${width}" x="${x}" y="${y}">
		<rect rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
		<rect
		height="8"
		fill="${color}"
		rx="5" ry="5" x="0" y="0"
		data-testid="lang-progress"
		width="${progressPercentage}%"
		>
		</rect>
		</svg>
		`;
		};

		exports.createProgressNode = createProgressNode;