mirror/github-readme-stats
2
0
Fork 0
mirror of https://github.com/anuraghazra/github-readme-stats.git synced 2024-12-15 06:04:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: firefox layout breaking (#45)

Browse Source 
* fix: firefox layout breaking

* refactor: refactored code and added comments

* chore: remove useragent dep
This commit is contained in:
Anurag Hazra 2020-07-13 23:47:04 +05:30 committed by GitHub
parent 29d3ea63f8
commit 014f710e12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 29 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/renderStatsCard.js
View File

@ -1,12 +1,18 @@
const { kFormatter, isValidHexColor } = require("../src/utils");
const createTextNode = ({ icon, label, value, lineHeight, id }) => {
const createTextNode = ({ icon, label, value, id, index, lineHeight }) => {
const classname = icon === "★" && "star-icon";
const kValue = kFormatter(value);
// manually calculating lineHeight based on index instead of using <tspan dy="" />
// to fix firefox layout bug
return `
<tspan x="25" dy="${lineHeight}" class="stat bold">
<tspan data-testid="icon" class="icon ${classname}">${icon}</tspan> ${label}:</tspan>
<tspan data-testid="${id}" x="155" dy="0" class="stat">${kValue}</tspan>
<text x="25" y="${lineHeight * (index + 1)}">
<tspan dx="0" data-testid="icon" class="icon ${classname}">${icon}</tspan>
<tspan dx="0" class="stat bold">
${label}:
</tspan>
<tspan x="160" data-testid="${id}" class="stat">${kValue}</tspan>
</text>
`;
};
@ -41,47 +47,45 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const textColor = (isValidHexColor(text_color) && `#${text_color}`) || "#333";
const bgColor = (isValidHexColor(bg_color) && `#${bg_color}`) || "#FFFEFE";
const STAT_MAP = {
stars: createTextNode({
const STATS = {
stars: {
icon: "★",
label: "Total Stars",
value: totalStars,
lineHeight: lheight,
id: "stars",
}),
commits: createTextNode({
},
commits: {
icon: "🕗",
label: "Total Commits",
value: totalCommits,
lineHeight: lheight,
id: "commits",
}),
prs: createTextNode({
},
prs: {
icon: "🔀",
label: "Total PRs",
value: totalPRs,
lineHeight: lheight,
id: "prs",
}),
issues: createTextNode({
},
issues: {
icon: "ⓘ",
label: "Total Issues",
value: totalIssues,
lineHeight: lheight,
id: "issues",
}),
contribs: createTextNode({
},
contribs: {
icon: "📕",
label: "Contributed to",
value: contributedTo,
lineHeight: lheight,
id: "contribs",
}),
},
};
const statItems = Object.keys(STAT_MAP)
const statItems = Object.keys(STATS)
.filter((key) => !hide.includes(key))
.map((key) => STAT_MAP[key]);
.map((key, index) =>
// create the text nodes, and pass index so that we can calculate the line spacing
createTextNode({ ...STATS[key], index, lineHeight: lheight })
);
// Calculate the card height depending on how many items there are
// but if rank circle is visible clamp the minimum height to `150`
@ -152,9 +156,10 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
${rankCircle}
<text x="25" y="35" class="header">${name}'s GitHub Stats</text>
<text y="45">
<svg x="0" y="45">
${statItems.toString().replace(/\,/gm, "")}
</text>
</svg>
</svg>
`;
};