refactor: refactored createProgressNode logic (#486)

src/cards/top-languages-card.js

@@ -1,26 +1,23 @@
-const { getCardColors, FlexLayout, clampValue } = require("../common/utils");
 const Card = require("../common/Card");
+const { getCardColors, FlexLayout } = require("../common/utils");
+const { createProgressNode } = require("../common/createProgressNode");
 
-const createProgressNode = ({ width, color, name, progress }) => {
+const createProgressTextNode = ({ width, color, name, progress }) => {
   const paddingRight = 95;
   const progressTextX = width - paddingRight + 10;
   const progressWidth = width - paddingRight;
-  const progressPercentage = clampValue(progress, 2, 100);
 
   return `
     <text data-testid="lang-name" x="2" y="15" class="lang-name">${name}</text>
     <text x="${progressTextX}" y="34" class="lang-name">${progress}%</text>
-    <svg width="${progressWidth}">
-      <rect rx="5" ry="5" x="0" y="25" width="${progressWidth}" height="8" fill="#ddd"></rect>
-      <rect
-        height="8"
-        fill="${color}"
-        rx="5" ry="5" x="0" y="25"
-        data-testid="lang-progress"
-        width="${progressPercentage}%"
-      >
-      </rect>
-    </svg>
+    ${createProgressNode({
+      x: 0,
+      y: 25,
+      color,
+      width: progressWidth,
+      progress,
+      progressBarBackgroundColor: "#ddd",
+    })}
   `;
 };
 
@@ -160,7 +157,7 @@ const renderTopLanguages = (topLangs, options = {}) => {
   } else {
     finalLayout = FlexLayout({
       items: langs.map((lang) => {
-        return createProgressNode({
+        return createProgressTextNode({
           width: width,
           name: lang.name,
           color: lang.color || "#858585",

src/cards/wakatime-card.js

@@ -1,7 +1,7 @@
-const { getCardColors, FlexLayout, clampValue } = require("../common/utils");
-const { getStyles } = require("../getStyles");
-const icons = require("../common/icons");
 const Card = require("../common/Card");
+const { getStyles } = require("../getStyles");
+const { getCardColors, FlexLayout } = require("../common/utils");
+const { createProgressNode } = require("../common/createProgressNode");
 
 const noCodingActivityNode = ({ color }) => {
   return `
@@ -9,29 +9,6 @@ const noCodingActivityNode = ({ color }) => {
   `;
 };
 
-const createProgressNode = ({
-  width,
-  color,
-  progress,
-  progressBarBackgroundColor,
-}) => {
-  const progressPercentage = clampValue(progress, 2, 100);
-
-  return `
-    <svg width="${width}" overflow="auto">
-      <rect rx="5" ry="5" x="110" y="4" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
-      <rect
-        height="8"
-        fill="${color}"
-        rx="5" ry="5" x="110" y="4"
-        data-testid="lang-progress"
-        width="${progressPercentage}%"
-      >
-      </rect>
-    </svg>
-  `;
-};
-
 const createTextNode = ({
   id,
   label,
@@ -47,6 +24,8 @@ const createTextNode = ({
   const cardProgress = hideProgress
     ? null
     : createProgressNode({
+        x: 110,
+        y: 4,
         progress: percent,
         color: progressBarColor,
         width: 220,
@@ -154,3 +133,4 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
 };
 
 module.exports = renderWakatimeCard;
+exports.createProgressNode = createProgressNode;

src/common/createProgressNode.js

@@ -0,0 +1,28 @@
+const { clampValue } = require("../common/utils");
+
+const createProgressNode = ({
+  x,
+  y,
+  width,
+  color,
+  progress,
+  progressBarBackgroundColor,
+}) => {
+  const progressPercentage = clampValue(progress, 2, 100);
+
+  return `
+    <svg width="${width}" x="${x}" y="${y}">
+      <rect rx="5" ry="5" x="0" y="0" width="${width}" height="8" fill="${progressBarBackgroundColor}"></rect>
+      <rect
+          height="8"
+          fill="${color}"
+          rx="5" ry="5" x="0" y="0" 
+          data-testid="lang-progress"
+          width="${progressPercentage}%"
+      >
+      </rect>
+    </svg>
+  `;
+};
+
+exports.createProgressNode = createProgressNode;