feat: allow users to pass ring_color param (#2075)

* fix: prevent crash if undefined color is passed to func fallbackColor

* 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.

* docs: improves ring color documentation

* fix: improve code style

Co-authored-by: rickstaa <rick.staa@outlook.com>

src/cards/stats-card.js

@@ -89,6 +89,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     include_all_commits = false,
     line_height = 25,
     title_color,
+    ring_color,
     icon_color,
     text_color,
     text_bold = true,
@@ -104,13 +105,14 @@ 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, iconColor, textColor, bgColor, borderColor, ringColor } =
     getCardColors({
       title_color,
-      icon_color,
       text_color,
+      icon_color,
       bg_color,
       border_color,
+      ring_color,
       theme,
     });
 
@@ -201,6 +203,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const progress = 100 - rank.score;
   const cssStyles = getStyles({
     titleColor,
+    ringColor,
     textColor,
     iconColor,
     show_icons,

src/common/utils.js

@@ -133,9 +133,9 @@ function isValidGradient(colors) {
  * @returns {string | string[]} The gradient or color.
  */
 function fallbackColor(color, fallbackColor) {
-  let colors = color.split(",");
   let gradient = null;
 
+  let colors = color ? color.split(",") : [];
   if (colors.length > 1 && isValidGradient(colors)) {
     gradient = colors;
   }
@@ -207,6 +207,7 @@ function getCardColors({
   icon_color,
   bg_color,
   border_color,
+  ring_color,
   theme,
   fallbackTheme = "default",
 }) {
@@ -221,6 +222,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,
@@ -239,7 +247,7 @@ function getCardColors({
     "#" + defaultBorderColor,
   );
 
-  return { titleColor, iconColor, textColor, bgColor, borderColor };
+  return { titleColor, iconColor, textColor, bgColor, borderColor, ringColor };
 }
 
 /**

src/getStyles.js

@@ -77,6 +77,7 @@ const getStyles = ({
   titleColor,
   textColor,
   iconColor,
+  ringColor,
   show_icons,
   progress,
 }) => {
@@ -105,13 +106,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;