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.
[](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
+[](https://github.com/anuraghazra/github-readme-stats)
+```
+
### Demo
[](https://github.com/anuraghazra/github-readme-stats)
@@ -406,6 +415,10 @@ You can use the `&layout=compact` option to change the card design.
[](https://github.com/anuraghazra/github-readme-stats)
+- Hidden progress bars
+
+[](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 & {