feat: allow users to pass ring_color param

Before this commit, the ring color was always equal to the title color.
This commit allows the user to pass a ring_color property to allow him
to style the ring color the way he pleases to. If no ring_color is
passed we default to the title color.

api/index.js

@@ -26,6 +26,7 @@ export default async (req, res) => {
     include_all_commits,
     line_height,
     title_color,
+    ring_color,
     icon_color,
     text_color,
     text_bold,
@@ -76,6 +77,7 @@ export default async (req, res) => {
         include_all_commits: parseBoolean(include_all_commits),
         line_height,
         title_color,
+        ring_color,
         icon_color,
         text_color,
         text_bold: parseBoolean(text_bold),

readme.md

@@ -26,7 +26,7 @@
     </a>
   </p>
 
-  <p align="center">
+<p align="center">
     <a href="#demo">View Demo</a>
     ·
     <a href="https://github.com/anuraghazra/github-readme-stats/issues/new/choose">Report Bug</a>
@@ -61,7 +61,6 @@
 </p>
 <p align="center">Love the project? Please consider <a href="https://www.paypal.me/anuraghazra">donating</a> to help it improve!
 
-
 <p>
 <a href="https://indiafightscorona.giveindia.org">
 <img src="https://d2wvdrxmr8p0wf.cloudfront.net/static/giveindia.svg" alt="Give india logo" width="200" />
@@ -74,8 +73,8 @@ Thousands of people are dying in India because of a lack of Oxygen & also COVID-
 
 Visit [https://indiafightscorona.giveindia.org](https://indiafightscorona.giveindia.org) and make a small donation to help us fight COVID and overcome this crisis.
 A small donation goes a long way. :heart:
-</p>
 
+</p>
 
 # Features
 
@@ -197,6 +196,7 @@ You can provide multiple comma-separated values in the bg_color option to render
 - `custom_title` - Sets a custom title for the card
 - `text_bold` - Use bold text _(boolean)_
 - `disable_animations` - Disables all animations in the card _(boolean)_
+- `ring_color` - Color of the rank circle *(hex color)*
 
 #### Repo Card Exclusive Options:
 
@@ -414,22 +414,22 @@ NOTE: Since [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) we
  <summary><b> Guide on setting up Vercel  🔨 </b></summary>
 
 1. Go to [vercel.com](https://vercel.com/)
-1. Click on `Log in`
+2. Click on `Log in`
    ![](https://files.catbox.moe/tct1wg.png)
-1. Sign in with GitHub by pressing `Continue with GitHub`
+3. Sign in with GitHub by pressing `Continue with GitHub`
    ![](https://files.catbox.moe/btd78j.jpeg)
-1. Sign in to GitHub and allow access to all repositories, if prompted
-1. Fork this repo
-1. After forking the repo, open the [`vercel.json`](https://github.com/anuraghazra/github-readme-stats/blob/master/vercel.json#L5) file and change the `maxDuration` field to `10`
-1. Go back to your [Vercel dashboard](https://vercel.com/dashboard)
-1. Select `Import Project`
+4. Sign in to GitHub and allow access to all repositories, if prompted
+5. Fork this repo
+6. After forking the repo, open the [`vercel.json`](https://github.com/anuraghazra/github-readme-stats/blob/master/vercel.json#L5) file and change the `maxDuration` field to `10`
+7. Go back to your [Vercel dashboard](https://vercel.com/dashboard)
+8. Select `Import Project`
    ![](https://files.catbox.moe/qckos0.png)
-1. Select `Import Git Repository`. Select root and keep everything as is.
+9. Select `Import Git Repository`. Select root and keep everything as is.
    ![](https://files.catbox.moe/pqub9q.png)
-1. Create a personal access token (PAT) [here](https://github.com/settings/tokens/new) and enable the `repo` permissions (this allows access to see private repo stats)
-1. Add the PAT as an environment variable named `PAT_1` (as shown).
-   ![](https://files.catbox.moe/0ez4g7.png)
-1. Click deploy, and you're good to go. See your domains to use the API!
+10. Create a personal access token (PAT) [here](https://github.com/settings/tokens/new) and enable the `repo` permissions (this allows access to see private repo stats)
+11. Add the PAT as an environment variable named `PAT_1` (as shown).
+    ![](https://files.catbox.moe/0ez4g7.png)
+12. Click deploy, and you're good to go. See your domains to use the API!
 
 </details>
 
@@ -450,8 +450,6 @@ Thanks! :heart:
 
 [![https://vercel.com?utm_source=github_readme_stats_team&utm_campaign=oss](./powered-by-vercel.svg)](https://vercel.com?utm_source=github_readme_stats_team&utm_campaign=oss)
 
-
 Contributions are welcome! <3
 
 Made with :heart: and JavaScript.
-

src/cards/stats-card.js

@@ -74,6 +74,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     include_all_commits = false,
     line_height = 25,
     title_color,
+    ring_color,
     icon_color,
     text_color,
     text_bold = true,
@@ -89,9 +90,10 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const lheight = parseInt(String(line_height), 10);
 
   // returns theme based colors with proper overrides and defaults
-  const { titleColor, textColor, iconColor, bgColor, borderColor } =
+  const { titleColor, ringColor, textColor, iconColor, bgColor, borderColor } =
     getCardColors({
       title_color,
+      ring_color,
       icon_color,
       text_color,
       bg_color,
@@ -185,6 +187,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const progress = 100 - rank.score;
   const cssStyles = getStyles({
     titleColor,
+    ringColor,
     textColor,
     iconColor,
     show_icons,

src/cards/wakatime-card.js

@@ -215,6 +215,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   const cssStyles = getStyles({
     titleColor,
     textColor,
+    ringColor: titleColor,
     iconColor,
   });
 

src/common/utils.js

@@ -175,6 +175,7 @@ function flexLayout({ items, gap, direction, sizes = [] }) {
  */
 function getCardColors({
   title_color,
+  ring_color,
   text_color,
   icon_color,
   bg_color,
@@ -193,6 +194,13 @@ function getCardColors({
     title_color || selectedTheme.title_color,
     "#" + defaultTheme.title_color,
   );
+
+  // get the color provided by the user else the theme color
+  // finally if both colors are invalid we use the titleColor
+  const ringColor = fallbackColor(
+    ring_color || selectedTheme.ring_color,
+    titleColor
+  );
   const iconColor = fallbackColor(
     icon_color || selectedTheme.icon_color,
     "#" + defaultTheme.icon_color,
@@ -211,7 +219,7 @@ function getCardColors({
     "#" + defaultBorderColor,
   );
 
-  return { titleColor, iconColor, textColor, bgColor, borderColor };
+  return { titleColor, ringColor, iconColor, textColor, bgColor, borderColor };
 }
 
 /**

src/getStyles.js

@@ -63,6 +63,7 @@ const getAnimations = () => {
  */
 const getStyles = ({
   titleColor,
+  ringColor,
   textColor,
   iconColor,
   show_icons,
@@ -93,13 +94,13 @@ const getStyles = ({
     }
 
     .rank-circle-rim {
-      stroke: ${titleColor};
+      stroke: ${ringColor};
       fill: none;
       stroke-width: 6;
       opacity: 0.2;
     }
     .rank-circle {
-      stroke: ${titleColor};
+      stroke: ${ringColor};
       stroke-dasharray: 250;
       fill: none;
       stroke-width: 6;

tests/api.test.js

@@ -222,4 +222,39 @@ describe("Test /api/", () => {
       ),
     );
   });
+
+  it("should allow changing ring_color", async () => {
+    const { req, res } = faker(
+      {
+        username: "anuraghazra",
+        hide: "issues,prs,contribs",
+        show_icons: true,
+        hide_border: true,
+        line_height: 100,
+        title_color: "fff",
+        ring_color: "0000ff",
+        icon_color: "fff",
+        text_color: "fff",
+        bg_color: "fff",
+      },
+      data,
+    );
+
+    await api(req, res);
+
+    expect(res.setHeader).toBeCalledWith("Content-Type", "image/svg+xml");
+    expect(res.send).toBeCalledWith(
+      renderStatsCard(stats, {
+        hide: ["issues", "prs", "contribs"],
+        show_icons: true,
+        hide_border: true,
+        line_height: 100,
+        title_color: "fff",
+        ring_color: "0000ff",
+        icon_color: "fff",
+        text_color: "fff",
+        bg_color: "fff",
+      }),
+    );
+  });
 });

tests/renderStatsCard.test.js

@@ -239,6 +239,37 @@ describe("Test renderStatsCard", () => {
     );
   });
 
+  it("should render custom ring_color properly", () => {
+    const customColors = {
+      title_color: "5a0",
+      ring_color: "0000ff",
+      icon_color: "1b998b",
+      text_color: "9991",
+      bg_color: "252525",
+    };
+
+    document.body.innerHTML = renderStatsCard(stats, { ...customColors });
+
+    const styleTag = document.querySelector("style");
+    const stylesObject = cssToObject(styleTag.innerHTML);
+
+    const headerClassStyles = stylesObject[":host"][".header "];
+    const statClassStyles = stylesObject[":host"][".stat "];
+    const iconClassStyles = stylesObject[":host"][".icon "];
+    const rankCircleStyles = stylesObject[":host"][".rank-circle "];
+    const rankCircleRimStyles = stylesObject[":host"][".rank-circle-rim "];
+
+    expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
+    expect(statClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
+    expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
+    expect(rankCircleStyles.stroke.trim()).toBe(`#${customColors.ring_color}`);
+    expect(rankCircleRimStyles.stroke.trim()).toBe(`#${customColors.ring_color}`);
+    expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
+      "fill",
+      "#252525",
+    );
+  });
+
   it("should render icons correctly", () => {
     document.body.innerHTML = renderStatsCard(stats, {
       show_icons: true,

tests/utils.test.js

@@ -48,6 +48,7 @@ describe("Test utils.js", () => {
     let colors = getCardColors({
       title_color: "f00",
       text_color: "0f0",
+      ring_color: "0000ff",
       icon_color: "00f",
       bg_color: "fff",
       border_color: "fff",
@@ -57,6 +58,7 @@ describe("Test utils.js", () => {
       titleColor: "#f00",
       textColor: "#0f0",
       iconColor: "#00f",
+      ringColor: "#0000ff",
       bgColor: "#fff",
       borderColor: "#fff",
     });
@@ -75,6 +77,7 @@ describe("Test utils.js", () => {
       titleColor: "#2f80ed",
       textColor: "#0f0",
       iconColor: "#00f",
+      ringColor: "#2f80ed",
       bgColor: "#fff",
       borderColor: "#e4e2e2",
     });
@@ -87,11 +90,31 @@ describe("Test utils.js", () => {
     expect(colors).toStrictEqual({
       titleColor: "#fff",
       textColor: "#9f9f9f",
+      ringColor: "#fff",
       iconColor: "#79ff97",
       bgColor: "#151515",
       borderColor: "#e4e2e2",
     });
   });
+
+  it("getCardColors: should return ring color equal to title color if not ring color is defined", () => {
+    let colors = getCardColors({
+      title_color: "f00",
+      text_color: "0f0",
+      icon_color: "00f",
+      bg_color: "fff",
+      border_color: "fff",
+      theme: "dark",
+    });
+    expect(colors).toStrictEqual({
+      titleColor: "#f00",
+      textColor: "#0f0",
+      iconColor: "#00f",
+      ringColor: "#f00",
+      bgColor: "#fff",
+      borderColor: "#fff",
+    });
+  });
 });
 
 describe("wrapTextMultiline", () => {