Merge pull request #37 from cicirello/fix-text-lengths

Visual improvements to right side of badges

CHANGELOG.md

@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [Unreleased] - 2021-08-12
+## [Unreleased] - 2021-08-16
 
 ### Added
 
@@ -19,6 +19,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### CI/CD
 
 
+## [2.4.1] - 2021-08-16
+
+### Fixed
+* Visual improvements to right side of badges:
+  * Adjusted calculation of text lengths for right side of badges
+    for improved character spacing.
+  * Badge width now also adjusted by the right side text lengths.
+
+
 ## [2.4.0] - 2021-08-13
 
 ### Added

JacocoBadgeGenerator.py

@@ -35,25 +35,25 @@
 import os.path
 import json
 
-badgeTemplate = '<svg xmlns="http://www.w3.org/2000/svg" width="104" \
+badgeTemplate = '<svg xmlns="http://www.w3.org/2000/svg" width="{6}" \
 height="20" role="img" aria-label="{3}: {0}">\
 <linearGradient id="s" x2="0" y2="100%">\
 <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>\
 <stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r">\
-<rect width="104" height="20" rx="3" fill="#fff"/></clipPath>\
+<rect width="{6}" height="20" rx="3" fill="#fff"/></clipPath>\
 <g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/>\
-<rect x="61" width="43" height="20" fill="{1}"/>\
-<rect width="104" height="20" fill="url(#s)"/></g>\
+<rect x="61" width="{5}" height="20" fill="{1}"/>\
+<rect width="{6}" height="20" fill="url(#s)"/></g>\
 <g fill="#fff" text-anchor="middle" \
 font-family="Verdana,Geneva,DejaVu Sans,sans-serif" \
 text-rendering="geometricPrecision" font-size="110">\
 <text aria-hidden="true" x="315" y="150" fill="#010101" \
-fill-opacity=".3" transform="scale(.1)" textLength="510">{3}</text>\
+fill-opacity=".3" transform="scale(.1)" textLength="{4}">{3}</text>\
 <text x="315" y="140" transform="scale(.1)" fill="#fff" \
-textLength="510">{3}</text>\
-<text aria-hidden="true" x="815" y="150" \
+textLength="{4}">{3}</text>\
+<text aria-hidden="true" x="{7}" y="150" \
 fill="#010101" fill-opacity=".3" transform="scale(.1)" \
-textLength="{2}">{0}</text><text x="815" y="140" \
+textLength="{2}">{0}</text><text x="{7}" y="140" \
 transform="scale(.1)" fill="#fff" textLength="{2}">{0}</text>\
 </g></svg>'
 
@@ -67,13 +67,30 @@ def generateBadge(covStr, color, badgeType="coverage") :
     color - The color for the badge.
     badgeType - The text string for a label on the badge.
     """
-    if len(covStr) >= 4 :
-        textLength = "330"
-    elif len(covStr) >= 3 :
-        textLength = "250" 
+    # textLength for coverage percentage string computed as follows:
+    # Assuming DejaVu Sans, 110pt font, width of % is 105,
+    # width of . is 35, width of any digit is 70.
+    textLength = 105
+    if covStr.find(".") >= 0 :
+        textLength += (70 * (len(covStr) - 2)) + 35
     else :
-        textLength = "170"
-    return badgeTemplate.format(covStr, color, textLength, badgeType)
+        textLength += (70 * (len(covStr) - 1))
+    # length of "coverage" assuming DejaVu Sans, 110pt font is 510
+    # but length of "branches" is 507
+    labelTextLength = 510 if badgeType=="coverage" else 507
+    rightWidth = math.ceil(textLength / 10) + 10
+    badgeWidth = 61 + rightWidth
+    rightCenter = 600 + rightWidth * 5
+    return badgeTemplate.format(
+        covStr,
+        color,
+        textLength,
+        badgeType,
+        labelTextLength,
+        rightWidth,
+        badgeWidth,
+        rightCenter
+        )
 
 def generateDictionaryForEndpoint(covStr, color, badgeType) :
     """Generated a Python dictionary containing all of the required

README.md

@@ -119,13 +119,16 @@ of C1 Coverage than is usually implied by branches coverage.
 
 Here are a few samples of what the badges look like if you use
 the default colors:
-* ![Coverage 100%](tests/100.svg) We use bright green for 100% coverage.
-* ![Coverage 99.9%](tests/999.svg) We use green for coverage from 90% up through 99.9%.
-* ![Coverage 80%](tests/80.svg) We use yellow green for coverage from 80% up through 89.9%.
-* ![Coverage 70%](tests/70.svg) We use yellow for coverage from 70% up through 79.9%.
-* ![Coverage 60%](tests/60.svg) We use orange for coverage from 60% up through 69.9%.
-* ![Coverage 59.9%](tests/599.svg) We use red for coverage from 0% up through 59.9%.
-* ![Branches Coverage 99.9%](tests/999b.svg) A sample of a branch coverage badge.
+
+| Coverage range | Direct badge generation | Badge generation from endpoint |
+| :---  | :--- | :--- | 
+| Bright green for 100% coverage  | ![Coverage 100%](tests/100.svg) | ![Coverage 100%](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/cicirello/jacoco-badge-generator/main/tests/100.json) |
+| Green for 90% through 99.9% coverage | ![Coverage 99.9%](tests/999.svg) | ![Coverage 99.9%](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/cicirello/jacoco-badge-generator/main/tests/999.json) |
+| Yellow green for 80% through 89.9% coverage | ![Coverage 80%](tests/80.svg) | ![Coverage 80%](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/cicirello/jacoco-badge-generator/main/tests/80.json) |
+| Yellow for 70% through 79.9% coverage | ![Coverage 70%](tests/70.svg) | ![Coverage 70%](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/cicirello/jacoco-badge-generator/main/tests/70.json) |
+| Orange for 60% through 69.9% coverage | ![Coverage 60%](tests/60.svg) | ![Coverage 60%](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/cicirello/jacoco-badge-generator/main/tests/60.json) |
+| Red for 0% through 59.9% coverage | ![Coverage 59.9%](tests/599.svg) | ![Coverage 59.9%](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/cicirello/jacoco-badge-generator/main/tests/599.json) |
+| Sample of a branch coverage badge | ![Branches Coverage 99.9%](tests/999b.svg) | ![Branches Coverage 99.9%](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/cicirello/jacoco-badge-generator/main/tests/999b.json) |
 
 ### Customizing Colors or Coverage Intervals
 
@@ -152,8 +155,8 @@ instead be truncated to 79.9%).
 
 The default behavior generates badges that are inspired by the style of the badges 
 of [Shields.io](https://github.com/badges/shields), and generates the badges entirely
-within the jacoco-badge-generator GitHub Action, with no external calls.  
-However, the action now also supports an optional alternative to instead generate
+within the jacoco-badge-generator GitHub Action, with no external calls. However, 
+the action now also supports an optional alternative to instead generate
 [Shields JSON endpoints](https://shields.io/endpoint). Most users will likely prefer
 the default behavior, for a variety of reasons, such as simpler insertion of
 badge into README and probable faster loading. The main reason to consider generating
@@ -217,9 +220,15 @@ branch. To do so, in addition to configuring GitHub Pages, you would need to use
 (e.g., in "docs" or in a subdirectory of "docs"). Doing so would probably speed up Shields's
 access to your JSON endpoint, since you'd gain the benefit of the CDN that backs GitHub
 Pages; whereas passing Shields the URL to the JSON file on GitHub's raw server will probably
-be slower.
-
-This is not an issue if you use the default behavior of directly generating the badge.
+be slower. Note that the potential benefit is probably small, so if doing so would complicate
+your workflow, you can simply pass the URL of the endpoint from GitHub's raw server
+(e.g., the examples of generating badges from an endpoint in the rightmost column
+of the table in section [Default Color Scheme](#default-color-scheme) were done that way,
+without the use of GitHub Pages).
+
+This is not an issue if you use the default behavior of directly generating the badge
+within the action, since in that case the image is served directly to the viewer 
+from the repository whose README is being viewed.
 
 
 ## Inputs