avior/codestats-readme
1
0
Fork 0
mirror of https://github.com/Aviortheking/codestats-readme.git synced 2025-07-05 21:09:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added hide_title option (#88)

Browse Source
This commit is contained in:
Anurag Hazra
2020-07-17 23:01:16 +05:30
committed by GitHub
parent 96f89ad2b7
commit 2709d5b434
4 changed files with 84 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/renderStatsCard.js
View File

@ -47,6 +47,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const {
hide = [],
show_icons = false,
hide_title = false,
hide_border = false,
hide_rank = false,
line_height = 25,
@ -63,6 +64,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
const textColor = fallbackColor(text_color, "#333");
const bgColor = fallbackColor(bg_color, "#FFFEFE");
// Meta data for creating text nodes with createTextNode function
const STATS = {
stars: {
icon: icons.star,
@ -96,6 +98,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
},
};
// filter out hidden stats defined by user & create the text nodes
const statItems = Object.keys(STATS)
.filter((key) => !hide.includes(key))
.map((key, index) =>
@ -110,12 +113,31 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
// Calculate the card height depending on how many items there are
// but if rank circle is visible clamp the minimum height to `150`
const height = Math.max(
let height = Math.max(
45 + (statItems.length + 1) * lheight,
hide_rank ? 0 : 150
);
const border = `
// 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;
const styles = getStyles({
titleColor,
textColor,
iconColor,
show_icons,
progress,
});
// Conditionally rendered elements
const title = hide_title
? ""
: `<text x="25" y="35" class="header">${name}'s GitHub Stats</text>`;
const border = hide_border
? ""
: `
<rect
data-testid="card-border"
x="0.5"
@ -147,17 +169,9 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
</text>
</g>`;
// the better user's score the the rank will be closer to zero so
// subtracting 100 to get the progress in 100%
let progress = 100 - rank.score;
const styles = getStyles({
titleColor,
textColor,
iconColor,
show_icons,
progress,
});
if (hide_title) {
height -= 30;
}
return `
<svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
@ -165,15 +179,18 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
${styles}
</style>
${hide_border ? "" : border}
${border}
${title}
${rankCircle}
<text x="25" y="35" class="header">${name}'s GitHub Stats</text>
<g data-testid="card-body-content" transform="translate(0, ${
hide_title ? -30 : 0
})">
${rankCircle}
<svg x="0" y="45">
${statItems.toString().replace(/\,/gm, "")}
</svg>
<svg x="0" y="45">
${statItems.toString().replace(/\,/gm, "")}
</svg>
</g>
</svg>
`;
};