feat: Added Border Radius parameter (#326)

nishith-p-shetty · DenverCoder1 · web-flow · commit 6eaedd3b3601 · 2022-09-11T12:06:29.000-06:00
Co-authored-by: Jonah Lawrence &lt;jonah@freshidea.com&gt;
diff --git a/README.md b/README.md
@@ -58,24 +58,25 @@ The `user` field is the only required option. All other fields are optional.
 
 If the `theme` parameter is specified, any color customizations specified will be applied on top of the theme, overriding the theme's values.
 
-|     Parameter     |                    Details                     |                              Example                              |
-| :---------------: | :--------------------------------------------: | :---------------------------------------------------------------: |
-|      `user`       |       GitHub username to show stats for        |                          `DenverCoder1`                           |
-|      `theme`      |    The theme to apply (Default: `default`)     |          `dark`, `radical`, etc. [🎨➜](./docs/themes.md)          |
-|   `hide_border`   | Make the border transparent (Default: `false`) |                         `true` or `false`                         |
-|   `background`    |                Background color                |             **hex code** without `#` or **css color**             |
-|     `border`      |                  Border color                  |             **hex code** without `#` or **css color**             |
-|     `stroke`      |       Stroke line color between sections       |             **hex code** without `#` or **css color**             |
-|      `ring`       |  Color of the ring around the current streak   |             **hex code** without `#` or **css color**             |
-|      `fire`       |         Color of the fire in the ring          |             **hex code** without `#` or **css color**             |
-|  `currStreakNum`  |             Current streak number              |             **hex code** without `#` or **css color**             |
-|    `sideNums`     |        Total and longest streak numbers        |             **hex code** without `#` or **css color**             |
-| `currStreakLabel` |              Current streak label              |             **hex code** without `#` or **css color**             |
-|   `sideLabels`    |        Total and longest streak labels         |             **hex code** without `#` or **css color**             |
-|      `dates`      |             Date range text color              |             **hex code** without `#` or **css color**             |
-|   `date_format`   |       Date format (Default: `M j[, Y]`)        |          See note below on [Date Formats](#date-formats)          |
-|     `locale`      |    Locale to use for labels (Default: `en`)    | ISO 639-1 code (See [`translations.php`](./src/translations.php)) |
-|      `type`       |         Output format (Default: `svg`)         |              Current options: `svg`, `png` or `json`              |
+|     Parameter     |                     Details                     |                              Example                              |
+| :---------------: | :---------------------------------------------: | :---------------------------------------------------------------: |
+|      `user`       |        GitHub username to show stats for        |                          `DenverCoder1`                           |
+|      `theme`      |     The theme to apply (Default: `default`)     |          `dark`, `radical`, etc. [🎨➜](./docs/themes.md)          |
+|   `hide_border`   | Make the border transparent (Default: `false`)  |                         `true` or `false`                         |
+|  `border_radius`  | Set the roundness of the edges (Default: `4.5`) |           Number `0` (sharp corners) to `248` (ellipse)           |
+|   `background`    |                Background color                 |             **hex code** without `#` or **css color**             |
+|     `border`      |                  Border color                   |             **hex code** without `#` or **css color**             |
+|     `stroke`      |       Stroke line color between sections        |             **hex code** without `#` or **css color**             |
+|      `ring`       |   Color of the ring around the current streak   |             **hex code** without `#` or **css color**             |
+|      `fire`       |          Color of the fire in the ring          |             **hex code** without `#` or **css color**             |
+|  `currStreakNum`  |              Current streak number              |             **hex code** without `#` or **css color**             |
+|    `sideNums`     |        Total and longest streak numbers         |             **hex code** without `#` or **css color**             |
+| `currStreakLabel` |              Current streak label               |             **hex code** without `#` or **css color**             |
+|   `sideLabels`    |         Total and longest streak labels         |             **hex code** without `#` or **css color**             |
+|      `dates`      |              Date range text color              |             **hex code** without `#` or **css color**             |
+|   `date_format`   |        Date format (Default: `M j[, Y]`)        |          See note below on [Date Formats](#date-formats)          |
+|     `locale`      |    Locale to use for labels (Default: `en`)     | ISO 639-1 code (See [`translations.php`](./src/translations.php)) |
+|      `type`       |         Output format (Default: `svg`)          |              Current options: `svg`, `png` or `json`              |
 
 ### Date Formats
 
diff --git a/src/card.php b/src/card.php
@@ -142,6 +142,9 @@ function generateCard(array $stats, array $params = null): string
     // number formatter
     $numFormatter = new NumberFormatter($localeCode, NumberFormatter::DECIMAL);
 
+    // read border_radius parameter, default to 4.5 if not set
+    $borderRadius = $params["border_radius"] ?? "4.5";
+
     // total contributions
     $totalContributions = $numFormatter->format($stats["totalContributions"]);
     $firstContribution = formatDate($stats["firstContribution"], $dateFormat, $localeCode);
@@ -179,7 +182,7 @@ function generateCard(array $stats, array $params = null): string
         </style>
         <defs>
             <clipPath id='outer_rectangle'>
-                <rect width='495' height='195'/>
+                <rect width='495' height='195' rx='{$borderRadius}'/>
             </clipPath>
             <mask id='mask_out_ring_behind_fire'>
                 <rect width='495' height='195' fill='white'/>
@@ -188,8 +191,7 @@ function generateCard(array $stats, array $params = null): string
         </defs>
         <g clip-path='url(#outer_rectangle)'>
             <g style='isolation:isolate'>
-                <path d='M 4.5 0 L 490.5 0 C 492.984 0 495 2.016 495 4.5 L 495 190.5 C 495 192.984 492.984 195 490.5 195 L 4.5 195 C 2.016 195 0 192.984 0 190.5 L 0 4.5 C 0 2.016 2.016 0 4.5 0 Z'
-                      style='stroke: {$theme["border"]}; fill: {$theme["background"]};stroke-miterlimit:10;rx: 4.5;'/>
+                <rect stroke='{$theme["border"]}' fill='{$theme["background"]}' rx='{$borderRadius}' x='0.5' y='0.5' width='494' height='194'/>
             </g>
             <g style='isolation:isolate'>
                 <line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='{$theme["stroke"]}' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
@@ -301,6 +303,9 @@ function generateErrorCard(string $message, array $params = null): string
     // get requested theme, use $_REQUEST if no params array specified
     $theme = getRequestedTheme($params);
 
+    // read border_radius parameter, default to 4.5 if not set
+    $borderRadius = $params["border_radius"] ?? "4.5";
+
     return "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 495 195' width='495px' height='195px'>
         <style>
             a {
@@ -309,13 +314,12 @@ function generateErrorCard(string $message, array $params = null): string
         </style>
         <defs>
             <clipPath id='outer_rectangle'>
-                <rect width='495' height='195'/>
+                <rect width='495' height='195' rx='{$borderRadius}'/>
             </clipPath>
         </defs>
         <g clip-path='url(#outer_rectangle)'>
             <g style='isolation:isolate'>
-                <path d='M 4.5 0 L 490.5 0 C 492.984 0 495 2.016 495 4.5 L 495 190.5 C 495 192.984 492.984 195 490.5 195 L 4.5 195 C 2.016 195 0 192.984 0 190.5 L 0 4.5 C 0 2.016 2.016 0 4.5 0 Z'
-                    style='stroke: {$theme["border"]}; fill: {$theme["background"]};stroke-miterlimit:10;rx: 4.5;'/>
+                <rect stroke='{$theme["border"]}' fill='{$theme["background"]}' rx='{$borderRadius}' x='0.5' y='0.5' width='494' height='194'/>
             </g>
             <g style='isolation:isolate'>
                 <!-- Error Label -->
@@ -329,8 +333,8 @@ function generateErrorCard(string $message, array $params = null): string
                 <!-- mask for background behind face -->
                 <defs>
                     <mask id='cut-off-area'>
-                    <rect x='0' y='0' width='500' height='500' fill='white' />
-                    <ellipse cx='247.5' cy='31' rx='13' ry='18'/>
+                        <rect x='0' y='0' width='500' height='500' fill='white' />
+                        <ellipse cx='247.5' cy='31' rx='13' ry='18'/>
                     </mask>
                 </defs>
                 <!-- Sad face -->
@@ -362,7 +366,7 @@ function convertSvgToPng(string $svg): string
     $svg = preg_replace("/(<style>\X*?<\/style>)/m", "", $svg);
     $svg = preg_replace("/(opacity: 0;)/m", "opacity: 1;", $svg);
     $svg = preg_replace("/(animation: fadein.*?;)/m", "opacity: 1;", $svg);
-    $svg = preg_replace("/(animation: currentstreak.*?;)/m", "font-size: 28px;", $svg);
+    $svg = preg_replace("/(animation: currstreak.*?;)/m", "font-size: 28px;", $svg);
     $svg = preg_replace("/<a \X*?>(\X*?)<\/a>/m", '\1', $svg);
 
     // save svg to random file
diff --git a/src/demo/css/style.css b/src/demo/css/style.css
@@ -138,6 +138,7 @@ h2 {
 }
 
 .parameters input[type="text"],
+.parameters input[type="number"],
 .parameters input.jscolor,
 .parameters select {
   padding: 10px 14px;
diff --git a/src/demo/index.php b/src/demo/index.php
@@ -103,6 +103,9 @@ function gtag() {
                     <option>false</option>
                     <option>true</option>
                 </select>
+                
+                <label for="border_radius">Border Radius</label>
+                <input class="param" type="number" id="border_radius" name="border_radius" placeholder="4.5" value="4.5" step="0.1">
 
                 <label for="locale">Locale</label>
                 <select class="param" id="locale" name="locale">
diff --git a/src/demo/js/script.js b/src/demo/js/script.js
@@ -10,6 +10,7 @@ const preview = {
     hide_border: "false",
     date_format: "",
     locale: "en",
+    border_radius: "4.5",
   },
 
   /**
diff --git a/tests/RenderTest.php b/tests/RenderTest.php
@@ -85,6 +85,18 @@ public function testLocaleRenderDateFormat(): void
         $this->assertEquals($expected, $render);
     }
 
+    /**
+     * Test border radius
+     */
+    public function testBorderRadius(): void
+    {
+        $this->testParams["border_radius"] = "16";
+        // Check that the card is rendered as expected
+        $render = generateCard($this->testStats, $this->testParams);
+        $expected = file_get_contents("tests/expected/test_border_radius_card.svg");
+        $this->assertEquals($expected, $render);
+    }
+
     /**
      * Test JSON render
      */
diff --git a/tests/expected/test_border_radius_card.svg b/tests/expected/test_border_radius_card.svg
@@ -0,0 +1,117 @@
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='isolation:isolate' viewBox='0 0 495 195' width='495px' height='195px'>
+        <style>
+            @keyframes currstreak {
+                0% { font-size: 3px; opacity: 0.2; }
+                80% { font-size: 34px; opacity: 1; }
+                100% { font-size: 28px; opacity: 1; }
+            }
+            @keyframes fadein {
+                0% { opacity: 0; }
+                100% { opacity: 1; }
+            }
+        </style>
+        <defs>
+            <clipPath id='outer_rectangle'>
+                <rect width='495' height='195' rx='16'/>
+            </clipPath>
+            <mask id='mask_out_ring_behind_fire'>
+                <rect width='495' height='195' fill='white'/>
+                <ellipse id='mask-ellipse' cx='247.5' cy='32' rx='13' ry='18' fill='black'/>
+            </mask>
+        </defs>
+        <g clip-path='url(#outer_rectangle)'>
+            <g style='isolation:isolate'>
+                <rect stroke='#111111' fill='#000000' rx='16' x='0.5' y='0.5' width='494' height='194'/>
+            </g>
+            <g style='isolation:isolate'>
+                <line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#222222' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
+                <line x1='165' y1='28' x2='165' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#222222' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
+            </g>
+            <g style='isolation:isolate'>
+                <!-- Total Contributions Big Number -->
+                <g transform='translate(1,48)'>
+                    <rect width='163' height='50' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:#666666;stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.6s;'>
+                        2,048
+                    </text>
+                </g>
+
+                <!-- Total Contributions Label -->
+                <g transform='translate(1,84)'>
+                    <rect width='163' height='50' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:#888888;stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.7s;'>
+                        Total Contributions
+                    </text>
+                </g>
+
+                <!-- total contributions range -->
+                <g transform='translate(1,114)'>
+                    <rect width='163' height='50' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:#999999;stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 0.8s;'>
+                        Aug 10, 2016 - Present
+                    </text>
+                </g>
+            </g>
+            <g style='isolation:isolate'>
+                <!-- Current Streak Big Number -->
+                <g transform='translate(166,48)'>
+                    <rect width='163' height='50' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:#555555;stroke:none;animation: currstreak 0.6s linear forwards;'>
+                        16
+                    </text>
+                </g>
+
+                <!-- Current Streak Label -->
+                <g transform='translate(166,108)'>
+                    <rect width='163' height='50' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:14px;font-style:normal;fill:#777777;stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 0.9s;'>
+                        Current Streak
+                    </text>
+                </g>
+
+                <!-- Current Streak Range -->
+                <g transform='translate(166,145)'>
+                    <rect width='163' height='26' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='21' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:#999999;stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 0.9s;'>
+                        Mar 28, 2019 - Apr 12, 2019
+                    </text>
+                </g>
+
+                <!-- ring around number -->
+                <g mask='url(#mask_out_ring_behind_fire)'>
+                    <circle cx='247.5' cy='71' r='40' style='fill:none;stroke:#333333;stroke-width:5;opacity: 0; animation: fadein 0.5s linear forwards 0.4s;'></circle>
+                </g>
+                <!-- fire icon -->
+                <g style='opacity: 0; animation: fadein 0.5s linear forwards 0.6s; stroke-opacity: 0;'>
+                    <path d=' M 235.5 19.5 L 259.5 19.5 L 259.5 43.5 L 235.5 43.5 L 235.5 19.5 Z ' fill='none' stroke-opacity='0'/>
+                    <path d=' M 249 20.17 C 249 20.17 249.74 22.82 249.74 24.97 C 249.74 27.03 248.39 28.7 246.33 28.7 C 244.26 28.7 242.7 27.03 242.7 24.97 L 242.73 24.61 C 240.71 27.01 239.5 30.12 239.5 33.5 C 239.5 37.92 243.08 41.5 247.5 41.5 C 251.92 41.5 255.5 37.92 255.5 33.5 C 255.5 28.11 252.91 23.3 249 20.17 Z  M 247.21 38.5 C 245.43 38.5 243.99 37.1 243.99 35.36 C 243.99 33.74 245.04 32.6 246.8 32.24 C 248.57 31.88 250.4 31.03 251.42 29.66 C 251.81 30.95 252.01 32.31 252.01 33.7 C 252.01 36.35 249.86 38.5 247.21 38.5 Z ' fill='#444444' stroke-opacity='0'/>
+                </g>
+
+            </g>
+            <g style='isolation:isolate'>
+                <!-- Longest Streak Big Number -->
+                <g transform='translate(331,48)'>
+                    <rect width='163' height='50' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:700;font-size:28px;font-style:normal;fill:#666666;stroke:none; opacity: 0; animation: fadein 0.5s linear forwards 1.2s;'>
+                        86
+                    </text>
+                </g>
+
+                <!-- Longest Streak Label -->
+                <g transform='translate(331,84)'>
+                    <rect width='163' height='50' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:14px;font-style:normal;fill:#888888;stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 1.3s;'>
+                        Longest Streak
+                    </text>
+                </g>
+
+                <!-- Longest Streak Range -->
+                <g transform='translate(331,114)'>
+                    <rect width='163' height='50' stroke='none' fill='none'></rect>
+                    <text x='81.5' y='32' stroke-width='0' text-anchor='middle' style='font-family:Segoe UI, Ubuntu, sans-serif;font-weight:400;font-size:12px;font-style:normal;fill:#999999;stroke:none;opacity: 0; animation: fadein 0.5s linear forwards 1.4s;'>
+                        Dec 19, 2016 - Mar 14, 2016
+                    </text>
+                </g>
+            </g>
+        </g>
+    </svg>
diff --git a/tests/expected/test_card.svg b/tests/expected/test_card.svg
@@ -12,7 +12,7 @@
         </style>
         <defs>
             <clipPath id='outer_rectangle'>
-                <rect width='495' height='195'/>
+                <rect width='495' height='195' rx='4.5'/>
             </clipPath>
             <mask id='mask_out_ring_behind_fire'>
                 <rect width='495' height='195' fill='white'/>
@@ -21,8 +21,7 @@
         </defs>
         <g clip-path='url(#outer_rectangle)'>
             <g style='isolation:isolate'>
-                <path d='M 4.5 0 L 490.5 0 C 492.984 0 495 2.016 495 4.5 L 495 190.5 C 495 192.984 492.984 195 490.5 195 L 4.5 195 C 2.016 195 0 192.984 0 190.5 L 0 4.5 C 0 2.016 2.016 0 4.5 0 Z'
-                      style='stroke: #111111; fill: #000000;stroke-miterlimit:10;rx: 4.5;'/>
+                <rect stroke='#111111' fill='#000000' rx='4.5' x='0.5' y='0.5' width='494' height='194'/>
             </g>
             <g style='isolation:isolate'>
                 <line x1='330' y1='28' x2='330' y2='170' vector-effect='non-scaling-stroke' stroke-width='1' stroke='#222222' stroke-linejoin='miter' stroke-linecap='square' stroke-miterlimit='3'/>
diff --git a/tests/expected/test_date_card.svg b/tests/expected/test_date_card.svg
diff --git a/tests/expected/test_error_card.svg b/tests/expected/test_error_card.svg
diff --git a/tests/expected/test_locale_ja_card.svg b/tests/expected/test_locale_ja_card.svg

Original file line number	Diff line number	Diff line change
`@@ -138,6 +138,7 @@ h2 {`
`138`	`138`	`}`
`139`	`139`
`140`	`140`	`.parameters input[type="text"],`
	`141`	`+.parameters input[type="number"],`
`141`	`142`	`.parameters input.jscolor,`
`142`	`143`	`.parameters select {`
`143`	`144`	`padding: 10px 14px;`