From ba7c2f8b55eac8452e479c8bd38b044d204d0424 Mon Sep 17 00:00:00 2001 From: Amir Date: Thu, 16 Feb 2023 04:53:11 +0330 Subject: [PATCH] Support hide_progress for top-langs feature (#2514) * Add support for hide_progress in top languages feature * Fix mistake * Add documents for all languages * Remove unnecessary value check * Update top-languages-card.js * Revert document for all languages except English * Update documentation * Update documentation --------- Co-authored-by: Zohan Subhash --- api/top-langs.js | 2 ++ readme.md | 13 +++++++++++ src/cards/top-languages-card.js | 39 +++++++++++++++++++++++---------- src/cards/types.d.ts | 1 + 4 files changed, 44 insertions(+), 11 deletions(-) diff --git a/api/top-langs.js b/api/top-langs.js index 19cccb894e33a..e67d953323441 100644 --- a/api/top-langs.js +++ b/api/top-langs.js @@ -30,6 +30,7 @@ export default async (req, res) => { border_radius, border_color, disable_animations, + hide_progress, } = req.query; res.setHeader("Content-Type", "image/svg+xml"); @@ -77,6 +78,7 @@ export default async (req, res) => { border_color, locale: locale ? locale.toLowerCase() : null, disable_animations: parseBoolean(disable_animations), + hide_progress: parseBoolean(hide_progress), }), ); } catch (err) { diff --git a/readme.md b/readme.md index 678c5c0b14af4..29852bf9c6515 100644 --- a/readme.md +++ b/readme.md @@ -305,6 +305,7 @@ You can provide multiple comma-separated values in the bg_color option to render - `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`. - `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`. - `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`. +- `hide_progress` - It uses the compact layout option, hides percentages, and removes the bars. Default: `false`. > **Warning** > Language names should be URI-escaped, as specified in [Percent Encoding](https://en.wikipedia.org/wiki/Percent-encoding) @@ -398,6 +399,14 @@ You can use the `&layout=compact` option to change the card design. [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats) ``` +### Hide Progress Bars + +You can use the `&hide_progress=true` option to hide the percentages and the progress bars (layout will be automatically set to `compact`). + +```md +[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats) +``` + ### Demo [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats) @@ -406,6 +415,10 @@ You can use the `&layout=compact` option to change the card design. [![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats) +- Hidden progress bars + +[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats) + # Wakatime Week Stats Change the `?username=` value to your [Wakatime](https://wakatime.com) username. diff --git a/src/cards/top-languages-card.js b/src/cards/top-languages-card.js index 9396ff8e73d5e..be1328c0c8fe3 100644 --- a/src/cards/top-languages-card.js +++ b/src/cards/top-languages-card.js @@ -76,10 +76,11 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => { * @param {object} props Function properties. * @param {Lang} props.lang Programming language object. * @param {number} props.totalSize Total size of all languages. + * @param {boolean} props.hideProgress Whether to hide percentage. * @param {number} props.index Index of the programming language. * @returns {string} Compact layout programming language SVG node. */ -const createCompactLangNode = ({ lang, totalSize, index }) => { +const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => { const percentage = ((lang.size / totalSize) * 100).toFixed(2); const staggerDelay = (index + 3) * 150; const color = lang.color || "#858585"; @@ -88,7 +89,7 @@ const createCompactLangNode = ({ lang, totalSize, index }) => { - ${lang.name} ${percentage}% + ${lang.name} ${hideProgress ? "" : percentage + "%"} `; @@ -100,9 +101,10 @@ const createCompactLangNode = ({ lang, totalSize, index }) => { * @param {object[]} props Function properties. * @param {Lang[]} props.langs Array of programming languages. * @param {number} props.totalSize Total size of all languages. + * @param {boolean} props.hideProgress Whether to hide percentage. * @returns {string} Programming languages SVG node. */ -const createLanguageTextNode = ({ langs, totalSize }) => { +const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => { const longestLang = getLongestLang(langs); const chunked = chunkArray(langs, langs.length / 2); const layouts = chunked.map((array) => { @@ -111,6 +113,7 @@ const createLanguageTextNode = ({ langs, totalSize }) => { createCompactLangNode({ lang, totalSize, + hideProgress, index, }), ); @@ -160,9 +163,10 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => { * @param {Lang[]} langs Array of programming languages. * @param {number} width Card width. * @param {number} totalLanguageSize Total size of all languages. + * @param {boolean} hideProgress Whether to hide progress bar. * @returns {string} Compact layout card SVG object. */ -const renderCompactLayout = (langs, width, totalLanguageSize) => { +const renderCompactLayout = (langs, width, totalLanguageSize, hideProgress) => { const paddingRight = 50; const offsetWidth = width - paddingRight; // progressOffset holds the previous language's width and used to offset the next language @@ -193,15 +197,21 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => { .join(""); return ` - + ${ + !hideProgress + ? ` + ${compactProgressBar} - - + ` + : "" + } + ${createLanguageTextNode({ langs, totalSize: totalLanguageSize, + hideProgress: hideProgress, })} `; @@ -276,6 +286,7 @@ const renderTopLanguages = (topLangs, options = {}) => { text_color, bg_color, hide, + hide_progress, theme, layout, custom_title, @@ -305,11 +316,17 @@ const renderTopLanguages = (topLangs, options = {}) => { let height = calculateNormalLayoutHeight(langs.length); let finalLayout = ""; - if (layout === "compact") { + if (layout === "compact" || hide_progress == true) { width = width + 50; // padding - height = calculateCompactLayoutHeight(langs.length); - - finalLayout = renderCompactLayout(langs, width, totalLanguageSize); + height = + calculateCompactLayoutHeight(langs.length) + (hide_progress ? -25 : 0); + + finalLayout = renderCompactLayout( + langs, + width, + totalLanguageSize, + hide_progress, + ); } else { finalLayout = renderNormalLayout(langs, width, totalLanguageSize); } diff --git a/src/cards/types.d.ts b/src/cards/types.d.ts index c5945d48be71e..52ee0edb6a459 100644 --- a/src/cards/types.d.ts +++ b/src/cards/types.d.ts @@ -38,6 +38,7 @@ export type TopLangOptions = CommonOptions & { custom_title: string; langs_count: number; disable_animations: boolean; + hide_progress: boolean; }; type WakaTimeOptions = CommonOptions & {