Progress / Percentage Badge
- Dominant language
- JavaScript
- Stars
- 27.2k
- Forks
- 5.6k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 46
Description
### 📋 Description
> [!note]
> Based on issue #3775, a new clean badge request with more specific requirements.
To visualize progress, a static progress/percentage badge would be helpful.
**Usecases:**
* Development progress
* Quality rating
* undocumented, roughly documented, documented, excellently documented
**Examples**:
* From https://github.com/badges/shields/issues/3775#issuecomment-526661439

### 🔗 Data
The data is provided by URL parameters. It's a generic shield.
**Visualization options:**
* Visualize a raw percentage (0..100%)
* Visualize a percentage based on numerator, denominator (0..100%)
* Select the color gradient:
* red-green
* green-red
* red-yellow-green
* green-yellow-red
* user-defined?
* Visualize with typical shields.io styles, logo, label, ....
* If badge content is empty, the percentage is shown with %-sign.
Otherwise, the badge content is shown.
**URL parameters:**
* `?....&percentage=XX&....`, where XX is 0..100 (integer) or 0.00..1.00 (real)
* `?....&numerator=XX&denominator=YY&....`, where XX is any positive integer 0..∞ and YY is any positive integer 1..∞
* `?....&gradient=XX&....`, where XX is
* `red-green`, 0 is red, 100 is green
* `green-red`, 0 is green, 100 is red
* `red-yellow-green`, 0 is red, 50 is yellow, 100 is green
* `green-yellow-red`, 0 is green, 50 is yellow, 100 is red
* `YYYY1-YYYY2-....-YYYYN`, 0 is YYYY1, .... 100 is YYYYN, where NNNN might be a CSS color name or hex-color code.
The gradient is equally distributed into N equally sized portions. In case users want a larger yellow section, yellow could be repeated like `red-yellow-yellow-green`.
Is `-` a good sepertor between color names?
### 🎤 Motivation
Shields.io has a generic shield allowing to handled lots of shield use cases, that aren't provided by a data source. This is already awesome for text related use cases.
Besides text, some shields offer a gradient coloring like in code coverage or programming style ratings. Unfortunately, such a colored rating isn't available as a generic shield, where a user can provide a percentage or fraction, which gets translated to a color within a color gradient range.
Contributor guide
Research direction
No files, tests, or entry points are named. Start by reviewing the requirements and linked issue #3775, then confirm the accepted parameter and gradient behavior with maintainers. Done means the agreed generic percentage or fraction badge behavior, styling, and color options are implemented and tested.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- backend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100