Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

compact layout for top languages card #134 #179

Merged
merged 10 commits into from
Jul 26, 2020
Merged

compact layout for top languages card #134 #179

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
2640ae5
compact layout for top langs card
sagar-gavhane Jul 24, 2020
c4511f2
Merge branch 'task/134' of https://github.com/sagar-gavhane/github-re…
anuraghazra Jul 25, 2020
0a1dac9
🐞 FIX: most used lang should be first, apply correct colors, removed …
sagar-gavhane Jul 25, 2020
7cf98d9
🐞 FIX: conditionally rendering layout compact
sagar-gavhane Jul 25, 2020
591da76
🐞 FIX: border radius on lang progressbar
sagar-gavhane Jul 25, 2020
1fe2807
Merge branch 'task/134' of https://github.com/sagar-gavhane/github-re…
anuraghazra Jul 26, 2020
024ea98
refactor: refactored code & fixed bugs
anuraghazra Jul 26, 2020
b9ece0b
fix: toFixed
anuraghazra Jul 26, 2020
6faa461
chore: change string interpolation
anuraghazra Jul 26, 2020
656ffe2
docs: updated readme
anuraghazra Jul 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions api/top-langs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ module.exports = async (req, res) => {
bg_color,
theme,
cache_seconds,
layout
} = req.query;
let topLangs;

Expand Down Expand Up @@ -49,6 +50,7 @@ module.exports = async (req, res) => {
text_color,
bg_color,
theme,
layout
})
);
};
46 changes: 46 additions & 0 deletions src/renderTopLanguages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,31 @@ const createProgressNode = ({ width, color, name, progress }) => {
`;
};

const createLanguageTextNode = ({langs, totalSize}) => {
let output = ``

for (let i = 0; i < langs.length; i = i+2) {
output+= `
<g transform="translate(0, ${12.5 * i})">
<svg>
<circle cx="5" cy="6" r="5" fill="${langs[i].color || '#858585'}" />
<text x="15" y="12" class='lang-name'>${langs[i].name} ${((langs[i].size / totalSize) * 100).toFixed(2)}%</text>
</svg>
</g>
${langs[i+1] && `
<g transform="translate(150, ${12.5 * i})">
<svg>
<circle cx="5" cy="6" r="5" fill="${langs[i+1].color || '#858585'}" />
<text x="15" y="12" fill='#333' class='lang-name'>${langs[i+1].name} ${((langs[i+1].size / totalSize) * 100).toFixed(2)}%</text>
</svg>
</g>
`}
`
}

return output
}

const lowercaseTrim = (name) => name.toLowerCase().trim();

const renderTopLanguages = (topLangs, options = {}) => {
Expand All @@ -34,6 +59,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
bg_color,
hide,
theme,
layout
} = options;

let langs = Object.values(topLangs);
Expand Down Expand Up @@ -72,6 +98,26 @@ const renderTopLanguages = (topLangs, options = {}) => {
if (hide_title) {
height -= 30;
}

if(layout === 'compact') {
return `
<svg width="${width+50}" height="${height}" viewBox="0 0 ${width+50} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.header { font: 600 18px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${titleColor} }
.lang-name { font: 400 14px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
</style>
<rect width="${width+50}" height="${height}" fill='#fff' stroke="#E4E2E2" />
${hide_title ? '' : `<text x="25" y="35" fill='#333' class='header'>Top Languages</text>`}
<svg x='25' y='${hide_title ? 25 : 50}'>
${langs.map(lang => `<rect width='${((lang.size / totalSize) * width).toFixed(2)}' height='10' fill='${lang.color}' rx='5'/>`).join('')}
</svg>
<svg x="25" y="${hide_title ? 50 : 75}">
${createLanguageTextNode({langs, totalSize})}
</svg>
</svg>
`;
}

anuraghazra marked this conversation as resolved.
Show resolved Hide resolved
return `
<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
Expand Down