From 32976d8bd6e4654bf625e5c2083979403ce15fb0 Mon Sep 17 00:00:00 2001
From: Haraldo Filho <haraldo.filho@gmail.com>
Date: Sun, 7 Mar 2021 13:46:02 -0300
Subject: [PATCH] fix: wakatime compact card bargraph rendering (#885)

* fix: wakatime compact card bargraph rendering at the right side

* Updated snapshots
---
 .gitignore                                    |  2 +
 src/cards/wakatime-card.js                    | 18 ++++-----
 .../renderWakatimeCard.test.js.snap           | 38 +++++++++----------
 3 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/.gitignore b/.gitignore
index 0ecfbc22..1c96025a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,5 @@ package-lock.json
 .vscode/
 .idea/
 coverage
+vercel_token
+
diff --git a/src/cards/wakatime-card.js b/src/cards/wakatime-card.js
index 5d8789e1..4adf799f 100644
--- a/src/cards/wakatime-card.js
+++ b/src/cards/wakatime-card.js
@@ -73,10 +73,10 @@ const createTextNode = ({
   return `
     <g class="stagger" style="animation-delay: ${staggerDelay}ms" transform="translate(25, 0)">
       <text class="stat bold" y="12.5">${label}:</text>
-      <text 
-        class="stat" 
-        x="${hideProgress ? 170 : 350}" 
-        y="12.5" 
+      <text
+        class="stat"
+        x="${hideProgress ? 170 : 350}"
+        y="12.5"
         data-testid="${id}"
       >${value}</text>
       ${cardProgress}
@@ -158,17 +158,17 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
     const compactProgressBar = languages
       .map((lang) => {
         // const progress = (width * lang.percent) / 100;
-        const progress = ((width - 50) * lang.percent) / 100;
+        const progress = ((width - 25) * lang.percent) / 100;
 
         const languageColor = languageColors[lang.name] || "#858585";
 
         const output = `
           <rect
-            mask="url(#rect-mask)" 
+            mask="url(#rect-mask)"
             data-testid="lang-progress"
-            x="${progressOffset}" 
+            x="${progressOffset}"
             y="0"
-            width="${progress}" 
+            width="${progress}"
             height="8"
             fill="${languageColor}"
           />
@@ -230,7 +230,7 @@ const renderWakatimeCard = (stats = {}, options = { hide: [] }) => {
   return card.render(`
     <svg x="0" y="0" width="100%">
       ${finalLayout}
-    </svg> 
+    </svg>
   `);
 };
 
diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap
index 93542ad4..472a9bcd 100644
--- a/tests/__snapshots__/renderWakatimeCard.test.js.snap
+++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap
@@ -100,10 +100,10 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
       <g transform=\\"translate(0, 0)\\">
     <g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
       <text class=\\"stat bold\\" y=\\"12.5\\">Other:</text>
-      <text 
-        class=\\"stat\\" 
-        x=\\"350\\" 
-        y=\\"12.5\\" 
+      <text
+        class=\\"stat\\"
+        x=\\"350\\"
+        y=\\"12.5\\"
         data-testid=\\"Other\\"
       >19 mins</text>
       
@@ -123,10 +123,10 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
   </g><g transform=\\"translate(0, 25)\\">
     <g class=\\"stagger\\" style=\\"animation-delay: NaNms\\" transform=\\"translate(25, 0)\\">
       <text class=\\"stat bold\\" y=\\"12.5\\">TypeScript:</text>
-      <text 
-        class=\\"stat\\" 
-        x=\\"350\\" 
-        y=\\"12.5\\" 
+      <text
+        class=\\"stat\\"
+        x=\\"350\\"
+        y=\\"12.5\\"
         data-testid=\\"TypeScript\\"
       >1 min</text>
       
@@ -144,7 +144,7 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
   
     </g>
   </g>
-    </svg> 
+    </svg>
   
         </g>
       </svg>
@@ -254,31 +254,31 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
       </mask>
       
           <rect
-            mask=\\"url(#rect-mask)\\" 
+            mask=\\"url(#rect-mask)\\"
             data-testid=\\"lang-progress\\"
-            x=\\"0\\" 
+            x=\\"0\\"
             y=\\"0\\"
-            width=\\"6.291999999999999\\" 
+            width=\\"6.6495\\"
             height=\\"8\\"
             fill=\\"#858585\\"
           />
         
           <rect
-            mask=\\"url(#rect-mask)\\" 
+            mask=\\"url(#rect-mask)\\"
             data-testid=\\"lang-progress\\"
-            x=\\"6.291999999999999\\" 
+            x=\\"6.6495\\"
             y=\\"0\\"
-            width=\\"0.44\\" 
+            width=\\"0.465\\"
             height=\\"8\\"
             fill=\\"#2b7489\\"
           />
         
           <rect
-            mask=\\"url(#rect-mask)\\" 
+            mask=\\"url(#rect-mask)\\"
             data-testid=\\"lang-progress\\"
-            x=\\"6.731999999999999\\" 
+            x=\\"7.1145\\"
             y=\\"0\\"
-            width=\\"0.30800000000000005\\" 
+            width=\\"0.32550000000000007\\"
             height=\\"8\\"
             fill=\\"#cb171e\\"
           />
@@ -306,7 +306,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
     </g>
   
     
-    </svg> 
+    </svg>
   
         </g>
       </svg>