refactor: Improved gradient (#350)

* fix: fixed tests for gradient

* docs: added docs for gradient

readme.md

@@ -131,6 +131,14 @@ You can customize the appearance of your `Stats Card` or `Repo Card` however you
 - `theme` - name of the theme, choose from [all available themes](./themes/README.md)
 - `cache_seconds` - set the cache header manually _(min: 1800, max: 86400)_
 
+##### Gradient in bg_color
+
+You can provide multiple comma saperated values in bg_color option to render a gradient, the format of the gradient is :-
+
+```
+&bg_color=DEG,COLOR1,COLRO2,COLOR3...COLOR10
+```
+
 > Note on cache: Repo cards have default cache of 30mins (1800 seconds) if the fork count & star count is less than 1k otherwise it's 2hours (7200). Also note that cache is clamped to minimum of 30min and maximum of 24hours
 
 #### Stats Card Exclusive Options:
@@ -250,6 +258,10 @@ Choose from any of the [default themes](#themes)
 
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true&theme=radical)
 
+- Gradient
+
+![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&bg_color=30,e96443,904e95&title_color=fff&text_color=fff)
+
 - Customizing stats card
 
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api/?username=anuraghazra&show_icons=true&title_color=fff&icon_color=79ff97&text_color=9f9f9f&bg_color=151515)

src/common/Card.js

@@ -85,6 +85,27 @@ class Card {
     `;
   }
 
+  renderGradient() {
+    if (typeof this.colors.bgColor !== "object") return;
+
+    const gradients = this.colors.bgColor.slice(1);
+    return typeof this.colors.bgColor === "object"
+      ? `
+        <defs>
+          <linearGradient
+            id="gradient" 
+            gradientTransform="rotate(${this.colors.bgColor[0]})"
+          >
+            ${gradients.map((grad, index) => {
+              let offset = (index * 100) / (gradients.length - 1);
+              return `<stop offset="${offset}%" stop-color="#${grad}" />`;
+            })}
+          </linearGradient>
+        </defs>
+        `
+      : "";
+  }
+
   render(body) {
     return `
       <svg
@@ -109,12 +130,7 @@ class Card {
           }
         </style>
 
-        ${typeof this.colors.bgColor == 'object' ? `<defs>
-          <linearGradient id="gradient" gradientTransform="rotate(${this.colors.bgColor[0]})">
-            <stop offset="0%"  stop-color="#${this.colors.bgColor[1]}" />
-            <stop offset="100%" stop-color="#${this.colors.bgColor[2]}" />
-          </linearGradient>
-        </defs>` : ""}
+        ${this.renderGradient()}
 
         <rect
           data-testid="card-bg"
@@ -124,7 +140,11 @@ class Card {
           height="99%"
           stroke="#E4E2E2"
           width="${this.width - 1}"
-          fill="${typeof this.colors.bgColor == 'object' ? "url(#gradient)" : this.colors.bgColor}"
+          fill="${
+            typeof this.colors.bgColor === "object"
+              ? "url(#gradient)"
+              : this.colors.bgColor
+          }"
           stroke-opacity="${this.hideBorder ? 0 : 1}"
         />
 

src/common/utils.js

@@ -60,8 +60,22 @@ function clampValue(number, min, max) {
   return Math.max(min, Math.min(number, max));
 }
 
+function isValidGradient(colors) {
+  return isValidHexColor(colors[1]) && isValidHexColor(colors[2]);
+}
+
 function fallbackColor(color, fallbackColor) {
-  return (isValidHexColor(color) && `#${color}`) || (color.includes(',') && isValidHexColor(color.split(',')[1]) && isValidHexColor(color.split(',')[2]) && color.split(',')) || fallbackColor;
+  let colors = color.split(",");
+  let gradient = null;
+
+  if (colors.length > 1 && isValidGradient(colors)) {
+    gradient = colors;
+  }
+
+  return (
+    (gradient ? gradient : isValidHexColor(color) && `#${color}`) ||
+    fallbackColor
+  );
 }
 
 function request(data, headers) {

tests/card.test.js

@@ -138,9 +138,10 @@ describe("Card", () => {
       title_color: "f00",
       icon_color: "0f0",
       text_color: "00f",
-      bg_color: "90,fff,000",
+      bg_color: "90,fff,000,f00",
       theme: "default",
     });
+
     const card = new Card({
       height: 200,
       colors: {
@@ -155,17 +156,18 @@ describe("Card", () => {
       "fill",
       "url(#gradient)"
     );
-    expect(document.querySelector('defs linearGradient')).toHaveAttribute(
+    expect(document.querySelector("defs linearGradient")).toHaveAttribute(
       "gradientTransform",
       "rotate(90)"
     );
-    expect(document.querySelector('defs linearGradient stop:nth-child(1)')).toHaveAttribute(
-      "stop-color",
-      "#fff"
-    );
-    expect(document.querySelector('defs linearGradient stop:nth-child(2)')).toHaveAttribute(
-      "stop-color",
-      "#000"
-    );
+    expect(
+      document.querySelector("defs linearGradient stop:nth-child(1)")
+    ).toHaveAttribute("stop-color", "#fff");
+    expect(
+      document.querySelector("defs linearGradient stop:nth-child(2)")
+    ).toHaveAttribute("stop-color", "#000");
+    expect(
+      document.querySelector("defs linearGradient stop:nth-child(3)")
+    ).toHaveAttribute("stop-color", "#f00");
   });
 });