Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit ba7c2f8

Browse filesBrowse files
amirhakimnejadZo-Bro-23
amirhakimnejad
and
Zo-Bro-23
authored
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 <zohan.subhash@gmail.com>
1 parent 888663a commit ba7c2f8
Copy full SHA for ba7c2f8

File tree

Expand file treeCollapse file tree

4 files changed

+44
-11
lines changed
Open diff view settings
Filter options
Expand file treeCollapse file tree

4 files changed

+44
-11
lines changed
Open diff view settings
Collapse file

‎api/top-langs.js‎

Copy file name to clipboardExpand all lines: api/top-langs.js
+2Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export default async (req, res) => {
3030
border_radius,
3131
border_color,
3232
disable_animations,
33+
hide_progress,
3334
} = req.query;
3435
res.setHeader("Content-Type", "image/svg+xml");
3536

@@ -77,6 +78,7 @@ export default async (req, res) => {
7778
border_color,
7879
locale: locale ? locale.toLowerCase() : null,
7980
disable_animations: parseBoolean(disable_animations),
81+
hide_progress: parseBoolean(hide_progress),
8082
}),
8183
);
8284
} catch (err) {
Collapse file

‎readme.md‎

Copy file name to clipboardExpand all lines: readme.md
+13Lines changed: 13 additions & 0 deletions
  • Display the source diff
  • Display the rich diff
Original file line numberDiff line numberDiff line change
@@ -305,6 +305,7 @@ You can provide multiple comma-separated values in the bg_color option to render
305305
- `exclude_repo` - Exclude specified repositories _(Comma-separated values)_. Default: `[] (blank array)`.
306306
- `custom_title` - Sets a custom title for the card _(string)_. Default `Most Used Languages`.
307307
- `disable_animations` - Disables all animations in the card _(boolean)_. Default: `false`.
308+
- `hide_progress` - It uses the compact layout option, hides percentages, and removes the bars. Default: `false`.
308309

309310
> **Warning**
310311
> 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.
398399
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
399400
```
400401

402+
### Hide Progress Bars
403+
404+
You can use the `&hide_progress=true` option to hide the percentages and the progress bars (layout will be automatically set to `compact`).
405+
406+
```md
407+
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
408+
```
409+
401410
### Demo
402411

403412
[![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.
406415

407416
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact)](https://github.com/anuraghazra/github-readme-stats)
408417

418+
- Hidden progress bars
419+
420+
[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&hide_progress=true)](https://github.com/anuraghazra/github-readme-stats)
421+
409422
# Wakatime Week Stats
410423

411424
Change the `?username=` value to your [Wakatime](https://wakatime.com) username.
Collapse file

‎src/cards/top-languages-card.js‎

Copy file name to clipboardExpand all lines: src/cards/top-languages-card.js
+28-11Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -76,10 +76,11 @@ const createProgressTextNode = ({ width, color, name, progress, index }) => {
7676
* @param {object} props Function properties.
7777
* @param {Lang} props.lang Programming language object.
7878
* @param {number} props.totalSize Total size of all languages.
79+
* @param {boolean} props.hideProgress Whether to hide percentage.
7980
* @param {number} props.index Index of the programming language.
8081
* @returns {string} Compact layout programming language SVG node.
8182
*/
82-
const createCompactLangNode = ({ lang, totalSize, index }) => {
83+
const createCompactLangNode = ({ lang, totalSize, hideProgress, index }) => {
8384
const percentage = ((lang.size / totalSize) * 100).toFixed(2);
8485
const staggerDelay = (index + 3) * 150;
8586
const color = lang.color || "#858585";
@@ -88,7 +89,7 @@ const createCompactLangNode = ({ lang, totalSize, index }) => {
8889
<g class="stagger" style="animation-delay: ${staggerDelay}ms">
8990
<circle cx="5" cy="6" r="5" fill="${color}" />
9091
<text data-testid="lang-name" x="15" y="10" class='lang-name'>
91-
${lang.name} ${percentage}%
92+
${lang.name} ${hideProgress ? "" : percentage + "%"}
9293
</text>
9394
</g>
9495
`;
@@ -100,9 +101,10 @@ const createCompactLangNode = ({ lang, totalSize, index }) => {
100101
* @param {object[]} props Function properties.
101102
* @param {Lang[]} props.langs Array of programming languages.
102103
* @param {number} props.totalSize Total size of all languages.
104+
* @param {boolean} props.hideProgress Whether to hide percentage.
103105
* @returns {string} Programming languages SVG node.
104106
*/
105-
const createLanguageTextNode = ({ langs, totalSize }) => {
107+
const createLanguageTextNode = ({ langs, totalSize, hideProgress }) => {
106108
const longestLang = getLongestLang(langs);
107109
const chunked = chunkArray(langs, langs.length / 2);
108110
const layouts = chunked.map((array) => {
@@ -111,6 +113,7 @@ const createLanguageTextNode = ({ langs, totalSize }) => {
111113
createCompactLangNode({
112114
lang,
113115
totalSize,
116+
hideProgress,
114117
index,
115118
}),
116119
);
@@ -160,9 +163,10 @@ const renderNormalLayout = (langs, width, totalLanguageSize) => {
160163
* @param {Lang[]} langs Array of programming languages.
161164
* @param {number} width Card width.
162165
* @param {number} totalLanguageSize Total size of all languages.
166+
* @param {boolean} hideProgress Whether to hide progress bar.
163167
* @returns {string} Compact layout card SVG object.
164168
*/
165-
const renderCompactLayout = (langs, width, totalLanguageSize) => {
169+
const renderCompactLayout = (langs, width, totalLanguageSize, hideProgress) => {
166170
const paddingRight = 50;
167171
const offsetWidth = width - paddingRight;
168172
// progressOffset holds the previous language's width and used to offset the next language
@@ -193,15 +197,21 @@ const renderCompactLayout = (langs, width, totalLanguageSize) => {
193197
.join("");
194198

195199
return `
196-
<mask id="rect-mask">
200+
${
201+
!hideProgress
202+
? `
203+
<mask id="rect-mask">
197204
<rect x="0" y="0" width="${offsetWidth}" height="8" fill="white" rx="5"/>
198205
</mask>
199206
${compactProgressBar}
200-
201-
<g transform="translate(0, 25)">
207+
`
208+
: ""
209+
}
210+
<g transform="translate(0, ${hideProgress ? "0" : "25"})">
202211
${createLanguageTextNode({
203212
langs,
204213
totalSize: totalLanguageSize,
214+
hideProgress: hideProgress,
205215
})}
206216
</g>
207217
`;
@@ -276,6 +286,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
276286
text_color,
277287
bg_color,
278288
hide,
289+
hide_progress,
279290
theme,
280291
layout,
281292
custom_title,
@@ -305,11 +316,17 @@ const renderTopLanguages = (topLangs, options = {}) => {
305316
let height = calculateNormalLayoutHeight(langs.length);
306317

307318
let finalLayout = "";
308-
if (layout === "compact") {
319+
if (layout === "compact" || hide_progress == true) {
309320
width = width + 50; // padding
310-
height = calculateCompactLayoutHeight(langs.length);
311-
312-
finalLayout = renderCompactLayout(langs, width, totalLanguageSize);
321+
height =
322+
calculateCompactLayoutHeight(langs.length) + (hide_progress ? -25 : 0);
323+
324+
finalLayout = renderCompactLayout(
325+
langs,
326+
width,
327+
totalLanguageSize,
328+
hide_progress,
329+
);
313330
} else {
314331
finalLayout = renderNormalLayout(langs, width, totalLanguageSize);
315332
}
Collapse file

‎src/cards/types.d.ts‎

Copy file name to clipboardExpand all lines: src/cards/types.d.ts
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export type TopLangOptions = CommonOptions & {
3838
custom_title: string;
3939
langs_count: number;
4040
disable_animations: boolean;
41+
hide_progress: boolean;
4142
};
4243

4344
type WakaTimeOptions = CommonOptions & {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.