badges / badges/shields

Progress / Percentage Badge

Open
#11,592 7 comments 0 reactions 0 assignees View on GitHub
service-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
Screenshot 2019-08-30 at 18 17 25
Screenshot 2019-08-30 at 18 17 27

### 🔗 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.